...

View Full Version : Setting and resetting DIV height with Javascript - only works first time?



whitus
12-09-2011, 04:46 PM
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:


<!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>

Logic Ali
12-09-2011, 05:05 PM
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Expressions_and_Operators#Comparison_Operators

mvmacd
12-09-2011, 05:10 PM
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:


<!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:



<!-- 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.

DanInMa
12-09-2011, 05:15 PM
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:


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

to


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

whitus
12-09-2011, 07:12 PM
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. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum