CODEWITHSUNDEEP
javascriptjqueryshow-hide
Kleigh Heart Garcia
Kleigh Heart Garcia

Reputation: 65

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

Here's my code:

<!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">     
$(".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>

when i try it in http://jsfiddle.net/ppksR/, it's really working but when i copy paste it in my dreamweaver, its not working. What did i miss??? Any help?

Upvotes: 2

Views: 275

Answers (5)

Casey Dwayne
Casey Dwayne

Reputation: 2169

That is just idle scripting.

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

This line $(document).ready(function(e) { makes it start onLoad through the scripting.

This is what your the code does. http://jsfiddle.net/3SKqQ/

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

Your problem is basic jQuery 101.... the elements don't exist when your code is firing.

Wrap code in document.ready, or place code after the elements it refers to

API Reference: http://api.jquery.com/ready/

Also worth reading How jQuery Works in docs for better explanation.

Edit The reson code works in jsfiddle is due to dropdown in top left that says onLoad. fiddle automatically wraps code in a load handler when that is selected

Upvotes: 0

Fred
Fred

Reputation: 3362

Have you tried that code with another editor / browser locally? Maybe DW is not loading jQuery properly. Have you pasted the code to a plain text file and tested the page in a browser?

Upvotes: 0

Tyler Carter
Tyler Carter

Reputation: 61557

You need to wrap it:

 $( function(){ .....

 } );

This will make sure the code doesn't execute until the browser has read all of your HTML. Currently you are executing the code before any elements with .social are defined.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

jsfiddle is wrapping the JavaScript code in onLoad, which you should do. Wrap the script contents in:

$(function () {
    // your code
});

To have jsfiddle emulate what you are doing, change the onLoad to No wrap - in <head>

Upvotes: 1

Related Questions