CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ronald Snew
Ronald Snew

Reputation: 95

jQuery Not Functioning

I am attempting to make a DIV fall when a piece of text is hovered upon. This is the original effect and this:

var $dropDiv = $('#dropDiv');
$('#holder p').on('hover', function () {
    // Get position of clicked div
    var offset = $(this).offset();

    // Get dimensions of said div
    var h = $(this).outerHeight();
    var w = $(this).outerWidth();

    // Get dimensions of dropping div
    var dh = $dropDiv.outerHeight();
    var dw = $dropDiv.outerWidth();

    // Determine middle position
    var initLeft = offset.left + ((w / 2) - (dw / 2));

    // Animate drop
    $dropDiv.css({
        left: initLeft,
        top: $(window).scrollTop() - dh,
        opacity: 0,
        display: 'block'
    }).animate({
        left: initLeft,
        top: offset.top - dh,
        opacity: 1
    }, 800, 'easeOutBounce');
});

is my code. At first I thought it was a problem with my libraries, so I switched to the versions the fiddle has.

<script src="fall.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

The fiddle also had some CSS so I matched up to it

#holder {
    position: absolute;
    top: 200px;
    left: 100px;   
}
#dropDiv {
    display: none;
    position: absolute;
    top: -20px;
    background: #ccc; 
}

I even checked the error console and there are no errors, but it still doesn't work. What am I doing wrong and how can I fix it? I am using Safari Version 5.1.10 and expect it to work for me and Chrome users at least.

Upvotes: 0

Views: 159

Answers (6)

Filip Luk&#225;č
Filip Luk&#225;č

Reputation: 100

Where have you include your code ? I had similar problem.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    </head>
    <body>
      YOUR HTML CODE
     <script type="text/javascript"> your code</script>
     or
     <script src="fall.js"></script>
    </body>
</html>

Include your jQuery code after the html code. bottom in tag that should work

also put your code inside ready function

$(document).ready(function(){
    your code here...
})

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

You need to take 2 Steps -

1) ORDERING - The js file/code using jquery lib. functions should always come jquery file is included

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>

2) ELEMENT SHOULD BE AVAILABLE IN DOM - Either the js/script should be the last thing in the body or use jquery dom ready event (More Detail Here)

Upvotes: 0

Saeed
Saeed

Reputation: 3775

You can use:

$(function(){
   //you code here
})

Upvotes: -1

Lars Beck
Lars Beck

Reputation: 3584

I can spot a little Javascript vs. CSS confusion here.

$('#holder p').on( 'mouseover', function() {
    // code
});

Upvotes: -1

Anup
Anup

Reputation: 9738

This should be the order.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>

Upvotes: 6

Rohan
Rohan

Reputation: 3334

try wrapping the code inside -

$(document).ready(function() {

 //code here

});

It is possible that your javascript is not getting executed to to the problem of the same being run prior to the elements being loaded to the DOM

+

If your specified javascript is inside fall.js, since it uses jquery load the fall.js file after jquery.

Upvotes: 2

Related Questions