Forum Moderators: not2easy
I have a script that shows and hides DIVs, in fact there is a list of titles and content that is shown or hidden.
I had to use the style "clear: left;" on each div.
But now when I collapse elements it leaves the space it created. it only removes this unnecessary space when expanding the next element....
IE handles this correctly for once ...
Any idea or trick?
[tjkdesign.com...]
Any idea or trick?
Well, I think I might have a fairly good idea--your description corresponds closely to what would happen if you'd used "visibility:hidden;" but were expecting the behaviour of "display:none;"
Visibility: [w3.org]
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)(emphasis added)
Display: [w3.org]
none(emphasis added)This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout).
-b
I will try tjkdesign toggle solution, if not working, I will give my complete source code.
Thanks 4 helping
Here is the source, unfortunately it's not complete ( complete code is way larger ), but it contains code that is needed to show/hide elements.
see examplified full code in next post
[edited by: SuzyUK at 2:22 pm (utc) on Feb. 20, 2006]
[edit reason] examplified code but in next post [/edit]
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="msn.css" media="screen">
<style type="text/css" media="screen">
#container
{
width : 450px;
background-color: #FFFFFF;
border : 1px solid #999999;
/* MSN messenger style */
padding : 0 7px 5px 5px;
}.content
{
width : 100%;
text-align : left;
background-color : #C9E3A1;
/* MSN Messenger style */
background-color : #F4B800;
border : 1px solid #808080;
/*background-color : #800000;*/
}.content p
{
margin : 0px;
}.white
{
background-color : #FFFFFF;
}.titre
{
color: #000000;
background : url('../../_img/interface/right_menu_arrow.gif') 8px 8px no-repeat;
padding : 0px 0px 0px 20px;
vertical-align: super;
cursor : pointer;
clear : both;
}.titre a
{
cursor : pointer;
}.topRight, .rssSelect
{
float: right;
margin : 2px;
}
</style></head>
<body>
<div align="center">
<div id="container"><div style="display: block;" class="content" id="news">
<div style="clear: left;" class="news_solvay">
<span class="titre"><a>SENS: Les éleveurs européens inquiets</a></span>
<div style="display: none;" id="news0">
<img src="_19_flu_EPA.jpg" align="left" hspace="4" vspace="4" width="120">Lorem ipsum.<a href="s_e_LCn_s/page_5763_411059.shtml">lire l'article</a></div>
</div>
<div style="clear: left;" class="news_solvay">
<span class="titre"><a>ECONOMIE: Arcelor vise l'Inde</a></span>
<div style="display: none;" id="news1">
<img src="_19_arcelor_PYT.jpg" align="left" hspace="4" vspace="4" width="120">Lorem ipsum.<a href="economie/page_5720_411091.shtml">lire l'article</a></div></div>
<div style="clear: left;" class="news_solvay">
<span class="titre"><a>CULTURE: Toujours plus de lecteurs à la Foire</a></span>
<div style="display: none;" id="news2">
<img src="_19_Foire_RM.jpg" align="left" hspace="4" vspace="4" width="120">lorem ipsum<a href="culture/page_5730_411081.shtml">lire l'article</a></div></div>
<div style="clear: left;" class="news_solvay">
<span class="titre"><a>TENNIS: La vraie victoire d'Amélie</a></span>
<div style="display: none;" id="news3">
<img src="_19_AMetKIM_EPA.jpg" align="left" hspace="4" vspace="4" width="120">Lorem ipsum.<a href="page_5944_411074.shtml">lire l'article</a></div></div>
<div style="clear: left;" class="news_solvay">
<span class="titre"><a>JO_HIVER_2006: Walter Mayer licencié</a></span>
<div style="display: none;" id="news4">
<img src="_19_mayer_AFP.jpg" align="left" hspace="4" vspace="4" width="120">lorem ipsum.<a href="page_6126_411061.shtml">lire l'article</a></div></div>
</p>
</div>
</div>
<script type="text/javascript">
function afficheDescription()
{
displayNextElm(this,1); return false;
}function getSiblingElm(elm, drn)
{
elm = elm.parentNode;
var strSibling = drn==-1? "previousSibling":"nextSibling";
while( (elm=elm[strSibling]) && elm.nodeType!= 1){}
return elm¦¦null;
}function displayNextElm(elm,boolShow)
{
elm = getSiblingElm(elm);
if(elm)
{
if(elm.style.display == "none")
{
elm.style.display = "block";
}
else
{
elm.style.display = "none";
}
}
}function makeClickable()
{
var zDT = document.getElementById('news').getElementsByTagName('a')
for(var i=0;i<zDT.length;i++)
{
zA = zDT[i];
if(zA.href.length == 0) zA.onclick = afficheDescription;
}
}
makeClickable();
</script>
</body></html>
** ¦¦ - remember to change these back to unbroken pipes **
[edited by: SuzyUK at 2:19 pm (utc) on Feb. 20, 2006]
[edit reason] examplified and summarised code [/edit]
That it is not "reserving" the space?
Suzy
