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
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts

    2 sliders conflicting on the same page

    Hi there,

    Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/

    The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
    The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.

    Here is the testing url.
    http://www . bellsdomestics.co.uk/testing/index . html

    Can anyone point me in the right direction?

    Thanks.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    <li>'s must be enclosed in <ul>'s or <ol>'s

  • #3
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Thanks for the reply lerura, I updated the test site with some html and css positioning and most validation errors fixed, although there are 3 <li> errors remaining that if fixed only allow the first slide to be shown on the top slider.

    Now the first slider is working and the contols for the second slider operate the first. The second slider is not working at all. This is driving me nuts! I was wondering if there was a way to assign an "id" to each slideshow.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #4
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Got the second one working because I forgot to add the <li></li> tags outside the images of the second slideshow content which creates validation errors and confuses the two. So the problem is with <li> and the inability to tell the difference between either sets of content for each slideshow.
    Will try using a div class unless anyone has a better solution?
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #5
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts

    updated

    Made an adjustment to the javascript for the showroom slideshow and now it starts at the number one slide and doesn't repeat. That's that fixed but I'm still not sure exactly which part of each script is conflicting with the other and why the second script is visible over the first as the natural order would suggest otherwise.

    Here's the codes so far;

    Advert Slider
    Code:
    var ADVERTS={};
    
    function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}
    
    ADVERTS.slider=function(){
    	function slide(n,p){this.n=n; this.init(p)}
    	slide.prototype.init=function(p){
    		var s=T$(p.id), u=this.u=T$$('ul',s)[0], c=T$$('li',u), l=c.length, i=this.l=this.c=0;
    		if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
    		this.a=p.auto||0; this.p=p.resume||0; this.v=p.vertical||0; s.style.overflow='hidden';
    		for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
    		if(this.v){;
    			u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
    		}else{
    			u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
    		}
    		this.pos(p.position||0,this.a?1:0)
    	},
    	slide.prototype.auto=function(){
    		this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
    	},
    	slide.prototype.move=function(d,a){
    		var n=this.c+d, i=d==1?n==this.l?1:n:n<1?this.l-1:n; this.pos(i,a)
    	},
    	slide.prototype.pos=function(p,a){
    		clearInterval(this.u.ai); clearInterval(this.u.si);
    		var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
    		t=this.v?p*this.h:p*this.w, d=t>Math.abs(o)?1:-1; t=t*-1; this.c=p;
    		if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==p?this.s:''}}
    		this.u.si=setInterval(new Function(this.n+'.slide('+t+','+d+','+a+')'),20)
    	},
    	slide.prototype.slide=function(t,d,a){
    		var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
    		if(o==t){
    			clearInterval(this.u.si); if(a||(this.a&&this.p)){this.auto()}
    		}else{
    			var v=o-Math.ceil(Math.abs(t-o)*.15)*d+'px';
    			this.v?this.u.style.top=v:this.u.style.left=v
    		}
    	};
    	return{slide:slide}
    }();

    Showroom Slideshow
    Code:
    var SLIDSHW={};
    
    function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}
    
    SLIDSHW.fader=function(){
    	function fade(n,p){this.n=n; this.init(p)}
    	fade.prototype.init=function(p){
    		var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
    		if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
    		s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
    		for(i;i<l;i++){
    			if(u[i].parentNode==s){
    				u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0;
    				u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')'
    			}
    		}
    		this.pos(p.position||0,this.a?1:0,p.visible)
    	},
    	fade.prototype.auto=function(){
    		this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*2500)
    	},
    	fade.prototype.move=function(d,a){
    		var n=this.c+d, i=d==1?n==this.l?1:n:n<1?this.l-1:n; this.pos(i,a)
    	},
    	fade.prototype.pos=function(i,a,v){
    		var p=this.u[i]; this.z++; p.style.zIndex=this.z;
    		clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
    		if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
    		if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
    		p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
    	},
    	fade.prototype.fade=function(i,a){
    		var p=this.u[i];
    		if(p.o>=100){
    			clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
    		}else{
    			p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
    		}
    	};
    	return{fade:fade}
    }();
    The html

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <!-- Site Info, Bot Access, Includes -->
    <head>
    <title>Bells Domestics - Washers | Fridges | Cookers</title>
    <link rel="stylesheet" href="styles/basic.css" type="text/css" />
    <link rel="stylesheet" href="styles/index.css" type="text/css" />
    <link rel="stylesheet" href="styles/fixes.css" type="text/css" />
    <script src="script/submenu.js" type="text/javascript"></script>
    <script src="script/adverts.js" type="text/javascript"></script>
    <script src="script/slidshw.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="P.J. Bell" />
    <meta name="Description" content="Sales, Spares and Repairs of Domestic Appliances" />
    <meta name="Keywords" content="washer,fridge,cooker,sale,spare,repair" />
    </head>
    <body>
    
    <!-- Navigation 1 -->
    <div id="nav1wrap"><div id="nav1space"><div id="nav1txt"><span class="nav1lnk">
    <a href="branches.html">branches </a>|<a href="service.html"> customer service </a>|<a href="policy.html"> policy</a>
    </span></div></div></div>
    
    <!-- Banner -->
    <div id="ban1wrap"><div id="ban1spc1"><div id="ban1pos1"><a href="index.html" title="home page"><img src="images/root/logo.png" alt="logo"></img></a></div>
    <div id="ban1pos2"></div><div id="ban1pos3"><div id="ban1spc2">
    <span class="ban1txt1">call our sales </span><span class="ban1txt2">hotline</span><br/><span class="ban1txt3">0845 815 35 60</span></div></div>
    <div id="ban1pos4"><img src="images/root/alert.png" alt="alert"></img></div></div></div>
    
    <!-- Navigation 2 - Wrappers & Background -->
    <div id="nav2wrap">
    <div class="nav2spc1">
    <div id="nav2end1"></div>
    
    <!-- Navigation 2 - MenuBar 1 -->
    <div class="nav2spc2"></div>
    <dl class="dropdown">
    <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><img src="images/root/mainnav1.png" alt="nav1"></img></dt>
    <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
    <ul><li>
    <a href="laundry_auto.html" class="underline">Washing Machines</a>
    <a href="laundry_wshd.html" class="underline">Washer Dryers</a>
    <a href="laundry_dish.html" class="underline">Dish Washers</a>
    <a href="laundry_tumd.html" class="underline">Tumble Dryers</a>
    <a href="laundry_tumd.html" class="underline">Spin Dryers</a>
    <a href="laundry_intg.html" class="underline">Integrated Laundry</a>
    <a href="laundry_reco.html" class="underline">Reconditioned Laundry</a>
    </li></ul></dd></dl>
    
    <!-- Navigation 2 - MenuBar 2 -->
    <div class="nav2spc2"></div>
    <dl class="dropdown">
    <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><img src="images/root/mainnav2.png" alt="nav1"></img></dt>
    <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
    <ul><li>
    <a href="cooking_gasc.html" class="underline">Gas Cookers</a>
    <a href="cooking_elec.html" class="underline">Electric Cookers</a>
    <a href="cooking_dual.html" class="underline">Dual Fuel Cookers</a>
    <a href="cooking_rnge.html" class="underline">Range Cookers</a>
    <a href="cooking_biov.html" class="underline">Built In Ovens</a>
    <a href="cooking_bihd.html" class="underline">Built In Hobs</a>
    <a href="cooking_intg.html" class="underline">Hoods & Splashbacks</a>
    <a href="cooking_reco.html" class="underline">Reconditioned Cooking</a>
    </li></ul></dd></dl>
    
    <!-- Navigation 2 - MenuBar 3 -->
    <div class="nav2spc2"></div>
    <dl class="dropdown">
    <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><img src="images/root/mainnav3.png" alt="nav1"></img></dt>
    <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
    <ul><li>
    <a href="refrigr_frfz.html" class="underline">Fridge Freezers</a>
    <a href="refrigr_amer.html" class="underline">American Style</a>
    <a href="refrigr_frdg.html" class="underline">Fridges</a>
    <a href="refrigr_frzr.html" class="underline">Freezers</a>
    <a href="refrigr_chst.html" class="underline">Chest Freezers</a>
    <a href="refrigr_intg.html" class="underline">Integrated Refrigeration</a>
    <a href="refrigr_reco.html" class="underline">Reconditioned Refrigeration</a>
    </li></ul></dd></dl>
    
    <!-- Navigation 2 - MenuBar 4 -->
    <div class="nav2spc2"></div>
    <dl class="dropdown">
    <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)"><img src="images/root/mainnav4.png" alt="nav1"></img></dt>
    <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
    <ul><li>
    <a href="smallap_micr.html" class="underline">Microwaves</a>
    <a href="smallap_vacu.html" class="underline">Vacuum Cleaners</a>
    <a href="smallap_kttl.html" class="underline">Kettles</a>
    <a href="smallap_iron.html" class="underline">Irons</a>
    <a href="smallap_toas.html" class="underline">Toasters</a>
    <a href="smallap_mxbl.html" class="underline">Mixers/Blenders</a>
    </li></ul></dd></dl>
    
    <!-- Navigation 2 - End -->
    <div class="nav2spc2"></div>
    <div id="nav2end2"></div>
    </div></div>
    
    <!-- Panel Set 1 - Left Side -->
    <div id="pan1wrap1">
    <div id="pan1wrap2">
    <div id="tickpt1"><div class="htxtspc"><span class="txtstyl1">Choosing us</span></div></div>
    <div id="tickpt2">
    <div id="tickpts">
    <div class="tickpts"><img src="images/index/tick.png" alt="tick"></img></div>
    <div class="tickpts"><img src="images/index/tick.png" alt="tick"></img></div>
    <div class="tickpts"><img src="images/index/tick.png" alt="tick"></img></div>
    <div class="tickpts"><img src="images/index/tick.png" alt="tick"></img></div>
    </div>
    <div id="tickspc">
    <div id="ticktxt1"><span class="txtstyl2">Same day or next day delivery and installation</span></div>
    <div id="ticktxt2"><span class="txtstyl2">Fair trades approved and gas safe registered</span></div>
    <div id="ticktxt3"><span class="txtstyl2">Integrated appliance specialists (inc. fitting service)</span></div>
    <div id="ticktxt4"><span class="txtstyl2">Huge 7000 square foot showroom with lots of choice</span></div>
    </div>
    
    <!-- Panel Set 1 - Left Side - Advert -->
    <div class="sshow1" id="slideshow1">
    <div id="slider">
    <ul id="slider">
    <li id="content1">
    <li><a href="laundry_auto.html"><img src="images/index/advert/ad1.jpg" alt="Washers"></img></a></li>
    <li><a href="refrigr_frfz.html"><img src="images/index/advert/ad2.jpg" alt="Fridges"></img></a></li>
    <li><a href="cooking_elec.html"><img src="images/index/advert/ad3.jpg" alt="Cookers"></img></a></li>
    </li></ul></div>
    </div>
    </div>
    <div id="adbtn_wrap">
    <div id="adbtn1"><img src="images/index/advert/blank.gif" alt="Prev" onclick="slideshow.move(-1)"></img></div>
    <div id="adbtn2"><img src="images/index/advert/blank.gif" alt="Next" onclick="slideshow.move(1)"></img></div>
    </div>
    </div>
    
    <!-- Panel Set 1 - Left Side - Advert Javascript -->
    <script type="text/javascript">
    //<![CDATA[
    var slideshow=new ADVERTS.slider.slide ('slideshow',{
    id:'slider', // ID of the parent slideshow unordered list
    auto:5, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume after interrupted, defaults to false
    vertical:false, // Optional scrolling, default horizontal
    activeclass:'current', // If navid, class to set on the current LI
    position:1 // Initial slide position, defaulting to the 0 index
    });
    //]]>
    </script>
    
    <!-- Panel Set 1 - Right Side -->
    <div id="pan1spc1"></div>
    <div id="pan1wrap3">
    <div id="pledge1wrap">
    <div class="pledge1a"><div class="htxtspc"><span class="txtstyl1">Same day or next day delivery</span></div></div>
    <div class="pledge1b"><div class="ptxtspc"><span class="txtstyl3">All listed items are guaranteed to be in stock so you don't have to wait.</span></div></div>
    <div class="pledge1c"></div>
    <div class="pledge1a"><div class="htxtspc"><span class="txtstyl1">Substantial savings!</span></div></div>
    <div class="pledge1b"><div class="ptxtspc"><span class="txtstyl3">Why pay top price when you can save money on brand new, graded (blemished) items.</span></div></div>
    <div class="pledge1c"></div>
    <div id="callout"><a href="info.html"><img src="images/index/callout.gif" alt="callout"></img></a></div>
    <div class="pledge1a"><div class="htxtspc"><span class="txtstyl1">Need a repair?</span></div></div>
    <div class="pledge1b"><div class="ptxtspc"><span class="txtstyl3">We have experienced engineers on standby, ready to attend to your faulty appliances.</span></div></div>
    <div class="pledge1c"></div>
    <div class="pledge1a"><div class="htxtspc"><span class="txtstyl1">Spare parts in stock</span></div></div>
    <div class="pledge1b"><div class="ptxtspc"><span class="txtstyl3">Phone us or call in to our spares department and get what you need, today.</span></div></div>
    </div>
    <div id="pledge2wrap">
    <div class="pledge2a"><img src="images/index/pledge1end.jpg" alt="pledge1"></img></div><div class="pledge2b"></div>
    <div class="pledge2a"><img src="images/index/pledge2end.jpg" alt="pledge2"></img></div><div class="pledge2b"></div>
    <div class="pledge2a"><img src="images/index/pledge3end.jpg" alt="pledge3"></img></div><div class="pledge2b"></div>
    <div class="pledge2a"><img src="images/index/pledge4end.jpg" alt="pledge4"></img></div>
    </div>
    </div>
    </div>
    
    <!-- Panel Set 2 - Showroom -->
    <div class="pan2spc"></div>
    <div id="pan2wrap">
    <div id="shwrm1">
    
    <div id="select1_pos">
    <ul id="select2" class="select2">
    <li onclick="slideshow.pos(0)"></li>
    <li onclick="slideshow.pos(1)"><div class="select1"></div></li>
    <li onclick="slideshow.pos(2)"><div class="select1"></div></li>
    <li onclick="slideshow.pos(3)"><div class="select1"></div></li>
    <li onclick="slideshow.pos(4)"><div class="select1"></div></li>
    <li onclick="slideshow.pos(5)"><div class="select1"></div></li>
    </ul>
    </div>
    
    <div class="htxtspc"><span class="txtstyl1">Visit our showroom today!</span></div></div>
    
    <div id="shwrm2">
    <div class="sshow2" id="slideshow2">
    <ul id="slides">
    <li id="content2">
    <li><a href="cooking_gasc.html"><img src="images/index/shwrm/shwrm1.jpg" alt="Cookers"></img></a></li>
    <li><a href="laundry_auto.html"><img src="images/index/shwrm/shwrm2.jpg" alt="Washers"></img></a></li>
    <li><a href="refrigr_frfz.html"><img src="images/index/shwrm/shwrm3.jpg" alt="Fridges"></img></a></li>
    <li><a href="cooking_biov.html"><img src="images/index/shwrm/shwrm4.jpg" alt="Built-in cookers"></img></a></li>
    <li><a href="refrigr_intg.html"><img src="images/index/shwrm/shwrm5.jpg" alt="Built-in fridges"></img></a></li>
    </li>
    </ul>
    </div>
    </div>
    
    <!-- Panel Set 2 - Showroom Javascript -->
    <script type="text/javascript">
    //<![CDATA[
    var slideshow=new SLIDSHW.fader.fade('slideshow',{
    id:'slides', // ID of the parent slideshow unordered list
    auto:5, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume after interrupted, defaults to false
    navid:'select2', // Optional ID of direct navigation UL
    activeclass:'current', // If navid, class to set on the current LI
    visible:true, // Initially display the first slide vs fading it in
    position:1 // Initial slide position, defaulting to the 0 index
    });
    //]]>
    </script>
    
    <!-- Panel Set 2 - Showroom Footer -->
    <div id="shwrm3">
    <div class="htxtspc"><span class="txtstyl1">Opening Hours</span></div>
    <div class="shwrmtxt"><span class="txtstyl3">Monday - Saturday 9am - 5:30pm</span></div>
    <div class="shwrmtxt"><span class="txtstyl4">&nbsp;&nbsp;&nbsp;&nbsp;0845 815 35 60</span></div>
    </div>
    <div id="symbol"><img src="images/index/shwrm/symbol.png" alt="symbol"></img></div>
    <div id="tel"><img src="images/index/shwrm/tel.png" alt="tel"></img></div>
    </div>
    <div class="pan2spc"></div>
    
    <!-- Footer -->
    <div id="footbg1">
    <div id="foot1wrap">
    <div class="footspc1"></div>
    <div class="foot1"><div class="htxtspc"><span class="txtstyl1">Company</span></div></div>
    <div class="footspc1"></div>
    <div class="foot1"><div class="htxtspc"><span class="txtstyl1">Services</span></div></div>
    <div class="footspc1"></div>
    <div class="foot1"><div class="htxtspc"><span class="txtstyl1">Policy</span></div></div>
    <div class="footspc1"></div></div></div>
    <div id="footbg2">
    <div id="foot2wrap">
    <div class="footspc2"></div>
    <div class="foot2">
    <div class="ftrlnkspc"><span class="footer1"><a href="about.html">About us</a></span></div>
    
    <div class="ftrlnkspc"><span class="footer1"><a href="areas.html">Areas we cover</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="contact.html">Contact information</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="employment.html">Employment opportunities</a></span></div>
    </div>
    <div class="footspc2"></div>
    <div class="foot2">
    <div class="ftrlnkspc"><span class="footer1"><a href="sales.html">Sales, spares and repairs</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="specialist.html">Specialist installations</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="specialist.html">Kitchen planning</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="warranty.html">Bells warranty</a></span></div>
    
    </div>
    <div class="footspc2"></div>
    <div class="foot2">
    <div class="ftrlnkspc"><span class="footer1"><a href="warranty.html">Warranty schemes</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="advice.html">Customer advice centre</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="service.html">After-sales-service</a></span></div>
    <div class="ftrlnkspc"><span class="footer1"><a href="info.html">General Information</a></span></div>
    </div>
    <div class="footspc2"></div>
    </div>
    </div>
    <div id="footbg3">
    <div id="foot3">
    
    <div class="ftxt1"><span class="txtstyl5">site design by <span class="footer2"><a href="http://www.gcmax.co.uk">gcmax</a></span></span></div>
    <div class="ftxt2"><span class="txtstyl6"> Bells Domestics 2011</span></div>
    </div>
    </div>
    </body>
    </html>
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I receive an error message in FF from your test page that ADVERTS is undefined. It can't find this script:

    <script src="script/adverts.js" type="text/javascript"></script>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts
    That's strange, I'm not getting any errors at this end, cleared my cache and tested with 3 browsers.
    Edit: I'm checking with jslint and getting lots of errors, does anyone here recommend this for cleaning up javascript?
    Last edited by gcmax; 06-24-2011 at 01:44 AM.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #8
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts
    No wonder nobody wanted to help as the problem was so easily fixable;

    First code section, onclick function name "slideshow" changed to "slider".

    Code:
    <div id="adbtn1"><img src="images/index/advert/blank.gif" alt="Prev" onclick="slider.move(-1)"></img></div>
    <div id="adbtn2"><img src="images/index/advert/blank.gif" alt="Next" onclick="slider.move(1)"></img></div>
    </div>
    </div>
    Second code section, variable name changed from "slideshow" to "slider".

    Code:
    <!-- Panel Set 1 - Left Side - Advert Javascript -->
    <script type="text/javascript">
    //<![CDATA[
    var slider=new ADVERTS.slider.slide ('slider',{
    });
    //]]>
    </script>
    Now they both work properly and TOGETHER!
    Anyway, the naming convention now stinks throughout alot of the code so I will redo all of that.

    EDIT: As previously mentioned it would be really helpful if someone could give their opinion on jslint, is it as reliable as say w3c's validator for html or am I wasting my time?? Thanks.
    Last edited by gcmax; 06-24-2011 at 09:08 PM.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #9
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Solved!

    Sorry for the double posts. The site and code is now fully working and optimised.

    Now I'm looking for the perfect pre loading script and then this page can be used for prototyping. Can anyone suggest a good script to fully load the entire html document before it can be viewed?
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Can anyone suggest a good script to fully load the entire html document before it can be viewed?
    This seems a strange request: I wouldn't stare at a blank screen for too long before hitting the Back button

    JSLint is a very useful tool and can help to improve one's understanding of JavaScript as well. It does, however, tend to flag things which are more like recommendations rather than errors.

    Although, I don't use it a huge amount myself - as I don't make mistuks

    Added: This is a good Lint variation I believe.
    Last edited by AndrewGSW; 06-30-2011 at 10:16 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    106
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by AndrewGSW View Post
    This seems a strange request: I wouldn't stare at a blank screen for too long before hitting the Back button
    I've never been on corporate/e-commerce website and have content load randomly on the screen and if I did I wouldn't deal with them.
    A blank screen was never mentioned, I meant stopping people entering the site before it's fully loaded ie: you would still be able to see the page you were viewing after clicking to enter.


    Quote Originally Posted by AndrewGSW View Post
    JSLint is a very useful tool and can help to improve one's understanding of JavaScript as well. It does, however, tend to flag things which are more like recommendations rather than errors.
    Although, I don't use it a huge amount myself - as I don't make mistuks
    Took js lint for a ride and it found too many errors, I managed to find a cleaner to beautify the javascript which removed alot of minor errors but still js lint threw up all sorts of stuff that without me having a solid knowledge of Javascript would not be able to solve.

    Quote Originally Posted by AndrewGSW View Post
    Added: This is a good Lint variation I believe.
    Thanks for the link but the error console on this one is even less revealing than jslint.

    EDIT: could someone close this thread please, it has served it's purpose.
    Last edited by gcmax; 07-03-2011 at 06:34 AM.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------


  •  

    Tags for this Thread

    Posting Permissions

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