Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).
At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.
View the Demo to preview what I’ll be describing below.
Here is the HTML that I’ll be using to demonstrate this effect with and without JavaScript:
<div id="content-slider">
<ul id="content-slider-inside">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
</div>
<ul id="navigation">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
The key part of this code is the <div> with the id “content-slider”. Normally, that element would not be necessary, as it seems to be doing nothing. In this case, however, it’s needed in order to hide the unselected content inside the list nested inside it. Also, each list item inside the content switcher is given a unique id, which is needed for the switching to work even without JavaScript.
The CSS to style the content switcher is as follows (I’ve excluded all irrelevant styles):
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
}
#content-slider-inside {
list-style: none;
height: 320px; // these 3 lines
overflow: scroll; // help Opera
overflow-y: hidden; // behave
}
#content-slider-inside li {
width: 650px;
height: 300px;
}
A few things to note in the CSS above: The outer container has its overflow set to “hidden”. It also has a width equal to one of the content boxes (650px). Inside the container is the <ul> element that holds the list items that represent the content boxes. Finally, the list items are given dimensions of 650px by 300px. Since the container element is equal to one list item, and the container has overflow set to “hidden”, only one list item will be visible at a time.
How it Works
The navigation links are linked to internal anchors. An HTML page, by default will search the page for an anchor set as <a name="one"></a>, and if it doesn’t find it, will then match the anchor to a corresponding id attribute. This is what allows the content switcher to still change the content inside of the container.
After the above code is in place, we just need to add some CSS to make it look a little nicer, then we have the option to enhance the switcher with JavaScript. The switcher also allows deep linking by means of the hash in the URL, which works with or without JavaScript.
Compatibility
This works in every browser. Take a look at the demo, which also includes a link to a JavaScript/jQuery-enhanced version that I coded myself, as a bonus. And just to demonstrate the deep-linking capabilities, the demo link appends “#three” to the URL — so you should see the number “3” in the content area, if it’s working correctly.
Excellent, thanks Louis – another addition to my PE toolkit!
I like it, would be awesome if it worked in Opera too! :)
Who gives a crap if it works with Opera? That’s less than 1% of the market share. Not to mention they’re probably used to having to switch browsers for things to look right.
If you’re paying a developer, and they’re wasting your time and money developing workarounds for Opera, it’s probably time to look for a replacement.
Sadly that’s true, Opera probably will never make it to the mainstream user base. They keep changing versions with cosmetic changes but nothing much changes for the average user. Where Chrome is setting high standards & stealing Firefox loyals every month Opera is clearly lagging behind. I want them to succeed as well, but not sure if they ever will.
Opera loyals don’t bash me but i was pretty happy to see the new shortened big O menu in 10.50 until i enabled Show Menu Bar and i see this http://i.imgur.com/81Acn.png
Opera is strange. As web developer I mentioned that if my design works fine with most browsers then IE 6 and Opera have still kind a similar bugs. Good article! I’m a big fan of css.
This is very local specific.
As for my projects in Russia, eg., Opera gives up to 30% of visitors,
And I’ve used “content swither” just yesterday. Grrr…
Ha, very cool and simple way of doing this without JS, one of those that makes you think “why didn’t I think of that!”
I agree… “why didn’t I think of that!”
Pretty cool, good job. I love things like this that only use CSS and HTML to make something interactive :D
Really nice tip, Louis.
Actually you are right, Opera seems to fail pointing to anchors inside containers with overflow:hidden.
Tried a few thing to make it work in Opera, and i`ve found a clean solution. Maybe there’s a better one, but as far as i’ve tested, works in IE6, 7, 8, Opera 10.10, Chrome 3.195 and FF 3.5.7.
Here’s the trick:
#content-slider-inside { list-style: none; height: 320px; overflow:scroll; overflow-y:hidden; }As you can see, in the ul style you have to add a height of 20px more than the container div to hide de x overflow and use the CSS3 overflow-y property.
Adding overflow:scroll makes it work.
Thats it.
Keep the good work, mate.
Cheers! :)
Damian, great job in resolving that! I knew there had to be a way to get Opera to behave. I just didn’t have the time to hack away at it.
I added your code to the demo and updated the article to give you credit.. Thanks!
You’re welcome; always nice to help the comunity.
Oh, and thanks a lot for the credit, very kind of you :)
Hey, this is really great. Thanks!
But I noticed that it breaks the back button (using Firefox 3.0.17 on Linux). Is this happening for anyone else? Internal anchors on other pages I visit do not break the back button. But still an awesome tip.
The back button will fail with JavaScript enabled, which is a common problem with deep linking via JavaScript. In this case, it’s not as important because this is a content-switcher that would not take up the whole page anyhow.
Very nice, this will come in handy on a good number of projects, and Damian thanks for the tip to help it work properly in Opera. I’ll see how it goes and how this can be expanded.
Not sure how it was supposed to work, but worked fine in opera for me (v10.5), just without the animation of the javascript version
It was the non-JavaScript version that was not working in Opera 10.10. It works fine now, but I would be curious to test in Opera 10.5. Were you talking about the JS version, or the non-JS version?
Interesting and very useful. I’ll try this soon. Thanks!
Very nice!
In both demo versions (with & w/o jQuery),
when you click on a [#] button, the big #, switches OK.
But…the entire page view jumps to the bottom.
(ie: the Top Title:
“Adding jQuery to Enhance the Content Switcher”
disappears from view , and you see the bottom links of the page:
“< Go back to the tutorial").
Is there a way to avoid the page jumping to the bottom,
when you click a [#] button?
– in Firefox 3.5.8/XP-SP2 (jumps to page bottom)
– in CHROME works fine! (no jumps, smooth transitions…)
SFdude
Please, disregard my previous post.
It works just fine in Firefox 3.5.8.
The jumping effect (described in my prev post),
was due to my browser Zoom level being at 120%,
(which I need due to poor vision),
So, my new question is:
——————————-
how to modify the script to avoid the “jump effect”
if the User has set his browser to a Zoom View > 100% ?
Thanks!
SFdude
Hey SF,
I’m glad you pointed that out. Basically, that’s happening because I’ve enabled deep-linking via JavaScript. Each click changes the hash (#) in the URL, thus “visiting” that hash, the same as an internal page link (for example, with JS disabled on the first demo).
So, to prevent the “jump” from happening, just comment out lines 57-59 in the JS, which looks like this:
if (location.hash !== "#") { location.hash = "#"+myClicked[1]; }The jump will still happen, however, in the non-JS version, because it uses in-page anchors to work. And, as you pointed out, this really only occurs when the page is zoomed, so it wouldn’t really be much of an issue, I don’t think.
I was just about to ask how to avoid the “jump”
I just tried that and it works perfectly … Something weird it still jumping on the first item … but not a problem :)
Thank you
awesome !! Thanks Louis :) I’ll try this.
Thx alot really nice!
I like it a lot. Just wonder how this affects accessibility with the back button. When you click through the different content, you cant then click the browser back button to return to the previous page.
Regardless – great technique!
Thanks, Iggy.
A content switcher like this doesn’t normally rely on the back button, anyhow, so I think that drawback is acceptable.
This is a great find, Louis. I’ve wanted a better way to present JS-less pages for months…I’m off to replace the js in my custom pages with this.
Is ther a way to personnalize links so they can gather information from server using Ajax?
Hi,
Thanks alot for this, I love using jQuery, but am always trying to use methods that fallback nicely when javascript is disabled, and this is perfect.
I’m ok implementing pre-built jQuery effects, but don’t really understand the language itself at the moment, something I want to work on this when I get some time… But is it possible to make this cross-fade between the different content, rather than the fade out to blank and then fade back in… I’ve attempted to modify sections of the coding, but to no reward so far lol….
So if anyone could help, and guide me to what I’d need to modify to achieve a cross-fading effect it would be greatly appreciated.
Cheers
Rob
Really a good work…
Thank you !
Thanks for the help, will try this out. Will be useful to me. Thanks for sharing.
It would be great if there was a non-JS way to make this work for images of differing sizes and shapes, but as is, this is a fantastic solution for a fixed viewport image gallery.
Thank you.
This is pretty straight-forward, what every competent front-end web developer would do to make their site/slide accessible even without JS.
A sliding example can be found here http://bit.ly/5u3abB . Disable JS to see how it falls back.
Its good to have a tutorial for it anyway :)
WARNING! This is not a link to a tutorial or other information regarding a failable JS sliding alternative t to this content switcher (as the comment indicates). It’s really just a link to some assets you can purchase at Theme Forest. And what’s worse is that the assets linked herein are for vcard implementations, not sliding content management.. By principle alone, you should avoid any content provided by this spammer, I will.
I’m not sure why you take issue with his link. He linked to a content slider, and that’s what it is. Who cares if it’s not a tutorial?
I don’t have a problem with that link, because it’s on topic.
This is a very open minded approach of a common problem.
My first guess was an iframe (just lame), but looking your code was just surprising!
Thanks for posting this.
Interesting article. I never would of thought to do something like this. However now that I’ve read this it makes me wonder what more I could be doing with css. Thanxs for making me think.
Have you any idea how to incorporate this script/css in a WordPress page? Would like to incorporate it into my home screen.
Thanks for the awesome info!!
Hi
Great content glider, thanks!
I wonder just, why can’t I change the light blue colored back ground into an image, like
background-image: url(../images/myimage.jpg);
Am I missing something?
Thanks
Mitch, are you talking about the grey background? It’s declared on the list element (<li>) as “background: #ccc;”. If you change it, you have to make sure you remove that declaration completely, replace it with the new “background-image” declaration, and make sure your image is in the correct location relative to the CSS file. Other than that, I don’t know what else to suggest..?
nice tips
maybe I must implemented in my website..
thank you
HI, nice post!
Any one, know if this can be adapted (supporting no javascript) to use only two buttons for the switch?(. Previous and Next button. )
Regards!
Esteban
You can’t do it that way unless you use JavaScript. The internal page anchors are needed to target the sections, and if you had a “next” button, it would not know which section to go to unless you specified it, or else changed it dynamically via JavaScript.
Hi Esteban,
I came across this yesterday by good ol’ Stu Nicholls:
http://www.cssplay.co.uk/menu/click-gallery-previous-next.html
He has done the Next / Previous thing – javascript free and also working from IE6 to Opera…
Mine also jumps so how do you comment out ?
I am very new to JavaScript, also can i get this to animate with a function is there
a function we can add i didn’t see any in the post thanks for any help.
Stuart,
For the “jump”, that only happens in the non-js version. If you have a larger screen size, you won’t see the jump, because the jump is just the fact that the page is trying to locate the internal anchor location (the hash in the URL).
To view the JS version with animation, here is the link:
http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html#four
You won’t see any jump on that one, because the JS code uses “return false” to prevent the value of the HREF from being followed.
Louis thanks for the super fast response . It is a great slider as i had mentioned before i am so new to JavaScript. Making websites is a hobby of mine ,that i really enjoy. I am by profession a Musician
so these forums give me hope for a better understanding thanks for your help. Stuart M.
The jump definitely happens with the javascript version too, which makes the design unusable for designs that go off the bottom of the screen.
Great little find, this. I’m redoing my site at the moment, and this perfectly balanced ease of use with flexibility. Thanks for publishing it, Louis.
I have been trying to adapt this code to use Ajax to load the various pages and I can’t get it to work.
I have tried preloading the content and rebuilding the for the inner-div using AJAX, but that didn’t work.
I have tried calling the AJAX loadpage function when a nav item is clicked, but that didn’t work either.
Any suggestions? (Thanks for your great help, btw)
Jason,
You’re going to have to provide an example page, so I can take a look at it. Or you could email me the whole thing. Use the contact page on this website, and we can discuss it, but only if you have an example to show me, otherwise I can’t really help you much.
A great script and thanks very much for sharing :)
This is fantastic! I’m a jQuery beginner and loved your tutorial on sliding folders — any chance you could do a similar one for the jQuery file behind the “enhanced” version of this content switcher?
First: this is perfect! a easy to understand code even for beginners, Thanks
Now, im using the JS Version and i wonder if it is possible to add a automatic rotator, like the content switches every few seconds.
Is there an “easy” way to add previous/next buttons? (understanding it wont work without JS…. My target audience has JS enabled.) I like the simplicity of your slider and the hash tag access. I simply need to add prev/next and I’m set.
Also, (without wanting to sound greedy) is it possible to target the hash tags from on the same page and still have it animate? for instance, redundant quick links that live on the page that would jump to a specific slide while keeping the animations. Thanks for any help. Great work.
WOW!!! IMPRESSIVE!
Unfortunately, it doesn’t seem to work with screen readers with JS turned off. I tested with three screen readers using Firefox 3.6 and IE8. Firefox crashed when using JAWS. Otherwise, all numbers in the first list are displayed. Being busy (lazy?), I haven’t checked out the code yet. If off-lefting or something similar is being used, that is not hidden from screen readers.
Andrew
Unfortunately, it doesn’t seem to work with screen readers. I have just tested with three in both Firefox 3.6 and IE8. Firefox crashed when using JAWS. Otherwise, all numbers in the first list appear. The enhanced version works well. Being busy (lazy?), I haven’t checked out the code yet. If something like off-lefting is used, screen readers will read that content.
Andrew
Without realising it I had this functionality working quite a few years ago on a site I built for the band I was in:
http://www.syst3m32.co.uk/profiles
It simply switches the profiles without javascript, but when js is enabled it slides between them. Should’ve written about it then, really!
Yep, it works the exact same way.
The problem with yours, however, is that the “previous/next” buttons are still visible when JavaScript is turned off. Those buttons don’t work with JavaScript off. What you should do is insert those elements into the DOM with JavaScript, that way they will only appear to users viewing with JavaScript enabled.
hello, nice trick, but i think that “overflow:hidden” hide content from search engines, so it’s bad for SEO.
A beautifully simple method that I’m surprised hasn’t been seen before.
Added the example to a Tesco miro-site for Garmin: http://direct.tesco.com/p/inc/specials/garmin/
and the direct homepage: http://direct.tesco.com/
Nice find.
Good job on those, Mike. Thanks for the examples.
How do you make the jQuery version automatically go through the slides. Could someone provide the code needed? I run a high-quality advertising agency, and to the avoid the ‘jack of all trades, master of none’ situation, I have somewhat neglected programming! ;) Thanks for your time.
I’m also interested in having the slides change automatically. Did anyone get this to work?
This is a brilliant post, @louis thank you!
Regarding the ‘jump’ that other comments have described. It does unfortunately make the process particularly frustrating (from a user perspective) if you’re being moved about the screen all the time!
The solution I’m assuming will work (although not tested) to avoid the jump, is to make sure the navigation and content is a) in the same window and b) the navigation is actually above the content. It is just a guess and I’m going to test it tomorrow.
However, failing that is there another solution as it would be a shame not to use this because of the pesky jump!
(I appreciate that there’s a workaround for when js is turned on it’s just I’m trying for a pure CSS design with no aesthetic javascript)
Cheers, great job
Sam
There is quite a big problem with this whereby if there is a trailing hash in the url when the page is refreshed, then the whole thing breaks and all the content is displayed.
Also, I don’t know why but I just can’t get my version to work in IE7
I’ve included the website in my details, if you fancy a look.
Very cool! Is there a way to make the first piece of content that loads show an active state in the menu? Right now it doesn’t show it as active in the menu until you click it.
Hi
Love this app, however have a slight problem with it, the first li element doesn’t appear until you click the link for it. i want it to display immediately on loading the page, as in the demo!
Any ideas why it would not automatically display?
Cheers,
Ash
Hi,
Great post. Is there a way to make the non-javascript version automatically scroll through the content blocks without having to press the button.
I’m thinking of using this as of way of displaying some screenshots of a product, but without making the user click on small thumbs.
I realize that the scroll script will have to be javascript.
Thanks,
Well, you’d have to code that yourself. I did code an auto-sliding one here:
http://www.impressivewebs.com/mlb-switcher
But that one’s really complex, modelled after the one on MLB.com.
Thanks, will have a look and see if its worth the trouble doing the auto switching.
Well i got it work it on my site, but i have the same problem as one of the users above with the page jumping to the top.
Here’s another tip, if you wish to change the link names e.g from “http://mysite.com/index.html#one” to “http://mysite.com/index.html#Myname”. You simply have to go into general.js and edit line 34 from:
if (contentCollection[i].id !== "one") {To
if (contentCollection[i].id !== "Myname") {Or whatever you want to name the link
Hi Louis,
great work, but I´m trying to give the active tab another color. It will not work. Can you help??
If you’re referring to the version without JavaScript, then you can declare “focus” styles. For example:
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?
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.
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 .
Hi, Nat.
This is easy to fix: In your HTML, you’ve put the
<div id="home">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.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.
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.
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
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!
Interesting and very useful. I’ll try this soon. Thanks!
¡Muchas gracias! Me salvaste.
This is awesome BUT anchor links are scrolling the page :(
I’ve spend several hours and couldn’t figure how to prevent site from scrolling. If you don’t know what I’m talking about just go to your demo, scale window down, scroll a little bit down and press content switcher link, page will jump to the top. I can’t use it like this in my page and I need this so much.
Regards
You can’t avoid that unless you use the JavaScript version. Only like 3% of users have JS disabled, so I wouldn’t worry too much about it. So they will get a slight jump, no big deal. It’s still accessible as far as I know.
See the JS version here:
http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html#four
That one doesn’t have the page jump problem.
Thanks for the reply but unfortunately javascript version doesn’t solve it. Page still jumps when clicked (firefox, chrome).
I’ve tested it, there’s no page jump in that version. I’m not sure why you’re seeing a page jump.
Yep… if you click last switch link (in this example “5”). Other than that there’s jumping between links. I had to take other javascript based content switcher. But thank you anyway.
Wow, you were right, for some reason only one of the links was causing a jump but the others were fine (for me it was link #1).
Well, I looked at the code and I couldn’t believe how awful the JavaScript was, so I rewrote the whole thing:
http://www.impressivewebs.com/demo-files/content-switcher-javascript/
There is no jump now, and the code is much cleaner and more efficient. Anyhow, this script wasn’t really meant to be used on a real site, but more to show that the “switch” functionality can be made to work even when JS is disabled.
I get the jump on the non-js version and I’m on a large screen res. I also get the jump on the js version so not able to use this.
Hi Louis, i loved your Content Switcher and I have a question for you:
I’m trying to turn it into a slideshow (keeping navigation), so that the slides switch automatically and when the cursor is on the slide, the slideshow stops … may you will prompt as this can be done?
(I tried a few hours but could not achieve required effect)
That’s a lot more complicated than what I have here. I’ve created two other slide-type scripts:
http://www.impressivewebs.com/mlb-switcher/
http://www.impressivewebs.com/jquery-vertical-news-slider/
Probably the first one is more like what you want.
As for making it stop, you’d have to just detect ‘hover’ and respond to that. The MLB script has a ‘play/pause’ button, so you might want to use that to form the basis of ‘hover/no-hover’.
But I wouldn’t have the time to write this for you, sorry. :)
Thanks Louis!
http://www.impressivewebs.com/mlb-switcher/
this one is great!
I love the simple code and the fact that it doesn’t depend on Javascript. I wonder if previous and next buttons can be implemented by using PHP. Any ideas?
Thank you for this tutorial. I would like to implement it on my website. What can I do to center the navigation buttons under the slideshow?
I found a solution here. I combined this information with your code and voila, perfectly centered buttons. Should work in most browsers too.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Yeah, Matthew has some good cross-browser stuff he’s written over the years. I also have a solution here:
http://www.impressivewebs.com/center-multiple-divs/
How do you add transitions with CSS3 to make the content fade or slide in?
Thanks
i am so long search this I found a solution here