jQuery: How to switch background image which remains even after refreshing the page?

1 post
  • Has been part of the Envato Community for over 2 years

Hi, I am working on my first theme and the first ever style switcher. I am not a jQuery ninja ;) so i need help!! I am following the style switching method from following: http://designshack.net/articles/css-style-switcher It is working very good but I need to change background image as it changes the colors.(i dont want to use separate stylesheets for backgrounds) So how can we change the background image which may remain the same even after refreshing the page?

They’ve used the cookies method in above example for stylesheets, but how can we use the same for separate image backgrounds?

I’ve added all the data in a fiddle. http://jsfiddle.net/mrto2/e9bbn/16 .Now the color schemes/fonts are working perfectly. When we click on blue then the font changes into blue and cookies are stored. (Default is not working in fiddle but its perfect in my PC). I’ve tried to add background image switch but it is giving 2 problems.

1) the cookies are not stored for background image/pattern. (here i need your help the most. If You could incorporate it into “styleswitcher.js” or just into fiddle then my life would be easier)

2) Just the background color is working and it is not picking the background image….

I’s be very grateful if anyone could help or my life would be much easier if someone can share complete code of such switcher…..


Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes