aiwazz
asked on
Jquery, Maintaining height of parent div while switching child
I have a page were about 500px down I use jquery to fade in divs of different sizes. They are all set to display:none except a separate class applied only for the latest news item, which is displayed on page load.
Right now what i do is hide both classes for the divs and then immediately afterward fade in the unique id that has been clicked from the news item menu to the left. Visually it looks great but for that split of a second there is no div maintaining height and if you are scrolled down and the parent shrinks that causes the page to kick back up to the top.
Is there a way to make the function do this: get the height of the visible div, apply it to the parent, then hide the children and fade in the unique id and finish the function with removing the height that was just set on the parent? I imagine this would solve the page jumping back up.
Much appreciated for any thoughts!
Right now what i do is hide both classes for the divs and then immediately afterward fade in the unique id that has been clicked from the news item menu to the left. Visually it looks great but for that split of a second there is no div maintaining height and if you are scrolled down and the parent shrinks that causes the page to kick back up to the top.
Is there a way to make the function do this: get the height of the visible div, apply it to the parent, then hide the children and fade in the unique id and finish the function with removing the height that was just set on the parent? I imagine this would solve the page jumping back up.
Much appreciated for any thoughts!
// the pertinent php/html
// this is were the left newsitem menu is created and the function to fade in the main div on the right is located
$i = 0;
foreach ($posts as $post)
{
$i++;
echo '<div '; if($i&1) { echo 'class="newsitem"';} else {echo 'class="newsitem_2"';} echo '><a href="#newsitem-' , $post['id_topic'] , '" id="newsitem-' , $post['id_topic'] , '-' , $post['id_msg'] , '" class="clickable"><strong>' , $post['subject'] , '</strong><br /><br />' , $post['time'] , '</a></div>
// the jquery function I need help with
<script type="text/javascript">
jQuery().ready(function(){
$(\'a#newsitem-' , $post['id_topic'] , '-' , $post['id_msg'] , '\').click(function() {
$(\'.right600_viewer_hidden\').hide();
$(\'.right600_viewer_visible\').hide();
$(\'#newsitem-' , $post['id_topic'] , '\').fadeIn(\'slow\');
return false;
});
});
</script>
';
}
// the pertinent css
// this is the parent for the div display area
.container600_right {
width:600px;
float:left;
}
// these are the children
.right600_viewer_visible {
width:575px;
background:#494949;
color:#999999;
font-size:13px;
padding:10px 10px 20px 10px;
}
.right600_viewer_hidden {
width:575px;
background:#494949;
color:#999999;
font-size:13px;
padding:10px 10px 20px 10px;
display:none;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Thanks for posting you specific solution.
Also for the Points/Grade.
Also for the Points/Grade.
ASKER
Open in new window