Jquery script works in JSfiddle but not on html page

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.

where is the script placed in the page... in header or at the bottom of the page — Arun P Johny
– Arun P Johny, Commented Sep 12, 2013 at 3:11
It's placed in the header, before the body tag as you can see in the source for aljidy.co.uk/jstest.html. — Adam
– Adam, Commented Sep 12, 2013 at 3:23
I just copied and pasted the source from the jsfiddle.net/draft into a html page and it still doesn't work. — Adam
– Adam, Commented Sep 12, 2013 at 3:24
see my answer below... the call to icon_hover should be in a dom ready handler — Arun P Johny
– Arun P Johny, Commented Sep 12, 2013 at 3:24
I accepted @ArunPJohny 's answer due to being the most comprehensive and quickest to implement. It may not be the best practice or work in all cases but I can't really check that. — Adam
– Adam, Commented Sep 12, 2013 at 3:33

Arun P Johny · Accepted Answer · 2013-09-12 03:12:56Z

2

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

answered Sep 12, 2013 at 3:12

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul jain · Accepted Answer · 2013-09-12 05:23:49Z

2

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

$(function(){
icon_hover();

});

answered Sep 12, 2013 at 5:23

Rahul jain

1103 silver badges12 bronze badges

Comments

Yuan Zhaohao · Accepted Answer · 2013-09-12 03:18:55Z

1

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

answered Sep 12, 2013 at 3:18

Yuan Zhaohao

5845 silver badges4 bronze badges

Comments

Thanos · Accepted Answer · 2013-09-12 03:23:50Z

1

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.

answered Sep 12, 2013 at 3:23

Thanos

3,0592 gold badges16 silver badges30 bronze badges

Comments

Praveen · Accepted Answer · 2013-09-12 05:28:11Z

1

Put your startup method bindings inside.document ready.

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

Also check for any duplicate html elements having same Id.

edited Sep 12, 2013 at 5:28

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

answered Sep 12, 2013 at 3:17

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

Comments

Sasidharan · Accepted Answer · 2013-09-12 05:31:46Z

1

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

answered Sep 12, 2013 at 5:31

Sasidharan

3,7503 gold badges21 silver badges37 bronze badges

Collectives™ on Stack Overflow

Jquery script works in JSfiddle but not on html page

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related