I need help with the following page:
This is my first attempt at a website and some of the code is borrowed from examples, specifically the code that loads the file folders.
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.
Here is the code for the page in question. If you need to see the CSS please let me know.
This is my first attempt at a website and some of the code is borrowed from examples, specifically the code that loads the file folders.
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.
Here is the code for the page in question. If you need to see the CSS please let me know.
Code:
<html>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
"http:[URL unfurl="true"]www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<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>