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.
