2 Replies - 474 Views - Last Post: 05 March 2012 - 10:43 PM

#1 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Can't get animation function to work.

Posted 05 March 2012 - 09:30 PM

Hey Dreamers,

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 :)

Is This A Good Question/Topic? 0
  • +

Replies To: Can't get animation function to work.

#2 heikz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 05-March 12

Re: Can't get animation function to work.

Posted 05 March 2012 - 10:36 PM

Hello mate!

What browser did you used?

Well if won't work on your default browser try another browser... :bigsmile:
Was This Post Helpful? 0
  • +
  • -

#3 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Can't get animation function to work.

Posted 05 March 2012 - 10:43 PM

Well my default is Safari, and firefox didn't work either. :/ Is there something wrong with the way i attached the script to my "contactpaper" div?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1