Closed Thread Icon

Topic awaiting preservation: Opacity fade issues with nested DIV Pages that link to <a href="https://ozoneasylum.com/backlink?for=8872" title="Pages that link to Topic awaiting preservation: Opacity fade issues with nested DIV" rel="nofollow" >Topic awaiting preservation: Opacity fade issues with nested DIV\
 
Author Thread
BeSquished
Obsessive-Compulsive (I) Inmate

From: San Francisco, CA
Insane since: Sep 2003

 posted posted 09-28-2003 03:54

I have a series of nested divs:
<div id=frame1>
titl
<div id=content1>
content
</div>
<a href=close this window>
</div>

I am trying to change the opacity of both divs at the same time.
my script will work if I interupt it with an alert() box, but if I
dont, it just PoPs open without the gradual fade?

Its like the screen cant refresh while its thinking? Can I force
it to refresh?

I have tried using:

for<x,y,z>
function(a,b,c)

AND

setTimeout('function(x,y,z)',500)

and get the same results---Pop it opens, Pop it closes...

Any ideas?


get squished,

BeSquished
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 09-28-2003 04:02

You need to use a *series* of setTimeout's, each one making it slightly more (or less) transparent than the previous, to acheive an animation effect.
BeSquished
Obsessive-Compulsive (I) Inmate

From: San Francisco, CA
Insane since: Sep 2003

 posted posted 09-28-2003 04:25

Note: \; are because this is contained in jscripts.lib which places in html with perl and
; need to be ignored by perl to avoid issues.

I am using a loop with function values passed(frame1,content1,0) (0 is the initial fade value):

function fadeIn(frame,id,fad) {
if (document.all) {
if (fad != 100) {
fadnew = ++fad\;
document.getElementById(frame).filters.alpha.opacity = fadnew \;
document.all(id).filters.alpha.opacity = fadnew \;
}
else {
document.getElementById(frame).filters.alpha.opacity = fad \;
document.all(id).filters.alpha.opacity = fad \;
return \;
}
}
else if (document.getElementById) {
if (fad != 100) {
fadnew = ++fad\;
document.getElementById(frame).style.MozOpacity = (fadnew / 100) \;
document.getElementById(id).style.MozOpacity = (fadnew / 100) \;
}
else {
document.getElementById(frame).style.MozOpacity = (fad / 100) \;
document.getElementById(id).style.MozOpacity = (fad / 100) \;
return \;
}
}

fad = null;
fad = fadnew;
for(i=0\;i<20000\;++i)\;
fadeIn(frame,id,fad) \;
}


like I said this works if I interuppt it before the fadeIn(x,y,z) call at the end of the function.
If I dont interupt it it just rips through the loop like nobodys business. If I try to increase
the timeout, or the for loop I get slow script errors.

get squished,

BeSquished

[This message has been edited by BeSquished (edited 09-28-2003).]

[This message has been edited by BeSquished (edited 09-28-2003).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 09-28-2003 05:20

A for loop is never the way to go when creating animation. What you want is something like this:

var framelength = 100; // milliseconds
var framenum = 0;
var numframes = 300;
function animfunc()
{
// do animation here; use framenum/(numframes-1) to see how far through the animation you are
framenum ++;
if (framenum < numframes)
{
setTimeout('animfunc();', framelength);
}
}
animfunc();
BeSquished
Obsessive-Compulsive (I) Inmate

From: San Francisco, CA
Insane since: Sep 2003

 posted posted 09-28-2003 05:31

Now Im just confuzed ... Of all the pages Ive looked at,
the only variance I made was changing the set Timeout
to a for loop.

As for the framenumbers, framelength, etc. Im just
trying to fade a couple of layers in and out and shut them
off when opacity is at 0.

It works perfectly except for the 'refresh' issue. When
I stall the script, it works... elsewise, not. I dont understand
why?


Ill show you the whole script in a minute....

get squished,

BeSquished
___________________________________________________________________________

Ive worked very hard on these scripts
Please do not rip them off--let me know of you want to use them.

This is how they work:
turn on div visibility and display, then fade in.
fade out, then turn off div visibility and display

the link in my documents calls openDiv and closeDiv
the html below is oversimplified but you get the point.

This script works Except it goes way too fast... if I
dont alert every level of fade.

Why?

--------------------------------

<head>
. . .

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide Script
function initPage() {
closeviewer();
closeDiv('frame1','career','1');
closeDiv('frame2','edutrn','1');
closeDiv('frame3','prohis','1');
closeDiv('frame4','expskl','1');
closeDiv('frame5','sample','1');
closeDiv('frame6','recomm','1');
}

function fadeFade(framec,idc,frameo,ido) {
closeDiv(framec,idc,'100');
openDiv(frameo,ido,'0');
}
// -->
</script>


<style> // base style settings
#frame1 {
visibility:hidden; display:none; position:absolute; top:0; left:0;
width:602; height:228; z-index:3;
overflow:hidden; clip:rect(0,601,229,0); border-width:3; border-style:inset;
filter:alpha(opacity=1); -moz-opacity:0.01;
layer-background-color:#336666; background-color:#336666; border-color:#333366
}
#career {
visibility:hidden; display:none; position:relative; top:0; left:0;
width:580; height:171; z-index:99;
overflow:auto; clip:rect(0,580,175,0); border-width:1; border-style:solid;
filter:alpha(opacity=1); -moz-opacity:0.01;
layer-background-color:#333366; background-color:#333366; border-color:#FFFFFF
}

. . .
</style>

<script language="Javascript" type="text/javascript">
<!-- Hide Script
function openDiv(frame,id,fad) {
showHide(frame,id) ;
fadeIn(frame,id,fad) ;
}

function closeDiv(frame,id,fad) {
fadeOut(frame,id,fad) ;
showHide(frame,id) ;
}

function fadeIn(frame,id,fad) {
if (document.all) {
if (fad != 100) {
fadnew = ++fad;
document.getElementById(frame).filters.alpha.opacity = fadnew ;
document.all(id).filters.alpha.opacity = fadnew ;
}
else {
document.getElementById(frame).filters.alpha.opacity = fad ;
document.all(id).filters.alpha.opacity = fad ;
return ;
}
}
else if (document.getElementById) {
if (fad != 100) {
fadnew = ++fad;
document.getElementById(frame).style.MozOpacity = (fadnew / 100) ;
document.getElementById(id).style.MozOpacity = (fadnew / 100) ;
}
else {
document.getElementById(frame).style.MozOpacity = (fad / 100) ;
document.getElementById(id).style.MozOpacity = (fad / 100) ;
return ;
}
}

fad = null;
fad = fadnew;
setTimeout('fadeIn(frame,id,fad)',500) ;
}

function fadeOut(frame,id,fad) {
if (document.all) {
if (fad != 0) {
fadnew = --fad;
document.all[frame].filters.alpha.opacity = fadnew ;
document.all[id].filters.alpha.opacity = fadnew ;
}
else {
document.all[frame].filters.alpha.opacity = fad ;
document.all[id].filters.alpha.opacity = fad ;
return;
}
}
else if (document.getElementById) {
if (fad != 0) {
fadnew = --fad;
document.getElementById(frame).style.MozOpacity = (fadnew / 100) ;
document.getElementById(id).style.MozOpacity = (fadnew / 100) ;
}
else {
document.getElementById(frame).style.MozOpacity = (fad / 100) ;
document.getElementById(id).style.MozOpacity = (fad / 100) ;
return;
}
}
fad = null;
fad = fadnew;
setTimeout('fadeOut(frame,id,fad)',500) ;
}

function showHide(frame,id) {
if (document.all) {
var vis = (document.all[id].style.visibility ) ;
var vis = (document.all[id].style.visibility == 'hidden') ? 'visible' : 'hidden';
document.all[frame].style.visibility = vis ;
document.all[id].style.visibility = vis;

var dis = (document.all[id].style.display) ;
var dis = (document.all[id].style.display == 'none') ? 'block' : 'none' ;
document.all[frame].style.display = dis;
document.all[id].style.display = dis;

var tops = ((document.body.clientHeight / 2) - 69) ;
document.all[frame].style.top = tops;

var lefty = ((document.body.clientWidth / 2) - 325) ;
document.all[frame].style.left = lefty;

}
else if (document.getElementById) {
var vis = (document.getElementById(id).style.visibility) ;
var vis = (document.getElementById(id).style.visibility == 'hidden') ? 'visible' : 'hidden';
document.getElementById(frame).style.visibility = vis;
document.getElementById(id).style.visibility = vis;

var dis = (document.getElementById(id).style.display) ;
var dis = (document.getElementById(id).style.display == 'none') ? 'block' : 'none';
document.getElementById(frame).style.display = dis;
document.getElementById(id).style.display = dis;

var tops = ((document.body.clientHeight / 2) - 83) ;
document.getElementById(frame).style.top = tops;

var lefty = ((document.body.clientWidth / 2) - 336) ;
document.getElementById(frame).style.left = lefty;
}
}

// -->
</script>


</head>
<body>

<a href=javascript penDiv(frame1,career,0)>Career Highlights</a>

<div id:Frame1>
Career Highlights
<a href =javascript:fadeFade(frame1,career,frame2,references)>Next:Refs</a>
<div id:career>
. . .
</div>
<a href=js:closeDiv(frame1,career,100)>Close</a>
</div>

blah blah
</body>
</html>

[This message has been edited by BeSquished (edited 09-28-2003).]

[This message has been edited by BeSquished (edited 09-28-2003).]
wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

 posted posted 09-28-2003 21:25

I dont know how to make it slow down - visibility is really funny on javascript. The only time I got it to work was for a enu script, but then javascript had to move in the same loop, so it had to update the visibility with each move of the object I guess. This is the code if you want to see it:

<html>
<div id="mine" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;position:absolute;left:-100;background-color:448844;width:100;text-align:center"><table onMouseOver="set('mine')" width=100 style="background-color:ff0000;text-align:center" border=1 cellpadding=0 cellspacing=0><tr><td onClick="window.location.href='http://kimber-ja.demon.co.uk'">hello</td></tr><tr><td>goodbye</td></tr></table></div>
<div id="minf" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;position:absolute;top:40;left:-100;background-color:448844;width:100;text-align:center"><table onMouseOver="set('minf')" width=100 style="background-color:ff0000;text-align:center" cellpadding=0 cellspacing=0 border=1><tr><td onClick="alert('hello')">hello</td></tr><tr><td>goodbye</td></tr></table></div>
<div id="ming" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;position:absolute;top:65;left:-100;background-color:448844;width:100;text-align:center"><table onMouseOver="set('ming')" width=100 style="background-color:ff0000;text-align:center" cellpadding=0 cellspacing=0 border=1><tr><td onClick="alert('hello')">hello</td></tr><td onClick=alert("goodbye")>goodbye</td></table></div>
<div id="other" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;border-color:ffffff;position:absolute;background-color:884444;width:100;text-align:center" onMouseOver="menToMove('mine');display()" onMouseOut="remove()">View</div>
<div id="othera" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;top:40;border-color:ffffff;position:absolute;background-color:884444;width:100;text-align:center" onMouseOver="menToMove('minf');display()" onMouseOut="remove()">View second</div>
<div id="otherb" onMouseOut="setRemove()" style="filter:alpha(opacity=100);height:20;top:65;border-color:ffffff;position:absolute;background-color:884444;width:100;text-align:center" onMouseOver="menToMove('ming');display()" onMouseOut="remove()">View third</div>

<script>
function menToMove(input) {
curmov=input
}
function set(input) {
curout=input
}
function setRemove() {
curout="that"
setTimeout("remove()",30)
}
var curmov="mine"
var curout="that"
var menus=new Array("mine","minf","ming")
function remove() {
for (var i=0;i<menus.length;i++) {
if (menus[i]!=curout) {
eval("setTimeout('"+menus[i]+".style.posLeft=-100',10)")
}
}
}
function display() {
if (curmov!=curout) {
eval(curmov+".style.posLeft=20")
curout=curmov
slide()
}
}
function slide(input) {
eval("if ("+curmov+".style.posLeft<110) {"+curmov+".style.posLeft+=3;"+curmov+".filters.alpha.opacity=("+curmov+".style.posLeft-35);setTimeout('slide()',10)}")
}
</script>

</html>

Its a bit of a bodge etc, but it works to an extent. I have never bothered to try to improve it - havent got a use for it. Feel free to rip it anyone, but please give me credit, and tell me where you are going to put it (though I am unsure why anyone in their right minds would want to copy this )

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail