Anythingslider problem – Active page

[quantum4]

Hi all,

i hope this thread is in the right place. I used Anythingslider for this website: http://www.barnez.dds.nl/yooom/

Trying to figure out how to get the Active page link yellow. Hovering the menu-links works fine, but Active doesn’t until now. What am i missing??? Or isn’t it possible at all in this way.

The Javascript is confusing me…

Thanks a lot !
Paul

[Mottie]

Hi Quantum4!

LMAO I love the comment in your slider initialization code. Basically you’ll need to add this css

#externalNav.current {

color: #F8B334;

}

and this code to the slider initialization code:

$('#slider').anythingSlider({

theme           : 'cs-portfolio',

easing          : 'linear',

buildNavigation : false,

buildStartStop  : false,



onSlideInit: function(e, slider) {

$('#externalNav').find('a')

.removeClass('current')

.eq(slider.currentPage - 1).addClass('current');

},



// (swipe for ifags)

clickForwardArrow: "click",

clickBackArrow: "click",

clickControls: "click focusin",

resumeOnVideoEnd: true,

addWmodeToObject: "opaque"



});

And the last comma after “opaque” needs to be removed or IE will hissy fit.

[quantum4]

lol Mottie,

Glad to see you have great sense of humor!
Thanks for your superfast reply, i changed the code, but unfortunately the active link doesn’t want to turn yellowish yet.

We might have to redo the whole navigationbar though, with separate rollover background images, since i just heard that the “rings” have to darken when active. Is that somewhere in an example, or do you have some ready made code for this perhaps ?

Grts, Paul

[Mottie]

Hey again!

If you look at this main wiki document page, you’ll see Demos, then a sub-category of Navigation demos. Check out the first two: “Custom, External navigation controls” and “Moving navigation controls”. Maybe that will help get you started.

[quantum4]

Hello Mottie,

guess it has become a Javascript/CSS problem now..
I managed to get the images in. Made 2 versions of the images, one series with white text and one series with yellow text, all to be found in the directory images/navbar: (called bottom-01-white.png etc. and bottom-01-yellow.png etc.)

My question is: how do i get the yellow image to be shown on the active page.
Hope you can help out, it’s highly appreciated and we are thinking of sending you beers :)

Thanks again, Paul

[Mottie]

Hi Paul!

Like I posted above, you should be able to just use the “onSlideInit” callback to find and add a class name to the navigation link. When you have the new code in place, I can give you an example.

[quantum4]

Mottie,

Do you mean like this:

		// Set up Sliders

// **************

$(function(){



$('#slider').anythingSlider({

theme           : 'cs-portfolio',

easing          : 'linear',

buildNavigation : false,

buildStartStop  : false,

onSlideInit: function(e, slider) {

$('#externalNav').find('a')

.removeClass('current')

.eq(slider.currentPage - 1).addClass('current');

},





// (swipe for ifags)

clickForwardArrow: "click",

clickBackArrow: "click",

clickControls: "click focusin",

resumeOnVideoEnd: true,

addWmodeToObject: "opaque",



});



});

[Mottie]

Well yes, but I meant with the circle images different border colors and yellow text in place. All you should need to do now is include the “current” class with the “#externalNav a:hover” to make the images highlight in both situations.

[quantum4]

Once again thanks for your quick reply !

I made new images, top part is the circle with white text, bottom part circle with yellow text, that’s what you meant right … so the hover will perform a background image-shift so to say…

Problem now is that i cannot get them into place in the externalNav…
It’s a new riddle every time… ;

CSS – gotta love it

[Mottie]

Try this method…

CSS

#externalNav img {

float: left;

}

#externalNav a {

float: left;

width : 60px;

height : 88px;

overflow: hidden;

}

#externalNav a span {

text-indent: -9999em;

display: block;

}

.tab-why    { background-image: url(../images/navbar/bottom-01-white.png); }

.tab-health { background-image: url(../images/navbar/bottom-02-white.png); }

.tab-family { background-image: url(../images/navbar/bottom-03-white.png); }

.tab-how    { background-image: url(../images/navbar/bottom-04-white.png); }

.tab-profs  { background-image: url(../images/navbar/bottom-05-white.png); }

.tab-join   { background-image: url(../images/navbar/bottom-06-white.png); }

.tab-about  { background-image: url(../images/navbar/bottom-07-white.png); }



.tab-why.current, .tab-why:hover    { background-image: url(../images/navbar/bottom-01-yellow.png); }

.tab-health.current, .tab-health:hover { background-image: url(../images/navbar/bottom-02-yellow.png); }

.tab-family.current, .tab-family:hover { background-image: url(../images/navbar/bottom-03-yellow.png); }

.tab-how.current, .tab-how:hover    { background-image: url(../images/navbar/bottom-04-yellow.png); }

.tab-profs.current, .tab-profs:hover  { background-image: url(../images/navbar/bottom-05-yellow.png); }

.tab-join.current, .tab-join:hover   { background-image: url(../images/navbar/bottom-06-yellow.png); }

.tab-about.current, .tab-about:hover  { background-image: url(../images/navbar/bottom-07-yellow.png); }



.clear { clear: both; }

and change the HTML to this:

Why

Health

Family

How

Profs

Join

About Us

It would be even better if you made an image sprite with all of the images combined.

[quantum4]

Thanks so much Mottie!

Will have check later though, have to go to a Joomla meeting now.

I will let you know how it went.

Regards, Paul

[quantum4]

Hi Mottie,

just came back from the meeting, couldn’t wait to check your code :)
Anyhow, i changed it, fixed some crooked pictures and upped it in the usual place. It’s almost ok, except for the fact that the current state goes to the wrong place. And when entering the site, WHY isn’t active yet.

Is that the Javascript or something in the CSS perhaps.

Paul

[Mottie]

Oops, change the AnythingSlider initialization code to this:

$('#slider').anythingSlider({

theme           : 'cs-portfolio',

easing          : 'linear',

buildNavigation : false,

buildStartStop  : false,



onInitialized: function(e, slider) {

$('#externalNav')

.find('a').eq(slider.currentPage - 1).addClass('current');

},



onSlideInit: function(e, slider) {

$('#externalNav').find('a')

.removeClass('current')

.eq(slider.targetPage - 1).addClass('current');

},



// (swipe for ifags)

clickForwardArrow: "click",

clickBackArrow: "click",

clickControls: "click focusin",

resumeOnVideoEnd: true,

addWmodeToObject: "opaque"



});

[quantum4]

hehe, you are human after all… ;)

Thanks for the patience and the enormous amount of help Mottie !

Paul

[Author]

Posts