Jump to content

onMouserOver keeps calling script as long as cursor is over the element. HELP

- - - - -

  • Please log in to reply
5 replies to this topic

#1
thatsme

thatsme

    Programmer

  • Members
  • PipPipPipPip
  • 176 posts
Hi, i have html code which simulates menu buttons which make up menu (div "mainMenu"). When mouse cursor is over any button javasript function displaySubMenu(id) should be called. This function updates div "subMenu". However, this function is being called as long as the mouse cursor is over the button (it should be called only one time) so the content of div "subMenu" is constantly blinking.
I would be grateful if someone help me. I have been struggling with this problem for hours

Here's my html
<div id="mainHeader"> 
<div id="mainMenu"> 
       <div id="mainMenuButton1" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton1')" style="left: 10px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/index.php"]index.php[/URL]">Home</a></div> 
       <div id="mainMenuButton2" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton2')" style="left: 20px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadTrainingProgramsList.php"]loadTrainingProgramsList.php[/URL]">Training programs</a></div> 
       <div id="mainMenuButton3" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton3')" style="left: 30px; background-image: url(http://localhost/TPV/jpeg/mainMenuButtonOnFocus.jpg);"><a class="link1" style="color: #AF5F17" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php"]loadVideosList.php[/URL]">Videos 'How to'</a></div> 
       <div id="mainMenuButton4" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton4')" style="left: 40px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadStrechingList.php"]loadStrechingList.php[/URL]">Stretching</a></div> 
       <div id="mainMenuButton5" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton5')" style="left: 50px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadMotivationList.php"]loadMotivationList.php[/URL]">Motivation</a></div> </div>  
</div> 
<div id="subMenu"> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=chest"]loadVideosList.php?category=chest[/URL]">Chest</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=triceps"]loadVideosList.php?category=triceps[/URL]">Triceps</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=biceps"]loadVideosList.php?category=biceps[/URL]">Biceps</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=back"]loadVideosList.php?category=back[/URL]">Back</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=shoulder"]loadVideosList.php?category=shoulder[/URL]">Shoulders</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=trapezius"]loadVideosList.php?category=trapezius[/URL]">Trapezius</a></div> 
       <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=upper%20legs"]loadVideosList.php?category=upper legs[/URL]">Upper legs</a></div> 
        <div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=calves"]loadVideosList.php?category=calves[/URL]">Calves</a></div> 
</div>

Here's js function:
function displaySubMenu(id){
    var subMenu = document.getElementById("subMenu");
    while (subMenu.childNodes.length > 0)
        subMenu.removeChild(subMenu.firstChild);
    
    var xmlhttp;
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var buttons = xmlhttp.responseXML.documentElement.getElementsByTagName("button");
            var foundButton = null;
            var category = "";
            var title = "";
            for (var i = 0;i < buttons.length; i++){
                var button = buttons[i];
                var buttonId = button.getAttribute("id");
                var buttonTitle = button.getAttribute("name");
                var link = button.getAttribute("link");
                buttonId = "mainMenuButton" + buttonId;
                var buttonDivElement = document.getElementById(buttonId);
                buttonDivElement.style.backgroundImage = 'url(http://localhost/TPV/jpeg/mainMenuButton.jpg)';
                buttonDivElement.style.color = "white";
                removeChildren(buttonDivElement);
                buttonDivElement.innerHTML += '<a class="link1" href="' + link + '">' + buttonTitle + '</a>';
                if (buttonId == id){
                    buttonDivElement.style.color = "#AF5F17";
                    buttonDivElement.style.backgroundImage = "url(http://localhost/TPV/jpeg/mainMenuButtonOnFocus.jpg)";
                    foundButton = button;
                }
            }
            var subMenuButtons = foundButton.getElementsByTagName("subButton");
            for (var i = 0; i < subMenuButtons.length; i++){
                var subButton = subMenuButtons[i];
                var name = subButton.getAttribute("name");
                var link = subButton.getAttribute("link");
                subMenu.innerHTML += '<div class="subMenuButton"><a class="subMenuLink" href="' + link + '">' + name + '</a></div>'; 
            }
        }
    }
    xmlhttp.open("GET", "http://localhost/TPV/xml/mainMenu.xml", true);
    xmlhttp.send();    
}


#2
lespauled

lespauled

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 231 posts
  • Programming Language:C, C++, C#, JavaScript, PL/SQL, Delphi/Object Pascal, Visual Basic .NET, Pascal, Transact-SQL, Bash
Isn't the event supposed to be onmouseenter?

#3
thatsme

thatsme

    Programmer

  • Members
  • PipPipPipPip
  • 176 posts
When i write onMouseEnter instead of onMouseOver, it does nothing

#4
lespauled

lespauled

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 231 posts
  • Programming Language:C, C++, C#, JavaScript, PL/SQL, Delphi/Object Pascal, Visual Basic .NET, Pascal, Transact-SQL, Bash
OnMouseOver fires once.......unless a popup event occurs. I think that may be your problem. How about creating a variable, and set it to some state onmouseenter, and then reverse the state in onmouseleave. Then inside your onmouseover, if the state is set a certain way, just return.

#5
thatsme

thatsme

    Programmer

  • Members
  • PipPipPipPip
  • 176 posts
1) Don't you know why this popup event happens?
2) Could explain your idea in more detail. What sort of variable it is?

#6
thatsme

thatsme

    Programmer

  • Members
  • PipPipPipPip
  • 176 posts
Solved it ;). Thanks for help




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users