views:

65

answers:

5

all i need is some client side code jQuery or JS that will alter the divs style after X seconds

like visibility : hidden; OR max-height : 50px;

or switch the class \ id of the DIV ( preferred )

+4  A: 

Plain JavaScript solution:

setTimeout(function() {
  document.getElementById('your_div_id').className = 'new_class_name';
}, X * 1000); // X = number of seconds
casablanca
this will also remove other classes, you should append the `className`
RobertPitt
True but I wasn't sure what the OP wanted, he just said "switch the class".
casablanca
+2  A: 
$(document).ready(function(){
    setTimeout('changeStyle()', 1000); //milliseconds
});

function changeStyle() {
    //do something useful
}
Calvin L
Use `setTimeout(changeStyle, 1000)` instead.
Ates Goral
will rest of the page be interactive for the timeout period or not.. and please tell how to specify the CSSs
Junaid Saeed
Yes, the page will still be interactive
Evil Andy
+5  A: 

Use setTimeout

setTimeout(function(){
  // Change the style here... If using jQuery, it turns
  $('#my_divs').css({'visibility':'hidden', 'max-height':'50px'})
  // or
  $('#my_divs').addClass('my-custom-class');
}, x_seconds);
Chubas
Don't need the quotes around property names.
Ates Goral
You do if it contains special characters, like 'max-height'. Dunno, I tend to put them when referring to css attributes, but it's just a personal preference.
Chubas
@gradbot: No, you don't in that case. Property names are only treated as strings, they're never evaluated as variables.
casablanca
A: 

IF u wanna show time after some sec again and again then use setIntervel('changeStyle()',1000);

and u just wanna use time just once then use

setTimeout('changeStyle()',1000); function changeStyle() {

// code to display time }

+1  A: 

Here is one method that I use on a current production website.

$("#divStampWrapper").delay(1500).fadeIn("fast").delay(2500).animate({ top: -250 }, 2500).delay(2500).fadeOut("slow");

Explanation: Basically it grabs the div which holds an image, waits 1.5 seconds and then starts fading it in to view. Once the fade in effect is finished, it waits another 2.5 seconds and starts moving it upward to the new top position. It then waits another 2.5 seconds and starts a fade out. I know it's a bit more than you asked for, but it's a good example of what can be done with the timer.

ColoradoRockie