JQuery/JavaScript confusion with Previous and Next buttons.
- by Anders H
I've got some inherited JQuery code that isn't working as I'd think and I'm just not even sure what to research or look up next.
The Problem:
I've got a few DIVs within the HTML: a container, a "frame" and the content. If the content is longer than the frame, it's cut off using overflow:hidden and a Next - button appears. The next button works correctly. However, there's also a previous button with similar code, but it does not work as expected and just displays whenever the next button does. Whenever either button is hidden, it will not reappear again when navigating back through the "pages". When the I may be overlooking something in the code, but here it is in full.
The HTML:
<div id="draggable" class="ui-widget-content">
<div id="draggable-title" class="cufon">about</div>
<a id="draggable-close" href="javascript:void(0);"><div class="close-img icon"></div></a>
<div class="clear"></div>
<div id="draggable-frame">
<div id="draggable-content">
</div>
</div>
<a id="prevContent" href="javascript:void(0);">« previous</a><a id="nextContent" href="javascript:void(0);">next »</a>
</div>
The JavaScript:
$(function() {
$("#draggable").draggable();
});
$(document).ready(function(){
$("#draggable-frame").scrollTop(0);
$("#prevContent").click(function(){
$("#draggable-content").fadeOut("medium");
setTimeout("showPrev()", 250);
if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height())
{
$("#prevContent").hide();
}
$("#draggable-content").fadeIn("medium");
});
$("#nextContent").click(function(){
$("#draggable-content").fadeOut("medium");
setTimeout("showNext()", 250);
if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height())
{
$("#nextContent").hide();
}
$("#draggable-content").fadeIn("medium");
});
$("#draggable-close").click(function(){
$("#draggable").fadeOut("medium");
});
$("#prevContent").hide();
$("#nextContent").hide();
showContent("about");
$(".opener").click(function(){
$("#draggable-frame").scrollTop(0);
$("#draggable").fadeIn("medium");
showContent($(this).attr("title"));
});
});
//
function showPrev()
{
$("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() - $("#draggable-frame").height());
}
//
function showNext()
{
$("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() + $("#draggable-frame").height());
}
function showContent(title)
{
$("#draggable-title").html(title);
$("#draggable-content").html($("#"+title).html());
Cufon.replace('.cufon', { fontFamily: 'cav', hover: true });
$("#nextContent").hide();
$("#prevContent").hide();
if($("#draggable-content").height() > $("#draggable-frame").height())
{
$("#nextContent").show();
}
if($("#draggable-content").height() > $("#draggable-frame").height())
{
$("#prevContent").show();
}
}
Even just point me in the right direction to research would be a big help right now. Thank you.
