Navigation Link Tinkering

[shmshrbali]

Hi, I am building a page where the slider is being utilised (its been a greeat help). My question is that i want to tinker with the navigation links. That is, i have 5 panels and i want the second and third panel to be "under" the 1st panel(spry style). I have tried calling javascript function simply using div hide/show by inserting code in the navigationformatter but that didnt work.. i have searched a lot but found no sol. i hope you guys can help. or even point in the right direction.

PS : i have tried the static link idea but that didnt work since i want the links to change according to active panels.

[Mottie]

I'm not 100% sure what you mean by spry-style tabs... but I put together this demo. Is that what you meant?

CSS Added:

.anythingSlider-default .anythingControls ul a {
    position: relative;
}
.anythingSlider-default .anythingControls ul a:after {
    border-right: 20px solid transparent;
    border-top: 20px solid #777;
    content: "";
    display: inline;
    font-size: 0;
    height: 20px;
    left: 19px;
    line-height: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 2;
}
.anythingSlider-default .anythingControls ul a.cur:after,
.anythingSlider-default .anythingControls ul a:hover:after{
    border-top: 20px solid #7C9127;
}

.anythingSlider-default.activeSlider .anythingControls a.cur,
.anythingSlider-default.activeSlider .anythingControls a:hover {
    z-index: 2;
}
.anythingSlider-default.activeSlider .anythingControls ul a { background: #777;  }
.anythingSlider-default.activeSlider .anythingControls ul a.cur { background: #7c9127; }

[shmshrbali]

Thanks for the reply mottie. i'm not sure i got the idea across. I uploaded my site. its http://hdegreeglobal.com/clients/chefs/ . I want chairmans message and mission statement to be sub menu of about us and slide in and out of it. The catch is that since the nav link are auto generated its not possible atleast for me to do that. is there some kind of change i can make that can help me achieve that?

[Mottie]

If you already have the HTML of your sub menu, then you can just tie it to the slider.

Check out this demo that is set up to use external navigation. Basically, it's just getting the link's href and removing the # to get the slider number

var slide = $(this).attr('href').substring(1);

But you could also use data-attributes if needed like in this demo

var slide = $(this).attr('data-slider-page');

[shmshrbali]

alright i am going to give this a try right now. Thanks for the tip.

[shmshrbali]

okay i'd like to point out i am zero at java(any kind). So you'll have to help me out here. i used your codes but as soon as i add

nav.click(function(){ var slide = $(this).attr('href').substring(1); $('#slider').anythingSlider(slide); return false; });​

to the script tag the slider stops working(displays all the slides on the page with other dimensions) otherwise the links seem to have attached themselves to the slider since if i build the start stop the links change color with slides. but the click function is just not working out.

[Mottie]

No problem!

It sounds like there is a javascript (not java) error causing the slider to break.

• Is nav defined? It should have been at the top of the code.
• Is the HTML set up to include links with # followed by the slider number?

Maybe it would be easier if you replaced the code in that demo, or just email me your code so I can help fix it. If you email me, please use my gmail account, user name is wowmotty.

[shmshrbali]

alright i'll email you the code at wowmotty @ gmail. And if you mean hashtag then that is false in my code. i'll let you see in the email.

edit: Sent the mail. Thanks again for all the help. :) hopefully i'll get this done with your help. let me know what you think is the problem

[shmshrbali]

Okay thanks to mottie the issue has been solved. and this can be closed. his earlier solution worked . i just didnt implement correctly. thank you mottie.