Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

fade in/out and loop

Status
Not open for further replies.
alainroger

alainroger

IS-IT--Management
Nov 18, 2006
3
Hi,

i'm still working on my news/rss ticker class type.
i'm able to fade in/fade out each news (each div), but only for once...
how can i loop (all fade in/out) without killing the server CPU load of to let page works normally ?

e.g :

- I have 3 news/rss topics which should be displayed on 1 php page.
fade in 1st news, pause 2 s, fade out 1st news and fade in 2nd news,...
when the 3rd news is going to fade out, i want to loop to fade in the 1st news...

how can i do that ?

thanks a lot,

Alain
 
Sort by date Sort by votes
I'm guessing you've got a tight loop with no timer use... I'd investigate "setTimeout" or "setInterval" - whichever better suits your purposes (although I tend to use setTimeout, as my thoughts are it will always put less strain on the CPU - not sure how accurate those thoughts are, though).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
unfortunately not, because when i use settimeout, CPU is used a 100%.
i would like to make my fade in / out works all the time that user is on the web page, but without killing CPU resource or memory...

i do not think so that it is possible to have several thread like in C++ :-(

Alain
 
Upvote 0 Downvote
Here is my html page :
<html>

<head>

<title></title>
<head>
<SCRIPT TYPE="text/JavaScript" SRC="Scroller.js"></SCRIPT>
</head>
<body>

<script language="javascript">
var ticker = new Scroller('absolute',50,100,500,250);
ticker.SetBorder(true,1,'#AAAAFF','solid');
ticker.SetBackgroundColor(true,'#EEEEFF');
ticker.AddFeed("this is a simple test 1");
ticker.AddFeed("another stupid test");
ticker.AddFeed("a very very long text, just to show the differences with the others");
ticker.Start();

</script>


</body>

</html>


and here is my .js code
var output_scroller="";
var enumScrollerType = new Array("fading","scrolling");

// constructor of Scroller class
function Scroller(strPosition,iLeft, iTop, iWidth, iHeight)
{
this.timer = 0;
this.Feed = new Array();
this.ScrollerType = enumScrollerType[0]; // fading
this.iFeedAmount=0;
this.Position = strPosition;
this.Left = iLeft;
this.Top = iTop;
this.Width = iWidth;
this.Height = iHeight;
this.Scrolling = 'no';
this.BrowserType = this.DetectBrowserType();
this.BrowserVersion = this.DetectBrowserVersion();
}

Scroller.prototype.DetectBrowserType = function()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
BType = "IE";
}
else if (navigator.appName == "Netscape")
{
BType="NN";
}
return(BType);
}

Scroller.prototype.DetectBrowserVersion = function()
{
if(parseInt(navigator.appVersion) == "5")
{
BVersion ="5";
}
else if(parseInt(navigator.appVersion) == "4")
{
BVersion ="4";
}
else if(parseInt(navigator.appVersion) == "3")
{
BVersion ="3";
}
return (BVersion);
}

// Add article to Scroller
Scroller.prototype.AddFeed = function(article)
{
// alert(this.Feed.length);
this.Feed[this.Feed.length] = article;
}

// Set Border to Object
Scroller.prototype.SetBorder = function(bBorder, iBorderWidth, strBorderColor, strBorderLine)
{
if(bBorder)
{
this.Border = true;
this.BorderWidth = iBorderWidth;
this.BorderColor = strBorderColor;
this.BorderLine = strBorderLine;
}
else
{
this.Border = false;
this.BorderWidth = 0;
this.BorderColor = 'FFFFFF';
this.BorderLine = 'none';
}
}

// start the scrolling
Scroller.prototype.Start = function()
{
// fading mode
if(this.ScrollerType == "fading")
{
if(this.Feed.length>0)
{
this.Render(); // first element
for(i=0;i<this.Feed.length;i++)
{
var divid = "divfeed"+i;
this.FadeInOut(divid,2000,2000,2000);
if(i==this.Feed.length-1)// last article
{
i=0;
}
// alert(divid);
}
}
}
// scrolling mode
else
{
alert('scrolling');
}
}


// Render the object appearance
Scroller.prototype.Render = function()
{
output_scroller += "<div id='FirstDiv'" +
"style='" +
"position:" + this.Position +
";left:" + this.Left +
";top:" + this.Top +
";width:" + this.Width +
";height:" + this.Height +
";border-color:" + this.BorderColor +
";border-width:" + this.BorderWidth + "px" +
";border-style:" + this.BorderLine +
";background-color:" + this.BackgroundColor +
";' SCROLLING='" + this.Scrolling + "'>";

for (i=0;i<this.Feed.length;i++)
{
output_scroller += "<div id='divfeed"+ i + "' " +
"style='" +
"background-color:#BBBBEE;" +
"margin:3px;" +
"width:" + (this.Width-6) + "px;" +
"height:" + (this.Height-6) + "px;" +
"opacity:0;" +
"filter:alpha(opacity=0);" +
"MozOpacity:0;" +
"KhtmlOpacity:0;" +
"display:none;" +
"' >" +
this.Feed +
"</div>";
}

output_scroller += "</div>";
document.write(output_scroller);
// alert(output_scroller);
}

Scroller.prototype.FadeInOut = function(id, TimeFadeIn, TimeFadeOut, TimeToPause)
{
var speedIn = Math.round(TimeFadeIn / 100);
var speedOut = Math.round(TimeFadeOut / 100);
var pause = Math.round(TimeToPause / 100);

// alert('FADEINOUT - ID : '+id);
// alert("START : "+id+".style.display (before) : " + document.getElementById(id).style.display);
var objdiv = document.getElementById(id);
objdiv.style.display='';
// alert("START : "+id+".style.display (after) : " + document.getElementById(id).style.display);
changeOpac(50,id);
/* for(i = 0; i <= 100; i++)
{

setTimeout("changeOpac(" + i + ",'" + id + "');",(this.timer * speedIn));
this.timer++;
}
// alert('FADEINOUT : IN - end');
for(i = 0; i <= 100; i++)
{
setTimeout("",(this.timer * pause));
this.timer++;
}
for(i = 100; i >= 0; i--)
{
setTimeout("changeOpac(" + i + "," + id + ")",(this.timer * speedOut));
this.timer++;
}
*/
objdiv.style.display='none';
// alert("START : "+id+".style.display (end of function) : " + document.getElementById(id).style.display);
}


//change the opacity for different browsers
//Scroller.prototype.changeOpac = function(opacity, id)
function changeOpac(opacity, ident)
{
var object = document.getElementById(ident).style;
object.Opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
// alert("OPACITY for "+ document.getElementById(ident).id + " : " + object.opacity);
}

Scroller.prototype.opacity = function(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

// alert('OPACITY : speed = '+ speed);
// alert('Start : ' + opacStart + "\n" + 'End : ' + opacEnd);
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd)
{
for(i = opacStart; i >= opacEnd; i--)
{
setTimeout("this.changeOpac(" + i + ",'" + id + "');",(timer * speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
// alert("id - Start : " +id);
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
}

Scroller.prototype.blendimage = function(divid, imageid, imagefile, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;

//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

//make image transparent
changeOpac(0, imageid);

//make new image
document.getElementById(imageid).src = imagefile;

//fade in image
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}

// set tje background color of object
Scroller.prototype.SetBackgroundColor = function(bBGColor, strBGColor)
{
if(bBGColor)
{
this.BackgroundColor = strBGColor;
}
else
{
this.BackgroundColor = 'FFFFFF';
}
}
 
Upvote 0 Downvote
It's the tight loop that's doing it:

Code: 
for (i=0; i<this.Feed.length; i++) {
	var divid = 'divfeed' + i;
	this.FadeInOut(divid, 2000, 2000, 2000);
	if (i == this.Feed.length-1) {
		i = 0;
	}
}

This is basically looping around indefinately, but very quickly. You need to not do this, and refactor things to use a timer instead.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
705
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
590
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
640
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
187
ggriffit
ggriffit
EEM6498
  • Locked
  • Question
Combine First_Name and Last_Name into Name - Javascript
Replies
1
Views
409
Praveen425188
Praveen425188

Part and Inventory Search

Sponsor

Back
Top