jquery - Check which stylesheet is active and hide a div -

jquery - Check which stylesheet is active and hide a div -

i have theme switches between 2 main stylesheets.

there single element integral design cannot changed stylistically css, decided toggle visibility between 2 separate versions appropriate colors. (it's tag cloud loaded via javascript; 1 version matches first theme's colors , other version matches other theme's colors.) here simple code added create panel switch:

$(function(){ $('#pink').click(function(){ $('#pinkcloud').show("fold"); $('#greencloud').hide("fold"); }); $('#green').click(function(){ $('#greencloud').show("fold"); $('#pinkcloud').hide("fold"); }); });

(#green , #pink ids corresponding links click alter theme.)

the problem is, theme operates on cookies, remember theme chose. divs not, default 1 loads automatically no matter what theme browser remembers.

what add together code ensure browser checks stylesheet active , shows proper div when loads? how check, in javascript, file reading?

i'm awful @ explaining things sometimes, here's theme can see mean (x). see problem, click greenish theme option, refresh page, , @ clippings section, pink. can click greenish theme alternative 1 time again show colored section, i'd right 1 show automatically.

the code theme switching can located here, can see how works.

yes going need store value in cookie can switch between stylesheets, info can preserved.

so, working might rough , needs testing, firstly utilize , lite cookie plugin found here

then need jquery along these lines:

$(window).on('load',function(){ $.cookie('cookiename', 'green', { path: '/', expires: 365}); // set default on root document 1 year. }); $(document).ready(function(){ $('#pink').click(function(){ $.cookie('cookiename', 'pink', { path: '/', expires: 365}); // set on click }); $('#green').click(function(){ $.cookie('cookiename', 'green', { path: '/', expires: 365}); // reset original }); });

then add together stylesheet head of document , give id.

<link id="csstoggle" rel="stylesheet" type="text/css" href="http://yoursite.com/css/green-style.css" />

then need if statement toggle them.

if ($.cookie('cookiename') === 'green') { $('#csstoggle').attr('href','http://yoursite.com/css/green-style.css') }else if($.cookie('cookiename') === 'pink'){ $('#csstoggle').attr('href','http://yoursite.com/css/pink-style.css') }

i may have over-egged this, , there more elegant solutions, believe work. going seek , test it.

edit: rough illustration working here: http://jsfiddle.net/6eqs428v/

jquery css conditional