Reputation: 31

Javascript wont execute on website?

I am trying to get my Javascript to execute on my website now I have laid the code out properly within the HTML but it wont load when I load the webpage.

Here is the jsfiddle of what it looks like when it is working.

Here is also the website live on the web where it still is not working to see the problem in action at the bottom of the page.

Below is the top of html to show how I have laid out the scripting for it.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50 Project</title>
    <link rel="shortcut icon" href="http://ryankerswell.co.uk/photography/wp-content/uploads/2014/11/144-iPad-App-Icon.png">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,400,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/case-study.css">
    <link rel="stylesheet" href="css/before-and-after.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/before-and-after.js" type="text/javascript"></script>
  </head>

And here is the before-and-after.js Javascript that makes the animation work.

var wrapper = $("div.reveal");

wrapper.mousedown(function(e) {
    $(this).data("sliding", true);
    var offs = e.pageX - $(this).offset().left
    $(this).find('div').width(offs);
}).mousemove(function(e) {
    if ($(this).data("sliding")) {
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }
});

$(document).mouseup(function(e) {
    wrapper.data("sliding", false);
})

I have talked to a coder that I work with and it works on his machine but not on mine and he cant seem to see anything wrong with it so is there something that is not right?

Plus this code works fine on jsfiddle but not when I load the code from my own html page.

Upvotes: 0

Answers (3)

Ryan Kerswell

Reputation: 31

Ok found the problem I think, this is the code I used in my javascript.

var wrapper = $("div.reveal");

wrapper.mousedown(function(e) {
    $(this).data("sliding", true);
    var offs = e.pageX - $(this).offset().left
    $(this).find('div').width(offs);
}).mousemove(function(e) {
    if ($(this).data("sliding")) {
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }
});

$(document).mouseup(function(e) {
    wrapper.data("sliding", false);
})

$(document).ready(function(e) {
   alert("it's started");
}

And this code that @puddinman13 supplied seemed to work.

$(document).ready(function(){
    var wrapper = $("div.reveal");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});

Maybe I didn't add the document ready script a the beginning right or I didn't lay out the javascript correctly but thank you it now works. Good work guys ;)

Upvotes: 0

Spencer Wieczorek

Reputation: 21575

You forgot a closing ):

$(document).ready(function(e) {
   alert("it's started");
}); // <-- This was just `}`

Also this var wrapper = $("div.reveal"); needs to be in the $(document).ready function, since the DOM didn't load the element yet. So for example:

$(document).ready(function(e) {
   alert("it's started");
   wrapper = $("div.reveal"); 
});

The reason why it works in jsfiddle is because the JS code executed when the page loads, this is not the case for you code as I pointed out above. wrapper would still work in the fiddle since the code is not ran until everything loaded.

Upvotes: 1

puddinman13

Reputation: 1408

Put your javascript code in a script block and make sure it's in a document.ready block.

<script type="text/javascript">
$(document).ready(function(){
    var wrapper = $("div.reveal");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});
</script>

Upvotes: 0

Javascript wont execute on website?

Answers (3)

Related Questions