CODEWITHSUNDEEP
javascriptjqueryhtmlcycle2
Robert E
Robert E

Reputation: 740

Update select menu by URL hashtag

I am trying to update a select menu to match up with each slide in a slideshow. As it is, the slideshow is bookmarkable with a hashtag on the URL updated for each slide. My select menu has a class for each option which matches the hashtags for each slide. I'm using Cycle2 for my slideshow and DDslick for my dropdown. However, my javascript is not working to update the select menu, even with DDslick disabled.

Right now this is my javascript;

$( ".cycle-pager span, #prev, #next" ).click(function() {
      if ($('.watch').css('opacity') == '1') {
        var link=$(this).attr('data-cycle-hash');
        var hash = link.substring(link.indexOf('#')+1);
        $('#selectOptions2 option').removeAttr('selected');
        $('#selectOptions2 .'+hash).attr('selected',true);
      }
});

Here is a full example setup on JSfiddle: https://jsfiddle.net/liquilife/du2qztfq/5/

I feel like I'm really close, just not sure what is misfiring here.

Upvotes: 1

Views: 250

Answers (1)

pegla
pegla

Reputation: 1866

Hi I must say that you are misusing both libraries, try not to hack your way out of something, and make it just because it works, try to make it right without workarounds.

DDsclick documentation:

http://designwithpc.com/Plugins/ddSlick#demo

you can clearly see how to select your element in ddsclick selectbox:

$('#demoSetSelected').ddslick('select', {index: i });

Cycle2 documentation:

http://jquery.malsup.com/cycle2/api/#auto-init

here you can see that there is an event called 'cycle-after' that is triggered after next slide has been loaded, and usage is like this:

$( '#mySlideshow' ).on( 'cycle-eventname', function( event, opts ) {
    // your event handler code here
    // argument opts is the slideshow's option hash
});

And to finalize everything using your data (I prefer writing data models in JS so I changed it a bit):

https://jsfiddle.net/pegla/hwrtrzkh/3/

Upvotes: 1

Related Questions