javascript - CSS body class jquery switcher with cookies -
i using background switcher far compiled few examples , tutorials have found around, consists of stylesheet , few child classes each contain different background image; when switcher image clicked, javascript sequentially toggles next body class in order , writes new value cookie. works okay except cookie loading upon page load. if refresh page, cookie not recall, , body class not default last selected class. here code
here jsfiddle of it: http://jsfiddle.net/lse3v/2/
index.php
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="background switcha" /> <meta name="keywords" content="" /> <title>background switcha</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="head.js"></script> <script type="text/javascript">head.js( "jquery.js","back.js", function() { });</script> </head> <body class="orig"> <a href="javascript:void(0);" id="backgroundswap"></a> </body> </html> style.css
body.green{background: #3f0 url(background1.jpg) center top fixed repeat} body.blue{background: #00f url(background2.jpg) center -80px fixed repeat} body.red{background: #f00 url(background3.jpg) center top fixed repeat} body.grey,html{background: #666 url(background4.jpg) repeat} body{min-height:800px} #backgroundswap{display:block;display:inline-block;zoom:1;width:101px;height:22px;background-image:url(backgroundswap.png);background-repeat:no-repeat;margin-bottom:12px;} body.green #backgroundswap{background-position:center bottom} body.blue #backgroundswap{background-position:0 -66px} body.red #backgroundswap{background-position:0 -44px} body.grey #backgroundswap{background-position:0 -22px} body.orig{background-position:0 0} body.orig{ background: #ff0 url(background5.jpg) center top fixed repeat } back.js
jquery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name , value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toutcstring)) { var date; if (typeof options.expires == 'number') { date = new date(); date.settime(date.gettime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toutcstring(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeuricomponent(value), expires, path, domain, secure].join(''); } else { var cookievalue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); (var = 0; < cookies.length; i++) { var cookie = jquery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookievalue = decodeuricomponent(cookie.substring(name.length + 1)); break; } } } return cookievalue; } }; $(document).ready(function(){ //switch backgrounds , create cookie... $("#backgroundswap").click(function(){ var old_bg = ["green","blue","red","grey","orig"]; var new_bg = ["blue","red","grey","orig","green"]; var currentclass = $('body').attr("class"); if(!array.indexof){ array.prototype.indexof = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]===obj){ return i; } } return -1; } } $('body').removeclass().addclass(new_bg[old_bg.indexof(currentclass)]); $.cookie('backswap', old_bg.indexof($('body').attr("class")), { path: '/', expires: 365 }); }); }); head.js
(function(a){var b=a.documentelement,c=navigator.useragent.tolowercase().indexof("msie")!=-1,d=false,e=[],f={},g={},h=a.createelement("script").async===true||"mozappearance"in a.documentelement.style||window.opera;var i=window.head_conf&&head_conf.head||"head",j=window[i]=window[i]||function(){j.ready.apply(null,arguments)};var k=0,l=1,m=2,n=3;h?j.js=function(){var a=arguments,b=a[a.length-1],c=[];r(b)||(b=null),q(a,function(d,e){d!=b&&(d=p(d),c.push(d),v(d,b&&e==a.length-2?function(){s(c)&&b()}:null))});return j}:j.js=function(){var a=arguments,b=[].slice.call(a,1),c=b[0];if(!d){e.push(function(){j.js.apply(null,a)});return j}c?(q(b,function(a){r(a)||u(p(a))}),v(p(a[0]),r(c)?c:function(){j.js.apply(null,b)})):v(p(a[0]));return j},j.ready=function(a,b){r(a)&&(b=a,a="all");var c=g[a];if(c&&c.state==n||a=="all"&&s()){b();return j}var d=f[a];d?d.push(b):d=f[a]=[b];return j};function o(a){var b=a.split("/"),c=b[b.length-1],d=c.indexof("?");return d!=-1?c.substring(0,d):c}function p(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:o(a),url:a};var d=g[b.name];if(d)return d;for(var e in g)if(g[e].url==b.url)return g[e];g[b.name]=b;return b}function q(a,b){if(a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){return object.prototype.tostring.call(a)=="[object function]"}function s(a){a=a||g;for(var b in a)if(a[b].state!=n)return false;return true}function t(a){a.state=k,q(a.onpreload,function(a){a.call()})}function u(a,b){a.state||(a.state=l,a.onpreload=[],w({src:a.url,type:"cache"},function(){t(a)}))}function v(a,b){if(a.state==n&&b)return b();if(a.state==m)return j.ready(a.name,b);if(a.state==l)return a.onpreload.push(function(){v(a,b)});a.state=m,w(a.url,function(){a.state=n,b&&b(),q(f[a.name],function(a){a()}),s()&&q(f.all,function(a){a.done||a(),a.done=true})})}function w(c,d){var e=a.createelement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=false,e.onreadystatechange=e.onload=function(){var a=e.readystate;!d.done&&(!a||/loaded|complete/.test(a))&&(d(),d.done=true)},b.appendchild(e)}settimeout(function(){d=true,q(e,function(a){a()})},300),!a.readystate&&a.addeventlistener&&(a.readystate="loading",a.addeventlistener("domcontentloaded",handler=function(){a.removeeventlistener("domcontentloaded",handler,false),a.readystate="complete"},false))})(document)
you setting cookie great, there's nothing check whether it's set or act on if detect it. bit of code ya.
if($.cookie('backswap')) { $('body').removeclass().addclass(old_bg[$.cookie('backswap')]); }; there's other minor adjustments ensure arrays scoped everything, here's entire chunk of code that's affected.
$(document).ready(function(){ window.new_bg = ["blue","red","grey","orig","green"]; window.old_bg = ["green","blue","red","grey","orig"]; if($.cookie('backswap')) { $('body').removeclass().addclass(old_bg[$.cookie('backswap')]); }; //switch backgrounds , create cookie... $("#backgroundswap").click(function(){ currentclass = $('body').attr("class"); $('body').removeclass().addclass(new_bg[old_bg.indexof(currentclass)]); $.cookie('backswap', old_bg.indexof($('body').attr("class")), { path: '/', expires: 365 }); }); }); hope helps!
Comments
Post a Comment