Solved

animated expanding frame

Posted on 2004-03-31
7
761 Views
Last Modified: 2013-11-19
I am trying to create an animated expanding frame and I think I'm close but it's definetly not right. I'm using the "setTimeout" function to call the frame expansion functions but, either my time setting is off or I'm just not doing it right. I certainly don't understand the concept behind sequential function calls. Could you help and explain?

frames page:
------------------------------------------------------------------------------------

<frameset rows="80,300,*" framespacing="0" frameborder="0" id="ro">
    <frame name="head" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
    <frameset  cols="*,400,*" framespacing="0" frameborder="0" id="exp">
        <frame name="left" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
        <frame name="content" src="for.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
        <frame name="right" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
    </frameset>
    <frame name="bot" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
</frameset>



javascript:
------------------------------------------------------------------------------------

<script language="JavaScript">

function exp0(){
// the first one is if you want to remove the side frame...
parent.document.all("ro").all("exp").cols="*,450,*";
}
function exp1(){
// the first one is if you want to remove the side frame...
parent.document.all("ro").all("exp").cols="*,500,*";
}
function exp2(){
// the first one is if you want to remove the side frame...
parent.document.all("ro").all("exp").cols="*,550,*";
}
function exp3(){
// the first one is if you want to remove the side frame...
parent.document.all("ro").all("exp").cols="*,600,*";
}

var a = window.setTimeout('exp0()', 100000);
var b = window.setTimeout('window.clearTimeout(a)', 0);
var c = window.setTimeout('exp1()', 100000);
var d = window.setTimeout('window.clearTimeout(c)', 0);
var e = window.setTimeout('exp2()', 100000);
var f = window.setTimeout('window.clearTimeout(e)', 0);
var g = window.setTimeout('exp3()', 100000);
</script>

thanks
0
Comment
Question by:dsyn
  • 4
  • 3
7 Comments
 
LVL 9

Accepted Solution

by:
lombardp earned 125 total points
Comment Utility
I'm not sure to understand the effect, but if you want to implement a sequence of function calls (exp0 then after 10000ms exp1, then after 10000ms exp2,... and so on), the script should be like this:

<script language="JavaScript">

function exp0(){
parent.document.all("ro").all("exp").cols="*,450,*";   // CHANGE PARAMETERS
window.setTimeout('exp1()', 100000);                     // START TIMER FOR EXP1 CALL
}

function exp1(){
parent.document.all("ro").all("exp").cols="*,500,*";  // CHANGE PARAMETERS
window.setTimeout('exp2()', 100000);                     // START TIMER FOR EXP2 CALL
}

function exp2(){
parent.document.all("ro").all("exp").cols="*,550,*";   // CHANGE PARAMETERS
window.setTimeout('exp3()', 100000);                     // START TIMER FOR EXP3 CALL
}

function exp3(){
parent.document.all("ro").all("exp").cols="*,600,*";
}

window.setTimeout('exp0()', 100000);

</script>

SETTIMEOUT is a sort of delayed execution of the given function, with the delay set by the user.
0
 
LVL 1

Author Comment

by:dsyn
Comment Utility
It worked! I reduced the time from "100000" to "1" and the frame expanded with a real animated look. It looks really cool. Thanks!

Now the thing I did wrong was that I had to many "timeouts"?  
0
 
LVL 9

Expert Comment

by:lombardp
Comment Utility
Since SETTIMEOUT is a sort of delayed execution of the given function, with the delay set by the user, you have to start timer for function EXP1 just __AFTER__ the timeout for EXP0 has expired.

This is the correct sequence:

1) start timeout for EXP0
2) after X ms EXP0 is executed
3) start timeout for EXP1
4) after X ms EXP1 is executed
5) start timeout for EXP2
...

If you write:

var a = window.setTimeout('exp0()', 100000);
var c = window.setTimeout('exp1()', 100000);
var e = window.setTimeout('exp2()', 100000);
var g = window.setTimeout('exp3()', 100000);

All timers start (and expire) togeteher.

And adding:

var b = window.setTimeout('window.clearTimeout(a)', 0);
var d = window.setTimeout('window.clearTimeout(c)', 0);
var f = window.setTimeout('window.clearTimeout(e)', 0);

Timers are canceled just after the start.

0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 1

Author Comment

by:dsyn
Comment Utility
One more question. The script doesn't work in netscape. I never even thought to try it till my page was setup. :| is there a way to make it work?  Thanks for the explanation...
0
 
LVL 9

Expert Comment

by:lombardp
Comment Utility
Do you mean Netscape 4.x or 7.x/Mozilla ?
0
 
LVL 1

Author Comment

by:dsyn
Comment Utility
so far I tried it with netscape 4.8 and 7.02
0
 
LVL 9

Expert Comment

by:lombardp
Comment Utility
The problem is the DOM, try this:

Netscape 7.x and MSIE
---------------------------

<script language="JavaScript">

function exp0(){
parent.document.getElementById("exp").cols="*,450,*";   // CHANGE PARAMETERS
window.setTimeout('exp1()', 100000);                     // START TIMER FOR EXP1 CALL
}

function exp1(){
parent.document.getElementById("exp").cols="*,500,*";  // CHANGE PARAMETERS
window.setTimeout('exp2()', 100000);                     // START TIMER FOR EXP2 CALL
}

function exp2(){
parent.document.getElementById("exp").cols="*,550,*";   // CHANGE PARAMETERS
window.setTimeout('exp3()', 100000);                     // START TIMER FOR EXP3 CALL
}

function exp3(){
parent.document.getElementById("exp").cols="*,600,*";
}

window.setTimeout('exp0()', 100000);

</script>

0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now