Switch content (unobtrusive js)

This is the same as this page except I've added a some extra bits for the 'current' style.

Story A
Story B
Story C

Explanation : Part 1

When the page loads, the hidestories() function is called (with the 'window.onload' bit). This finds the #stories div then hides all the divs inside that with the class 'story' and makes them 'display:none;'. Then, to show the first story onload, a variable is sent to the stories() function.

The stories() function assigns another function (with no name) to the onclick event of each of the links at the top. It finds the element with the id #thebuttons and identifies the links in that. The function that is attached to the links first runs the hidestories() function, then takes the part of the link after the '#' and turns it into a variable. The div that was being linked to is then displayed ('display:block;') and the link itself returns false.

Explanation : Part 2

The good thing about this is that if javascript is disabled, the links will work as normal and all the content will still be readable.

The bad thing about this - just like on (the page I had here before) - is that when the page first loads, you can see all of the content for a second before the javascript kicks in and hides it. If you're on an intranet and are able to control the browsers, or if you just don't care about those without javascript, you can fix this by setting the class 'story' to 'display:none;' in your CSS.

Explanation : Part 3

There are some rules for the 'current' class in the CSS. The 'current' class is assigned to the li of the first button onload. The onclick function has a bit to set the add the 'current' class to the clicked button, and the 'hidestories2' function has a bit that removes the 'current' class from the other buttons.

Of course, you can also do this whole 'switch content' thing with AJAX. My demo uses AJAX (basically javascript, php, and the xml 'httprequest') to change the content of the page by only refreshing the content part. This also doesn't work if javascript is disabled, so my demo uses PHP to include the content into a template page if the javascript fails.

HTML
<h1>Switch content (unobtrusive js)</h1>

<p>This is the same as <a href="br.php?page=switchcontent3">this page</a> except I've added a some extra bits for the 'current' style.</p>

<ul id="thebuttons">

<li><a href="#storyA">Story A</a></li>

<li><a href="#storyB">Story B</a></li>

<li><a href="#storyC">Story C</a></li>

</ul>

<div id="stories2">

	<div id="storyA" class="story">

	<h2>Explanation : Part 1</h2>

	<p>When

the page loads, the hidestories() function is called (with the

'window.onload' bit). This finds the #stories div then hides all the

divs inside that with the class 'story' and makes them 'display:none;'.

Then, to show the first story onload, a variable is sent to the stories() function.</p>

	<p>The

stories() function assigns another function

(with no name) to the onclick event of each of the links at the top. It

finds the element with the id #thebuttons and identifies the links in

that. The function that is attached to the links first runs the

hidestories() function, then takes the part of the link after the '#'

and turns it into a variable. The div that was being linked

to is then displayed ('display:block;') and the link itself returns

false.</p>

	</div>

	<div id="storyB" class="story">

	<h2>Explanation : Part 2</h2>

	<p>The

good thing about this is that if javascript is disabled, the links will

work as normal and all the content will still be readable.</p>

	<p>The bad thing about this - just like on  (<a href="http://bonrouge.com/br.php?page=switchcontent">the page I had here before</a>)

- is that when the page first loads, you can see all of the content for

a second before the javascript kicks in and hides it. If you're on an

intranet and are able to control the browsers, or if you just don't

care about those without javascript, you can fix this by setting the

class 'story' to 'display:none;' in your CSS.</p>

	</div>

	<div id="storyC" class="story">

	<h2>Explanation : Part 3</h2>

	<p>There are some rules for the 'current' class in the CSS. The 'current' class is assigned to the li of the first button onload. The onclick function has a bit to set the add the 'current' class to the clicked button, and the 'hidestories2' function has a bit that removes the 'current' class from the other buttons.</p>

	<p>Of course, you can also do this whole 'switch content' thing <a href="http://bonrouge.com/br.php?page=ajaxswitch">with&nbsp;AJAX</a>.

My demo uses AJAX (basically javascript, php, and the xml 'httprequest')

to change the content of the page by only refreshing the content part.

This also doesn't work if javascript is disabled, so my demo uses PHP

to include the content into a template page if the javascript fails.</p>

	</div>

</div>

CSS
#thebuttons {

list-style:none;

width:24em;

margin:auto;

}

#thebuttons li {

float:left;

width:8em;

font-weight:bold;

background-color:yellow;

padding:0.5em 0;

margin:1em auto;

text-align:center;

}

#stories2 {

width:30em;

margin:1em auto;

border:1px solid purple;

clear:left;

padding:1em;

}

#thebuttons .current a{

color:maroon;

border:1px solid red;

}

Javascript
function hidestories2() {

var divs=document.getElementById('stories2').getElementsByTagName('div');

for (j=0; j<divs.length; j++) {

    var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");

	if (rE.test(divs[j].className)) {

		divs[j].style.display="none";

		}

	var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');

	for (k=0; k<thebuttons.length; k++) { // loop throught the buttons and remove the 'current' class

		var li=thebuttons[k].parentNode;

		li.className=li.className.replace(new RegExp("current"+"\\b"), "");

		}

	}

}



function stories2(first) {

var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');

for (i=0; i<thebuttons.length; i++) {

	thebuttons[i].onclick=function() {

		hidestories2();

		var thestory=(this.href).split("#",2)[1];

		document.getElementById(thestory).style.display="block";

		this.parentNode.className+=" current";  // set the 'current' class to the clicked button

		return false;

		}

	}

	if (first) {

		var firstone=document.getElementById('stories2').firstChild;

		if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}

		firstone.style.display="block";

		var firstbutton=document.getElementById('thebuttons').firstChild;

		if (firstbutton.nodeType != 1) {firstbutton = firstbutton.nextSibling;}

		firstbutton.className+=" current"; // set the 'current' class to the first button

	}

}

window.onload=function() {

hidestories2(); 

stories2(1);

}

Comments

2007-02-26 Ivonne says :

Thanks! It looks great. I'm new to JavaScript, course I don't know why since it adds so much more functionality. But I have been reading a lot online and bought a few books. Thanks again!

2007-11-14 Igor says :

Nice! I got it working, thank you for sharing.

- Igor

2008-07-28 CK says :

Huge thank you!

2009-10-20 code czar says :

Thanks! Works great!

Comment on this page

Switch content (unobtrusive js)

Explanation : Part 1

Explanation : Part 2

Explanation : Part 3

Comments

BB code available :