Forums

elcape16

Hello I'm trying to do a slider and have jquery add a class on content out side that slider, Is it possible? I'm not good at all with Jquey.

Something like this!

<div>
slider here

<div>Slider 1 - Color Orange</div>
<div>Slider 2 - Color Blue</div>
</div>

<div>
Content Here

add class orange when Slide 1 is current or add class blue when Slide 2 is current

Thanks is advance!!

Alex

knittingfrenzy18

Try a jsfiddle to demonstrate. Are you using the AnythingSlider or something? I'm not sure how your slider oscillates right now.

elcape16

Yes Anything slider, but my question is how to add a class to another element outside the slider itself

knittingfrenzy18

So you are trying to add a class to a slide when you're looking at it?
Or are you trying to add a class to the slider when you're looking at a certain slide?

Or what?

Anyways, you can grab the current slide like this

var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #

And then implement it with jQuery.

But I don't know how to watch for a change in the AnythingSlider, as I've never used it myself.

Does anyone know how? (Like $("#slider").change(function()) except I don't think that's right)

Mottie

You can use the built in callbacks AnythingSlider provides (demo):

jQuery(function($){
  var $box = $('.colorbox'),
    // class to add: slide 1 = blue, slide 2 = orange, etc
    colors = [ 'blue', 'orange', 'green' ],
    changeBox = function(slider){
      $box
        .removeClass( colors.join(' ') )
        .addClass( colors[slider.currentPage-1] || '' )
    };

  $('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
      changeBox(slider);
    },
    
    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) {
      changeBox(slider);
    }

  });
});

elcape16

Thanks a lot for your help but I don't think I explain myself well....

I think these images will do a better Job

Slider 1

Slider 2

Thanks again for your help...

elcape16

Mottie, Thanks....

That's exactly what I need can I do to more than one element, sorry my Jquery skills are almost none :S

Mottie

Just change this line:

$box = $('.colorbox'),

to point to those box title class names; i.e., it doesn't need to be unique since we're using classes.

elcape16

Thanks I'm working on it!! Thanks A Lot

semismurf

Hey mottie. What if i have an id in the nav that i want to add a class "active" to based on which slide i'm on.

id="nav1" class="menu active" <-- active slide<br />
id="nav2" class="menu"
id="nav3" class="menu"
id="nav4" class="menu"

id="nav1" class="menu"
id="nav2" class="menu active" <-- active slide after hitting next<br />
id="nav3" class="menu"
id="nav4" class="menu"

what would that look like?

Mottie

I think this demo will help you; but if you are still having problems, please modify that demo with your HTML

treehouse : what would you like to learn today?

Forums

Add class Jquery