Solved

Quick menu through Javascript

Posted on 2004-10-10
1
288 Views
Last Modified: 2008-03-03
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
0
Comment
Question by:mohan21_kumar
1 Comment
 
LVL 8

Accepted Solution

by:
tomvergote earned 25 total points
ID: 12274764
<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

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Entering a date in Microsoft Access can be tricky. A typo can cause month and day to be shuffled, entering the day only causes an error, as does entering, say, day 31 in June. This article shows how an inputmask supported by code can help the user a…
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question