CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
Adam
Adam

Reputation: 51

Jquery script works in JSfiddle but not on html page

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.

Upvotes: 1

Views: 1465

Answers (6)

Sasidharan
Sasidharan

Reputation: 3740

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

Upvotes: 1

sudhansu63
sudhansu63

Reputation: 6180

Put your startup method bindings inside.document ready.

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

Also check for any duplicate html elements having same Id.

Upvotes: 1

Rahul jain
Rahul jain

Reputation: 110

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

$(function(){
icon_hover();

});

Upvotes: 2

Thanos
Thanos

Reputation: 3059

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.

Upvotes: 1

Yuan Zhaohao
Yuan Zhaohao

Reputation: 584

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

Related Questions