what is the correct Jquery document.ready wrap

Question

I am trying to replicate what the other user is doing at the code below:

Jquery Show and Hide doesnt work? Something is missing and i can't figure it out

but just like her, i am also stuck because it's not working in dreamweaver. I guess i'm not doing it correctly by adding the correct wrap. can someone who knows point out or edit my script?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<script type="text/javascript">
jQuery(document).ready(function($) 
{
    $(".social").hover(function() 
    {
        $("h1", this).hide();
        $(".networks", this).fadeIn();
    }, 
    function() 
    {
        $(".networks", this).hide();
        $("h1", this).fadeIn();
    });
});
</script>

<style>
.networks 
{
    display:none;
}
</style>
</head>

<body>
<div class="social">
    <h1>Share this</h1>
    <div class="networks">
        <p>Twitter</p>
        <p>Facebook</p>
    </div>
</div>      

</body>
</html>

it works fine. http://jsfiddle.net/MtLRj/1/ check whether you have other script errors — Shyju, Mar 04 '13 at 02:00

score 0 · Answer 1 · answered Mar 04 '13 at 01:54

0

You can reference the correct address:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

answered Mar 04 '13 at 01:54

jikey

394
3
9

@ethangnal, i know. on some other jquery script, it really works flawlessly but on this case it's not. that's weird. – Kareen Lagasca Mar 04 '13 at 01:58
It's probably a Dreamweaver issue, as this fiddle: http://jsfiddle.net/zAeFe/1/ works without issue. See @DarthTux's comment. – pdoherty926 Mar 04 '13 at 02:01
i think it's not the dreamweaver. it's just that jsfiddle runs it without the correct function wrap. while in dreamweaver, you need to add the correct wrap. – Kareen Lagasca Mar 04 '13 at 02:15

score 0 · Answer 2 · answered Mar 04 '13 at 01:59

Be sure that you are using a webserver (wamp or xampp) to test. If you want test it without a webserver, download the jquery library and include it localy

The correct wrap is:

$(document).ready(function() {
    $(".social").hover(function() {
        $("h1", this).hide();
        $(".networks", this).fadeIn();
    }, function() {
        $(".networks", this).hide();
        $("h1", this).fadeIn();
    });
})

or

$(function() {
    $(".social").hover(function() {
        $("h1", this).hide();
        $(".networks", this).fadeIn();
    }, function() {
        $(".networks", this).hide();
        $("h1", this).fadeIn();
    });
})

what is the correct Jquery document.ready wrap

2 Answers2