jqueryjquery-pluginsjquery-toolsjquery-scrollable

Jquery Tools naming Scrollable items, to open any one of them when loading page (Deep Link)


Hello in using this scrollable code in my page http://jquerytools.org/documentation/scrollable/

its working great.

Im trying to "name" the scrollable items so i can open an specific item like they do on the Tabs , here http://jquerytools.org/demos/tabs/anchors.html#second

Anyway i check here, Also try in my code , naming the items on the nav but even here its not working jquerytools.org/demos/scrollable/one-sized.htm#t2

¿How can i do that? Thanks in advance.

Here is my Code HTML:

<ul id="tabs" class="css-tabs navi">
  <li><a id="mp" class="current" href="#">MFP</a></li>
  <li><a id="mp2" href="#">Features</a></li>
</ul>

  <!-- "previous page" action -->
<a class="prev browse left"></a>

            <!-- root element for scrollable -->
<div class="scrollable" id="scrollable">

  <div class="items">

<div id="mp">

 <h3>MyProject</h3>

</div>

<div id="mp2">

 <h3>MyProject2</h3>

</div>

</div><!--end items -->

</div><!--end scrollable -->

           <!-- "next page" action -->
<a class="next browse right"></a>

My jquery tools code

<script>
$(function() {
  // initialize scrollable
  $(".scrollable").scrollable({circular: true}).navigator({

    // select #flowtabs to be used as navigator
    navi: ".css-tabs",

    // select A tags inside the navigator to work as items (not direct children)
    naviItem: 'a',

    // assign "current" class name for the active A tag inside navigator
    activeClass: 'current',

    // make browser's back button work
    history: true

    });;
});
</script>

UPDATE 1: I found this in other answer, i just dont know how to apply it to a normal href, or lets say , i want to give my client an URL ...how does this works?

Assuming you want to deeplink so that scrollable will scroll to a certain slide based on GET URL? here's what I do:

scrollapi = $("#scrollableID").data("scrollable");
deeplink = window.location.search.substring(1)
if (deeplink) {
    scrollapi.seekTo(deeplink);
}

Add the GET string is just the number of the slide you want to link to. (starts at 0)

UPDATE2 : pastebin.com/2FeKpzba

I cant make it work either :(


Solution

  • Finally I got it!!

    here is the final code if some one needs Deep Link on JqueryTools Scrollable

    <script>
    $(function() {
      // initialize scrollable
      $(".scrollable").scrollable({circular: true}).navigator({
    
        // select #flowtabs to be used as navigator
        navi: ".css-tabs",
    
        // select A tags inside the navigator to work as items (not direct children)
        naviItem: 'a',
    
        // assign "current" class name for the active A tag inside navigator
        activeClass: 'current',
    
        // make browser's back button work
        history: true
    
        });;
    
    var $hash = window.location.hash.substring(0);
    var $grave_nr = $hash ? $hash.slice(1) : 1;  
    
    var api = $(".scrollable").data("scrollable");
            api.seekTo($grave_nr, 1000); 
    
    });
    </script>
    

    For each element the URL is

    URL+#0
    URL+#1
    URL+#2
    

    Ans so on, each for one element, starting on 0