Đăng nhập

Ghi nhớ
Latest topics
» Trỏ tên miền p.a vietnam
by tommy_phan Today at 9:43 pm

» Xin forum rao vặt vBulletin 4.1.11
by arber 1/8/2017, 4:17 am

» Tôi sẽ đỗ đại học!
by handsomevip007 16/7/2017, 4:27 pm

» Xin hỗ trợ về DNS Domain cho Forumvi
by hoangthong 9/5/2017, 9:37 pm

» skin xinh forum full punbb
by kenbi05 8/5/2017, 10:47 am

» HỖ TRỢ GIÚP MÌNH VỀ VIỆC MẤT CHỨC NĂNG KIỂM TRA THÀNH VIÊN XEM BÀI TRONG GROUP FB
by hoangthong 4/5/2017, 9:14 am

» Xin chỉ giúp cách fix hình nền header cho forumvi
by Phuongtran 25/4/2017, 4:43 pm

» [Mod] Shop Gunny (New Version)
by accit 14/4/2017, 10:30 am

» Giới thiệu 3 mẫu smartphone nổi bật cho bạn quan tâm
by huydv 21/3/2017, 11:14 pm

» [Thông báo] Đổi tên miền diễn đàn[✔]
by vietkanpy 9/3/2017, 8:28 am

» Skin]Teen Pro9x [ PunBB ]
by phamtuananh9x 15/2/2017, 12:57 pm

» [Help] Nhờ mọi người " RIP " giúp mình[✔]
by sayedn73 7/2/2017, 10:31 pm

» CHÚC MỪNG NĂM MỚI
by Exterminator 7/2/2017, 12:16 pm

» Cần giúp đỡ về Ads Banner trong forum
by sayedn73 7/2/2017, 12:42 am

» Xin index box forumvi [✔]
by sayedn73 5/2/2017, 6:50 am

» LỖI ADD TRANG CHỦ
by tommy_phan 17/1/2017, 11:04 am

» Bác nào rảnh tham gia cho vui nhé
by phamthohoa 27/12/2016, 10:06 am

» Cần xin skin ngamvn.com
by sayedn73 14/12/2016, 2:24 am

» Cách đổi nền Forum
by sayedn73 27/10/2016, 1:28 am

» Skin CNTT-K3 2015 (Full Mod)[✔]
by sayedn73 27/10/2016, 1:14 am

» Share skin Gameprivatevn.ace.st
by help me 23/10/2016, 4:32 pm

» Share Skin Xanh Dương Cùi Bắp
by Thànhkent 21/10/2016, 1:37 pm

» [Thắc mắc] RIP Giúp Em Topics_Blog_Box
by sayedn73 21/10/2016, 8:03 am

» Làm sao để làm Shop Pet
by aquariuss 20/10/2016, 2:21 pm

» các thím trên chinhphuc thử tìm từ khóa này xem
by bucnong1 17/10/2016, 1:35 pm

Top posting users this week
tommy_phan
 


[Help] Thay background cho class[✔]

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

[Help] Thay background cho class[✔]

Bài gửi by BTV2 on 21/1/2015, 10:25 pm

Như tiêu đề mình có 1 khung có class là body_2 với background là #000 và 3 nút chọn có 3 id lần lượt là color_1, color_2, color_3 và cả 3 đều có background khác nhau.
Mình muốn 1 js thay đổi background của class body_2 khi click vào 1 trong 3 nút, sẽ thay thành màu tương ứng.
Và 1 js lưu cookie khi đã chọn màu.
Demo cần làm: http://forum-test123.forumvi.com/h3-page

avatar
BTV2
CPPurpleMember
CPPurpleMember

Chrome PunBB
Ngày đăng ký : 08/09/2012
Số bài : 1182
CPP : 751
Châm ngôn sống : [hide][/hide]

Xem lý lịch thành viên

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by anhdausai on 22/1/2015, 11:28 am

http://devs.forumvi.com/t1028-hoi-ap-xin-code-thay-oi-background-nhu-cua-devs tham khảo topic này mình thấy nó tương tự
avatar
anhdausai
CPMember
CPMember

Chrome PunBB
Ngày đăng ký : 24/08/2011
Số bài : 230
CPP : 284
Châm ngôn sống : Không có code vô dụng chỉ có người ngu không biết sử dụng code

Xem lý lịch thành viên http://www.vngame.pro/

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by subin217 on 22/1/2015, 12:33 pm

Nhưng bài viết đó tớ đã hỏi và anh baivong trả lời là "Code này mình viết riêng theo skin nên bạn sẽ không dùng được (nếu không có skin này)." Vậy thì theo tớ thì tớ thấy dùng CSS là hợp lý nhất. Ở W3 School có loại CSS như thế nhưng mạng lag quá tớ kiếm không được bạn vào
Code:
http://www.w3schools.com/css/
kiếm cái CSS Color hay Background v..v... nhé
avatar
subin217
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 07/02/2014
Số bài : 414
CPP : 169
Châm ngôn sống : Kéo quân qua đánh JavaScript và JQuery

Xem lý lịch thành viên http://vn.doraeiga.cf/

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by anhdausai on 22/1/2015, 12:46 pm

Làm nút chọn màu theo class dùng css thì làm làm sao được?
Ý anh Bại Vong là mid chọn màu devs đang dùng anh ấy thiết kế riêng cho skin devs nên nó ko có tác dụng với skin khác và anh ấy có hướng dẫn cách sử js đổi màu áp dụng vs 1 class riêng biệt bạn chịu khó đọc kỹ hướng dẫn và vọc
http://devs.forumvi.com/t1028-hoi-ap-xin-code-thay-oi-background-nhu-cua-devs#6694
avatar
anhdausai
CPMember
CPMember

Chrome PunBB
Ngày đăng ký : 24/08/2011
Số bài : 230
CPP : 284
Châm ngôn sống : Không có code vô dụng chỉ có người ngu không biết sử dụng code

Xem lý lịch thành viên http://www.vngame.pro/

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by markai30 on 22/1/2015, 5:51 pm

Lưu ý rằng code này chỉ hoạt động bằng thư viện jquery và có sẵn hàm cookie. Nếu bạn dùng riêng một trang html bạn phải thêm vào thư viện jquery và hàm cookie này.

Code:

function my_getcookie(name) {
   cname = name + '=';
   cpos = document.cookie.indexOf(cname);
   if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
         cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
   }
   return null
}
function my_setcookie(name, value, sticky, path) {
   expires = "";
   domain = "";
   if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
   }
   if (!path) {
      path = "/"
   }
   document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'
}

Code này mình viết bằng class cho dễ làm. Cái trang html bạn đưa sửa lại đôi chút như sau:

html:
Code:

<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>

Thêm css này vào

Code:

body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}

Và cuối cùng là dùng js này:

Code:

// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});
avatar
markai30
CPMember
CPMember

Chrome PhpBB3
Ngày đăng ký : 18/02/2014
Số bài : 100
CPP : 150
Châm ngôn sống : Tự học tự làm

Xem lý lịch thành viên http://Viethoagame.forumvi.com

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by BTV2 on 22/1/2015, 6:28 pm

#markai30
Ko dùng dc, cậu xem coi mình làm sai cái gì?
Demo: http://forum-test123.forumvi.com/h3-page
HTML:
Code:
<script>
function my_getcookie(name) {
  cname = name + '=';
  cpos = document.cookie.indexOf(cname);
  if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
        cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
  }
  return null
}
function my_setcookie(name, value, sticky, path) {
  expires = "";
  domain = "";
  if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
  }
  if (!path) {
      path = "/"
  }
  document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'

  </script>
<style>
  .changecolor {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_2 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_3 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
 .body_2 {
height: 250px;
width: 970px;
margin: auto;
}
 
body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}
</style>

<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>
<div class="body_2">
</div>


<script>
// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});
  </script>
avatar
BTV2
CPPurpleMember
CPPurpleMember

Chrome PunBB
Ngày đăng ký : 08/09/2012
Số bài : 1182
CPP : 751
Châm ngôn sống : [hide][/hide]

Xem lý lịch thành viên

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by subin217 on 22/1/2015, 6:33 pm

Bác có bật Java Script chưa
avatar
subin217
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 07/02/2014
Số bài : 414
CPP : 169
Châm ngôn sống : Kéo quân qua đánh JavaScript và JQuery

Xem lý lịch thành viên http://vn.doraeiga.cf/

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by markai30 on 22/1/2015, 7:05 pm

@BTV2 đã viết:#markai30
Ko dùng dc, cậu xem coi mình làm sai cái gì?
Demo: http://forum-test123.forumvi.com/h3-page
HTML:
Code:
<script>
function my_getcookie(name) {
   cname = name + '=';
   cpos = document.cookie.indexOf(cname);
   if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
         cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
   }
   return null
}
function my_setcookie(name, value, sticky, path) {
   expires = "";
   domain = "";
   if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
   }
   if (!path) {
      path = "/"
   }
   document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'
}  
  </script>
<style>
  .changecolor {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_2 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_3 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
 .body_2 {
height: 250px;
width: 970px;
margin: auto;
}
  
body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}
</style>

<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>
<div class="body_2">
</div>


<script>
// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});
  </script>

Mình quên dấu # bạn sửa css lại


Code:
body.c0392b .body_2 {
background-color: #c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: #8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: #16a085
}

Mà tốt nhất bạn nên sửa mã màu lại là thích hợp nhất. ví dụ màu đen #000 bạn sửa lại là black.

Sửa mã màu cái js luôn. Nên chọn mã màu là chữ để khỏi bị lỗi nhé.

Dùng devs tool test mã màu nhé.
avatar
markai30
CPMember
CPMember

Chrome PhpBB3
Ngày đăng ký : 18/02/2014
Số bài : 100
CPP : 150
Châm ngôn sống : Tự học tự làm

Xem lý lịch thành viên http://Viethoagame.forumvi.com

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by BTV2 on 22/1/2015, 7:52 pm

Thank mạnh Vui
avatar
BTV2
CPPurpleMember
CPPurpleMember

Chrome PunBB
Ngày đăng ký : 08/09/2012
Số bài : 1182
CPP : 751
Châm ngôn sống : [hide][/hide]

Xem lý lịch thành viên

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by BTV2 on 22/1/2015, 10:06 pm

@markai30
Tình hình là dùng dc trong HTML nhưng đem vào overall_header thì ko dùng dc, cậu xem giúp mình phát
Demo: http://forum-test123.forumvi.com/
Pass không đổi
avatar
BTV2
CPPurpleMember
CPPurpleMember

Chrome PunBB
Ngày đăng ký : 08/09/2012
Số bài : 1182
CPP : 751
Châm ngôn sống : [hide][/hide]

Xem lý lịch thành viên

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by markai30 on 22/1/2015, 10:46 pm

@BTV2 đã viết:@markai30
Tình hình là dùng dc trong HTML nhưng đem vào overall_header thì ko dùng dc, cậu xem giúp mình phát
Demo: http://forum-test123.forumvi.com/
Pass không đổi

Vào đọc tin nhắn nhé.
Cái này tại thằng fm ko phải tại mình. Đã hướng dẫn lại trong phần tin nhắn.
avatar
markai30
CPMember
CPMember

Chrome PhpBB3
Ngày đăng ký : 18/02/2014
Số bài : 100
CPP : 150
Châm ngôn sống : Tự học tự làm

Xem lý lịch thành viên http://Viethoagame.forumvi.com

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by BTV2 on 22/1/2015, 11:17 pm

Thank phát nữa Good good
avatar
BTV2
CPPurpleMember
CPPurpleMember

Chrome PunBB
Ngày đăng ký : 08/09/2012
Số bài : 1182
CPP : 751
Châm ngôn sống : [hide][/hide]

Xem lý lịch thành viên

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by subin217 on 23/1/2015, 9:23 pm

Không liên quan nhưng bác @markai30 chỉ cháu với
avatar
subin217
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 07/02/2014
Số bài : 414
CPP : 169
Châm ngôn sống : Kéo quân qua đánh JavaScript và JQuery

Xem lý lịch thành viên http://vn.doraeiga.cf/

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by markai30 on 23/1/2015, 10:12 pm

@subin217 đã viết:Không liên quan nhưng bác @markai30 chỉ cháu với

làm theo demo sẵn có của BTV là được rồi.
http://forum-test123.forumvi.com/
avatar
markai30
CPMember
CPMember

Chrome PhpBB3
Ngày đăng ký : 18/02/2014
Số bài : 100
CPP : 150
Châm ngôn sống : Tự học tự làm

Xem lý lịch thành viên http://Viethoagame.forumvi.com

Về Đầu Trang Go down

Re: [Help] Thay background cho class[✔]

Bài gửi by Sponsored content


Sponsored content


Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết