Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

java/html

Options
  • 21-10-2002 11:57am
    #1
    kegan5
    Registered Users Posts: 446 ✭✭


    I'm currently making a site and have added in a javascript navigation menu thing: the code for that is:

    <html>
    <head>
    <Title> No Illusion Official </Title>


    <style>

    #menuShow{
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 13px;
    font-size: 13px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }

    #menuSelect{
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 13px;
    font-size: 20px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }

    </style>

    </head>

    <body bgcolor="#ffffff" text="#FF5555" link="#FF5555" vlink="#FF5555" alink="#FF5555">

    <div id="menuSelect" style="width: 693; height: 23">
    <a href="#" onClick="moveOnMenu();moveOffSelector()">
    <img src="nilogobig.jpg" width="50" height="35" border="0"></a>
    </div>
    <div id="menuShow" style="width: 119; height: 184">
    <a href="#" onClick="moveOffMenu();moveOnSelector()">
    <img src="nilogobig.jpg" width="50" height="35" border="0"></a>
    <br>
    <br>
    <a href="http://www.codelifter.com">Biography</a><br&gt;
    <a href="http://www.codelifter.com">Menu Item B</a><br>
    <a href="http://www.codelifter.com">Menu Item C</a>
    <br>
    <a href="http://www.codelifter.com">Menu Item D</a><br>
    <a href="http://www.codelifter.com">Menu Item E</a>
    <br>
    <a href="http://www.codelifter.com">Menu Item F</a><br>
    <a href="http://www.codelifter.com">Menu Item G</a><br>
    <a href="http://www.codelifter.com">Menu Item H</a><br>
    </div>

    <script>

    Show ="yes";

    // Set OffX in pixels to a negative number
    // somewhat larger than the width of the menu.

    var OffX = -150;

    // Set the PosX and PosY variables
    // to the location on the screen where the
    // menu should position (in pixels) when stopped.

    var PosX = 50;
    var PosY = 50;

    // Usually, use the settings shown; but you can
    // change the speed and the increment of motion
    // across the screen, below.

    var speed = 1;
    var increment = 1;
    var incrementNS4 = 5; // for slower NS4 browsers

    // do not edit below this line
    // ===========================

    var is_NS = navigator.appName=="Netscape";
    var is_Ver = parseInt(navigator.appVersion);
    var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
    var is_NS5up = is_NS&&is_Ver>=5;

    var MenuX=OffX;
    var SelX=PosX;
    var sPosX=PosX;
    var sOffX=OffX;

    if (Show=="yes"){
    sPosX=OffX;
    sOffX=PosX;
    MenuX=sOffX;
    SelX=sPosX;
    }

    if (is_NS4){
    increment=incrementNS4;
    Lq="document.layers.";
    Sq="";
    eval(Lq+'menuSelect'+Sq+'.left=sPosX');
    eval(Lq+'menuShow'+Sq+'.left=sOffX');
    eval(Lq+'menuSelect'+Sq+'.top=PosY');
    eval(Lq+'menuShow'+Sq+'.top=PosY');
    }else{
    Lq="document.all.";
    Sq=".style";
    document.getElementById('menuSelect').style.left=sPosX+"px";
    document.getElementById('menuShow').style.left=sOffX+"px";
    document.getElementById('menuSelect').style.top=PosY+"px";
    document.getElementById('menuShow').style.top=PosY+"px";
    }

    function moveOnMenu(){
    if (MenuX<PosX){
    MenuX=MenuX+increment;
    if (is_NS5up){
    document.getElementById('menuShow').style.left=MenuX+"px";
    }else{
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOnMenu()',speed);
    }
    }

    function moveOffMenu(){
    if (MenuX>OffX){
    MenuX=MenuX-increment;
    if (is_NS5up){
    document.getElementById('menuShow').style.left=MenuX+"px";
    }else{
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOffMenu()',speed);
    }
    }

    function moveOffSelector(){
    if (SelX>OffX){
    SelX=SelX-increment;
    if (is_NS5up){
    document.getElementById('menuSelect').style.left=SelX+"px";
    }else{
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOffSelector()',speed);
    }
    }

    function moveOnSelector(){
    if (SelX<PosX){
    SelX=SelX+increment;
    if (is_NS5up){
    document.getElementById('menuSelect').style.left=SelX+"px";
    }else{
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOnSelector()',speed);
    }
    }

    </script>

    </body>
    </html>

    <!--
    ============================================================
    //-->

    This menu is aligned to the left and I want to add text into the empty space on the left but front page wont allow me to do this... any ideas?

    Many thanks
    Kate:confused:


Comments

  • Options
    #2
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    I don't really know what you mean. Something like this?
    <html>
<head>
<Title> No Illusion Official </Title>


<style>

#menuShow{
border: 1px solid #cccccc;
background-color: #ffffff;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
z-index:3
}

#menuSelect{
border: 1px solid #cccccc;
background-color: #ffffff;
padding: 13px;
font-size: 20px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
z-index:2
}

#text{
border: 1px solid #cccccc;
background-color: #ffffff;
padding: 13px;
font-size: 20px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
z-index:1
}

</style>

</head>

<body bgcolor="#ffffff" text="#FF5555" link="#FF5555" vlink="#FF5555" alink="#FF5555">

<div id="menuSelect" style="width: 100; height: 23">
<a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="nilogobig.jpg" width="50" height="35" border="0"></a>
</div>


<div id="menuShow" style="width: 119; height: 184">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="nilogobig.jpg" width="50" height="35" border="0"></a>
<br>
<br>
<a href="http://www.codelifter.com">Biography</a><br>
<a href="http://www.codelifter.com">Menu Item B</a><br>
<a href="http://www.codelifter.com">Menu Item C</a>
<br>
<a href="http://www.codelifter.com">Menu Item D</a><br>
<a href="http://www.codelifter.com">Menu Item E</a>
<br>
<a href="http://www.codelifter.com">Menu Item F</a><br>
<a href="http://www.codelifter.com">Menu Item G</a><br>
<a href="http://www.codelifter.com">Menu Item H</a><br>
</div>


<div id="text" style="width:100; height:100">
Hello World
</div>

<script>

Show ="yes";

// Set OffX in pixels to a negative number 
// somewhat larger than the width of the menu.

var OffX = -150;

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX = 50;
var PosY = 50;

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed = 1;
var increment = 1;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX=OffX;
var SelX=PosX;
var sPosX=PosX;
var sOffX=OffX;

if (Show=="yes"){
sPosX=OffX;
sOffX=PosX;
MenuX=sOffX;
SelX=sPosX;
}

if (is_NS4){
increment=incrementNS4;
Lq="document.layers.";
Sq="";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
}else{
Lq="document.all.";
Sq=".style";
document.getElementById('menuSelect').style.left=sPosX+"px";
document.getElementById('menuShow').style.left=sOffX+"px";
document.getElementById('menuSelect').style.top=PosY+"px";
document.getElementById('menuShow').style.top=PosY+"px";
} 

function moveOnMenu(){
if (MenuX<PosX){ 
MenuX=MenuX+increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}

function moveOffMenu(){
if (MenuX>OffX){ 
MenuX=MenuX-increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}

function moveOffSelector(){
if (SelX>OffX){ 
SelX=SelX-increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}

function moveOnSelector(){
if (SelX<PosX){ 
SelX=SelX+increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}

</script>

</body>
</html>

<!--
============================================================
//-->


Advertisement