Loading Icon

NZ_Kiwis

I want my website (very small simple page) to display this loading icon for 2 (or so) seconds before loading my page

http://www.rleague.com/ajaxtabs/loading.gif

also how can i get my page to display different pages (panelsi guess) inside it with a hyper link?

i guess displaying different <div> tags?

is this something in javascript?

johanafm

A simple javascript to manipulate CSS classes is enough. Something along these lines should do it

<script type="text/javascript">
function displayTab(id)
{
	var d = document;
	var ms = d.getElementsByClassName('tab_menu');
	var ts = d.getElementsByClassName('tab');

// there _should_ be same number of menu items and tabs
for (var i = 0; i < ms.length && i < ts.length; ++i)
{
	if (ms[i].id == 'tab_menu' + id)
	{
		ms[i].className = "tab_menu selected";
	}
	else
	{
		ms[i].className = "tab_menu";
	}
	if (ts[i].id == 'tab' + id)
	{
		ts[i].className = "tab selected";
	}
	else
	{
		ts[i].className = "tab";
	}
}

}
</script>
<style type="text/css">
.tab
{
	display: none;
}
.tab.selected
{
	display: block;
}
div
{
	width: 400px;
	margin: 20px;
}
.tab_menu
{
	color: #00A;
	text-decoration: none;
}
.tab_menu.selected
{
	font-weight: bold;
	font-size: 120&#37;;
}
a + a
{
	margin-left: 12px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
<a id="tab_menu1" class="tab_menu selected" href="javascript:displayTab('1');">Menu #1</a>
<a id="tab_menu2" class="tab_menu" href="javascript:displayTab('2');">Menu #2</a>
<a id="tab_menu3" class="tab_menu" href="javascript:displayTab('3');">Menu #3</a>
</div>
<div class="tab selected" id="tab1">
111 111 111 111 111 111 
</div>
<div class="tab" id="tab2">
222 222 222 222 222 222 
</div>
<div class="tab" id="tab3">
333 333 333 333 333 333 
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>