light up div on page load once per refresh?

  • VeggiesanTaters
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 31, 2009
  • Posts: 7
  • Status: Offline

Post November 5th, 2009, 1:36 pm

Everytime the page loads I need a message banner div to light up so people will take notice of it.
Does anyone know how I could do this? I figured it would have something to do with onload and a javascript function. :oops:
CSS Code: [ Select ]
<!-- lit up div -->
#title {
background:#ffc;
border: 1px dotted #CCCCCC;
padding:12px 1px 6px 1px;
margin-top:0px;
width: 370px;
 margin-left: auto ;
  margin-right: auto ;
}
<!-- lit up div -->
 
<!-- div in its normal state -->
#title {
background:#E8E8E8;
border: 1px dotted #CCCCCC;
padding:12px 1px 6px 1px;
margin-top:0px;
width: 370px;
 margin-left: auto ;
  margin-right: auto ;
}
<!-- div in its normal state -->
 
<div id="title">
<center>Top 10 List </center>
</div>
 
  1. <!-- lit up div -->
  2. #title {
  3. background:#ffc;
  4. border: 1px dotted #CCCCCC;
  5. padding:12px 1px 6px 1px;
  6. margin-top:0px;
  7. width: 370px;
  8.  margin-left: auto ;
  9.   margin-right: auto ;
  10. }
  11. <!-- lit up div -->
  12.  
  13. <!-- div in its normal state -->
  14. #title {
  15. background:#E8E8E8;
  16. border: 1px dotted #CCCCCC;
  17. padding:12px 1px 6px 1px;
  18. margin-top:0px;
  19. width: 370px;
  20.  margin-left: auto ;
  21.   margin-right: auto ;
  22. }
  23. <!-- div in its normal state -->
  24.  
  25. <div id="title">
  26. <center>Top 10 List </center>
  27. </div>
  28.  
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 5th, 2009, 1:36 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 5th, 2009, 1:52 pm

Can you be more specific about what you mean by "light up" ?
Strong with this one, the sudo is.
  • VeggiesanTaters
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 31, 2009
  • Posts: 7
  • Status: Offline

Post November 5th, 2009, 2:03 pm

Like the first css is a light yellow box and the other is light grey.
Its the same box but I would like it to show as the light yellow when the page loads or is refreshed and then fade to the original color a light grey. Just so people take notice of that area of the page.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 5th, 2009, 2:40 pm

Where's the page/site in question ?

If it's already using a library such as jQuery, Prototype, or YUI for something else, the animation will easy.

For instance with jQuery, http://docs.jquery.com/Release:jQuery_1 ... Animations
Strong with this one, the sudo is.
  • VeggiesanTaters
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 31, 2009
  • Posts: 7
  • Status: Offline

Post November 6th, 2009, 12:12 pm

Thats the one but how do I make it animate without the button and just on page load?

The page is this one. plentyoftorrents dot com/tabals (it wont let me post links) :cry:

I want to animate the background of the To "Search List" div. The user clicks the green + icons while checking out movies to build a list of movies he might search later. Instead of like the main page where it just sends it right away to the search form. Im still working on trying to get it to save in a cookie so it will still be there when they refresh the page.

Thanks.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 6th, 2009, 1:50 pm

It looks like you've got the mootools library loaded for something else already, so that's what you'll want to use for animation.

I've not used mootools in probably 2 years, so I can't be of much help past pointing to manual pages and pointing out things that catch my eye in the manual pages.

The first thing I see here is the domready event mootools uses. If you look at the example in that mootools manual page, it's pretty much what you'll use, except you'll be replacing that "alert(...);" with the code to find and animate your #title element.

From there it looks like the Fx.Tween manual page is what you need.

Within the domready event you setup, that alert() line will likely end up being replaced by what you learn from the Fx.Tween manual page. That page has examples of how to setup an animation for the element.

You'll want to pay particular attention to the highlight method described in that manual page.
Strong with this one, the sudo is.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 112 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.