New Topic/Question
Reply
I'm currently trying to code a simple animation function for a menu object where the div element will move up when moused over. I have implemented the script into the html code how i thought it was supposed to appear but it won't work and Dreamweaver keeps reporting a syntax error, but i dont see one. if someone could look at my code and see what the problem is i would be grateful!
also, please try to look past my sloppy coding. If you have any tips for helping my code not be so sloppy, i wouldn't mind that either. I'm a relative noob. haha.
anyways, here's my Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<!--==============================header=================================-->
<header>
<div class="topwood"></div>
<div class="header">
<div class="imageheader"><div class="logo"><img src="images/Final-logo(small).png" width="254" height="127" alt=" Logo" /></div></div>
<div class="menu">
<div class="contactpaper">CONTACT</div>
<script>('#contactpaper').mouseOver(function() {
$('#contactpaper').animate({
up: '+=50'
}, 5000});
</script>
<div class="ourstorypaper">OUR STORY</div>
<div class="menupaper">MENU</div>
<div class="homepaper">HOME</div>
</div>
</div>
</header>
<!--==============================content=================================-->
<div class="wrapper">
<div class="toppaper"></div>
<div class="content-back">
<div class="content">Content for class "content" Goes Here</div>
</div>
<div class="bottompaper"></div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="bottomwood">Content for class "bottomwood" Goes Here</div>
</footer>
</body>
</html>
and here's my css if you are curious or if it will help:
@charset "UTF-8";
/* CSS Document */
body {
margin:0px;
padding:0px;
background-color:#000;
}
.wrapper {
z-index: 3;
top: 0.9in;
position: absolute;
width: 100%;
}
.topwood {
background-image: url(images/Woodtop.jpg);
background-repeat: repeat-x;
height: 1in;
width: 100%;
z-index: 1;
overflow: visible;
background-position: 0px 0px;
position: relative;
margin: 0px;
padding: 0px;
}
.toppaper {
background-image: url(images/papertexturetop.png);
background-repeat: repeat-x;
width: 100%;
height: 20px;
visibility: visible;
}
.bottompaper {
background-image: url(images/papertexturebottom.png);
background-repeat: repeat-x;
width: 100%;
height: 30px;
visibility: visible;
}
.content {
height: 400px;
width: 500px;
padding-top: 40px;
margin: auto;
}
.bottomwood {
background-image: url(images/woodbottom.jpg);
background-repeat: repeat-x;
height: 1.5in;
width: 100%;
z-index: 1;
overflow: visible;
background-position: 0px 0px;
position: absolute;
margin: 0px;
padding:0;
top: 465px;
}
.content-back {
height: auto;
width: 100%;
background-color: #FFF;
}
.logo {
height: auto;
width: auto;
margin-top: -65px;
margin-left: -10px;
position: relative;
z-index: 4;
left: -2px;
top: -19px;
}
.header {
margin: auto;
height: auto;
width: 550px;
z-index: 4;
padding-right: 225px;
}
.menu {
float: left;
height: 100px;
width: 300px;
position: relative;
z-index: 1;
top: -55px;
left: 250px;
}
.homepaper {
background-image: url(images/homepaper.png);
background-repeat: no-repeat;
height: 100px;
width: 75px;
padding-top: 25px;
padding-left: 30px;
position: absolute;
}
.menupaper {
background-image: url(images/menupaper.png);
background-repeat: no-repeat;
height: 100px;
width: 120px;
padding-top: 25px;
padding-left: 60px;
position: absolute;
margin-left: 65px;
}
.ourstorypaper {
background-image: url(images/ourstorypaper.png);
background-repeat: no-repeat;
height: 100px;
width: 120px;
padding-top: 25px;
padding-left: 30px;
position: absolute;
margin-left: 190px;
}
.contactpaper {
background-image: url(images/contactpaper.png);
background-repeat: no-repeat;
height: 100px;
width: 120px;
padding-top: 25px;
padding-left: 25px;
position: absolute;
margin-left: 330px;
}
.logo2 {
float: left;
height: auto;
width: auto;
}
.imageheader {
height: auto;
width: 600px;
position: absolute;
z-index: 4;
margin: auto;
}
Thanks again guys, you are an immense help. I will definitely spread the word about this site to my designer friends
MultiQuote
Is there something wrong with the way i attached the script to my "contactpaper" div?
| 