using javascript in process success message - oracle-apex

Question

I am using Apex 4.0.2. My goal is to have my success message flash at the top after I succesfully fill out a form. I have a javascript function:
<script type="text/javascript">
{var i = 1,timer;
window.onload=function() {
timer = setInterval('flash()', 500);
}
function flash() {
if (i<10000) {
if (i%2 == 0) {
document.getElementById('flash').style.backgroundColor = '#ffffff';
} else {
document.getElementById('flash').style.backgroundColor = '#ffff00';
}
} else {
document.getElementById('flash').style.backgroundColor = '#ffffff';
clearInterval(timer);
}
i++;
}
</script>
I placed this code originally on the javascript tab of the page that the form branches to. Later I moved it to the process success message along with the call to the function
<center>
<table id="flash" BORDER=0 >
<tr>
<td>Success!</td>
</tr>
</table>
</center>
I receive an error from the page on Firebug:
document.getElementById("flash") is null
document.getElementById('flash').style.backgroundColor = '#ffff00';
Internet Explorer tells me :
Message: Object required
I think my problem is that the success message region object does not always exist. Is there any way to execute the function only when I make that call to display the success message?
In advance,
Thanks so much for your help!

Answer 1

The javascript region has its uses, but i'd recommend using dynamic actions since they provide a much clearer overview of what takes place on your page.
Edit your page header (page, edit), or add to your css:
<style>
.flash1{
background-color: blue;
}
.flash2{
background-color: yellow;
}
</style>
Create a new dynamic action:
Event: Page Load, Condition: none
As true action, select 'Execute Javascript Code' as action.
Use jQuery to fetch objects and toggle between classes. It's cleaner
since you don't mix in css/style in javascript.
var $smsg = $(".uMessageText"), flash;
$smsg.addClass('flash1');
if($smsg.length){
flash = setInterval(function(){
$smsg.toggleClass('flash1');
$smsg.toggleClass('flash2');
}, 1000);
setTimeout(function(){
clearInterval(flash);
}, 10001);
};
This will change the class on the success message each second for 10
seconds. The interval is cleared after those 10 seconds. No
interval will be started if the success message has not been found
since the jQuery object will be empty (length=0).
var $smsg = $(".uMessageText")
This is the selector for your success message element, and this
example is the selector for that element in Theme 23. Be aware that
the success message id or class depends on your chosen theme and
page template, and you'll most likely need to change it. Of
course, the selector can be any element you'd like.
If you're not familiar with jQuery, i'd advise you to take a look at it. It is included in apex by default (and apex relies on it), and is a very powerful tool when javascripting. http://jquery.com/
In short though: select element by id: $("#id_attribute_here"), select by class $(".class_name_here")