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 )
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 )
Plain JavaScript solution:
setTimeout(function() {
document.getElementById('your_div_id').className = 'new_class_name';
}, X * 1000); // X = number of seconds
$(document).ready(function(){
setTimeout('changeStyle()', 1000); //milliseconds
});
function changeStyle() {
//do something useful
}
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);
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.