Redirect to a page using a drop-down menu

[Robert_79]

Hello

I am trying to create chaper links for my Vimeo videos on my site. I have managed to get a script working with direct links but cannot get it to work with a drop-down menu.

Here is my code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

<script>
$(window).load(function(){

 var link_1_track = 26;
 var link_2_track = 75;
 var link_3_track = 103;
 var link_4_track = 170;
 var link_5_track = 188;
 var link_6_track = 226;
 var link_7_track = 265;
 var link_8_track = 299;
 var link_9_track = 382;
 var link_10_track = 420;
 var link_11_track = 445;
 var link_12_track = 458;
 var link_13_track = 489;
 var link_14_track = 534;

 var iframe_player = jQuery('#player')[0];
 var player = $f(iframe_player);

 function setupLinks() {

    jQuery(".link_1").click(function () {
        player.api('play');
        player.api('seekTo', link_1_track);
    });

    jQuery(".link_2").click(function () {
        player.api('play');
        player.api('seekTo', link_2_track);
    });

    jQuery(".link_3").click(function () {
        player.api('play');
        player.api('seekTo', link_3_track);
    });

    jQuery(".link_4").click(function () {
        player.api('play');
        player.api('seekTo', link_4_track);
    });

    jQuery(".link_5").click(function () {
        player.api('play');
        player.api('seekTo', link_5_track);
    });

    jQuery(".link_6").click(function () {
        player.api('play');
        player.api('seekTo', link_6_track);
    });

    jQuery(".link_7").click(function () {
        player.api('play');
        player.api('seekTo', link_7_track);
    });

    jQuery(".link_8").click(function () {
        player.api('play');
        player.api('seekTo', link_8_track);
    });

    jQuery(".link_9").click(function () {
        player.api('play');
        player.api('seekTo', link_9_track);
    });

    jQuery(".link_10").click(function () {
        player.api('play');
        player.api('seekTo', link_10_track);
    });

    jQuery(".link_11").click(function () {
        player.api('play');
        player.api('seekTo', link_11_track);
    });

    jQuery(".link_12").click(function () {
        player.api('play');
        player.api('seekTo', link_12_track);
    });

    jQuery(".link_13").click(function () {
        player.api('play');
        player.api('seekTo', link_13_track);
    });

    jQuery(".link_14").click(function () {
        player.api('play');
        player.api('seekTo', link_14_track);
    });
}
setupLinks();
});
</script>

<a class="link_1" href="javascript:void(0);">1</a>&emsp;-&emsp;
<a class="link_2" href="javascript:void(0);">2</a>&emsp;-&emsp;
<a class="link_3" href="javascript:void(0);">3</a>&emsp;-&emsp;
<a class="link_4" href="javascript:void(0);">4</a>&emsp;-&emsp;
<a class="link_5" href="javascript:void(0);">5</a>&emsp;-&emsp;
<a class="link_6" href="javascript:void(0);">6</a>&emsp;-&emsp;
<a class="link_7" href="javascript:void(0);">7</a>&emsp;-&emsp;
<a class="link_8" href="javascript:void(0);">8</a>&emsp;-&emsp;
<a class="link_9" href="javascript:void(0);">9</a>&emsp;-&emsp;
<a class="link_10" href="javascript:void(0);">10</a>&emsp;-&emsp;
<a class="link_11" href="javascript:void(0);">11</a>&emsp;-&emsp;
<a class="link_12" href="javascript:void(0);">12</a>&emsp;-&emsp;
<a class="link_13" href="javascript:void(0);">13</a>&emsp;-&emsp;
<a class="link_14" href="javascript:void(0);">14</a>

<br><br><br>

        <label for="sort">Skip To:&emsp;</label>
        <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
          <option class="link_1" value="javascript:void(0);">1</option>
          <option class="link_2" value="javascript:void(0);">2</option>
          <option class="link_3" value="javascript:void(0);">3</option>
          <option class="link_4" value="javascript:void(0);">4</option>
          <option class="link_5" value="javascript:void(0);">5</option>
          <option class="link_6" value="javascript:void(0);">6</option>
          <option class="link_7" value="javascript:void(0);">7</option>
          <option class="link_8" value="javascript:void(0);">8</option>
          <option class="link_9" value="javascript:void(0);">9</option>
          <option class="link_10" value="javascript:void(0);">10</option>
          <option class="link_11" value="javascript:void(0);">11</option>
          <option class="link_12" value="javascript:void(0);">12</option>
          <option class="link_13" value="javascript:void(0);">13</option>
          <option class="link_14" value="javascript:void(0);">14</option>
        </select>

<br><br><br>

<iframe id="player" src="https://player.vimeo.com/video/52082016?api=1&player_id=player" width="880" height="495" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<br><br>

The video is for testing purposes only, I have no affiliation with the channel Todesarten.

In my code I have added both the direct clickable links and also the drop-down menu so you can see both. As you can see if you click any of the links directly the video goes to the relevant chapter but the drop-down menu does not work at all. If I add a normal http link in the drop-down menu the page will redirect to the correct url but it's just not working with the script.

Can anyone help me with this so I can get the drop-down to work? Thank you very much.

Robert.

[Robert_79]

I have just noticed that the drop-down menu actually works in Firefox and also IE.

The issue seems to be with Chrome and also Safari (on iPhone/iPad)

Also I only want the drop-down menu to work. The hard links are there just to show that the chapters work. Afterwards I will be deleting the links and just keeping the drop-down menu.

[JamesCherrill]

Why does this topic have a Java tag?