•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,536 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,089 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2289 | Replies: 3 | Solved
 |
•
•
Join Date: Oct 2007
Posts: 7
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
I need help with displaying hidden divs I need help with the following page:
http://www.nemesisproject.com/siseme...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.
http://www.nemesisproject.com/siseme...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"> </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>
•
•
Join Date: Oct 2007
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Here is the CSS
Please any suggestions would be most appreciated.
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.
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
Divs are kind of unpredictable:
- Make sure the div is hidden with the visibility attribute:
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.
- 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.
Last edited by MidiMagic : Oct 15th, 2007 at 1:21 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Oct 2007
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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'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!
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Delete Files when the Recycle Bin is Hidden (Windows tips 'n' tweaks)
- displaying image from database (PHP)
- Need help with n-tier looping (ColdFusion)
- update the page without changing it? (Site Layout and Usability)
- Hide all DIV's On Click (JavaScript / DHTML / AJAX)
- search assistent removal (Viruses, Spyware and other Nasties)
- OSX - .DS_Store (OS X)
- Show Hidden Program or System Files (Windows tips 'n' tweaks)
- IE 5.0 not displaying pages properly (Web Browsers)
- Tab control on hidden input fields (HTML and CSS)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: How to copy and past external javascript
- Next Thread: Pass value from javascript to java
