Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

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

innerHTML element

  • Please log in to reply
5 replies to this topic

#1 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 31 January 2012 - 07:50 AM

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();    
}

  • 0

#2 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts
  • Programming Language:C, C++, C#, JavaScript, PL/SQL, Delphi/Object Pascal, Visual Basic .NET, Pascal, Transact-SQL, Bash

Posted 31 January 2012 - 08:34 AM

Isn't the event supposed to be onmouseenter?
  • 0

#3 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 31 January 2012 - 08:55 AM

When i write onMouseEnter instead of onMouseOver, it does nothing
  • 0

#4 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts
  • Programming Language:C, C++, C#, JavaScript, PL/SQL, Delphi/Object Pascal, Visual Basic .NET, Pascal, Transact-SQL, Bash

Posted 31 January 2012 - 11:07 AM

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.
  • 0

#5 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 01 February 2012 - 01:03 PM

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

#6 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 02 February 2012 - 01:26 AM

Solved it ;). Thanks for help
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download