CODEWITHSUNDEEP
jquery
Stefan Perju
Stefan Perju

Reputation: 298

Can't get JQuery to work

So i have this fiddle http://jsfiddle.net/3QuSm/1/ for a dropdown list.

    $(".image-box").mouseover(function() {
    $(".expand-box").show();   
}).mouseout(function() {
    $(".expand-box").hide();
});

This works just fine, but when i try to integrate it in my application the JQuery doesn't work. I'm kind of new with JQuery and I don't really know where to put it. My code is something like http://pastie.org/8042113. Any help?

Upvotes: 0

Views: 74

Answers (4)

Salvador P.
Salvador P.

Reputation: 1489

Maybe the JQuery isn't loaded, navigate to that page in your localhost, and see the source code, open the link that points to the JQuery if you can see the code, it is loaded.

Try this to see if the JQuery is loaded.

<script type="text/javascript">
<!--
$(document).ready(function() {
  alert ("JQuery working!");
});
//-->
</script>

Upvotes: 0

Nitin S
Nitin S

Reputation: 7601

You need to wait till the DOM is ready for manipulation.
put your code in document.ready()

here's fiddle: http://jsfiddle.net/3QuSm/8/

Upvotes: 0

Guffa
Guffa

Reputation: 700342

You need to put your code in the ready or load event, so that it runs after the elements in the page has been created:

<script>

$(document).ready(function(){

  $(".image-box").mouseover(function() {
    $(".expand-box").show();
    alert("something");
  }).mouseout(function() {
    $(".expand-box").hide();
    alert("something");
  });

});

</script>

When you put the code in jsfiddle, it will by default put it in the load event, that's why it works there and not in your page.

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

You need to make use of $(document).ready() (or $(window).load()).

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

$(document).ready(function() {
    ... /* Your code here */
});

http://jsfiddle.net/3QuSm/5/

Upvotes: 3

Related Questions