CODEWITHSUNDEEP
cssjquery-ui
CmdrTallen
CmdrTallen

Reputation: 2282

How to change background color to match jQuery UI Theme via ThemeSelector?

I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.

I have tried this

function updateBodyBackground() {
    $("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}

Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;

$function() {
    updateBodyBackground();
    $('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}

Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.

Any suggestions on how to change the background to better match the selected jQuery UI Theme?

Thanks!

Upvotes: 1

Views: 3806

Answers (3)

ChrisAdmin
ChrisAdmin

Reputation: 1002

A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :

<div id="main_background" class="ui-state-hover">
  <!-- Your Content -->
</div>

Since the id overrides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image:

#main_background {
  position: relative;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 742px;
  margin: 0px;
  border: 0px;
  padding: 5px;
  background-image: none; /* Kills the background url(image) */
                          /* that ui-state-hover sets        */
}

Upvotes: 2

Macsupport
Macsupport

Reputation: 5444

You had an error in your js (used a " instead of ' ):

$('.ui-widget-header:first")

Should be:

$('.ui-widget-header:first')

But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.

function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}

$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });

Upvotes: 0

Saba
Saba

Reputation: 16

Buggy fix using timeout...

find function updateCSS() inside themeswitchertool.js

After $("head").append(cssLink);

Add the below line increase timeout if it still doesn't work...

Insert setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);

Upvotes: 0

Related Questions