Jump to content

jQuery slideDown() slides my div up


etsted

Recommended Posts

Why does my jQuery slideDown() function slide my div up?

 

here is the div that is supposed to get slided down

$statuslist .= '<br><br><br><br> <div class="toggleMsg">msg</div> <div> <div id="status_'.$id.'" class="status_boxes"><div style="background: yellow;"><b>Sent from <a href="user.php?u='.$sender.'">'.$sender.'</a> '.$date_sent.':</b> '.$statusDeleteButton.' <br /></div>'.$status_replies.'</div>';            $statuslist .= '<textarea id="replytext_'.$id.'" class="replytext" onkeyup="statusMax(this,250)" placeholder="write a reply here"></textarea><button id="replyBtn_'.$id.'" onclick="replyToStatus('.$id.',''.$log_username.'','replytext_'.$id.'',this)">Reply</button> </div>';

You may not see it, but right next to the div with class="toggleMsg" there is another div that wraps all of the other content, so that jQuery will select the div right next to it.

 

here is the css style for everything inside $statuslist

<style type="text/css"> /*style the conversation field*/            textarea#statustext{width:982px; height:80px; padding:8px; border:#999 1px solid; font-size:16px;}            div.status_boxes{padding:12px; line-height:1.5em;}            div.status_boxes > div{padding:8px; border:#99C20C 1px solid; background: #F4FDDF;}            div.status_boxes > div > b{font-size:12px;}            div.status_boxes > button{padding:5px; font-size:12px;}            textarea.replytext{width:98%; height:40px; padding:1%; border:#999 1px solid;}            div.reply_boxes{padding:12px; border:#999 1px solid; background:#F5F5F5;}            div.reply_boxes > div > b{font-size:12px;}        </style>

Here is the jQuery style for the div with class="toggleMsg"

$(document).ready(function() {    // trigger the function when clicking on an assigned element    $(".toggleMsg").click(function () {        // check the visibility of the next element in the DOM        if ($(this).next().is(":hidden")) {            $(this).next().slideDown("slow"); // slide it down        } else {            $(this).next().hide("slow"); // hide it        }    });});
Link to comment
Share on other sites

I don't see anything wrong with what you've posted, must be from something else in the file. What is the CSS of the parent element?

Link to comment
Share on other sites

the only other css i have included is in a file

style/styles.css

body { margin: 0px; min-width: 100%;}/* topDiv */                /* #topDiv, the main top div */                 #topDiv{                    min-height: 90px; background-color: #00ff00; margin: 0px; padding: 0px; border: 0px; overflow: hidden;                    min-width: 1000px;                }                                /* used to design the logo */                #topDiv > #Logo{                    margin-left: 30px; float: left; width: 120px; height: 90px;                }                                /* used inside the first div of topDiv */                #topDiv > #inside1_topDiv {                    height: 45px; margin-top: 20px; margin-right: 50px; float: right;                }                                /* use this to change the links that are inside #inside1_topDiv */                #topDiv > #inside1_topDiv > a{                    margin: 20px; color: #004000; text-decoration: none;                }                                /* use this to change the hover state of links that are inside #inside1_topDiv */                #topDiv > #inside1_topDiv > a:hover{                    margin: 20px; color: #ffffff;                }                                /* used inside the second div of topDiv */                #topDiv > #inside2_topDiv {                     height: 45px; margin-left: 20px; border: 1px solid red; float: left;                }                                /* use this to change the links that are inside #inside2_topDiv */                #topDiv > #inside2_topDiv > a{                    margin: 20px; color: #004000; text-decoration: none;                }                                /* use this to change the hover state of links that are inside #inside2_topDiv */                #topDiv > #inside2_topDiv > a:hover{                    margin: 20px; color: #ffffff;                }                                /* used inside the first div of topDiv */                #topDiv > #inside3_topDiv {                    clear: both; margin: -21px 0px 0px 335px; float: left;                }/* topDiv *//* middleDiv */#middleDiv{    float: left; min-width: 100%; min-height:600px; background: #f4f4f4;}/* middleDiv *//* bottomDiv */#bottomDiv{    text-align: center; margin-bottom: 0px; padding: 24px; clear: both; min-width: 1215px;;    float:left; background: #00ff00;}/* bottomDiv *//* used for coloring error */.error{    color: red;}
Link to comment
Share on other sites

If you have a Link I would check it out, but I'm not seeing the whole picture here so there's not much I can go on with just what you presented. I've already tested the little snippets you had, and looked up the Slidedown documentation. but in my tests Slidedown is behaving as expected, the cause to your problem has to do with something you haven't posted. That css file doesn't help me much cause I still don't know which css the parent element is using.

 

I was asking because I have a hypothesis that the parent element is forcing child elements to align to the bottom and the animation of slidedown could have given the illusion that everything was sliding up.

Edited by Hadien
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...