Link to home
Start Free TrialLog in
Avatar of bumbling_fool
bumbling_fool

asked on

javascript event not firing

I'm struggling with a simple Javascript function that works fine in IE8 but no other browser that I try....

I have a menu where I simply want to show a list on mouseover for a particular link. Here's the link code:

 
<a href="#" onmouseover="menu_open; return false;" class="menuLink">Retrieve Quote</a>

Open in new window


And here is the content of menu.js that is included in the master page

 
//menu
2var timeout = 500;
3var closetimer = 0;
4var ddmenuitem = 0;
5
6function menu_open() {
7 menu_canceltimer();
8 $('#retrieveUL').css('visibility', 'visible');
9}
10
11function menu_close()
12{ $('#retrieveUL').css('visibility', 'hidden'); }
13
14function menu_timer()
15{ closetimer = window.setTimeout(menu_close, timeout); }
16
17function menu_canceltimer() {
18 if (closetimer) {
19 window.clearTimeout(closetimer);
20 closetimer = null;
21 }
22}
23
24function retrieveQuote() {
25 var quoteID = $('#retrieveReference').val();
26 var email = $('#retrieveEm').val();
27
28 if (email.length > 3 && quoteID.length > 10) {
29 window.location = "retrieveQuote.aspx?Ref=" + quoteID + "&Email=" + email;
30 }
31}
32
33$(document).ready(function() {
34 $('.menuLink').live('mouseover', menu_open);
35 $('.menuLink').live('mouseout', menu_close);
36 $('#retrieveUL').live('mouseout', menu_timer);
37 $('#retrieveUL').live('mouseover', menu_open);
38 $('#retrieveGo').live('click', retrieveQuote);
39
40});
41
42
43
44
45//end menu
46

Open in new window


The new menu item displays fine in IE8 but simply doesn't work in earlier IE versions, Firefox or Chrome
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Hello,

Looks like you are setting the mouseover function by jquery:

$(document).ready(function() {
34 $('.menuLink').live('mouseover', menu_open);
35 $('.menuLink').live('mouseout', menu_close);
36 $('#retrieveUL').live('mouseout', menu_timer);
37 $('#retrieveUL').live('mouseover', menu_open);
38 $('#retrieveGo').live('click', retrieveQuote);
39
40});

Therefore, you do not need the onmouseover="" inline on the link. Should just be <a href="#" class="menuLink">Retrieve Quote</a>

Is this page online so we can test it? Or can you post all the html and js

Thanks

And when you do post code, please remove the line numbers.
Avatar of bumbling_fool
bumbling_fool

ASKER

I added the onmouseover to the link as the jQuery wasn't firing either....was experimenting.

Here's the page source (with the .net bits manually deleted):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script><![endif]-->
<script type="text/javascript" src="PCAnywhere.js"></script>
<script type="text/javascript" src="Validation.js"></script>

<head><title>
	Error
</title><link href="Styles/960.css" rel="stylesheet" type="text/css" /><link href="Styles/reset.css" rel="stylesheet" type="text/css" /><link href="Styles/text.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><link href="Styles/loginstyle.css" rel="stylesheet" type="text/css" /><link href="Styles/ProgressTracker.css" rel="stylesheet" type="text/css" /><link href="Styles/UserControls.css" rel="stylesheet" type="text/css" /><link id="ctl00_profileStyle" rel="stylesheet" type="text/css" href="Styles/aonProfileStyles.css" />
    </head>

<body>
    <form name="aspnetForm" method="post" action="error.aspx" id="aspnetForm">


        
        <div id="wrapper" class="container_12">
        
            <div id="header" class="grid_12">
            
            </div> <!--header-->
        
            <div id="menu" class="grid_12">
                <ul>
                   <li><a href='default.aspx'>Home</a></li><li><a class='menuLink' onmouseover='menu_open; return false;' href='#'>Retrieve Quote</a><ul id='retrieveUL'><li><div id='retrieveInfo'><table width='100%'><tr><td>Quote Ref / Policy No</td></tr><tr><td><input id='retrieveReference' /></td></tr><tr><td>Email address</td></tr><tr><td><input id='retrieveEm' /></td></tr><tr><td align='right'><a href='#' id='retrieveGo'><img src='img/arrow_left.png' alt='Go' /></a></td></tr></table></div><!-- retrieveInfo --></li></ul></li><li><a href='quote.aspx'>New Quote</a></li><li><a href='#'>About Us</a></li><li><a href='#'>Contact Us</a></li>

                 </ul>
            
            </div><!--menu-->
            
             
        
            
<div class="errorPage">
    <div id="banner" class="grid_12">
        <div id="errorImg"><img alt="Error" src="img/caution.png" /></div>
        <div id="errorHeader">ERROR MESSAGE</div>
    </div><!--Banner-->
    
    <div id="body" class="grid_10">

        <span id="ctl00_MainBody_errorMsg"></span>
    </div><!--Body-->
    <div class="grid_2"></div>
    
    <div id="breaker" class="grid_12"><br /></div>
    
    <div id="Redirect" class="grid_12">
        <span>Please click <a href="default.aspx">here</a> to return to the home page</span>
    </div><!--Redirect-->

    
    <div id="Footer" class="grid_12">
        <div id="footer1"></div><!--Footer_holder-->
    </div><!--Footer-->
 </div><!--Error Page--> 
 
 <script type="text/javascript">

     $(document).ready(function() {
         //LOAD FOOTER
         $("[id *= 'footer']").load("Footer/aon_footer.html");

         //END LOAD FOOTER
     });         
         
      
      </script>
 

                              
                        
        </div><!--wrapper-->
       
                
    </div>
    

</form>
    
     <script type="text/javascript" src="login.js"></script>
     <script type="text/javascript" src="QuestionNavigation.js"></script>

     <script type="text/javascript" src="UserControls.js"></script>
     <script type="text/javascript" src="menu.js"></script>
     

     
</body>

</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of bumbling_fool
bumbling_fool

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Have accepted my own solution as it worked