found: a cross-browser page transition script. Mission: modify :)

canadianjameson

01-21-2006, 09:47 PM

Hey.

I found a seemingly cross-browser page transition script and I was wondering if anyone knew how to modify it as follows: currently it boxes-in, I would like it to circle-out. Can it be done... *cue cheezy lighting strike in background*

I found it here:
http://www.siteexperts.com/tips/styles/ts30/page2.asp

and here's the code and info from the page:

<STYLE>

</STYLE>

Next, you need to define a DIV that represents the transition effect. This DIV is displayed the full width and height of your screen (initialized by code in next step), and then is resized smaller and smaller. This creates the illusion of a box transition effect.

You should include this DIV immediately following the <BODY> tag on your page.

<DIV ID=box></DIV>

Last, you need to include the following script on your page. The script resized the box by adjusting the clipping rectangle. To resolve the object model differences, the script needs to detect and run slightly different scripts to adjust the sizes:

This script should be included immediately following the above DIV. By placing this script following the DIV, but before your pages content, you cause the transition to start as soon as possible.

<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>

Single Paradox

01-21-2006, 10:04 PM

Yes, but instead of giving it a background color... make a background image, but the image has to be a circle. I hope it works for you :thumbsup: It looks shnazy

_Aerospace_Eng_

01-21-2006, 10:24 PM

There is a reason why you hear something called the box model very often. You will need to use an image, I think an image with a circle on it, witha the sides being transparent, then having it resized until it gets to 0 would work.

canadianjameson

01-21-2006, 10:39 PM

cool cool.

what modifications would I need to make to sections of the code such as

layer-background-color:Navy; border: .1px solid navy; clip: rect(0 100% 100% 0)}
...
function boxIn(nTop, nLeft, nWidth, nHeight, stepWidth,stepHeight) {
nWidth -= stepWidth*2
nHeight -= stepHeight*2
nLeft += stepWidth
nTop += stepHeight
if (IE4) {
nLeft += stepWidth
nTop += stepHeight
box.style.pixelTop = document.body.scrollTop
box.style.pixelLeft = document.body.scrollLeft
box.style.clip = "rect(" + nTop + " " + nWidth + " " + nHeight + " " + nLeft + ")"
}
else
{
box.top = window.pageYOffset
box.left = window.pageXOffset
box.clip.left = nLeft
box.clip.width = nWidth
box.clip.top = nTop
box.clip.height = nHeight
}
steps--
if (steps>0)
setTimeout("boxIn(" + nTop + "," + nLeft + "," + nWidth + "," + nHeight + "," + stepWidth + "," + stepHeight + ")",10)
}

// -->
</SCRIPT>

I ask because i've never used the clip function so i dont know what relation it has to the rest of the script.

also, and completely unrelated but not worth its own thread: if a div contains images but has display: none... does the browser still download the images, or does it wait until it is visible to download? (or does it download it after all else is loaded)

_Aerospace_Eng_

01-21-2006, 10:58 PM

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
background:#000;
}
#thecircle {
position:absolute;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-250px;
}
</style>
<script type="text/javascript">
var dims = 500;
function init(){
dims -= 50;
themarg = dims / 2;
document.getElementById('thecircle').style.width = dims+'px';
document.getElementById('thecircle').style.height = dims+'px';
document.getElementById('thecircle').style.marginTop = '-'+themarg+'px';
document.getElementById('thecircle').style.marginLeft = '-'+themarg+'px';
thestarter = setTimeout("init()",100);
if(dims <= 0){
clearTimeout(thestarter);
}
}
window.onload = init;
</script>
</head>

<body>
<script type="text/javascript">
document.write('<img src="circle.gif" width="'+dims+'" height="'+dims+'" alt="" id="thecircle" />');
</script>
</body>
</html>

canadianjameson

01-22-2006, 01:21 AM

nicely done aero. I feel somewhat stupid because when I said circle-in I meant circle out. i tried to modify the code as follows and it worked (somewhat), but the circle didn't zoom out centered, it floatedout towards the top left corner. here's what I tried.

...
var dims = 0;
function init(){
dims += 50;
themarg = dims * 2;
...

now before I waste anyones time here, i'm going to show you the effect I am trying to acheive. if it can't be done with this method i will drop the issue and let you help others. i may be annoying with my requests, but i do try to only make them when i will use the outcome.

currently i have this: http://www.enviromark.ca/fvjones/intro2.htm. When you hit the enter button you'll see the effect i'm going for. The only problem with the approach currently is the momentary appearance of that little white square for a half second. if you can tell me how to get rid of that, even if this cross-browser approach fails i'll be happy(ish).

now that you know what I'm trying to do, be straight up with me. if it can't be done, thats okay... i just didn't want to waste your time.

the only approach is saw would be having the intro page load on the same page as the index.htm, but have the entire index.htm container div display:none until the enter button is hit. maybe this would give you the leverage to make the transition script "appear" to work

vwphillips

01-22-2006, 09:59 AM

as normal no idea about what your talking of and the demo did not a lot

but talk of clipping

normally found it easier to use overflow and center the image at center of overflow area

_Aerospace_Eng_

01-22-2006, 03:54 PM

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
background:#000;
}
#thecircle {
position:absolute;
top:50%;
left:50%;
margin-left:-25px;
margin-top:-25px;
}
</style>
<script type="text/javascript">
var dims = 50;
function init(){
dims += 50;
themarg = dims / 2;
thebrowserwid = document.body.clientWidth || window.innerWidth;
thebrowserhgt = document.body.clientHeight || window.innerHeight;
document.getElementById('thecircle').style.width = dims+'px';
document.getElementById('thecircle').style.height = dims+'px';
document.getElementById('thecircle').style.marginTop = '-'+themarg+'px';
document.getElementById('thecircle').style.marginLeft = '-'+themarg+'px';
thestarter = setTimeout("init()",100);
if(dims > thebrowserwid || dims > thebrowserhgt){
clearTimeout(thestarter);
document.getElementById('thecircle').style.display = 'none';
}
}
window.onload = init;
</script>
</head>

<body>
<script type="text/javascript">
document.write('<img src="circle.gif" width="'+dims+'" height="'+dims+'" alt="" id="thecircle" />');
</script>
</body>
</html>

canadianjameson

01-22-2006, 04:18 PM

cool, thank you.

dgm

03-18-2007, 10:11 PM

Is there a way to make this script open the web page?
I searched every where, looking for something like this. Black background, circle out exposing my home page.

Any help most appreciated.

_Aerospace_Eng_

03-19-2007, 12:31 AM

You would need a lot of images like 20-100 images because you would need to change the image each time on setTimeout and put in the transparent image. You can easily do it with a square though.
http://www.dynamicdrive.com/dynamicindex3/index.html