Jquery script works in JSfiddle but not on html pa

Question

I created a JSFiddle which works as intended.

//Jquery script
function icon_hover()
{
    $("#gcp-icon").hover( function(){
       $("#gcp-icon-hover").slideDown();
 },
 function(){
    $("#gcp-icon-hover").slideUp();
});
}

icon_hover();


   //CSS
.site_logo{
    width: 250px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.75);
}
.site_logo_hover{
    width: 250px;
    height: 250px;
    background-color:#000000;
    opacity:0.6;
    display:none;
}


#gcp-icon
{
    background: url(http://i.imgur.com/soDjoS4.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.hover_title{
    color: white;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    font-weight: 600;
    font-size: 11pt;
    font-family: verdana;
}

.hover_text{
    color: white;
    width: 245px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px; 
    font-family: verdana;
    font-size:9pt;
}

.click_me{
    color: white;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    font-weight: 600;
    font-size: 10pt;
    font-family: verdana;
}

<!--HTML-->
<div class="site_logo" id="gcp-icon">
<div class="site_logo_hover" id="gcp-icon-hover">
    <div class="hover_title" id="gcp-title">Grace Cook Photography</div>
    <div class="hover_text" id="gcp-text">Simple, subtle, clean and good looking</div>
    <div class="click_me">Click for more details</div>
</div>
</div>

However, as the title suggests, when this is copied and pasted into a html page and opened in a web browser see this, this doesn't work as intended.

I have tried debugging. The Javascript is valid and all dependencies(eg. Jquey.js etc.) are available.

Answer 1

$(document).ready(function(){icon_hover();});

Answer 2

you should use always ready event when you are working on webpage...

$(function(){
icon_hover();

});

Answer 3

If you check carefully on jsfiddle... When you select your JS library (jQuery 1.10.1 in your case) underneath this option jsFiddle automatically selects for you onLoad. What this does is it puts all your javascript code within a

$(window).load(function()
{ 
    //yourcode from jsfiddle goes in here
} 

This will load your js code when the windows loads.

Answer 4

$( document ).ready( function() {
    $("#gcp-icon").hover(
        function () {
            $( "#gcp-icon-hover" ).slideDown();
        },
        function () {
            $( "#gcp-icon-hover" ).slideUp();
        }
    )
})

Answer 5

Put your startup method bindings inside.document ready.

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

Also check for any duplicate html elements having same Id.

Answer 6

The problem might be, in jsfiddle the script was executed on dom ready (fiddle not working outside the dom ready handler).... but in your page it doesn't look like that

In jsfiddle the second dropdown in the LHS panel selects the place where the script will be added, by default it is added as a window.onload handler.

So move the invocation of icon_hover to a dom ready handler

jQuery(function(){
    icon_hover();
})

Demo: Fiddle