JQuery slideDown() function doesn't push elements but hides them

Question

I am facing problem in designing a banner. Please, take a look at this JSfiddle . The banner should appear aftewr 3 seconds, moving all page elements down according to it's height and slideUp() after 3 minutes, restoring page elements position. Basically, I would like it to work like this :

Here is my page:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Banner</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script>
    var minutes, seconds;

    $(function() {
        initBanner('#banner');
    });

    function initBanner(bannerId) {
        /*      if (getCookie('FIRST_VISIT') == "") {
         setCookie('FIRST_VISIT', 'true', 180);*/
        $(bannerId).hide();
        $(bannerId).delay(3000).slideDown();
        var target_date = new Date().getTime() + 184000;
        var timer = setInterval(function() {

            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;

            seconds_left = seconds_left % 86400 % 3600;

            minutes = parseInt(seconds_left % 86400 % 3600 / 60);
            seconds = parseInt(seconds_left % 86400 % 3600 % 60);

            if (seconds < 10) {
                seconds = '0' + seconds;
            }

            if (minutes == 0 && seconds == 0) {
                clearTimeout(timer);
                $(bannerId).slideUp();
            }
            // format countdown string + set tag value
            document.getElementById('countdown').innerHTML = minutes + ":"
                    + seconds
            " ";
        }, 1000);
        //}
    }

    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ')
                c = c.substring(1);
            if (c.indexOf(name) != -1)
                return c.substring(name.length, c.length);
        }
        return "";
    }
</script>
<style>
body {
    background-color: #000000;
    color: #ffffff;
}

#banner {
    position: fixed;
    top: 0;
    width: 100%;
}

.logo {
    float: right;
    margin-right: 75px;
    margin-top: 10px;
}

.countdown-timer {
    float: right;
    text-align: center;
    margin-right: 1%;
    line-height: 80px;
    font-size: 44px;
    background: -webkit-linear-gradient(#d8ff00, #a5ff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: lighter;
}

.top {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    min-width: 950px;
    padding-bottom: 5px;
    height: 80px;
    background-color: #353535;
}

.epoint {
    position: fixed;
    padding: 0.7%;
    margin-top: 5px;
}

.header {
    width: 60%;
    float: left;
    margin-top: 1%;
    margin-left: 15%;
    font-size: 15px;
    color: #ffffff;
    line-height: 20px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
        Verdana, Tahoma, sans-serif;
    margin-left: 15%;
}

.headerspan {
    font-size: 15px;
    color: #d8ff00;
    line-height: 20px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
        Verdana, Tahoma, sans-serif;
}
</style>
</head>
<body>
    <div id="banner" class="top">
        <div>
            <div id="myimage4" class="topline"></div>
            <img id="epoint" class="epoint"
                src="http://www.dropticker.com/epoint.png" />
            <div id="myimage" class="header">
                Get an App like this and skyrocket your sales. Since it's
                your first visit, <span class="headerspan">click here to get
                    early access + a free month.</span>
                <p>This offer will disappear forever in 3 minutes so don't miss
                    out!</p>
            </div>
            <img class="logo" src="http://www.dropticker.com/dropticker_logo.png" />
            <div class="countdown-timer" id="countdown"></div>
        </div>
    </div>
    <div>Lorem ipsum</div>
</body>
</html>

Can anyone help me with this? Every useful answer if highly appreciated and evaluated.

Thank you.

Answer 1

Change the CSS, this should do it:

#banner {
    position: relative;
}

and add this:

$(function() {
        initBanner('#banner');
        $(window).scroll(function(e){
            var top = $(document).scrollTop();
            if(top == 0){
                $('#banner').css('position', 'relative');
            }else{
                $('#banner').css('position', 'fixed');
            }
        });
    });

get it working here: http://jsfiddle.net/65akxewz/

JQuery slideDown() function doesn't push elements but hides them

Question

1 answers

solution1
1 ACCPTED 2014-10-05 10:53:07

JQuery slideDown() function doesn't push elements but hides them

Question

1 answers

solution1 1 ACCPTED 2014-10-05 10:53:07

solution1
1 ACCPTED 2014-10-05 10:53:07