CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
RedGiant
RedGiant

Reputation: 4748

auto select an option by matching div data attribute and option value?

Please take a look at this auto slider (fiddle). The select box is there to allow users to jump to a specific slide. When the slider is on auto-rotate mode, I want the select option to change based on the current slide. Do you think it's possible by getting the data attribute (e.g title1 of the present slide and matching it with the option value title1? Right now the select box is fixed at default option.

<div id="searchslider">

     <div data-title="title1"class="eventslide softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>text</p>
     </div>
     </div>

     <div data-title="title2" class="eventslide softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text</p>
     </div></div>

  </div>

</div>

<button id="left">left</button>
<button id="right">right</button>

<select class="select_title">
 <option value="title1">Select</option>
 <option value="title1">Title_1</option>
 <option value="title2">Title_2</option>    
</select>

AutoRotate Function:

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0); 
 }

 autoRotate(); // start auto rotate

Upvotes: 2

Views: 357

Answers (3)

user25312
user25312

Reputation: 307

Try checking the offset of each frame to get the current frame. Then read out that title attribute and change the option value accordingly

$( "#searchslider" ).promise().done(function() {
   $('#searchslider').find('.eventslide').each(function(){
    var parentLeft = $('#searchslider').offset().left;        
    var offsetX = $(this).offset().left;
    if (offsetX == 22){
        var dataAttribute = $(this).attr('data-title');
        $('.select_title').val(dataAttribute);
        console.log(dataAttribute);
    }
    });
});

http://jsfiddle.net/cYFLe/62/

Upvotes: 1

marcineck
marcineck

Reputation: 281

To make it work I suggest this select field to be generated after the page is loaded. jQuery should count the titles and create a options for this select field.

Once this one is done - it's all simple.

JS

<script>
$( document ).ready(function() {
    var c=0;
    $(".eventslide").each(function(i,item)
                          {
                             $(".select_title").append('<option value="'+c+'">'+$(item).attr('data-title')+'</option>');   
                              c++;
                          });



var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right,#auto').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }

  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

   var select_index=$(this).val();
   C=select_index;




   $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

});
</script>

Here is the fiddle: http://jsfiddle.net/cYFLe/61/

Upvotes: 0

Manibharathi
Manibharathi

Reputation: 945

use this code $('.select_title').prop('selectedIndex',C+1); instead of $('.select_title').prop('selectedIndex',0);

$( document ).ready(function() {

var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right,#auto').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }
  $('.select_title').prop('selectedIndex',C+1); // this line added for auto select
  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',C+1);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

    var optionSelected = $("option:selected", this);
    var selIndex = $(this).prop("selectedIndex");
    if (selIndex == 0) return false;
    C = selIndex - 1;

     clearInterval(intv);
    if(optionSelected){
        autoRotate(); } 


   $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

});

Here http://jsfiddle.net/K3bWS/

Upvotes: 1

Related Questions