Comments on: A JavaScript Content Switcher That Works Without JavaScript

By: NattheCataz

NattheCataz — Fri, 17 Jun 2011 00:23:41 +0000

I tried that too and still it is defaulting to the link div, and not the home div. I am going to do a redirect until I can fix this and also apply the javascript. Thanks.

By: NattheCataz

NattheCataz — Wed, 15 Jun 2011 19:44:50 +0000

Thanks, but that didn’t fix it either. I am still seeing the links div by default. I am just going to redirect until I figure this out. I am also seeing the page jump around when loaded in smaller resolutions. Not a huge issue, but one that I cannot leave alone.
thanks again.

By: Louis Lazaris

Louis Lazaris — Wed, 25 May 2011 05:50:00 +0000

Hey, I’m glad to help you debug this, but I would need to see an actual example. If you want, use the contact form on this website to send me a link to a demo so I can see what’s going on. Thanks!

By: henning

henning — Tue, 24 May 2011 16:38:16 +0000

Hey Louis,
thanks a lot for this tutorial, for a newbie like me it’s perfect.
Still i encountered a little Problem. The first content I’ll show in my content-slider-inside is always more to the left than the rest. when I change the content with a click, everything looks ok (margin / padding). Only the first Element seems to be “unmarginable”.
I tried the Version without JS and I’m just curious, never found a solution.

with best regards

By: Louis Lazaris

Louis Lazaris — Wed, 27 Apr 2011 08:27:52 +0000

Hi, Nat.

This is easy to fix: In your HTML, you’ve put the

section second in the markup, after the “link” section. Just swap those around in the HTML so the “home” section is first, and that one will be the one that will appear by default.

By: NattheCataz

NattheCataz — Tue, 26 Apr 2011 21:23:10 +0000

I am using a non-javascript version of this example at the moment and cannot get the page to load the “home” content be default without explicitly setting a redirect page. It keeps loading the “links” content instead. Should I reorder the html? I know I am probably missing something simple here, but what? Otherwise my transitions work great in all browsers.
http://www.makeupbychristy.com/test/index.htm#home is what I want to appear when the user goes to the http://www.makeupbychristy.com/test/index.htm page .

By: Louis Lazaris

Louis Lazaris — Tue, 25 Jan 2011 22:37:38 +0000

JJ, you’re correct. the “:focus” pseudo-class sets the styles for the element that has keyboard focus, so it won’t work for that. It does work if you tab through the links with the keyboard, though. And “:active” doesn’t work either, because that’s only for while the link is actually being clicked.

The only way to do it (from what I can tell) is via JavaScript, as in the JavaScript-enhanced version.

By: JJ

JJ — Mon, 24 Jan 2011 20:23:30 +0000

If you’re referring to the version without JavaScript, then you can declare “focus” styles. For example:

a:focus {
/* styles in here */
}
And that’s probably something I should add to mine! :)

thank you for your answer, yes I use the version without JavaScript, but your suggestion (#navigation li a:focus { background: #630000;}) doesn’t help :-(
Maybe an other idea?

By: Louis Lazaris

Louis Lazaris — Mon, 24 Jan 2011 19:06:37 +0000

If you're referring to the version without JavaScript, then you can declare "focus" styles. For example:


a:focus {
/* styles in here */
}

And that's probably something I should add to mine! :)

By: JJ

JJ — Mon, 24 Jan 2011 18:48:07 +0000

Hi Louis,

great work, but IÂ´m trying to give the active tab another color. It will not work. Can you help??