Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    <STYLE>
    <!--
      #box {position: absolute; top:0; left: 0;z-index: 100; background: Navy;
      layer-background-color:Navy; border: .1px solid navy; clip: rect(0 100% 100% 0)}
    -->
    </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">
    <!--
    // Box Transition Effect
    // Copyright 1998, InsideDHTML.com, LLC. All rights reserved
    // See http://www.insideDHTML.com for more information
    // This code can be reused as long as the above notice is retained.
    
    // Determine Version
    var NS =navigator.appName == "Netscape"
    var MS = navigator.appName == "Microsoft Internet Explorer"
    var ver = parseInt(navigator.appVersion)
    var NS4 = NS && ver>=4
    var IE4 = MS && ver>=4
    
    // This determines how fast of a transition
    var steps = 50
    
    var box = null
    function startup() {
    if (NS4 || IE4) {
      if (IE4) {
        box = document.all.box    
        var nWidth = box.style.pixelWidth = document.body.clientWidth 
        var nHeight = box.style.pixelHeight = document.body.clientHeight 
      } else {
        box = document.layers.box
        var nWidth = box.clip.width = window.innerWidth
        var nHeight = box.clip.height = window.innerHeight
      }
      var nTop = nLeft = 0
      destWidth = nWidth/2
      destHeight = nHeight/2
      var stepWidth = destWidth/steps
      var stepHeight = destHeight/steps
      boxIn(nTop, nLeft, nWidth, nHeight, stepWidth,stepHeight)
    }
    }
    
    // Small timeout allows IE5 to recalc document.
    setTimeout("startup()",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>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 It looks shnazy
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    cool cool.

    what modifications would I need to make to sections of the code such as
    Code:
    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)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    Attached Thumbnails Attached Thumbnails found: a cross-browser page transition script.  Mission: modify :)-circle.gif  
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.

    Code:
    ...
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    cool, thank you.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    dgm
    dgm is offline
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question on the above script.

    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.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Last edited by _Aerospace_Eng_; 03-19-2007 at 01:33 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •