Jquery SlideDown work occasionally

Question

i use google chrome and the slideDown doesn't work correctly. Sometime the div go down, some time still closed, i have to refresh the page and wait when it decide to slideDown. This is the code:

HTML

<header>
<div class="container">
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barratop.png" />
        <div id="box_body" class="content mCustomScrollbar light" data-mcs-theme="minimal">
            <div id="box_text" >
                <form name="termini" action="core.register_1.php" method="post">
                <?php include_once "../text/regolamento.html"; ?>
                <p class="button">
                <input id="check" src="../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png" 
                type="image" onMouseOver="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accetton.gif'" 
                onMouseOut="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png'" />
                <input name="rego" value="ok" type="hidden" />
                </p>
                </form>
            </div>
        </div>
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barradown.png" />
</div>

CSS

.container {
    width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
#box_body {
    width: 530px;
    height: 460px;
    position: relative;
    text-align: justify;
    overflow-y: hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: none;  
}
#box_text {
    position: relative;
    float: left;
}
.button {
    position: relative;
    text-align: center;
}

JAVASCRIPT

$(document).ready(function(){
    $("#box_body").slideDown(2500);
});

Sometime it slide Down sometime no... MY LINK: http://khchapterzero.altervista.org/core/core.register_0.php

Answer 1

slideDown() does work perfectly. The problem is, that your scripts are placed higher in the DOM index than stylesheets:

<script src='../themes/custom/js/jquery.min.js'></script> 
<script src='../themes/custom/js/jquery.main.js'></script> 
<script src='../themes/custom/js/jquery.scrollbar.js'></script> 
<script src='../themes/custom/js/jquery.register_0.js'></script> 
<link rel='icon' href='../themes/custom/images/engine/icon.png' type='image/x-icon' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/main.css' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/register_0.css' /> 
<link rel='stylesheet' href='../themes/custom/css/Scrollbar.css' />

This is the part of your CSS that sometimes keeps your #box_body hidden :

#box_body {
    ...
    display: none;  
}

Your display: none; CSS style is sometimes applied to the element after slideDown(); because your stylesheet file is sometimes loaded after the script file.

Good practice is to place CSS stylesheets inside <head> tag and scripts right before close </body> tag.

Jquery SlideDown work occasionally

Question

1 answers

solution1
2 ACCPTED 2015-02-16 17:51:43

Jquery SlideDown work occasionally

Question

1 answers

solution1 2 ACCPTED 2015-02-16 17:51:43

solution1
2 ACCPTED 2015-02-16 17:51:43