Menu
Hello everyone,
Here’s my code:
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>SGA</title>
<script src=”Scripts/AC_RunActiveContent.js” type=”text/javascript”></script>
<script src=”ipsum.js” type=”text/javascript”></script>
</head>
<body style=”background-color:#6699FF; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;” onload=”browser();”>
<span id=”browser” style=”font-size:16px; border:1px solid #333333; width:70%; margin:0 auto; background-color:#33CC99; display:none;”></span>
<div id=”games” style=”position:relative;display:none;margin:0 auto;”>
Flash content here…
<br />
<div style=”background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
background-repeat:no-repeat; margin:0 auto;” onclick=”moveUp(‘games’, ‘sgamain’);”>
<span style=”position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>></span>
<span style=”position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>Back</span>
</div>
</div>
<div id=”more” style=”position:relative;display:none;margin:0 auto;”>
<table style=”margin:0 auto; margin-top:100px;” cellpadding=”5″ cellspacing=”0″>
<tr>
<td>buttons, spreading into different rows, until this button</td></tr><tr>
<td>
<div style=”background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
background-repeat:no-repeat; margin:0 auto;” onclick=”moveUp(‘more’, ‘sgamain’);”>
<span style=”position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>></span>
<span style=”position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>Back</span>
</div>
</td>
</tr>
</table>
</div>
<div id=”sgamain” style=”position:relative;top:0px;margin:0 auto;”>
Lorem ipsum dolor sit amet.
<table style=”margin:0 auto;” cellpadding=”5″ cellspacing=”0″>
<tr><!–more buttons–><td>
<div style=”background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
background-repeat:no-repeat;” onclick=”moveUp(‘sgamain’, ‘games’);”>
<span style=”position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>></span>
<span style=”position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>Lorem Ipsum</span>
</div>
</td><td>
<div style=”background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left; background-repeat:no-repeat; margin:0 auto;” onclick=”moveUp(‘sgamain’, ‘more’)”>
<span style=”position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>></span>
<span style=”position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;” unselectable=”on”>Dolor Sit Amet</span>
</div>
</td><!–more buttons–></tr>
</table>
</div>
<div style=”position:absolute; top:650px; width:100%; margin-left:0px; left:0px;”>
<div style=”position:relative; margin:0 auto; text-align:center;”>
Lorem ipsum dolor sit amet …
<br /><br />
</div>
</div>
</body>
</html>
And the script that goes with it:
[code]
function moveUp(id1, id2){
var obj1 = document.getElementById(id1);
var obj2 = document.getElementById(id2);
var pixelsPerInterval = -25;
var curTop = obj1.offsetTop;
var newTop = curTop + pixelsPerInterval;
var finalTop = (obj1.offsetHeight * -1) + (pixelsPerInterval * 2);
obj1.style.top = newTop+”px”;
if(newTop > finalTop){
setTimeout(“moveUp(‘”+id1+”‘, ‘”+id2+”‘);”, 50);
}else{
obj1.style.display = “none”;
obj2.style.display = “block”;
obj2.style.top = ((obj2.offsetHeight * -1) + (pixelsPerInterval * 2))+”px”;
moveDown(id2);
}
}
function moveDown(id1){
var obj1 = document.getElementById(id1);
var pixelsPerInterval = 25;
var curTop = obj1.offsetTop;
var newTop = curTop + pixelsPerInterval;
var finalTop = 0;
obj1.style.top = newTop+”px”;
if(newTop < finalTop){
setTimeout(“moveDown(‘”+id1+”‘);”, 50);
}
}
function browser(){
if (navigator.appName == “Microsoft Internet Explorer”){
document.getElementById(“browser”).style.display = “block”;
document.getElementById(“browser”).innerHTML = “You are using Internet Explorer. This page is designed for Firefox, Safari, and other Gecko browsers. Please switch to one of these browsers for ideal site operation.”;
}
}
For reference, what one of my “buttons” that I refer to in my code looks like:
[code=html]<td>
<div style=”background-image:url(btn/up.png); width:184px; height:51px;
cursor:pointer; display:inline-table; text-align:left; background-repeat:no-repeat;
margin:0 auto;” onclick=”document.location.href=’dolorsitamet.html’;”>
<span style=”position:relative; top:14px; left:160px; font-family:Rockwell;
font-size:18px; color:#0066CC;” unselectable=”on”>></span>
<span style=”position:relative; top:14px; left:-5px; font-family:Rockwell;
font-size:18px; color:#0066CC;” unselectable=”on”>Dolor Sit Amet</span>
</div>
</td>
If you want, you can copy the code into an html document with the script in <script> tags, and it should work (only in firefox, obviously)
What the code does is that there are three “menus”, which you can click buttons to get in between, and, using javascript, the current menu will slide up and out of the page and the new one will slide down. However, everything must be centered, so I have used a relatively positioned div with “margin:0 auto” within an absolutely positioned div.
As you can see in my javascript code here, I currently have a message that is posted if someone is using Internet Explorer. That is because the buttons always seem to appear in the upper-left corner of the html instead of where they belong in the center, like firefox does. I would greatly appreciate anyone who could help me adapt this code to work with IE.
Also, I would appreciate it if you wouldn’t post anything that has to do with critiquing my code; I have my reasons for what I’m doing. All I would appreciate would be advice, mainly on centering the buttons in the page; that seems to be the only problem. Cheers! ?
[COLOR=”White”].