PDA

View Full Version : Conveyor issue



Robyeager83
06-22-2012, 09:35 PM
my images are not showing up side by side they are stacked ontop of eachother how can i fix this???


/***********************************************
* Conveyor belt slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="100%"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://surefire.com"><img src="/images/SUREFIREc.jpg" border=1 style="width:300px;height:150px;"></a>'
leftrightslide[1]='<a href="http://eberlestock.com"><img src="/images/Eberlestockc.jpg" border=1 style="width:300px;height:150px;"></a>'
leftrightslide[2]='<a href="http://primaryweapons.com"><img src="/images/pwsc.jpg" border=1 style="width:300px;height:150px;"></a>'

//Specify gap between each image (use HTML):
var imagegap="<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>"

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0"

onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

jscheuer1
06-22-2012, 10:43 PM
There's a good chance that you have somewhere in the styles on or associated with the page a style something like this:


img {display: block;}

If so, you can add:


#test2 img, #test3 img {display: inline !important;}

But it's possible that there's some other problem. Either way, try adding the above to the styles for the page and refresh the browser.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Robyeager83
06-22-2012, 11:02 PM
That worked to get the images sliding correctly now it appears that they are overlapping, view the slider here... http://northwesttacticalexpo.com/typo.html

jscheuer1
06-22-2012, 11:48 PM
Get rid of this:


<script type="text/javascript" src="crawler.js">/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use updated: 4/2011 for random order option, more (see below)*/</script>

It's a 404 Not Found and you're not using it anyway. Probably doesn't matter, but might.

Add the credit for the conveyor - change this:


<script src="scripts/conveyor.js" type="text/javascript"></script>

to:


<script src="scripts/conveyor.js" type="text/javascript">
/***********************************************
* Conveyor belt slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

That last is just to be in compliance with Dynamic Drive's Terms of Usage (http://www.dynamicdrive.com/notice.htm). But that's required.

Now an issue that could be at the root of this -

There could still be other problems. But I see in your script that you have:


//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://surefire.com"><img src="/images/SUREFIREc.jpg" border=1 style="width:300px;height:150px;"></a>'
leftrightslide[1]='<a href="http://eberlestock.com"><img src="/images/Eberlestockc.jpg" border=1 style="width:300px;height:150px;"></a>'
leftrightslide[2]='<a href="http://primaryweapons.com"><img src="/images/pwsc.jpg" border=1 style="width:300px;height:150px;"></a>'
leftrightslide[2]='<a href="http://boisecrossfit.com"><img src="/images/crossfit.png" border=1 style="width:300px;height:150px;"></a>'


That should be a 3.

Change it and refreh the page again and see. Let me know.

Robyeager83
06-23-2012, 04:19 AM
The pictures are still overlapping and it doesnt appear to be sliding correctly.

jscheuer1
06-23-2012, 05:52 AM
I see that. Thanks for taking care of the credit BTW.

Now I'm noticing that you're using 100% for the width. That should be expressed in pixels. 900px would be about right. But I don't think that's a problem because it's in a fixed width container.

And because this was starting to bug me, so I tried it both ways and it didn't seem to make a difference.

I was able to fix it. Where we added:


#test2 img, #test3 img {display: inline !important;}

Change that to:


#temp img, #test2 img, #test3 img {display: inline !important;}

Refresh the page and smile.

There are also images placed in a temp span that are used to measure the length of the image train. Since those were still display block, it was throwing off the measurement.

Also I notice that the:



symbol in the credit is getting trashed in source view (encoding issue with the server, not your fault unless you control the default encoding on the server*). Please change it to:

(c)


*If you do control the default encoding on the server or even just the domain, consider changing it to UTF-8. In the long run it will save you some headaches.

Robyeager83
06-23-2012, 07:52 PM
That didn't seem to fix it, works great in IE but not other browsers. In FF and Chrome it is overlapping pictures and not running through the whole slideshow

bernie1227
06-23-2012, 11:12 PM
That didn't seem to fix it, works great in IE but not other browsers. In FF and Chrome it is overlapping pictures and not running through the whole slideshow

Hiya robbyeager,, this is just a stab in the dark, but have you changed the code saying:


Var imagegap

?
Bernie

Robyeager83
06-23-2012, 11:46 PM
No I have not

jscheuer1
06-24-2012, 12:52 AM
You haven't updated the live stylesheet:

http://northwesttacticalexpo.com/styles/elegant-press.css

It's still showing only:



#test2 img, #test3 img {display: inline !important;}

It needs to be:


#temp img, #test2 img, #test3 img {display: inline !important;}

Robyeager83
06-24-2012, 03:03 AM
Lol sorry i thought i loaded that up!!! Thanks for all the help, i tried throwing that up on my homepage as well and that didnt turn out very well, check it out http://northwesttacticalexpo.com

jscheuer1
06-24-2012, 04:15 AM
There are unclosed tags on that page:


<article class="box" id="home_featured21">


<a href="http://ambushtactical.com">


<a href="http://universalsecurityandtraining.com">

They're all in this section:


<article class="box" id="home_featured21"> <div class="block"><h2>Who We Are</h2> <p>Ambush Tactical and Universal Security and Training are proud to announce the 1st annual Northwest Tactical Expo coming to the Treasure Valley on Sept 22 , 2012. The event will be will be held at the brand new, state of the art 35,000 square foot venue called The Revolution. The goal of this expo is to showcase some of the region's leading tactical retailers, manufacturers, and trainers in a top notch high energy expo that is unlike anything the area has seen before.<br /><a href="typo.html" class="read_more">Read More</a> </p> </div> <div class="block"><h2>Ambush Tactical</h2> <a href="http://ambushtactical.com"><img src="images/ambush.jpg" alt="Web Browsers" class="center" /><br /><br /> </div> <div class="block last"><h2>Universal Security and Training</h2><a href="http://universalsecurityandtraining.com"><img src="images/ulogo.jpg" border="0" height="296" width="296"/> </div>

which I believe should go like (additions red):


<article class="box" id="home_featured21"> <div class="block"><h2>Who We Are</h2> <p>Ambush Tactical and Universal Security and Training are proud to announce the 1st annual Northwest Tactical Expo coming to the Treasure Valley on Sept 22 , 2012. The event will be will be held at the brand new, state of the art 35,000 square foot venue called The Revolution. The goal of this expo is to showcase some of the region's leading tactical retailers, manufacturers, and trainers in a top notch high energy expo that is unlike anything the area has seen before.<br /><a href="typo.html" class="read_more">Read More</a> </p> </div> <div class="block"><h2>Ambush Tactical</h2> <a href="http://ambushtactical.com"><img src="images/ambush.jpg" alt="Web Browsers" class="center" /></a><br /><br /> </div> <div class="block last"><h2>Universal Security and Training</h2><a href="http://universalsecurityandtraining.com"><img src="images/ulogo.jpg" border="0" height="296" width="296"/></a> </div></article>

In any case, after I added them in those places, the page was fine.

But you might want to go back to using 100% for the width. As I said before it wasn't the problem. And here the container is 960px wide. So unless you want to use two scripts, one for each page, use 100% instead of 900px in the script here:


//Specify the slider's width (in pixels)
var sliderwidth="900px"

Or if you're only going to use it on this page now, you could set that to 960px.

100% is fine though for any page as long as there's a container with a set width somewhere in that range (900 - 960). Really anything as long as there's room enough for the conveyor and as long as it's not so wide that there aren't enough images to fill it.

Avoid setting it to 100% if the container is the body, as the body can be any width depending upon the width of the user's browser, which could be quite wide on a large screen.