SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fade effect when swapping layers?

    I'm usinf this script to swap layers
    http://www.dyn-web.com/dhtml/show-hide/sh-hd-on.html
    Code:
    /*************************************************************************
      This code is from Dynamic Web Coding at http://www.dyn-web.com/
      Copyright 2001-3 by Sharon Paine 
      See Terms of Use at http://www.dyn-web.com/bus/terms.html
      regarding conditions under which you may use this code.
      This notice must be retained in the code as is!
    *************************************************************************/
    
    // resize fix for ns4
    var origWidth, origHeight;
    if (document.layers) {
    	origWidth = window.innerWidth; origHeight = window.innerHeight;
    	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }
    
    // link style change
    var cur_link;
    function doLinkClass(lnk) {
      if (lnk && lnk.blur) lnk.blur();	// remove marquee
      if (!lnk || cur_link == lnk) return;
      if (cur_link) cur_link.className = "done";
      lnk.className = "on";
      cur_link = lnk;
    }
    
    var cur_lyr;	// holds id of currently visible layer
    function swapLayers(lnk,id) {
      doLinkClass(lnk);
      if (cur_lyr) hideLayer(cur_lyr);
      showLayer(id);
      cur_lyr = id;
    }
    
    function showLayer(id) {
      var lyr = getElemRefs(id);
      if (lyr && lyr.css) lyr.css.visibility = "visible";
    }
    
    function hideLayer(id) {
      var lyr = getElemRefs(id);
      if (lyr && lyr.css) lyr.css.visibility = "hidden";
    }
    
    function getElemRefs(id) {
    	var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getLyrRef(id,document): null;
    	if (el) el.css = (el.style)? el.style: el;
    	return el;
    }
    
    // get reference to nested layer for ns4
    // from old dhtmllib.js by Mike Hall of www.brainjar.com
    function getLyrRef(lyr,doc) {
    	if (document.layers) {
    		var theLyr;
    		for (var i=0; i<doc.layers.length; i++) {
    	  	theLyr = doc.layers[i];
    			if (theLyr.name == lyr) return theLyr;
    			else if (theLyr.document.layers.length > 0) 
    	    	if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
    					return theLyr;
    	  }
    		return null;
      }
    }
    
    function init(id,lyr) {
      var lnk = getElemRefs(id);
      swapLayers(lnk,lyr);
    }
    Now I wonder: Is there any easy JS I can add that makes a fade effect?
    I'm no good at JS myself, so if anyone could point me to some code that's be great!

    Many thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For javascript effects i'd get scriptaculous.

    Check these pages:

    http://wiki.script.aculo.us/scriptac...ow/Effect.Fade : fade out

    http://wiki.script.aculo.us/scriptac...Effect.Appear# : fade in

    scriptaculous is pretty eay to use once you get over a few initial hurdles You should be able to trigger these effects when your swapLayers() function runs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.layers is only supported by Netscape Navigator 4. No one is using that browser so your script is essentially useless.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fotiman View Post
    document.layers is only supported by Netscape Navigator 4. No one is using that browser so your script is essentially useless.
    Hmmm, but as far as I see this is only used for back compatibility with NN4, isn't it?

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yes, you are correct. I only looked quickly (though such a backwards compatibility check isn't needed since no one uses NN4).

  6. #6
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's true. I'll remove that. thanks for getting back.


Bookmarks

Posting Permissions

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