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