light up div on page load once per refresh?

  • VeggiesanTaters
  • Newbie
  • Newbie
  • VeggiesanTaters
  • Posts: 7

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Can you be more specific about what you mean by "light up" ?
  • VeggiesanTaters
  • Newbie
  • Newbie
  • VeggiesanTaters
  • Posts: 7

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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
  • VeggiesanTaters
  • Newbie
  • Newbie
  • VeggiesanTaters
  • Posts: 7

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 110 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.