Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Fading in and out

Reply
Thread Tools

Fading in and out

 
 
Rich Sagall
Guest
Posts: n/a
 
      05-15-2006
I am just learning Javascript and looking for some help with having a
series of quotes that will fade in and out of the website.

Thanks,

Rich
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      05-15-2006
Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:

> I am just learning Javascript and looking for some help with having a
> series of quotes that will fade in and out of the website.


Fading on a page should be possible,
but having text fade out of a whole website,
that would be telling!

IE only:

<http://msdn.microsoft.com/library/default.asp?
url=/workshop/author/filter/reference/filters/fade.asp>

If you want more than the IE only filters, look here:

<http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>

But that is not a beginners task.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
 
 
 
Rich Sagall
Guest
Posts: n/a
 
      05-15-2006
Evertjan. <(E-Mail Removed)> wrote:

> Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:
>
> > I am just learning Javascript and looking for some help with having a
> > series of quotes that will fade in and out of the website.

>
> Fading on a page should be possible,
> but having text fade out of a whole website,
> that would be telling!
>
> IE only:
>
> <http://msdn.microsoft.com/library/default.asp?
> url=/workshop/author/filter/reference/filters/fade.asp>
>
> If you want more than the IE only filters, look here:
>
> <http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>
>
> But that is not a beginners task.


I wasn't clear - not the whole page, just a small section of the website
needs to fad in and out with different quotes from users of the website.

Rich
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      05-15-2006
Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:

> Evertjan. <(E-Mail Removed)> wrote:
>
>> Rich Sagall wrote on 15 mei 2006 in comp.lang.javascript:
>>
>> > I am just learning Javascript and looking for some help with having
>> > a series of quotes that will fade in and out of the website.

>
> I wasn't clear - not the whole page, just a small section of the
> website needs to fad in and out with different quotes from users of
> the website.


It seems you have a strange definition of the word website, Rich:

A website can contain thousands of webpages.

Clientside Javascript only [mainly] acts in and on one single page.

>>
>> Fading on a page should be possible,
>> but having text fade out of a whole website,
>> that would be telling!
>>
>> IE only:
>>
>> <http://msdn.microsoft.com/library/default.asp?
>> url=/workshop/author/filter/reference/filters/fade.asp>
>>
>> If you want more than the IE only filters, look here:
>>
>> <http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80>
>>
>> But that is not a beginners task.


What about these links, was that what you asked for?


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      05-15-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) (Rich Sagall) writes:

> I am just learning Javascript and looking for some help with having a
> series of quotes that will fade in and out of the website.


The easiest and most portable is to just change the color of the text
to match the background. If the background isn't a solid color, you'll
have to fade the text to transparent, which is not as widely supported
(it's not part of the current CSS standard, but will probably be in the
next one, many years from now).

To fade text from one color to the next, we'll need a function to
calculate the intermediate steps. For this I'll construct a Color-
object contructor with appropriate methods:

----

/** r,g,b must be integers in range [0,255] for toString to work */
function Color(r,g,b) {
this.r = r;
this.g = g;
this.b = b;
}
/** otherColor is a Color, degree is number in range [0..1] */
Color.prototype.blend = function blend(otherColor, degree) {
var invDegree = 1 - degree;
return new Color(Math.round(otherColor.r * degree + this.r * invDegree),
Math.round(otherColor.g * degree + this.g * invDegree),
Math.round(otherColor.b * degree + this.b * invDegree));
};
Color.prototype.toString = function toString() {
return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
};

// then the animator

/**
* elem : element to apply style to
* styleProp: style property to assign color to (e.g. "color"
* or "backgroundColor")
* color1: starting color;
* color2: ending color
* steps : number of intermediate steps
* delay : number of milliseconds between steps (approx.)
* callback: optional function called when fading is complete.
* called with elem, styleProp and color2 as arguments.
*/
function fade(elem, styleProp, color1, color2, steps, delay, callback) {
var step = 0;
var id = setInterval(function() {
step++;
var newColor = color1.blend(color2, step/steps);
elem.style[styleProp] = newColor.toString();
if (step >= steps) {
clearInterval(id);
if (callback) {
callback(elem, styleProp, color2);
}
}
}, delay);
return id;
}

// then just use it: fade from black-on-white to orange-on-black in 0.5sec
fade(document.body, "color", new Color(0,0,0), new Color(0xff, 0x80, 0),
50, 10);
fade(document.body, "backgroundColor", new Color(255,255,255),
new Color(0, 0, 0), 50, 10);

---

You can the fade your quote in and out with this (assume the background is
white):
---
<blockquote id="myQuote" style="background:white;color:black;">
This is a quote
</blockquote>

<script type="text/javascript">
var quoteBlock = document.getElementById("myQuote");
var black = new Color(0,0,0);
var white = new Color(255,255,255);
var quotes = [
"This is a quote",
"This is NOT a quote",
"This is a puppy",
"Lorem ipsum etc"];

function gotoQuote(i) {
fade(quoteBlock,"color", black, white, 50, 20, function() {
quoteBlock.innerHTML = quotes[i]; // or however it's changed;
fade(quoteBlock, "color", white, black, 50, 20, function() {
setTimeout(function() {
gotoQuote((i+1)%quotes.length);
}, 5000); // next quote after 5 sec.
})
});
}

gotoQuote(1);
</script>
---

Good luck
/L
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript Opacity - Fading In and Out MartinRinehart@gmail.com Javascript 0 07-04-2008 06:16 PM
JPEG fading and Sensor size cjcampbell Digital Photography 166 04-06-2006 05:59 PM
fading DVD movie in and out using NeroVision Express 3 Takanohans DVD Video 1 07-30-2005 04:40 AM
Printing pix and fading inks Frederick Knox Digital Photography 21 08-17-2004 08:13 PM
speakers fading out and popping JohnF Computer Support 8 10-30-2003 11:56 PM



Advertisments