CODEWITHSUNDEEP
c#javascriptasp.netmaster-pages
Andrew Kalashnikov
Andrew Kalashnikov

Reputation: 3173

ASP.NET JavaScript from MasterPage doesn't work

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?

Upvotes: 1

Views: 4976

Answers (5)

selvaraj
selvaraj

Reputation: 899

add language="javascript" at every link

<script language="javascript"  type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    

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

<script language="javascript" type="text/javascript" src="../Scripts/jquery.timers.js"></script>

now try again

Upvotes: -2

Pavlo Neiman
Pavlo Neiman

Reputation: 7536

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).

Upvotes: 1

Naeem Sarfraz
Naeem Sarfraz

Reputation: 7430

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>

Upvotes: 1

Matthew Manela
Matthew Manela

Reputation: 16762

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

Upvotes: 1

Amry
Amry

Reputation: 4971

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.
})

Upvotes: 1

Related Questions