fade in and out messages in a single div

Forum Moderators: open

Message Too Old, No Replies

fade in and out messages in a single div

drooh

1:29 am on Jul 11, 2011 (gmt 0)

Trying to have messages fade in and out of a single div. I am having problems trying to figure this out...

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script>
$(document).ready(function() {
$("#clicker").click(function(){

$('#msg').hide().html('Thank you!').fadeIn('slow');

$('#msg').fadeOut('slow');

$("#msg").hide().delay(2250).html('You will now be re-directed').fadeIn('slow');

});

});

</script>

<div id="msg"></div>
<br />
<input id="clicker" type="button" name="" value="CLICK" />

JAB Creations

7:32 pm on Jul 11, 2011 (gmt 0)

Stop using jQuery, it's not JavaScript, it's not cross-browser compatible and it depends on unreliable proprietary methods such as innerHTML. Use real JavaScript. Doing a search brought up the following code which I cleaned up for you...

- John

//Usage...
fade('my_element_id_here');

// Function below...
var TimeToFade = 1000.0;

function fade(id)
{
 if (document.geteById(id))
 {
 var e = document.geteById(id);

 if (e.FadeState == null)
 {
 if (e.style.opacity == null || e.style.opacity == '' || e.style.opacity == '1')
 {
 e.FadeState = 2;
 }
 else
 {
 e.FadeState = -2;
 }
 }

 if (e.FadeState == 1 || e.FadeState == -1)
 {
 e.FadeState = e.FadeState == 1 ? -1 : 1;
 e.FadeTimeLeft = TimeToFade - e.FadeTimeLeft;
 }
 else
 {
 e.FadeState = e.FadeState == 2 ? -1 : 1;
 e.FadeTimeLeft = TimeToFade;
 setTimeout("animateFade(" + new Date().getTime() + ",'" + id + "')", 33);
 }
 }
}

drooh

7:56 pm on Jul 11, 2011 (gmt 0)

Hey thanks for the reply, but I cant get this to work. Im using chrome.

Here is what I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fade</title>
<script>
//Usage...

// Function below...
var TimeToFade = 1000.0;

function fade(id)
{
if (document.geteById(id))
{
var e = document.geteById(id);

if (e.FadeState == null)
{
if (e.style.opacity == null || e.style.opacity == '' || e.style.opacity == '1')
{
e.FadeState = 2;
}
else
{
e.FadeState = -2;
}
}

if (e.FadeState == 1 || e.FadeState == -1)
{
e.FadeState = e.FadeState == 1 ? -1 : 1;
e.FadeTimeLeft = TimeToFade - e.FadeTimeLeft;
}
else
{
e.FadeState = e.FadeState == 2 ? -1 : 1;
e.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + id + "')", 33);
}
}
}
</script>
</head>
<body>

<input type="button" onclick="fade('fade')" value="Click Me" />
<div id="fade">HELLO</div>
</body>
</html>

I noticed you had geteById ? Is that correct?

drooh

8:47 pm on Jul 11, 2011 (gmt 0)

<body>
<script>
$(document).ready(function(){
$("#clicker").click(function(){
$("#msg").hide().html("Thank You").fadeIn("slow");
$("#msg").fadeOut("slow",function(){
$("#msg").html("You will now be re-directed").fadeIn("slow");
$("#msg").fadeOut("slow");
setTimeout("location.href = 'http://elp7.com/';",2500);
});
});
});
</script>
<input id="clicker" type="button" value="Click Me" />
<div id="msg"></div>
</body>