Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery, Maintaining height of parent div while switching child

Posted on 2009-07-07
3
Medium Priority
?
823 Views
Last Modified: 2012-05-07
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!
// 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;	
}

Open in new window

0
Comment
Question by:aiwazz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 1500 total points
ID: 24808306
for the container(s), specify the min-height  style attribute


                  <a href="#" onclick="$('#div1').show();">Show Div1</a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="#" onclick="$('#div1').hide();">Hide Div1</a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="#" onclick="$('#div2').show();">Show Div2</a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <a href="#" onclick="$('#div2').hide();">Hide Div2</a>
                  <div style="min-height: 400px; background-color: #4499dd;">
                  <div id="div1" style="display: none;">This is div 1</div>
                  <div id="div2" style="display: none;">This is div 2</div>
                  </div>
0
 

Author Comment

by:aiwazz
ID: 24957714
Figured out a nice way to do it. I agree min height would work, but if they're scrolled down and the container was quite variant in size it would jump up then regrow. So I grab the height of the container before I hide it, set the parents height to that, fade in the new content, then remove the height attribute from the container. Much smoother. Thanks
<script type="text/javascript">
jQuery().ready(function(){	
	$(\'a#newsitem-' , $post['id_topic'] , '-' , $post['id_msg'] , '\').click(function() {
	oldh = $(\'#news_r\').height();
	$(\'#news_r\').height(oldh);
        $(\'.right600_viewer_hidden\').hide();
	$(\'.right600_viewer_visible\').hide();																				   
	$(\'#newsitem-' , $post['id_topic'] , '\').fadeIn(\'slow\', function() {
		if(jQuery.browser.msie) this.style.removeAttribute(\'filter\');
		$(\'#news_r\').css({height: ""});
	});	
    return false;
    });
});	
</script>

Open in new window

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24960429
Thanks for posting you specific solution.

Also for the Points/Grade.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question