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

Question

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?

score 1 · Answer 1 · answered Mar 04 '13 at 00:55

1

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>

answered Mar 04 '13 at 00:55

Explosion Pills

188,624
52
326
405

charlietfl · Answer 2 · 2013-03-04T01:02:37.163

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

score 0 · Answer 3 · answered Mar 04 '13 at 00:56

0

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.

answered Mar 04 '13 at 00:56

Tyler Carter

60,743
20
130
150

hi @Chacha102, i have the same problem. i tried wrapping it and it goes like this: But still no effect... – Kareen Lagasca Mar 04 '13 at 01:03

score 0 · Answer 4 · answered Mar 04 '13 at 00:57

0

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?

answered Mar 04 '13 at 00:57

Fred

3,324
1
19
29

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

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/

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

5 Answers5

Linked