SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling layers work sometimes ...

    Hi all.

    I'm no JavaScript expert, but can someone who is shed some light on this one, cos it beats the hell outa me!

    Rather than me posting a load of code, have a look at the source of this -- messy I know, but it works (and messy happens when you're strapped for time .... )

    Anyway, the latest site I'm doing I was thinking to myself, "Greg, what the hell are you doing -- you know these JavaScripts should be in linked files ...!" And so I moved them to linked files, and now the scrolling layers don't work!

    Now I do have to post loads of code cos this isn't live yet, but here's the HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Jaguar Careers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="imagetoolbar" content="no">
    <link rel="stylesheet" href="css/mainstyle.css" type="text/css">
    
    <script src="css/MM.js" type="text/javascript" title="Macromedia"></script>
    <script src="css/scroller.js" type="text/javascript" title="Scroller"></script>
    
    <script language="JavaScript" type="text/javascript">
    function refresh()
    {
        window.location.replace( 'default.htm' );
    }
    </script>
    
    </head>
    
    
    
    <body onResize="refresh()">
    
    <script src="css/center-layer.js" type="text/javascript" title="CenterLayer"></script>
    
    <div id="centerLayer">
    
    <div id="wndo1"> 
    <div id="cnt1_1" class="content"> 
      <p><img src="img/title-home.gif" width="250" height="35"><br>
        <span class="bodyfont">Du irure nulla molestias excpteur eligent est congue 
        legum ard facto congue nihili distinct culpa labore et dolore impedit civius 
        torem clupa qui officia deserunt milit anim ide harund derund facilis est 
        er expedit est et distinct irur dolor voluptate consequat. Du irure regliguare 
        aliquip tempor ipso facto congue hinili distinct culpa labore et colore impedit 
        civiud delinit. Facilis magna cepteur sint. </span></p>
      <p class="bodyfont">Facilis magna cepteur sint occaecat cupidata non pro sunt 
        offica mollis id est expecit disredum veniums quisqu ipso facto imper ned 
        soluta bolis. Quisque sibi verus dolor voluptate consequat. Du irure regulare 
        aboretum molis facto tabor un deus magnificat.</p>
    </div>
    </div>
    
      <div id="divUpControlMain"><a href="#" onmouseover="inchUp(0); window.status='Hover here to scroll up.'; return true" onmouseout="clearTimeout(t); window.status=''"> <img src="img/up.gif" width="10" height="10" border="0" ALT="Hover here to scroll up."></a></div>
      <div id="divDownControlMain"><a href="#" onmouseover="inchDown(0); window.status='Hover here to scroll down.'; return true" onmouseout="clearTimeout(t); window.status=''"> <img src="img/down.gif" width="10" height="10" border="0" ALT="Hover here to scroll down."></a></div>
    
    
      <div id="Graphic" class="graphic"><script src="css/random-image.js" type="text/javascript" title="RandomImage"></script></div>
    <div id="Background" class="bg"></div>
      <div id="mainNav" class="mainNav"><img src="img/logo.gif" width="80" height="50" alt="Jaguar logo."><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Apply','','img/main-nav_02-over.gif',1)"><img name="Apply" border="0" src="img/main-nav_02.gif" width="45" height="50" alt="Apply."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Benefits','','img/main-nav_03-over.gif',1)"><img name="Benefits" border="0" src="img/main-nav_03.gif" width="60" height="50" alt="Benefits."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Culture','','img/main-nav_04-over.gif',1)"><img name="Culture" border="0" src="img/main-nav_04.gif" width="50" height="50" alt="Culture."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Places','','img/main-nav_05-over.gif',1)"><img name="Places" border="0" src="img/main-nav_05.gif" width="55" height="50" alt="Places."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Opportunities','','img/main-nav_06-over.gif',1)"><img name="Opportunities" border="0" src="img/main-nav_06.gif" width="80" height="50" alt="Opportunities."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','img/main-nav_07-over.gif',1)"><img name="Events" border="0" src="img/main-nav_07.gif" width="55" height="50" alt="Events."></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FAQs','','img/main-nav_08-over.gif',1)"><img name="FAQs" border="0" src="img/main-nav_08.gif" width="65" height="50" alt="FAQs."></a></div>
    
    
    
    </div>
    
    </body>
    </html>
    Here's 'scroller.js' (copied and pasted -- no errors -- it just doesn't do anything!):

    Code:
    dom = (document.getElementById) ? true : false;
    ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
    ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    ns4 = (document.layers && !dom) ? true : false;
    ie4 = (document.all && !dom) ? true : false;
    nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
    
    var inc = 4; // controls speed of scroll (larger number for faster scroll)
    var timer = 20; // interval between calls to scroll onmouseover
    var t=0;	// for setTimeouts
    
    var done;
    wndo = new Array();	// for window layers
    cntLyrs = new Array();	// for scrolling content areas
    
    function getLyrTop() { return parseInt(this.css.top); }
    function getLyrLeft() { return parseInt(this.css.left); }
    
    function shiftTo(x,y) {
    	if (ns4) { this.css.moveTo(x,y); } 
    	else { this.css.left=x+"px"; this.css.top=y+"px"; }
    }
    
    function shiftBy(x,y) {
    	if (ns4) { this.css.moveBy(x,y); }
    	else { 
    		this.css.left = parseInt(this.css.left)+x+"px";
    		this.css.top = parseInt(this.css.top)+y+"px";
    	}
    }
    
    function inchRight(num) {
    	if (!done) return; var y = cntLyrs[num].getLeft();	
    	if (y>-maxX[num]) { 
    		cntLyrs[num].shiftBy(-inc,0);
    		//cntLyrs[num].css.left=parseInt(cntLyrs[num].css.left)-inc;
    		t = setTimeout("inchRight(\'"+num+"\')",timer);	
    	}
    }
    
    function inchLeft(num) {
    	if (!done) return; var y = cntLyrs[num].getLeft();	
    	if (y<0) { 
    		cntLyrs[num].shiftBy(inc,0);
    		t = setTimeout("inchLeft(\'"+num+"\')",timer);	
      }
    }
    
    function inchDown(num) {
    	if (!done) return; var y = cntLyrs[num].getTop();	
    	if (y>-maxY[num]) { 
    		cntLyrs[num].shiftBy(0,-inc);
    		t = setTimeout("inchDown(\'"+num+"\')",timer);	
    	}
    }
    
    function inchUp(num) {
    	if (!done) return; var y = cntLyrs[num].getTop();	
    	if (y<0) { 
    		cntLyrs[num].shiftBy(0,inc);
    		t = setTimeout("inchUp(\'"+num+"\')",timer);	
      }
    }
    
    ////////////////////////////////////////////////////////////////////
    //  Constructor function used for creating scrollable content areas.
    //	Used to create both wndo and content objects.
    ////////////////////////////////////////////////////////////////////
    function createObj(obj,nest,id) {
    	this.el = (ns4)? (nest)? document.layers[nest].document.layers[obj]: document.layers[obj]: (ie4)? document.all[obj]: (ie5||ns5)? document.getElementById(obj): null;
    	this.css = (ns4)? this.el: (ie4||ie5||ns5)? this.el.style: null;
    	this.height = (ns4)? this.el.clip.height: (ie4||ie5)? this.el.clientHeight: (ns5)? this.el.offsetHeight: 0;
    	this.width = (ns4)? this.el.clip.width: (ie4||ie5)? this.el.clientWidth: (ns5)? (id)? document.getElementById(id).offsetWidth: this.el.offsetWidth: 0;
    	this.getLeft = getLyrLeft;	this.getTop = getLyrTop;
    	this.shiftBy = shiftBy;			this.shiftTo = shiftTo;
    }
    
    
    /*
    This code is from Dynamic Web Coding 
    www.dyn-web.com 
    
    Copyright 2001 by Sharon Paine 
    Permission granted to use this code as long as this 
    entire notice is included.
    */
    
    dom = (document.getElementById) ? true : false;
    ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
    ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    ns4 = (document.layers && !dom) ? true : false;
    ie4 = (document.all && !dom) ? true : false;
    nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
    
    var origWidth, origHeight;
    if (ns4) {
    	origWidth = window.innerWidth; origHeight = window.innerHeight;
    	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }
    
    function initObjs() {
    /////////////////////////////////////////////////////////////
    //  Argument for creating wndo objects:	id of wndo div.
    //	Arguments for creating content:
    //	id of content div, id of its wndo div (div it is nested in),
    //	id of table or other html element that contains content. 
    //	NOTE: Netscape 6 needs that html container and its id 
    //	in order to get width for horizontal scrolling.
    //	If only using vertical scrolling, that extra container
    //	is not necessary.
    /////////////////////////////////////////////////////////////
    
    	// first scrollable content area
    	wndo[0] = new createObj('wndo1');	
    	cntLyrs[0] = new createObj('cnt1_1','wndo1');
    	
    
    
    	/////////////////////////////////////////////////////////////////////
      //  Don't remove these lines
    	// set left, top to 0,0 (necessary for all but ns4 to get top,left)
    	for (var i=0; i<cntLyrs.length; i++){ 
    		cntLyrs[i].shiftTo(0,0);
    	}
    	// to keep track of distance to scroll
    	maxX = new Array(); maxY = new Array();
    	for (var i=0; i<wndo.length; i++) {
      	maxX[i] = cntLyrs[i].width - wndo[i].width;
    		maxY[i] = cntLyrs[i].height - wndo[i].height
      }
    	done = true;	// ready
    }
    
    window.onLoad = initObjs;
    And the Macromedia scripts are in 'MM.js'. I've included this because last time this happened I found out that the onLoad parameter that DW had put in the body tag was upsetting the scroller (note that I've commented out the window.onLoad at the bottom of MM.js just in case). I suspect again that scroller.js and MM.js are clashing somehow but I can't see it for looking! Anyway:

    Code:
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    
    /* window.onLoad = MM_preloadImages('img/main-nav_02-over.gif','img/main-nav_03-over.gif','img/main-nav_04-over.gif','img/main-nav_05-over.gif','img/main-nav_06-over.gif','img/main-nav_07-over.gif','img/main-nav_08-over.gif'); */
    If anyone has any clue as to why this isn't working then PLEASE enlighten me. Many thanks,

    G

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sussed this in the end. Thanks to anyone who looked at it and went "WTF???!!"

    The window.onLoad = initObjs; line at the bottom of 'scroller.js' needed to be in the HTML page.

    G


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
  •