Script does not work when on

Question

I proved script. its works, but outside of . I am not good on script. maybe its a simple problem.

<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="http://0rochymugen.ucoz.com/scriptbestsite.js" type="text/javascript"></script>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

basicly, script just show a

when a mouse its over to image.

$('#img1').mouseover(function () {
$('#p1').show("slow");
});

$("#p1").hover(function () {
$("#p1").hide("slow");
});

when I put script on head. simply, doesnt work.

How does it fail to work? What isn't working? Please add more details — JohnP, May 02 '11 at 05:42
This should work, there seems to be nothing wrong with it. Add more detail. BTW, the content-type header should be on the top — Pekka, May 02 '11 at 05:44
Maybe you should wrap the code in http://0rochymugen.ucoz.com/scriptbestsite.js into a `$(document).ready(function(){ ... });` otherwise it might get executed before the DOM is fully loaded ? — dwarfy, May 02 '11 at 05:47
@Pekka: Is there a specific order to the elements in the head? I always wondered about this — qwertymk, May 02 '11 at 05:50
@qwertymk there is no real defined order, but the character set specification should come first because it may cause changes in the document (characters being rendered differently) — Pekka, May 02 '11 at 05:51
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Aug 12 '22 at 19:19

score 7 · Answer 1 · answered May 02 '11 at 05:46

7

In some cases, if you are trying to operate on items that are on the page, if you javascript loads and executes before the rest of the page has finished loading, you will get errors and/or your code will not appear to work.

This is one reason it is recommended to put links to javascript files at the bottom of the page.

Another good practice is to only run your when the document has finished loading, in jQuery is is normally done using the following syntax:

$(document).ready(function(){
   // Your javascript
}

answered May 02 '11 at 05:46

Oded

489,969
99
883
1,009

1

Yeah, try putting your ` – theabraham May 02 '11 at 05:48
I see, but then , there isnt another posibility for me? really I would like my page checked as "passed" from validator. – a3rxander May 02 '11 at 05:49
@A3R - See my update. You can wait for the document to load before you execute your javascript. – Oded May 02 '11 at 05:51
@A3R - I've posted a solution that doesn't need to alter your .js file – Edgar Villegas Alvarado May 02 '11 at 06:10

Headshota · Accepted Answer · 2011-05-02T06:07:54.940

I think your code doesn't work because you're not running it when document's ready:

$(document).ready(function(){

  $('#img1').mouseover(function () {
  $('#p1').show("slow");
  });

  $("#p1").hover(function () {
  $("#p1").hide("slow");
  });

  $("#img2").mouseover(function () {
  $('#p2').show("slow");
  });

  $("#p2").hover(function () {
  $("#p2").hide("slow");
  });

  $("#img3").mouseover(function () {
  $('#p3').show("slow");
  });

  $("#p3").hover(function () {
  $("#p3").hide("slow");
  });

  $("#img4").mouseover(function () {
  $('#p4').show("slow");
  });

  $("#p4").hover(function () {
  $("#p4").hide("slow");
  });

  $("#img5").mouseover(function () {
  $('#p5').show("slow");
  });

  $("#p5").hover(function () {
  $("#p5").hide("slow");
  });
});

Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)

Edgar Villegas Alvarado · Answer 3 · 2011-05-02T06:00:17.917

The problem is that the elements you are referencing, don't exist yet.

To ensure they exist before using them, you have to put it's related code inside $(document).ready. So you have:

    $(document).ready(function(){ //This ensures DOM elements are loaded
      $('#img1').mouseover(function () {
        $('#p1').show("slow");
      });

      $("#p1").hover(function () {
        $("#p1").hide("slow");
      });
    });

But, if you can't change that js file, to add a document.ready, you could load the script dynamically, as the following:

<head>
  ...
  <script type="text/javascript">
     $(document).ready(function(){
        $.getScript("http://0rochymugen.ucoz.com/scriptbestsite.js");
     });
  </script>
  ...
</head>

It's not mandatory for the js scripts (in general) to be on the head section, but it's a good practice IMHO. However, other people prefer to put it at the bottom of the page for performance reasons. Hope this helps.

yeah, its good to know that. on bottom of tha page isnt good. if You wanna to be accept for validator ;) . tnx. — a3rxander, May 02 '11 at 06:23

Script does not work when on

3 Answers3

Linked

Related