Question

I’m using this set-up:
http://flowplayer.org/tools/demos/tabs/slideshow.htm

I would like to change the BODY background when switching from tab to tab, with one specific color to match each tab.

Could someone let me know what additional code I’d need to add?

I would be grateful for any help, because I’m not fluent with JS at all, although I’m quite good with HTML/CSS 😉

Many thanks.

Answer 1

You really should take a look at the events documentation.

My guess is to bind to onClick and/or onBeforeClick and probably use a data-bgColor="#FFF"-type attribute on each tab, then locate (and apply) that value to the body’s background on one of those events. Something like:

<!-- first slide -->
<div data-bgcolor="#FF0000"> ... </div>

<!-- second slide -->
<div data-bgcolor="#00FF00"> ... </div>

<!-- third slide -->
<div data-bgcolor="#0000FF"> ... </div>

And:

$('.tabs').tabs(".images > div", {
  // ...
  // other properties applied
  // ...

  onBeforeClick: function(event,tabIndex){
    // /* pseudo-code */
    // var bg = $(event.element).data('bgcolor');
    // $('body').css('background-color', bg);
  }
});