CODEWITHSUNDEEP
javascriptjqueryclasstriggersslideshow
mnsth
mnsth

Reputation: 2287

If element changed class from one particular to another in jQuery

Normally my slideshow goes automatically to the next picture, but I want to detect if it goes backwards by an user-initiated action (keyboard arrows or controls). My solution to this would be to do this (my imaginary code):

if(jQuery("#slideshow article").hasChangedClassFrom("previous").hasChangedClassTo("current")) {
    backwards = true;
}
if(backwards) { // code for backwards
    jQuery("#slideshow article.previous").css("z-index", "1");
    jQuery("#slideshow article.next").css("z-index", "2");
}
else { // code for forwards (normal state)
    jQuery("#slideshow article.previous").css("z-index", "2");
    jQuery("#slideshow article.next").css("z-index", "1");
}

The classes are already implemented, so that the current slide always has the class "current" and so on. I know this isn't valid code at all, but by reading this, I think it would be quite clear what I want to achieve. I'm not very good at JavaScript/jQuery, but I've tried searching for solutions like this without luck.

Live site // Live JS code

Upvotes: 3

Views: 429

Answers (6)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79840

I wrote a plugin attrchange which I think will effectively solve your problem. attrchange is a simple jQuery plugin to detect an attribute change. The plugin internally uses one of the following compatible methods based on the browser to detect an attribute change,

  • Mutation Observer
  • DOMAttrModified
  • onpropertychange

Try out below demo to understand more about how you can use the plugin for your need.

Click to read more about attrchange.

Note: The plugin doesn't use polling so you can use it without any worries, however polling is supported as an extension to the plugin. You can read more if you are interested.

$('#test').one('click', function() {
  $('#test').attrchange({
    trackValues: true,
    callback: function(event) {
      $('#result').html('<div><label>Attribute Name: </label>' + event.attributeName + '</div>' + '<div><label>Old Value</label>' + event.oldValue + '</div>' + '<div><label>New Value</label>' + event.newValue + '</div>');
    }
  });

  //this will toggleClass 'blue-background' every 2 secs
  setInterval(function() {
    $('#test').toggleClass('lightblue-background');
  }, 2000);
});
html {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 13px;
}
div#test {
  border: 1px solid #d2d2d2;
  padding: 10px;
  display: inline-block;
}
.lightblue-background {
  background-color: #DBEAF9;
}
div label {
  font-weight: bold;
  margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/meetselva/attrchange/master/js/attrchange.js"></script>
<div id="test">
  <p style="font-weight: bold;">Click anywhere in this box to Start the DEMO</p>
  <p>The demo is to simply toggle a class 'lightblue-background' to this div every 2 secs.</p>  
  <div id="result" style="font-size: 0.9em;"></div>

See the pseudo code for your case using the plugin,

jQuery("#slideshow article").attrchange({
   trackValues: true,
   callback: function(event) {
      if ($(this).hasClass('current') && 
         (event.oldValue && event.oldValue.indexOf('previous') >= 0)) {
         //code for backward
      } else {
         //code for forward
      }
   }
});

Upvotes: 1

AllwinP
AllwinP

Reputation: 71

You can add this line at the very start of slideTo function in your cycle.js

if((idx < index && !(idx == 0 && index == antall - 1)) ||
   (idx == antall - 1 && index == 0)){
   jQuery.trigger('BACKWARDS')
}

and then add an event handler for "BACKWARDS" somewhere else convenient (Maybe at the end of cycle.js?).

jQuery.on('BACKWARDS', function(e){
   //DO THINGS HERE
}

Upvotes: 1

dm4web
dm4web

Reputation: 4652

Instead of guessing that the previous class, use the current and the previous index.

http://jsfiddle.net/whyba4L9/5/

UPDATE 2: 

var stopp, antall = jQuery("#slideshow article").length;
var index = 0

function slideTo(idx) {
    jQuery("#slideshow article, #slideshow nav a").removeAttr("class").filter(':nth-of-type(' + (idx+1) + ')').addClass("current");
    if(jQuery("#slideshow article:nth-of-type(2)").hasClass("current")) {
        jQuery("#slideshow article:first-of-type").addClass("forrige");
        jQuery("#slideshow article:last-of-type").addClass("neste");
    }
    else if(jQuery("#slideshow article:first-of-type").hasClass("current")) {
        jQuery("#slideshow article:last-of-type").addClass("forrige");
        jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
    }
    else if(jQuery("#slideshow article:last-of-type").hasClass("current")) {
        jQuery("#slideshow article:nth-of-type(2)").addClass("forrige");
        jQuery("#slideshow article:first-of-type").addClass("neste");
    }

    if(index ==antall-1 && idx ==0 )
    {
        //lasto to first
    }
    else if(index>idx || (index == 0 && idx == antall-1))
    {
        alert('BACKWARDS')
    }
    index = idx;

};
function startCycle() {
    stopp = setInterval(function() {
        jQuery("#slideshow article").stop(true, true);
        var idx = index + 1 > antall - 1 ? 0 : index + 1;
        slideTo(idx,false);
    }, 5500);
}; 
if (antall > 1) {
    jQuery("#slideshow").append("<nav>").css("height", jQuery("#slideshow img").height());
    jQuery("#slideshow article").each(function() {
        jQuery("#slideshow nav").append("<a>&bull;</a>");
    }).filter(":first-of-type").addClass("current first");
    jQuery("#slideshow article:nth-of-type(2)").addClass("neste");
    jQuery("#slideshow article:last-of-type").addClass("forrige");
    startCycle();
    jQuery("#slideshow nav a").click(function() {
        clearInterval(stopp);
        startCycle();
        var idx = jQuery("#slideshow nav a").index(this);
        if (index === idx) return;
        slideTo(idx);
    }).filter(":first-of-type").addClass("current");
    jQuery(document).keyup(function(e) {
        if (e.keyCode == 37) {
            var idx = index - 1 < 0 ? antall - 1 : index - 1;
            slideTo(idx);
            clearInterval(stopp);
            startCycle();
        } 
        else if (e.keyCode == 39) {
            var idx = index + 1 > antall - 1 ? 0 : index + 1;
            slideTo(idx);
            clearInterval(stopp);
            startCycle();
        }
    });
}

Upvotes: 1

Malovich
Malovich

Reputation: 971

The dead simplest way to do this, from what I understand your question to aim at, is to put a handler on the index buttons and a method for tracking the current image.

Listen for slide change

var currentSlide = '';

$('.slideIndexButtons').on('click', function(e){
    // Conditional logic that compares $(this).data('whichimage') to currentSlide
    var whichImage = $(this).data('whichimage');

    // ->this means attaching data-whichimage="" to each of the elements, or
    // ->you can just stick with detecting the class and going from there
    // Either process results in isBackwards boolean

    if (currentSlide == 'prev' && whichImage == 'current') {
        isBackwards = true;
    }

    if (isBackwards) {
        // Backwards logic here
    } else {
        // Other logic here
    }

    // Unless the event we're listening for in keeping currentSlide updated is also fired when
    // the slide changes due to user input, we'll need to update currentSlide manually.
    currentSlide = whichImage; 
});

Track the current slide

$('#slider').on('event', function(){
    // This is assuming that we're strictly listening to the slider's automatic sliding

    // The event you attach this to is either fired before or after the slide changes.
    // Knowing which is key in getting the data you want. You are either getting
    // The data from this slide $(this).data('whichimage') or 
    // $(this).next().data('whichimage')

    // Again, you can go with classes, but it is a lot of logic which you have to 
    // update manually if you ever have to add or alter an image in the slide set.
    // Either way, you end up with the variable targetImage

    currentSlide = targetImage;
});

With any luck, your slideshow code has an API that will allow you to listen for when slide-related events are fired. Otherwise, you'll have to find a way of setting up, firing and listening for these events manually, either through callbacks passed in or by (eek!) altering the code and possibly unintentionally changing its functionality.

This should give you what you asked for. Let me know how it goes.

Upvotes: 1

suresh k
suresh k

Reputation: 46

Based on the code from the mentioned link http://dans.no/cycle.js

Declare a variable clickindex=0;

Place the following inside the click function of jQuery("#slideshow nav a").click

clickindex = jQuery("#slideshow nav a").index(this);
if(clickindex<index){
    console.log("execute some logic");
}

The jsfiddle link for my solution javascript code http://jsfiddle.net/y601tkfL/

Upvotes: 2

www139
www139

Reputation: 5237

Try calling this function when the user changes the image with parameter of this. I hope I correctly understood what you are asking. If not let me know and I will recode it. Also if the slide show is finished please post your html and javascript.

function whatever(this)
{
  if(this.className == 'previous')
  {
    alert('the user has changed the image');
    this.className = 'current';
  }
  else
  {
    alert('the user hasn\'t changed the image');
  }
}

Upvotes: 1

Related Questions