PDA

View Full Version : Using a link inside javascript



StealthRT
12-14-2007, 03:56 AM
Hey everyone i have a quick question here... I'm using some code from http://www.ndoherty.com/demos/coda-slider/1.1.1/ called coda-slider. In order to slide from one DIV to another u us a link like so..


<p><a href="#2" class="cross-link">Next</a></p>

In the above code, the link would take you to the 2nd DIV.

Now my question is, how can i do that same thing but inside javascript with my code below?:


function Step1()
{
if (Checkit1())
{
//location.href='#2';
}
else
{
return false;
}
}

I've tryed the location.href='#2'; but it only changes the URL which doesnt move the box from DIV 1 to DIV 2 as the link would.

Any help would be great! :)
David

jscheuer1
12-14-2007, 06:52 AM
As you might imagine, this is a complex script. There are variables whose scope is set in the code in such a way as to not be accessible globally. If the script is edited, this can be overcome and a function can be written to navigate in the global scope via number.

In the example I worked out, I used the demo page of the script and this edited version of coda-slider.1.1.1.js in place of coda-slider.1.1.1.pack.js:

1465 (edited)

I was then able to make up a function that keyed off of the existing nav tabs of the demo:


function test_35a(n){
jQuery(document.getElementById('stripNavL0').parentNode.getElementsByTagName('a')[n]).addClass("current").parent().parent().find("a").not(jQuery(document.getElementById('stripNavL0').parentNode.getElementsByTagName('a')[n])).removeClass("current"); // wow!
var cnt = - (panelWidth*(n-1));
cPanel = n;
location.hash = cPanel;
jQuery(document.getElementById('stripNavL0').parentNode.getElementsByTagName('a')[n]).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, 750, 'expoinout');
}

n is the tab/panel number you want to navigate to. So you could call this function like:


test_35a(2);

to go to the second panel.

As I say, I only worked this out with the demo page, YMMV.

StealthRT
12-14-2007, 07:11 AM
thank you jscheuer1 for your reply... but i just now got it working!!! :)

i used this:


jQuery().find("div.panelContainer").animate({ left: -1024}, 750, "expoinout");

the {left: -xxxx} is the position (cnt) of the frame after it slides... so mine is in 1024x768 so the first tab = 0, the second = 1024, the third = 2048, etc etc. The 750 and "expoinout" are better know as settings.easeTime & settings.easeFunc which are the default values already in place, i just had to include them so it would know what to do.

Again, thanks for the help!
David

mackjohn
10-05-2008, 10:54 PM
jscheuer1:

I found your solution by googling and it brought me closer to solving my problem which is as follows. I need a javascript function to slide on to the next panel(other than specifying the panel myself).. im sure its pretty simple(?) but i cant figure it out because jquery is totally new for me.

Anyone have any ideas? I would be most grateful for any advice as this is really making me throw my keyb out of the window.

Regards,

J

jcrog
12-04-2008, 03:03 PM
I'd like one of the tabs to go to a URL instead of a panel. Does anyone know how to do that?

Thanks