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"> </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>