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

javascript/html

Options
  • 21-10-2002 11:58am
    #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
    seamus
    Registered Users Posts: 68,317 ✭✭✭✭seamus


    Have you a screenshot of this working?
    Maybe just add another style called BorderLeft or sumfink?

    (First post evar from linux yay! I rock)


  • Options
    #3
    the Guru
    Closed Accounts Posts: 1,362 ✭✭✭the Guru


    You could use a layer or a table ???? /// the scroll is nice but I would tend to have it a tiny bit faster as people dont like to hang around on web pages


  • Options
    #4
    damien_gill
    Closed Accounts Posts: 76 ✭✭damien_gill


    I know this is the third time I have posted this but WWW.DYNAMICDRIVE.COM will have the solution to your problem in it's FAQ's section.

    Plus I had a similiar script on one of my webpages and a lot of people didn't like it. May be a bit ahead of it's time I think.

    Anyway the navigation section in the URL above kicks ass to no extent.


Advertisement