javascript - How can I add AND remove a classes coupled with setting AND removing cookies with Jquery -
hallo all,
i'm quite new , i'm in way on head. i'll try keep short...
i have 2 x 3 buttons. pleace follow this link see picture of them. (i can't post pictures jet...)
in picture upper row of buttons :hover class, lower standard. 6 buttons have div , have css style (.black1 + .black1:hover) coupled them class.
(html):
<div><a id="black" href="#" class="black1">black</a></div> <div><a id="black_day" href="#" class="gr_light_off"></a></div> <div><a id="black_month" href="#" class="re_light_on"></a></div> <div><a id="white" href="#" class="red1">white</a></div> <div><a id="white_day" href="#" class="gr_light_off"></a></div> <div><a id="white_month" href="#" class="re_light_on"></a></div>
in example have added class "re_light_on" buttons "black_month" , "white_month". makes light switch on. (this class should never in html script, see.) means have set 2 classes (.._light_off & .._light_on) 'day' , 'month' buttons, both own hover-style.
the plan:
have given body-tag id "body_bg". default has class "bg_gray". when clicks button "black" "body_bg" gets class "bg_gray" removed , class "bg_black" loaded. works (html):
<a id="black" href="#" onclick="$(body_bg).removeclass('bg_gray bg_white'), $(body_bg).addclass('bg_black');">
clicking on button "white" opposite. (there's button "reset default")
question 1: how move above script html page external js-page? if can add js-page, can try add 'cookie.set' , 'cookie.del' function this, people can see part of site, body-background selected.
now other 4 buttons. have these working well, (html):
<a id="black_day" href="#" class="gr_light_off" onclick=" $(this).removeclass('gr_light_off'), $(white_day).removeclass(), $(this).addclass('gr_light_on'), $(white_day).addclass('gr_light_off');"></a>
this makes impossible both "day"-buttons have light on @ same time. script opposite "white_day"-button , same go's both "month" buttons.
question 2: same question! how working exteral js-page?
have tryed lot, believe me, don't speak javascript quite enough jet, apparently.
eventually have "black" , "white" buttons set cookie browsing-session, "day"-buttons cookie remainder of day (mostly fun) , "month"-button set cookie month. browse cookie should not remove, outrank day- , month cookie. , day cookie should outrank month cookie.
following 1 of many things i've tryed. can shoot @ ;)
$(document).ready(function() { $("#black_day").click(function() { $(this).removeclass('gr_light_off'); $(this).addclass('gr_light_on'); $(white_day).removeclass(); $(white_day).addclass('gr_light_off'); $.cookie.del("styleday"); $.cookie.set("styleday", "black", { path: '/', expiresat: 23:59 }); }); });
final question: have second plan not 2 x 3, 5 x 3 buttons directing alternate stylesheets. there easier way this???
i thank time , effort. know learn every mistake make , every answer can give me.
i'm not sure question, maybe solution help
a1.
$('.black1').live('click', function(){ $('#body_bg').removeclass('bg_gray bg_white').addclass('bg_black'); });
a2
$('.gr_light_off').live('click', function(){ // remove gr_light_on class on every button has gr_light_on class $('.gr_light_on').removeclass('gr_light_on'); // add gr_light_on button $(this).removeclass('gr_light_off').addclass('gr_light_on'); // clear set cookies $.cookie.del("styleday"); if($(this).is('#black_day')){ $.cookie.set("styleday", "black", { path: '/', expiresat: 23:59 }); } else if($(this).is('#white_day')){ // set cookie white style } }); $('.gr_light_on').live('click', function(){ // opposite gr_light_off }); // repeat re_light_off etc..
a3. see a2.
Comments
Post a Comment