Hello, this is giving me some errors, it worked a day before yesterday, tormented me yesterday and again working today. I have uploaded it in a fiddle, please review this code, Is this correct or will it give me errors some time later again? Is there a way to disable Previous and Next buttons in this when we reach first and last div repectively.
In the HTML I have a div with class ‘zdivs’ in which there are several divs d0 to d9 and having class hidepiece, they are hidden at first but shown either by clicking previous next anchors or by respective index. Again anchors are grouped in several sub-heads and in final page they will be in different sections or divs.
<div class="zdivs">
<div id="d0" class="hidepiece">
1.Lorem ipsum dolor sit amet
</div>
<div id="d1" class="hidepiece">
2. consectetuer adipiscing elit
</div>
<div id="d2" class="hidepiece">
3. sed diam nonummy nibh euismod tincidunt
</div>
<div id="d3" class="hidepiece">
4. laoreet dolore magna aliquam erat volutpat
</div>
<div id="d4" class="hidepiece">
5. Ut wisi enim ad minim veniam
</div>
<div id="d5" class="hidepiece">
6. Lorem ipsum dolor sit amet
</div>
<div id="d6" class="hidepiece">
7. consectetuer adipiscing elit
</div>
<div id="d7" class="hidepiece">
8. sed diam nonummy nibh euismod tincidunt
</div>
<div id="d8" class="hidepiece">
9. laoreet dolore magna aliquam erat volutpat
</div>
<div id="d9" class="hidepiece">
10. Ut wisi enim ad minim veniam
</div>
</div>
<br/>
<a class="prev">Prev</a>
<a class="next">Next</a>
<br/>
<h4>Group1</h4>
<a class="anc" id="an0">A1</a>
<a class="anc" id="an1">A2</a>
<a class="anc" id="an2">A3</a>
<a class="anc" id="an3">A4</a>
<br/>
<h4>Group2</h4>
<a class="anc" id="an4">B1</a>
<a class="anc" id="an5">B2</a>
<a class="anc" id="an6">B3</a>
<a class="anc" id="an7">B4</a> <br/>
<h4>Group3</h4>
<a class="anc" id="an8">C1</a>
<a class="anc" id="an9">C2</a>
//-One by one navigation class anc hidepiece-->
$(document).ready(function() {
$("div.hidepiece").hide();
$("a.anc").click(function() {
var id = $(this).attr("id");
var divId = id.replace("an", "d");
$("div.hidepiece").hide();
$("div#" + divId).fadeIn("slow");
$("#zdivs").scrollTop(0);//scrolls zdiv to top
});
});
// script for previous next -->
$(document).ready(function(){
$(".zdivs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$(".next").click(function(){
$("#zdivs").scrollTop(0);
if ($(".zdivs div:visible").next().length != 0)
$(".zdivs div:visible").next().fadeIn("slow").prev().hide();
else {
$(".zdivs div:visible").hide();
$(".zdivs div:first").fadeIn("slow");
}
return false;
});
$(".prev").click(function(){
$("#zdivs").scrollTop(0);
if ($(".zdivs div:visible").prev().length != 0)
$(".zdivs div:visible").prev().fadeIn("slow").next().hide();
else {
$(".zdivs div:visible").hide();
$(".zdivs div:last").fadeIn("slow");
}
return false;
});
});
Thanks a lot…