You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Two navigators controlling one scrollable, possible? Created Aug 24, 2010

This thread is solved

Views: 680     Replies: 2     Last reply Aug 31, 2010  
You must login first before you can use this feature

thom22

Posts: 2

Registered:
Aug 24, 2010

Two navigators controlling one scrollable, possible?

Posted: Aug 24, 2010

Hi would appreciate any help,

I have one vertical scrollable on my page and want to be able to control it with two navigators, one on top one on the side. Giving both of them the same id or class only makes one or the other work at a time. I need both working so user can choose to navigate from the top or the side, any ideas?

Thank you

Abban
Now we know...

Posts: 2

Registered:
Jul 8, 2009

» Two navigators controlling one scrollable, possible?

Posted: Aug 31, 2010

Reply to: Two navigators controlling one scrollable, possible?, from thom22
I just got this working on one of my sites. My scrollable is called #planscroller and the html for the navigator is like this:


<div id="plan_names">
    <a id="t0" href="javascript: void(0)">first</a>
    <a id="t1" href="javascript: void(0)">first</a>
    <a id="t2" href="javascript: void(0)">first</a>				    						</div> 
<div id="tab_nav"> 

<ul id="flowtabs"> 
    <li><a id="p0" class="current" class="t1" href="javascript: void(0)">01.</a></li> 
    <li><a id="p1"  class="t2" href="javascript: void(0)">02.</a></li> 
    <li><a id="p2"  class="t3" href="javascript: void(0)">03.</a></li> 
</ul>

The flowtabs div is set as the normal navigator. I'm then using the following javascript after I've declared the scrollable:


//declare the api for the scroller
var api = $("#planscroller").data("scrollable");
//this is a function for changing the classes of the plan_name items
$("#plan_names a").mouseup(function(){
    var i = $(this).attr("id");
    i = i.substring(1);
    api.seekTo(i);
    $("#plan_names a").removeClass("current");
    $(this).addClass("current");
});
//this changes the classes of the plan_names items when you use the navigator
api.onSeek(function() {
    var i = this.getIndex();
    i = "#plan_names #t" +i;
    $("#plan_names a").removeClass("current");
    $(i).addClass("current");
});

I hope this helps you.

thom22

Posts: 2

Registered:
Aug 24, 2010

» » Two navigators controlling one scrollable, possible?

Posted: Aug 31, 2010

Reply to: » Two navigators controlling one scrollable, possible?, from Abban
thank you so much, works great and just in time, nearly had to change my design a little.

very very grateful

•