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!
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.