CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Boardy
Boardy

Reputation: 36205

Keeping gap between hidden elements to avoid jumping position

I am working on a website and I have a div which is hidden when the page loads, but keeps a small gap between the top header element, and a form.

Under a certain condition, javascript is used to add a class the message div and show a message to the user, after a 5 second timer, the message is then faded out and the classes removed, with another class added to keep the gap between the header element and the form, however, this isn't working, instead when the message div is faded out, the form jumps to the position of where the message was.

Below is my StyleSheet

#message
{
    height: 50px;
}

.messageBlank
{
    width: 800px;
    height: 50px;
    background-color: transparent;
    border: none;
    margin-left: auto;
    margin-right: auto;
}

.messageError
{
    width: 800px;
    height: 50px;
    background-color: #ff5555;
    border: solid red thin;
    margin-left: auto;
    margin-right: auto;
}

Below is my javascript which controls showing and hiding the message box

var timer = null; 
var MessageTypeEnum = {"error":1, "workingOrComplete":2}
function showMessage(persistent, message, type)
{
    clearTimeout(timer);
    //$('#message').css({
    //    position:'absolute',
    //    padding: '10px',
    //    left: ($(window).width() - $('#message').outerWidth(true))/2
    //});

    $("#message")
        .hide()
        .html(message);

    //if (type == "error")
    if (type === MessageTypeEnum.error)
    {
        $("#message").addClass("messageError");
    }
    //else if (type == "workingComplete")
    else if (type === MessageTypeEnum.workingOrComplete)
    {
        $("#message").addClass("messageWorkingComplete");
    }

    $("#message").fadeIn("slow");
    if (!persistent)
    {
        timer = setTimeout("hideMessage()", 5000);
    }
}

function hideMessage()
{
    $("#message")
        .fadeOut("slow", function()
        {
            $("#message").removeClass("messageError");
            $("#message").removeClass("messageWorkingComplete");
            $("#message").addClass("messageBlank");
        });
}

Below is my HTML

<body>
        <div id="container">
            <header>
                <a href="http://www.boardiesitsolutions.com" title="Return to Boardies IT Solutions"><img src="../images/header.png" alt="header" /></a>
                <span style="font-weight: bold; padding-left: 50px; color: white; top: 0px; position: absolute;">Boardies Bug Reporter</span>
            </header>

            <div id="content">

                <div id="errorToolbox">&nbsp;</div>

                <div id="message" class="messageBlank">&nbsp;</div>

                <form action="javascript:validate();" novalidate>
                    <table>
                        <tr>
                            <td>Username: </td>
                            <td>
                                <input type="text" id="txtUsername" name="txtUsername" autofocus required placeholder="Username" />
                            </td>
                        </tr>
                        <tr>
                            <td>Password: </td>
                            <td>
                                <input type="password" id="txtPassword" name="txtPassword" required placeholder="Password"
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td class="buttonGroup">
                                <input type="submit" value="Submit" />
                                <input type="reset" value="Reset" />
                            </td>
                        </tr>
                    </table>
                </form>

            </div>

Upvotes: 1

Views: 202

Answers (1)

antyrat
antyrat

Reputation: 27765

If you want to keep a gap you should use fadeTo() method. For example to hidde element you can do:

$("#message").fadeTo( 200, 0, function()...

and to show

 $("#message").fadeTo( 200, 1);

Where 200 is time in ms of how fast your animation should work.

This method will just change opacity of element and will keep it original height

Upvotes: 1

Related Questions