Results 1 to 3 of 3

Thread: Conveyor Belt modification?

  1. #1
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Conveyor Belt modification?

    Script: Conveyor Belt slideshow script
    url: http://www.dynamicdrive.com/dynamici...rightslide.htm

    Hi, javascript newbie here...
    I'm using the above mentioned conveyor Belt Slideshow and it works GREAT!
    But I'm wondering if there's a way to make the slideshow a table cell background
    instead of the main image in the cell.
    The reason being is that I'm running a moving 'pano' behind a stationary row of bushes for a 3-D effect.
    Right now the bushes are a in layer and the layer doesn't place correctly in Netscape.

    The site is at http://www.rsvpmms.org/cvbtest/

    Am I shooting for the moon or is this doable?

    Thanks.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default Try this

    I hope you don't mind, but I re-wrote your website using CSS (Which is a way to separate the display from the content).

    I did this because I couldn't read the website - so many tables.

    I have written a script that should be sufficient for you needs.

    Any questions, just ask.


    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>
    	<title>Welcome to Mercer County!</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<style>
    		/* Layout Stylesheet */ 
    
    body {
     margin:20px;
     background:#808080;
     color: #333333;
     text-align:center;
     padding:0;
     }
    
    #outer {
     text-align:left;
     border:1px solid #000000;
     width:900px;
     margin:auto;
     }
    
    #hdr {
     height:117px;
     background:#eeeeee;
     color: #333333;
     }
    
    #bar {
     height:25px;
     background:#c0c0c0;
     color: #333333;
     border:solid #000000;	
     border-width:1px 0 1px 0;
     }
    
    #bodyblock {
     position:relative;
     background: #dcdcdc;
     color: #333333;
     width:900px;
     padding:0;
     }
    
    #l-col {
     float:left;
     background:#dcdcdc;
     color: #333333;
     width:160px;
     }
    
    #cont {
     width:740px;
     background:#ffffff;
     color: #333333;
     border:solid #000000;	
     border-width:0 0 0 1px;
     text-align:left;
     }
    
    #ftr {
     height:25px;
     background:#c0c0c0;
     color: #333333;
     border:solid black;
     border-width:1px 0 0 0;
     margin:0;
     }
     
     /* Presentation Stylesheet */ 
    
    h3, p {
     margin:0;
     padding:15px;
     }
    
    h4 {
     margin:0; 
     padding: 5px 0;
     }
     
    p:first-letter {
     font-size: 80%; 
     font-weight: bold;
     color:blue;
     }
    		
    	</style>
    	
    	<script language="JavaScript" type="text/JavaScript">
    	<!--
    	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_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_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_findObj(n, d) { //v4.01
    	  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 && d.getElementById) x=d.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];}
    	}
    	
    		slideBG = {
    			id:"container",
    			img:{
    				src:"http://www.rsvpmms.org/cvbtest/images/chicorybackpano.png",
    				width:700,
    				height:117
    				},
    			direction:"left",
    			repeat:Infinity,
    			speed:1,
    			obj:{
    				el:"",
    				cur_x:0,
    				cur_y:0
    				},
    			init:function(){
    				//set style
    				slideBG.obj.el = document.getElementById(slideBG.id);
    				slideBG.obj.el.style.background =  "url('"+slideBG.img.src+"') repeat-x";
    				slideBG.obj.el.style.backgroundPosition =  "0px 0px";
    				
    				//Start movement
    				slideBG.interval = setInterval(function(){slideBG.scroll()},50);
    			},
    			scroll:function(){
    				if(slideBG.direction == "left"){
    					slideBG.obj.cur_x = (slideBG.obj.cur_x-slideBG.speed)%slideBG.img.width;
    				}
    				else if(slideBG.direction == "right"){
    					slideBG.obj.cur_x = (slideBG.obj.cur_x+slideBG.speed)%slideBG.img.width;
    				}
    				else if(slideBG.direction == "up"){
    					slideBG.obj.cur_y = (slideBG.obj.cur_y+slideBG.speed)%slideBG.img.height;
    				}
    				else if(slideBG.direction == "down"){
    					slideBG.obj.cur_y = (slideBG.obj.cur_y+slideBG.speed)%slideBG.img.height;
    				}
    				slideBG.obj.el.style.backgroundPosition = Math.round(slideBG.obj.cur_x)+"px "+Math.round(slideBG.obj.cur_y)+"px";
    			}
    		}
    	//-->
    
    	</script>
    </head>
    <body onload="slideBG.init(),MM_preloadImages('objects/buttons/attractions_hbutton.png','objects/buttons/dining_hbutton.png','objects/buttons/lodging_hbutton.png','objects/buttons/services_hbutton.png')">
    <div id="outer">
    	
    <div id="hdr">
    	<a href="http://www.rsvpmms.org/cvbtest/index.php"><img src="Welcome%20to%20Mercer%20County%21_files/mccvblogobutton.png" alt="MCCVB Home Page" name="logo" id="logo" border="0px" height="96px" width="160px"></a>
    	<img id="container" src="http://www.rsvpmms.org/cvbtest/images/chicorypano.png" style="width:700px;height:117px;">
    </div>
    
    <div id="bar">&nbsp;<span style="padding: 5px; font-size: 11px;">30 Dec 02</span></div>
    
    <div id="bodyblock" align="right">
    <div id="l-col" align="center">
    	<br>
    	<img src="Welcome%20to%20Mercer%20County%21_files/mercercvb07a.jpg" alt="CVB Brocure" name="brochure" id="brochure" height="372" width="160">
    </div>
    <div id="cont">
    <h3 align="center">Welcome to Mercer Country!</h3>
    <div style="color: red;" align="center">
    <img src="Welcome%20to%20Mercer%20County%21_files/cvbbrochure.jpg" height="560" width="500">
    </div>
    <p>This template is actually a replica of one of my other
    websites which uses tables for the very same layout. I wanted to
    see could it be done and it seems to work perfect.</p>
    <p>This is basically set up as follows: there is a main outer div
    which centers the page and is a fixed width. There are 4 main
    div's within this outer div; header (#hdr), bar (#bar), body
    (#body) and footer (#ftr). The body div holds 2 more divs, the
    left div which is for navigation and the right div which is for
    our content.</p>
    <p>One drawback we see immediatly is getting equal heights for
    the left navigation div and right content div. The work around I
    use for this is: whichever is likely to be the shortest (in
    height) div, probably the left navigation div, set the background
    of the #body div the same as this, also the border separating the
    two divs - that should be on the right content div.</p>
    <p>Another problem discovered recently was that when you use the
    float property it can cause the floated divs to "jump out" of
    their container block. The workaround I found for this was simply
    to specify a height for the container div.</p>
    <p>This template has been tested in:</p>
    
    <ul style="margin: 2px 20px; padding: 2px 20px;">
    <li>Mozilla 1.5b &amp; Firefox 0.8</li>
    <li>Internet Explorer 6</li>
    <li>Netscape 7.1</li>
    <li>Opera 7.11</li>
    </ul>
    
    <p>Changes in this version:</p>
    <!-- list styles set to fix opera problem -->
    <ol style="margin: 2px 20px; padding: 2px 20px;">
    <li>removed box hack</li>
    <li>added margin:auto; to #outer div for centering.</li>
    <li>big problem in moz/ns was the bodyblock div,with both the
    left col and content col floated they were "lifted" out of the
    bodyblock with then collapsed. IE and Opera were ok. removed
    float left from content div, added align="right" to the html of
    the bodyblock and then text-align:left; to the content div to
    bring the content back. it's ugly but works. using
    text-align:right; instead of align="right" will not work in
    moz/ns</li>
    </ol>
    <br>
    <p style="font-weight: bold;">Filler Content</p>
    <p lang="ga">Dáig alta in mac sin i tig a athar &amp; a mathar
    icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi
    i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab
    rígi in rí, .i. mar atraig fóchetóir césta &amp; cangni in
    choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian
    de fóchetóir ic fegad na maccaem ic imbirt chless cluchi &amp;
    immanae, in trian tanaise dond ló ic imbirt brandub &amp;
    fidchell, &amp; in trian dedenach ic tochathim bíd &amp; lenna,
    con-dageib cotlud for cách, aes cíuil &amp; airfitid dia thalgud
    fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar
    Fergus, na fuil in hErind no i n-Albain óclach macsamla
    Conchobair.</p>
    <p lang="ga">Ocus adfeta don mac sin scéla na maceáem &amp; na
    maccraide i n-Emain, &amp; radis in mac bec ria mathair ar co
    n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a
    meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett
    no choimthecht ecin do chaimthechtaib Conchobair, do chor th'
    aesma &amp; t'imdegla for in maccraid. Cían lim-sa di sodain a
    mathair, ar in mac bec, &amp; ni biu-sa oca idnaide acht
    tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a
    mathair, airm in-das-fil. Sliab Fúait etrut &amp; Emain. Dobér-sa
    ardmes furri amne, ar esium.</p>
    <br>
    </div>
    </div>
    <div id="ftr" align="center">Botttom Div</div>
    </div>
    </body></html>

    A few helpful tips for the future.
    1. Try to use CSS if possible, not tables for layout.
    2. Consider Internet Explorer and Firefox (and Safari) when making a website, not just Netscape as your website didn't work with them.
    3. Put all the javascript in the head of the document. If it doesn't work, a quick post on this forum should sort it out.
    4. If you have time, move all the <style> tags into an external file.

  3. The Following User Says Thank You to Bob90 For This Useful Post:

    kcircle (03-07-2008)

  4. #3
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You're my Hero!
    Thanks so much.
    --k

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
  •