I need help with displaying hidden divs

Question

lestrope 0 Newbie Poster

16 Years Ago

I need help with the following page:
http://www.nemesisproject.com/sisemenproject/index_dev.html

When the splash image loads and a user clicks on it it should fade out. I want the file folders that then appear to appear in the center of the page and stay there. However, currently they appear where they are supposed to then they slide to the left. I'm not sure why they do this because when I separate the division that loads the splash image and the division that loads the file folders into separate pages, it works just how I want it to.

So, I'm reaching out to the pro's. I'm sure this seems rudimentary so I apologize for my newbness. I think this has something to do with the containers, etc, but I'm really at a lost because everything I've tried has resulted in the same behavior.

Here is the code for the page in question. If you need to see the CSS please let me know.

<html>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
	"http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			<head>
						<title>Nemesis Project</title>
  <script src="cashmoney/prototype.js" type="text/javascript"></script>
	<script src="cashmoney/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
  
	<link rel="stylesheet" href="index_files/style.css">
  
  <script type="text/javascript">
  <!--
    var imgOver = new Image();
    imgOver.src = "images/splash_on.jpg";
    
    function mouseOver()
    {
      document.splash.src = imgOver.src;
    }
    function mouseOut()
    {
      document.splash.src ="images/splash_off.jpg";
    }
		function fadeintro()
		{
		 	new Effect.Fade('div_1',{
					delay: .1,
					duration: 1,
					from: 1,
					to: 0,
					afterFinish: function()
											 {
											 	 $("content").show();
											   loadProjects();
											 }
			});
			
			['about-bubble','ref-bubble','downloads-bubble','docs-bubble'].each(function(b){
						  new Draggable(b,{revert:false,handle:b+'-handle'})});								 
		}
		function loadProjects()
		{
					  bubble('about',     20, 160, { delay:0.2, duration:1.1 });
      		  bubble('ref',       290,220, { delay:0.5, duration:1.1 });
      		  bubble('downloads', 490,80,  { delay:0.8, duration:1.1 });
      		  bubble('docs',      680,250, { delay:1.1, duration:1.1 });
		}
		function bubble(id,x,y)
		{
        $(id+'-bubble').setStyle({left:x+'px',top:y+'px'});
        new Effect.Scale(id+'-bubble',100, Object.extend({
          beforeStart:function(effect){
            $(effect.element).style.display = 'block';
            $(effect.element).setOpacity(0);
            $$('#'+id+'-bubble'+'p').each(function(p){p.hide()});
          },
          afterUpdate:function(effect){
            $(effect.element).setOpacity(effect.position);
          },
          scaleFrom:0,
          scaleFromCenter:true,
          afterFinish:function(effect){
            $$('#'+id+'-bubble'+'p').each(function(p){
              new Effect.Appear(p,{duration:0.4});
            });
          }
        }, arguments[3] || {}));        
   }
  // -->
  </script>
</head>
	<body bgcolor="#000000">
<div id="main">
	<div id="div_1" style="display:none" height="800px" width="600px">
  <table border="0" height="100%" width="100%" bgcolor="#000000">
    <tbody>
		 <tr>
		 <td height="200px">&nbsp;</td>
		 </tr>
		 <tr>
      <td align="center" valign="top" >
					<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="fadeintro()">
          <img src="images/splash_off.jpg" alt="" name="splash" border="0"></a>
      </td>
    </tr>
  </tbody></table>
	</div>
	
	<div id="content" style="display:none" height="800px" width="800px">
  		 <div id="about-bubble" style="display:none">
    	 			<img class="shot" src="images/casefile.png" alt="" />
  		 </div>
  
  		 <div id="ref-bubble" style="display:none">
    	 			<img class="shot" src="images/casefile.png" alt="" />
  		 </div>
  
  		 <div id="downloads-bubble" style="display:none">
    	 			<img class="shot" src="images/casefile.png" alt="" />
 		   </div>
  
  		 <div id="docs-bubble" style="display:none">
			 			<img class="shot" src="images/casefile.png" alt="" />
  		 </div>
	</div>
</div>	
	
	<script type="text/javascript">
	<!--
	new Effect.Opacity('div_1',{
			delay: .5,
			afterUpdate: function(){$('div_1').show()},
			duration: 2.5,
			from: 0,
			to: 1
			});
	// -->
	</script>

</body>
</html>

javascript

2 Contributors
3 Replies
115 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by lestrope

All 3 Replies

MidiMagic 579 Nearly a Senior Poster

16 Years Ago

Divs are kind of unpredictable:

- Make sure the div is hidden with the visibility attribute:

.divoff {visibility: hidden;}
.divon {visibility: visible;}

Do not use the collapse property.

- Note that if the div is initially hidden, its contents are not rendered until the div is made visible. If the contents won't fit in the div's size (as rendered when it is hidden), the div will change size when it is made visible.

If you initially render it visible, you will see where it ends up, and hiding it will not change it. The reverse is not true.

- Note that the external div of a nested hidden structure must NOT have margins, borders, or padding. This is because IE and FF render these differently, and won't render them until the div is made visible:

--- FF puts all of these OUTSIDE the div's declared dimensions. This causes the div to shoulder aside other stuff to fit.

--- IE puts all of these INSIDE the div's declared dimensions. This can cause the div to expand if its contents are too big to fit.

Again, these effects do not happen until the div becomes visible. Then, when the contents, margins, borders, and paddings are rendered, the div changes size and changes the total rendering.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

lestrope 0 Newbie Poster · Answer 1 · 2007-10-15T05:32:38+00:00

Here is the CSS

body {
  margin: 0;
  padding: 0;
  background: #000000;    
 /* font: 13px/1.2em "Lucida Grande", Arial, sans-serif; */
  color: #000000;
}
a {
  color: #E8A400;
}
a:hover {
  background-color: #FDF7E8;
}

img.shot {
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

img {
  border: 0;
}

#content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#main {
 position: absolute;
 margin-left: 25%;
 margin-right 25%;
 width: 900px;
 heighth: 900px;
 top: 150px;
 
#about-bubble, #ref-bubble, #downloads-bubble, #docs-bubble, #versions-bubble {
  position: absolute;
  width: 100px;
  height: 83px;
  text-align: center;
	cursor: move;
}

#ref-bubble {
  z-index: 10;
}

Please any suggestions would be most appreciated.

lestrope 0 Newbie Poster · Answer 2 · 2007-10-16T21:30:10+00:00

Thank you for the insight. I was not aware that if I had a div that was visible and then hid it that it would behave differently.

I've been playing with them adding 1 div at a time in until I get the expected results. I'm beginning to see how vastly different IE and FF really are.

Frustrating to say the least.

Thank you again for your input. You've been more than helpful!

I need help with displaying hidden divs

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers