Menu
Hello people!
Can you help me improving this code?
The problem is when switching the content , shows the number 1 between contents.
I’m using jquery-1.7.2.min.js and jquery-ui-1.8.20.custom.min.js
[B]general.js
[code=html]$(document).ready(
function() {
var currentHash = location.hash.split(“#”);
if (currentHash.length > 1) {
var currentHashString = currentHash[1].toString();
$(“#navigation li a”).removeClass(“selected”);
$(“#navigation li a[href*=”+currentHashString+”]”).addClass(“selected”);
var contentCollection = document.getElementsByTagName(“li”);
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === currentHashString || currentHashString === “”) {
$(contentCollection[i]).delay(800).show(“slide”,{direction: “down”},1000);
} else {
$(contentCollection[i]).hide(“slide”,{direction: “down”},600);
if (location.hash !== “#”) {
location.hash = “#”+currentHash[1];
} // if
} // else
} // if
} // for
} else {
var contentCollection = document.getElementsByTagName(“li”);
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id !== “one”) {
$(contentCollection[i]).hide(“slide”,{direction: “down”},600);
}
} // if
} // for
} // else
$(“#navigation li a”).click(function() {
var myClicked = this.href.split(“#”);
$(“#navigation li a”).removeClass(“selected”);
this.className = “selected”;
var contentCollection = document.getElementsByTagName(“li”);
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === myClicked[1]) {
$(contentCollection[i]).delay(800).show(“slide”,{direction: “down”},1000);
} else {
$(contentCollection[i]).hide(“slide”,{direction: “down”},600);
if (location.hash !== “#”) {
location.hash = “#”+myClicked[1];
}
} // else
} // if
} // for
return false;
} // click func
); // click event
} // anon func 1
); // ready
[B]page.html
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Content Switcher with jQuery as an Enhancement</title>
<link rel=”stylesheet” href=”screen.css” type=”text/css” media=”screen” />
<!–<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2″></script>–>
<script src=”jquery-1.7.2.min.js”></script>
<script src=”jquery-ui-1.8.20.custom.min.js”></script>
<script type=”text/javascript” src=”general.js”></script>
</head>
<body style=”width: 98%;”>
<div style=”width: 625px; margin: 0 auto 0 auto;”>
<h1>Adding jQuery to Enhance the Content Switcher</h1>
<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” class=”selected”>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>
<p>This page uses JavaScript/jQuery to enhance the already-functioning content slider/switcher.</p>
<p><a href=”http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html”>View the page without JavaScript</a></p>
<p><a href=”http://www.impressivewebs.com/javascript-content-switcher-without-javascript/”>< Go back to the tutorial</a></p>
</div>
</body>
</html>
screen.css
[code=html]* {
margin: 0;
padding: 0;
}
img {
border: none;
}
h1 {
line-height: 1em;
font-family: “Times New Roman”, Times, serif;
color: #666;
font-style: italic;
text-align: center;
padding: 30px 0 0 0;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 8px 0;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 1.5em;
margin: 0 0 14px 0;
padding: 30px 0 0 0;
clear: both;
text-align: center;
color: #666;
}
#content-slider {
width: 650px;
overflow: hidden;
height: 300px;
margin: 30px 0 0 0;
border: solid 1px #666;
}
#content-slider-inside {
list-style: none;
height: 320px;
overflow: scroll;
overflow-y: hidden;
}
#content-slider-inside li {
width: 650px;
background: #ccc;
height: 300px;
color: #666;
font-size: 200px;
font-family: “Times New Roman”, Times, serif;
font-style: italic;
text-align: center;
line-height: 300px;
}
#navigation {
list-style: none;
margin: 20px 0 0 0;
float: right;
}
#navigation li {
float: left;
width: 30px;
height: 30px;
text-align: center;
margin: 0;
border: solid 1px #ccc;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 0 5px;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
text-decoration: none;
display: block;
height: 30px;
color: #666;
}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
background: #666;
color: #fff;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background: #666;
color: #fff;
}