homepage Welcome to WebmasterWorld Guest from 23.20.61.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
fade in and out messages in a single div
fade in and out messages in a single div
drooh

5+ Year Member



 
Msg#: 4337784 posted 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

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4337784 posted 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

5+ Year Member



 
Msg#: 4337784 posted 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

5+ Year Member



 
Msg#: 4337784 posted 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved