WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDES |  PHP CLASSES |  CODE SEARCH |  ARTICLES SEARCH |  PHP FORUMS |  PHP MANUAL |  PHP FUNCTIONS LIST |  WEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search
Submit a code Example / Snippet Join us on FaceBook
Submit a code Example / Snippet Submit Your Code
Poker Tournaments Poker Tournaments
Poker Guide for Developers Poker Guide for Developers
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
More Weber Sites
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Resources
Web Development Content
Internet Security Software
Recommended Links
PHPClasses
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder
Recommended
פרייסז - הכח לקנות עובר לידיים שלך
Texas Holdem Poker Evangelists

Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
PHP Code Examples Submit your own code snippets Latest Code Examples RSS Feed
Title : Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML Click here to Update Your Picture
Ioannis Cherouvim
Date : Dec 03rd 2005
Grade : 3 of 5 (graded 16 times)
Viewed : 64095
File : 4261.zip
Images : No Images for this code example.
Search : More code by Ioannis Cherouvim
Action : Grade This Code Example
Tools : My Examples List
Code

Submit your own code examples  Submit your own code examples 
 

title : Javascript animated menu items

story : This is JS script for applying animation behaviour
on the menu items of a webpage. It applied the behaviour
on all <a href... elements of which belong in an element
with id='menu'. View the demo to see the example applied.

If the client does not have javascript he will only see
css :hover properties getting applied and not the
smooth animation. Nothing is injected into the HTML
file though.

Live demo @ http://temp.cherouvim.com/forums/animate/
files: /animate.js
/index.html
/style.css
/arrow.png

author : Ioannis Cherouvim
web : http://cherouvim.com
date : 2005-12-03


animate.js
function init() {

  if(document.getElementById && document.createTextNode) {
    var menu = document.getElementById('menu');
    var anchors = menu.getElementsByTagName('a');
    for(var i=0, length=anchors.length;i<length;i++) {
      anchors[i].onmouseover= function() {
        var spot = -1;
        this.setAttribute('spot', spot);
        this.style.backgroundPosition= '15px 0px';
      }
      anchors[i].onmouseout= function() {
        var spot = 15;
        this.setAttribute('spot', spot);
      }
    }
    animate();
  }
}

function animate() {
  var menu = document.getElementById('menu');
  var anchors = menu.getElementsByTagName('a');
  for(var i=0, length=anchors.length;i<length;i++) {
    var spot = anchors[i].getAttribute('spot');
    if (spot>0) {
      spot = spot - 2;
      if(spot<0) spot = 0;
      anchors[i].style.backgroundPosition= spot+'px 0px';
      anchors[i].setAttribute('spot', spot);
    }
  }

  setTimeout(animate, 4);
}
window.onload=init;


demo HTML
<html>
<head>
  <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
  <title>Animated Menu</title>
  <link rel='stylesheet' type='text/css' href='style.css' media='screen, projection' />
  <script type='text/javascript' src='animate.js'></script></head>
</head>
<body>
  <div id='main'>

  <h1>Animated Menu</h1>

  <ul id='menu'>
    <li><a href='#'>about</a></li>
    <li><a href='#'>foo</a></li>
    <li><a href='#'>bar</a></li>
    <li><a href='#'>example</a></li>
    <li><a href='#'>contact</a></li>
    <li><a href='#'>links</a></li>
  </ul>

  <div class='box'>
    <h2>title</h2>
    <p>foo bar text example.com</p>
  </div>

  </div>
</body>
</html>



Related Code Examples
Unobtrusive javascript for applying expand/shrink behaviour
Categories : DHTML, CSS, Java Script, HTML
Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML
Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script
Javascript Background Scroller
Categories : Java Script, CSS, HTML
Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML
Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS
Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides
Fancy Quick Access Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, Beginner Guides
Simple Dhtml tree using DOM
Categories : DHTML, Java Script
showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, Form Processing
Hilight Form Element onFocus
Categories : Java Script, Form Processing, CSS
Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides
Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time
How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML
Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides