Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Conveyor issue

  1. #1
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Conveyor issue

    my images are not showing up side by side they are stacked ontop of eachother how can i fix this???

    Code:
    /***********************************************
    * 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>')
    }
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There's a good chance that you have somewhere in the styles on or associated with the page a style something like this:

    Code:
    img {display: block;}
    If so, you can add:

    Code:
    #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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Robyeager83 (06-24-2012)

  4. #3
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default next step

    That worked to get the images sliding correctly now it appears that they are overlapping, view the slider here... http://northwesttacticalexpo.com/typo.html

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Get rid of this:

    Code:
    <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:

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

    Code:
    <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. 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:

    Code:
    //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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Robyeager83 (06-24-2012)

  7. #5
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Pictures still overlap

    The pictures are still overlapping and it doesnt appear to be sliding correctly.

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    #test2 img, #test3 img {display: inline !important;}
    Change that to:

    Code:
    #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.
    Last edited by jscheuer1; 06-23-2012 at 04:32 PM. Reason: more direct method, add bit about symbol and server encoding
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Robyeager83 (06-24-2012)

  10. #7
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default conveyor

    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
    Last edited by Robyeager83; 06-23-2012 at 08:20 PM.

  11. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by Robyeager83 View Post
    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:
    Code:
    Var imagegap
    ?
    Bernie

  12. The Following User Says Thank You to bernie1227 For This Useful Post:

    Robyeager83 (06-24-2012)

  13. #9
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default No

    No I have not

  14. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You haven't updated the live stylesheet:

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

    It's still showing only:

    Code:
    #test2 img, #test3 img {display: inline !important;}
    It needs to be:

    Code:
    #temp img, #test2 img, #test3 img {display: inline !important;}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  15. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Robyeager83 (06-24-2012)

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
  •