Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting and resetting DIV height with Javascript - only works first time?

    Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles.

    I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px.

    I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it.

    It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content.

    I think there is something wrong with the validation of document.getElementById(articleID).style.height ?

    Any ideas? Thank you!

    Code:
    Code:
    <!DOCTYPE html>
    
    <html land="en">
    <head>
    
    
    	<script language="javascript" type="text/javascript">
    
    		
    		function showhideContent(articleID) {
    			
    			
    			if(document.getElementById(articleID).style.offsetHeight = '0px'){			
    
    				document.getElementById(articleID).style.height = '250px';
    									
    			}
    
    
    			else{
    			
    				document.getElementById(articleID).style.height = '0px';
    
    			}
    	
    
    		}
    
    	</script>
    
    
    
    	<style type="text/css">
    		p {
    			margin:10px;
    			font-size:12px;				
    		}
    		h1 {
    			margin:10px;			
    		}
    		body {
    			background-color:lightgrey;
    			font-family:Arial;
    			font-size:12px;			
    		}
    		#newsletter {
    			width:500px;
    			border:solid;
    			border-width:1px;
    			border-color:black;		
    			background-color:white;
    			text-align:left;
    			font-size:11px;	
    		}
    		#header {
    			height:125px;			
    		}
    		#footer {
    			height:50px;
    			background-color:#330033;			
    		}
    		#headerbar{
    			background-color:lightblue;	
    			height:35px;
    			overflow:hidden;
    			font-size:12px;
    			-webkit-transition: background-color 1s;
    		}
    		#headerbar:hover{
    			background-color:#3399FF;
    
    		}
    
    		.content{
    			background-color:white;	
    			height:0px;
    			overflow:hidden;
    			-webkit-transition: height 0.5s ease-in-out;
    		}		
    		#expand{
    			background-color:red;
    		}
    	</style>
    
    </head>
    
    <meta charset="UTF-8">
    
    <body>
    	
    	<center>
    	<div id="newsletter">
    		
    		<section id="header">			
    			<img src="newsletter_header_test.jpg">
    		</section>
    		
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 
    
    velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 
    
    dictum molestie non quis ipsum.
    <br><br>
    Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 
    
    venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 
    
    nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 
    
    Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
    </p>
    
    
    
    
    
    		<article>
    			<section id="headerbar">
    				<div style="float:left;">
    					<h1>Introducing: the first article</h1>
    				</div>
    				<div style="float:right;">
    					<p>
    					<a id="expand" href="#" onClick="javascript:showhideContent
    
    ('article1');return false;">Show/Hide Article</a>
    					</p>
    				</div>	
    			</section>
    			<div>
    				<section id="article1" class="content">
    					<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 
    
    velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 
    
    dictum molestie non quis ipsum.
    <br><br>
    Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 
    
    venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 
    
    nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 
    
    Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus 
    
    <br><br>
    sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in 
    
    mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
    					</p>
    				</section>	
    
    			</div>
    		</article>
    	
    
    
    
    
    
    <br>
    	
    
    
    
    
    
    
    	
    	<br>
    
    	
    	
    	<section id="footer">			
    		<p>footer</p>
    	</section>
    
    		
    	</div>
    	</center>	
    	
    
    </body>
    	
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by whitus View Post
    Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles.

    I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px.

    I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it.

    It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content.

    I think there is something wrong with the validation of document.getElementById(articleID).style.height ?

    Any ideas? Thank you!

    Code:
    Code:
    <!DOCTYPE html>
    
    <html land="en">
    <head>
    
    
    	<script language="javascript" type="text/javascript">
    
    		
    		function showhideContent(articleID) {
    			
    			
    			if(document.getElementById(articleID).style.offsetHeight = '0px'){			
    
    				document.getElementById(articleID).style.height = '250px';
    									
    			}
    
    
    			else{
    			
    				document.getElementById(articleID).style.height = '0px';
    
    			}
    	
    
    		}
    
    	</script>
    
    
    
    	<style type="text/css">
    		p {
    			margin:10px;
    			font-size:12px;				
    		}
    		h1 {
    			margin:10px;			
    		}
    		body {
    			background-color:lightgrey;
    			font-family:Arial;
    			font-size:12px;			
    		}
    		#newsletter {
    			width:500px;
    			border:solid;
    			border-width:1px;
    			border-color:black;		
    			background-color:white;
    			text-align:left;
    			font-size:11px;	
    		}
    		#header {
    			height:125px;			
    		}
    		#footer {
    			height:50px;
    			background-color:#330033;			
    		}
    		#headerbar{
    			background-color:lightblue;	
    			height:35px;
    			overflow:hidden;
    			font-size:12px;
    			-webkit-transition: background-color 1s;
    		}
    		#headerbar:hover{
    			background-color:#3399FF;
    
    		}
    
    		.content{
    			background-color:white;	
    			height:0px;
    			overflow:hidden;
    			-webkit-transition: height 0.5s ease-in-out;
    		}		
    		#expand{
    			background-color:red;
    		}
    	</style>
    
    </head>
    
    <meta charset="UTF-8">
    
    <body>
    	
    	<center>
    	<div id="newsletter">
    		
    		<section id="header">			
    			<img src="newsletter_header_test.jpg">
    		</section>
    		
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 
    
    velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 
    
    dictum molestie non quis ipsum.
    <br><br>
    Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 
    
    venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 
    
    nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 
    
    Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
    </p>
    
    
    
    
    
    		<article>
    			<section id="headerbar">
    				<div style="float:left;">
    					<h1>Introducing: the first article</h1>
    				</div>
    				<div style="float:right;">
    					<p>
    					<a id="expand" href="#" onClick="javascript:showhideContent
    
    ('article1');return false;">Show/Hide Article</a>
    					</p>
    				</div>	
    			</section>
    			<div>
    				<section id="article1" class="content">
    					<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 
    
    velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 
    
    dictum molestie non quis ipsum.
    <br><br>
    Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 
    
    venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 
    
    nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 
    
    Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus 
    
    <br><br>
    sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in 
    
    mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
    					</p>
    				</section>	
    
    			</div>
    		</article>
    	
    
    
    
    
    
    <br>
    	
    
    
    
    
    
    
    	
    	<br>
    
    	
    	
    	<section id="footer">			
    		<p>footer</p>
    	</section>
    
    		
    	</div>
    	</center>	
    	
    
    </body>
    	
    </html>

    You are trying to reinvent the wheel. jQuery is a very powerful and easy javascript library, I really suggest you look into it.

    With jQuery, it is as simple as this:

    Code:
    <!-- include jQuery .js file -->
    <div id='article' style='display:none'>
    Breaking news... blah blah
    </div>
    <script type='text/javascript'>
    
    $('#article').click(function()
    { 
    $(this).slideToggle(500); 
    }
    
    </script>
    Just change 500 to the ms of animation time you want for the toggle.
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    As much as I love jQuery, it's really bad advice to suggest someone follow the "easy" route. As it's been said many a time, raw JS is much better suited in many cases.

    I beleive Ali was trying to clue you in that you need to change:

    Code:
    (document.getElementById(articleID).style.offsetHeight = '0px')
    to

    Code:
    (document.getElementById(articleID).style.offsetHeight == '0px')

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you ! the "==" was indeed the solution.

    I will investigate jQuery soon, for the time being playing with the CSS and Javascript myself is serving as both a learing experience for me as well as hopeflly having something out of it at the end.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •