Quick menu through Javascript

Hi,

   I have used the following code to create a quick menu and scroll the quick menu when i scroll the browser. when i scroll down the menu the menu is getting scrolled but when i click on the menu it is taking back to the first postion and the menu is getting out of the browser.

Code is as follows:

<html>
<head>
<style type="text/css">
                  #menu1 { LEFT: -1000px; POSITION: absolute }
                  #menu2 { LEFT: -1000px; POSITION: absolute }
                  #menu3 { LEFT: -1000px; POSITION: absolute }
                  .baseline { FONT-SIZE: 9pt; LEFT: 250px; COLOR: #000000; FONT-FAMILY: Arial; POSITION: absolute; TOP: 100px }
</style>


</head>
<script language="javascript">
var siteLink = new Array();

siteLink[0] = "PopupDiagnosis.aspx";
siteLink[1] = "PopupInsurance.aspx";
siteLink[2] = "PopupPhysician.aspx";
siteLink[3] = "popupSupplies.aspx";
siteLink[4] = "popupletters.aspx";
siteLink[5] = "popupnotes.aspx";

var menu3top=195
var menuleft=-120
var pace=15

var step
var direction
var pause=75

var thismenu

var vorzeichen=1

var vorzeimenu3=-1

var menuismoving="no"


var scrollidx = 0
onscroll=function()
{
     var e = document.all.menu;
     if (document.body.scrollTop>195)
     {
               e.style.pixelLeft=document.body.clientWidth + document.body.scrollLeft - e.offsetWidth;
               e.style.pixelTop=document.body.scrollTop;
          document.all.menu.style.posLeft=menuleft;
     }
}



function inite()
{

      if (document.layers)
      {
        document.menu.left=menuleft
        document.menu.top=menu3top
      }
      if (document.all)
      {
        document.all.menu.style.posLeft=menuleft
        document.all.menu.style.posTop=menu3top
      }
}

function getmenuname(clickedmenu)
{
      thismenu=eval("document.all."+clickedmenu+".style")
    if (menuismoving=="no")
    {
          if (document.layers)
          {
            thismenu=eval("document."+clickedmenu)
          }
          if (document.all)
          {
            thismenu=eval("document.all."+clickedmenu+".style")
          }

        step=pace
        checkdirection()
          movemenu()
    }
}


function checkdirection()
{
      if (document.layers)
      {
        if (thismenu==document.menu){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3;}
      }
      if (document.all)
      {
        if (thismenu==document.all.menu.style)
        {
                  vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3;
                  alert(vorzeimenu3 + "    "  + document.all.menu.style.left)
        }
      }
}


function movemenu()
{
      if (document.layers)
      {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)
          }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
      }
      if (document.all)
      {

        if (step>=0)
        {
                        thismenu.posLeft+=step*vorzeichen
                        step--
                        var movetimer=setTimeout("movemenu()",pause)
          }
        else
            {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}

</script>


<body>

                  <img src="addmenubtn.gif" border="0" usemap="#Map">
                  <map name="Map">
                        <area shape="RECT" coords="120,4,135,129" onclick ="getmenuname('menu')"  HREF="#">
                        <area shape="RECT" coords="11,9,119,25" onClick="" href="#">
                        <area shape="RECT" coords="11,27,119,43" onClick="" href="#">
                        <area shape="RECT" coords="11,49,119,63" onClick="" href="#">
                        <area shape="RECT" coords="11,68,119,85" onClick="" href="#">
                        <area shape="RECT" coords="11,88,119,103" onClick="" href="#">
                        <area shape="RECT" coords="11,107,119,126" onClick="" href="#">
                        <area shape="RECT" coords="1,1,132,9" href="#">
                        <area shape="RECT" coords="4,125,136,132" href="#">
                  </map>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>


help me to solve this problem suggestion me where exactly i have gone wrong.

Thanx
LVL 1
mohan21_kumarAsked:
Who is Participating?
 
tomvergoteConnect With a Mentor Commented:
<area shape="RECT" coords="11,9,119,25" onClick="" href="#">

I think the problem is with the > href="#" <
clicking a href="#" link sends the page back to the top.

you should be able to solve it by putting return false at the end of your onclick stuff.
onClick="return false"

I suppose you still have to write a click function which redirects and stuff so your code would go like:
function handleclick()
{
document.location.href=siteLink[0] ;
return false;
}

The return false should prevent the click from executing the href action.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.