animation - Javascript move a div smoothly and let another appear -

-

i'm trying create site u can click on links in menu , div below menu moves down smoothly, , when reached position should text appears in new gap..

i'm in beginning of learning js dont expect much.. somehow animation not work , setinterval couldnt it..

here's code:

<!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=iso-8859-1" /> <style>     /* css document */     #container{         border: 1px solid #339999;           width: 798px;     }     #top{         background-image:url(images/background1.jpg);         width: 800xp;         height: 289px;         background-repeat:no-repeat;     }     #bot{         background-image:url(images/background2.jpg);         width: 800xp;         height: 250px;         background-repeat:no-repeat;         margin-top:0px;     }     ul.menu{         list-style-type: none;         padding-left: 30px;         font-size:13pt;         font-family: frizquadrata, calibri;         color: #339999;     }     ul.menu li{         display:inline;     }     #text{     }     #footer{         font-size: 16px;         color: white;         font-family: frizquadrata, calibri;         position: relative;         top: 150px;         left: 450px;     }     .title{         font-size:48px;         color: #339999;         font-family: frizquadrata, calibri;     }     .subtitle{         font-size:33px;         color: #339999;         font-family: frizquadrata, calibri;     }     #logo{         position: relative;         top: 10px;         left: 500px;     }     ul li a{         text-decoration: none;         color: inherit;     }     #d0{     height:80px;     }     #d1{     height:80px;     }     #d2{     height:80px;     }     #d3{     height:80px;     } </style>  <script type="text/javascript"> var finished = false; var timeout = null; function opensite(site, finished){     menu = document.getelementbyid(site);     bot = document.getelementbyid('bot');     marg = bot.style.margintop;     sheight = menu.offsetheight;     marg = marg.slice(0,-2);     intmarg = parseint(marg, 10);     intheight = parseint(sheight, 10);     bot.style.margintop = intmarg + 2 + 'px';     if (intmarg > intheight) {         finished = true;     }     if(finished == false){         timeout = settimeout('opensite(site, finished)', 500);         cleartimeout(timeout)     } } </script>   </head>  <div id="container">     <div id="top">         <div id="logo">             <span class="title">interpresa</span><br />             <span class="subtitle">consulting gmbh</span>         </div>     </div>     <div id="text">         <ul class="menu">             <li><a href="javascript:opensite('d0', false)">projektmanagement</a>&nbsp; &nbsp; </li>             <li><a href="javascript:opensite('d1', false)">unternehmensberatung</a> &nbsp; &nbsp; </li>             <li><a href="javascript:opensite('d2', false)">interimsmanagement</a>  &nbsp; &nbsp; </li>             <li><a href="javascript:opensite('d3', false)">finanzwesen</a></li>         </ul>          <div id="d0">         d0<br /><br /><br /><br />         </div>         <div id="d1">         d1<br /><br /><br /><br />         </div>         <div id="d2">         d2<br /><br /><br /><br />         </div>         <div id="d3">         d3<br /><br /><br /><br />         </div>     </div>     <div id="bot" style="margin-top:0px;">         <div id="footer">             <table cellpadding="3">                 <tr>                     <td>schützenegg 956&nbsp;&nbsp;·</td>                     <td>5728 hontenschwil</td>                 </tr>                 <tr>                     <td> tel. 062 773 80 00 ·</td>                     <td> fax 062 773 80 05</td>                 </tr>                 <tr>                     <td colspan="2">info@interpresa.ch</td>                 </tr>             </table>         </div>     </div> </div>  <body> </body> </html>

i opened page in firefox firebug running see see.

error

clicked on projektmanagement

cleartimeout not defined

i don't know cleartimeout function , don't know you're trying it, firefox doesn't recognise it, let's start again.

stage 1

check basic errors , problems:

notice @ bottom of file have put empty body element , you've put div elements outside body element. don't know if that's causing problem, odd.

strange global variables , how declare variables:

i don't know why declared finished global variable. use parameter in opensite function , locally scoped global variable superfluous. likewise timeout. don't need @ all, if did, locally scoped variable fine.

when declaring variables within scope of function, sure use word var, otherwise become global variables. declare them in 1 comma-delimited statement @ top of function. if don't, declarations hoisted top of function anyway might make code readable possible putting them there in first place.

naming conventions:

opensite function not constructor should in camel case: opensite

i changed variables intmarg intmarg. they're more readable.

stage 2

separate markup script

i know starting javascript, it's better start parts (see doug crockford's book) , best practices. put javascript code separate file.

i've separated original page 2 files: animation.html animation.js

it not practice embed javascript in html elements. add event listeners elements programatically. however, you're not using 1 of well-known libraries yahoo's yui, or jquery don't want complicated adding event handlers programmatically.

i think clearer if added event handler onclick event of each menu item instead of using href attribute. it's not practice use javascript protocol. can't remember details think it's security risk.

so, change menu items adding handler onclick event. change css pointer cursor when hover on menu items: ul li a{ text-decoration: none; color: inherit; cursor:pointer; }

i changed few other css details make easier see going on.

stage 3

take baby steps. comment out in opensite function , add 1 line @ time. use alert check each line doing expect.

alert(site);

then:

menu = document.getelementbyid(site); alert(menu.offsetheight);

then:

menu = document.getelementbyid(site); bot = document.getelementbyid('bot'); marg = bot.style.margintop; alert(marg);

etc.

note here marg has value "0px". realised it's not number because call parseint later. then:

menu = document.getelementbyid(site); bot = document.getelementbyid('bot'); marg = bot.style.margintop; //marg.slice(0,-2); marg = parseint(marg); alert(marg);

i presume you're trying remove "px" marg odd slice call. i'm sure you've got mixed parameters there somewhere. why not call parseint right away?

stage 4

after reading smooth javascript animation separated out opensite function move function avoid repeated calls getelementbyid etc.

stage 5

i reduced interval on settimeout , played around values. calling move every millisecond seemed more jerky me , every 24 milliseconds smoothest, can experiment yourself.

stage 6

consider using modern framework jquery or yui because animation is, frankly, not novice programmers , endless cross-browser quirks best left experienced teams of programmers.

final points

i have uploaded version of http://selfstudy-online.co.uk/js/animation.html. let me know if answers of questions or @ least gets on right track. not satisfied smoothness of version , seems key element of question. isn't clear how final , feel work because don't have copy of background images. have version uploaded somewhere of first attempt?


Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more