JQuery/JavaScript confusion with Previous and Next buttons.

Posted by Anders H on Stack Overflow See other posts from Stack Overflow or by Anders H
Published on 2010-06-10T21:18:28Z Indexed on 2010/06/10 21:23 UTC
Read the original article Hit count: 439

Filed under:
|
|

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);">&laquo; previous</a><a id="nextContent" href="javascript:void(0);">next &raquo;</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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery