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

Question

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 :(

DreaminMedia Queretaro · Accepted Answer · 2013-04-09 17:42:10Z

0

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

answered Apr 9, 2013 at 17:42

DreaminMedia Queretaro

2291 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related