views:

66

answers:

5

Hello. I put common(for all my content pages) js to head section at my masterpage.

<head runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    
<script type="text/javascript" src="../Scripts/jquery.corner.js?v2.11"></script>
<script type="text/javascript" src="../Scripts/jquery.timers.js"></script>
<script type="text/javascript" language="javascript">
        var mouseOver = false;
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
        ); 
</scipt>

AS I expect, at all my content pages script should attach hover event to all to all right_menu_links. But it doesn't work.

When I place the same script at my content pages all is work! What's wrong?

+1  A: 

It didn't work because when the Javascript got executed, the content in the body is not yet available. Use the following structure to have your Javascript executed once the document body is ready.

$(function() {
    // you Javascript here.
})
Amry
+1  A: 

You code has execute once the DOM is ready. JQuery has a method called Ready that does this for you. Just change your code to this:

$(document).ready(function(){
   var mouseOver = false;
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
        ); 
}
Matthew Manela
+1  A: 

It needs to be wrapped in a function that is called when the DOM has loaded.

<script type="text/javascript" language="javascript">
    var mouseOver = false;
    $(function(){
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
      ); 
    }
</scipt>
Naeem Sarfraz
+1  A: 

My guess is that your problem is here

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    
<script type="text/javascript" src="../Scripts/jquery.corner.js?v2.11"></script>
<script type="text/javascript" src="../Scripts/jquery.timers.js"></script>

If master page and content pages are in different locations then javascript can not be found.

For example your master page is in http://mysite.com/masterpages/root.master And page is http://mysite.com/default.aspx it will not work.

Put an absolute path (http://mysite.com/Scripts/jquery-1.4.1.js ) or root relative path (/Scripts/jquery-1.4.1.js).

Pavlo Neyman
A: 

add language="javascript" at every link

now try again

saj
this will not change anything
Pavlo Neyman