CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Quintin
Quintin

Reputation: 309

Code works in jsfiddle but doesn't work on my site

I have coded a div that is mostly hidden until clicked on where it expands and then is hidden again when clicked on. You can look at the jsfiddle for that here: http://jsfiddle.net/Z8vEs/1/

I have used this method on another website and it works there, but for some reason not on a new website I am crafting, and frankly I am stumped and frustrated. I am not very well versed in jQuery so I am not sure how to go about debugging, so any suggestions would be appreciated. The only other jQuery I am using is an edited version of an image slider from codrops: http://tympanus.net/codrops/2011/08/09/portfolio-image-navigation/

You can view my website to see the issue for yourself at http://quintinmarcus.com/

Thanks for any help -Quintin

Upvotes: 1

Views: 683

Answers (3)

Varinder
Varinder

Reputation: 2664

Because 'custom.js' file is loaded before <div id="about"> is created, you might wanna do something like this:

$(document).ready(function() {
    $("#about").click(function() {
    if($('#about').css('width') == '83px'){
      $('#about').animate({'width':'380px'},350);
      $('#about').animate({'height':'457px'},350);
    }
    else{
      $('#about').animate({'width':'83px'},350);
      $('#about').animate({'height':'11px'},350);
    }
    });

 });

Upvotes: 0

Scott Simpson
Scott Simpson

Reputation: 3850

I think there is an illegal character at the end of your script. I put this into the console and it worked (I removed the character):

$("#about").click(function() {
    if ($('#about').css('width') == '83px') {
        $('#about').animate({
            'width': '380px'
        }, 350);
        $('#about').animate({
            'height': '457px'
        }, 350);
    }
    else {
        $('#about').animate({
            'width': '83px'
        }, 350);
        $('#about').animate({
            'height': '11px'
        }, 350);
    }
});

Upvotes: 0

darkAsPitch
darkAsPitch

Reputation: 1875

It doesn't look like you are loading jQuery properly on your website.

Inside the javascript file named custom.js you can see this:

/* ANIMATE ABOUT BOX */
$("#about").click(function() {
    if($('#about').css('width') == '83px'){
        $('#about').animate({'width':'380px'},350);
        $('#about').animate({'height':'457px'},350);
    }
    else{
        $('#about').animate({'width':'83px'},350);
        $('#about').animate({'height':'11px'},350);
    }
});

When it should really look like this:

/* ANIMATE ABOUT BOX */
$(document).ready(function(){

    $("#about").click(function() {
        if($('#about').css('width') == '83px'){
            $('#about').animate({'width':'380px'},350);
            $('#about').animate({'height':'457px'},350);
        }
        else{
            $('#about').animate({'width':'83px'},350);
            $('#about').animate({'height':'11px'},350);
        }
    });
});

Note the jQuery initiating script and closing tags at the top and bottom of the new version.

jsfiddle is adding that code by default for you since it is so common.

Upvotes: 1

Related Questions