Javascript working on Jsfiddle but not on dreamweaver, getting uncaught syntaxerror unexpected token and the like

Question

this is and example of what I am doing http://jsfiddle.net/ep39v/78/, the frame work was very kindly given to me by Minko Gechev

it works perfectly on Jsfiddle but I just have no idea why it wont transfer to dreamweaver these are my current files:

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/MattyScript.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>

<body>
<button id="showFormBtn">Show form</button>
<div class="form"></div>
<div class="box"></div>
<script>
positionForm();
</script>
</body>

JAVASCRIPT

(function($){
var form = $('.form');
var form2 = $('.box');


function positionForm() {
    form.css({
        top: -form.height(),
        left: ($(document.body).width() - form.width()) / 2
    });
}

function addListeners(background) {
    background.click(function() {
        background.fadeOut(300, function() {
            background.remove();
        });
        form.animate({
            top: -form.height() - 10
        }, 300);
        form2.animate({
            left: '100%'
        }, 300);
        setTimeout(function() {
            form2.css('display', 'none');
        }, 301);
    });
}

function showForm() {
    var form = $('.form');
    var form2 = $('.box');
    positionForm();
    form2.css('display', 'block');
    form.animate({
        top: 10
    }, 1500, 'easeOutElastic');
    form2.animate({
        left: '50%'
    }, 1500, 'easeOutElastic');
}

function fadeBackground(callback) {
    var background = $('<div class="background"></div>');
    $(document.body).append(background);
    background.fadeTo(300, 0.5, function() {
        if (typeof callback === 'function') {
            callback();
        }
    });
    addListeners(background);
}

$('#showFormBtn').click(function() {
    fadeBackground(showForm);
});

form.click(function(e) {
    e.stopImmediatePropagation();
});

positionForm()})(jQuery);;

CSS

@charset "utf-8";
/* CSS Document */
.form {
    width: 30%;
    height: 40%;
    background: black;
    position: absolute;
    z-index: 20;
}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    display:none;
    top: 100px;
    margin-left: -25%;
}
body {
    height: 100%;
}
.background {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: black;
    opacity: 0;
    z-index: 10;
}

Help!

Similiar http://stackoverflow.com/questions/12719859/syntaxerror-unexpected-token-illegal — Musa, Nov 17 '12 at 19:32
Orginally it was saying that postionform() was undefined and that there were uncaught illgeal tokens so I ran it through JSbin and still nothing is working I also removed the the (function($) and now it is saying everything is fine but nothing is working when i try it on chrome — Matt, Nov 17 '12 at 19:46

score 1 · Accepted Answer · answered Nov 17 '12 at 19:46

1

If you cut-and-pasted the code from jsfiddle, chances are very good that you picked up some garbage characters, probably towards the end of your code.

Delete the last couple of lines and type them back in by hand.

answered Nov 17 '12 at 19:46

Pointy

405,095
59
585
614

Ok I tried that on my JavaScript code, I also removed the easing properties on animation so that it worked on JSbin but when I test them on Dreamweaver it doesn't work at all, I could hand rewrite the entire block – Matt Nov 17 '12 at 20:14
Well the problem is a cut-and-paste thing; if you're getting errors that aren't as mysterious as the "illegal token" thing, then the best course of action is to just debug the issues with the browser debugger/console etc. – Pointy Nov 17 '12 at 20:22
Chrome's debugger isn't giving me any errors I have removed the positionform() from the html and that still works on JSbin I guess I will just have rewrite the lot of it, damn pain really, I say at one point this (function($){})(JSquery) thing what does that do? – Matt Nov 17 '12 at 20:32
That's just a convention to avoid conflicts with the $ symbol. You're importing jQuery in your Dreamweaver code right? (Probably you are, or else you'd definitely get some errors.) – Pointy Nov 17 '12 at 20:36
yeah the code is JQuery and during my testing I contained part of the code in that function and it kind worked, the background faded in but there was no animation, I am just stumped really – Matt Nov 17 '12 at 20:39
Well I'm not 100% sure but it might help to put your script at the end of the ``, or else run it as a "ready" handler. By default, jsfiddle sets up your code to run in a "load" handler, which happens even after "ready". – Pointy Nov 17 '12 at 20:53
Ok I just downloaded the working JSbin version and it works but the style and script is on the html so I am assuming the error comes from my link to the javascript and that the errors aren't being called – Matt Nov 17 '12 at 21:00

Javascript working on Jsfiddle but not on dreamweaver, getting uncaught syntaxerror unexpected token and the like

1 Answers1