PDA

View Full Version : Can't get conveyor belt (background) loading.gif to work



shepme47
10-29-2012, 12:41 PM
Good morning.
I am new to the forum and happy to be a part of it. Let me first thank Daniel for his help. I was having lots of problems trying to post my question on the forum and he was a great help in resolving the issue.
Anyway here is my question:
I have created a website that is using the dynamic drive slide show (conveyor belt). I have a total of 6 images on the slide show that link to other pages. The <div> that I created for the dynamic drive is called "show". In my css I assigned the following values to this <div>,


#show{
width:715px;
height:233px;
background-color:#fff;
background-image:url(images/loading.gif);
background-repeat:no-repeat;
background-position:center;
}

When I test it locally on my pc with Internet explorer, the loading gif show perfectly until I allow the blocked scripts from running. Then the slide show plays fine.

When I uploaded the site to my server, until all 6 images load I get no loading.gif just a blank white <div>. When you re-load the page it obviously is not an issue as the site is in the computers memory and all images load quick but for the 1st time viewer of the site it looks unprofessional without a loading.gif.
Can I even use a loading gif with this drive.
Thank very much for any assistance.

Shep

jscheuer1
10-29-2012, 01:48 PM
.

In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

I'm assuming you mean Conveyor Belt Slideshow:

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

What I would do there is instead of putting the conveyor in the 'show' div, put the 'show' div after the conveyor and position the 'show' div absolutely so it's directly over the conveyor and set it's dimensions to those of the conveyor (I think you have that last part already).

Then in the script here:


function fillup(){
if (iedom){
document.getElementById("show").style.display = 'none';
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElement . . .

add the highlighted as shown.

If you don't understand css absolute positioning and stacking elements in this manner, let me know.

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.

djr33
10-29-2012, 03:16 PM
Mod's note (to John): this user had a problem with their account, so I suggested trying to post in another forum. I think the account has been fixed now.

shepme47
10-29-2012, 06:21 PM
Hi, John:
Thanks alot for you help. I appreciate it. I will try what you have suggested. In the mean time here (http://www.ibpower.net/fx2/index.htm) is the link to the site. I will let you know if it works.
Shep

Me again,
I did tried what you suggested, Not certain if I got it straight.
I moved my <div> called "show" after the dynamic drive. I the positioned absolutly "show" to my css as followes:
#show{
position:absolute;top:100px;
z-index:0;
width:715px;
height:233px;
background-color:#fff;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;}

I then added a higher z-index to the dynamic drive script as follow:

write('<div style="z-index:1;position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden">')

(not sure if this is what you were talking about in regards to stacking), however it produced the same result. Loading gif showed up locally but not on server. It gets covered by dynamic drive.

Also I am unsure as to were exactly to put the code that you provided to be placed in the script:

function fillup(){
if (iedom){
document.getElementById("show").style.display = 'none';
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElement . . .


Sorry to trouble you, Are there any sites that are using the conveyor style drive that have a loading gif that I could look at?

jscheuer1
10-29-2012, 07:00 PM
You're using a different script. It's based upon the Conveyor Belt script but is different. In it you would insert the code I was talking about here:


cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
document.getElementById("show").style.display = 'none';
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementBy . . .

If I have time (I may be losing power here), I'll show you where to put the 'show' div and how to configure it.

jscheuer1
10-29-2012, 07:17 PM
I did this and it worked (additions/changes highlighted):


<div id="showcontainer" style="position: relative; width: 715px; height: 233px;">
<div id="show" style="position: absolute; top: 0; left: 0; z-index: 2;"></div>
<script type="text/javascript">
//<![CDATA[
var slider=new Array()
slider[0]='<a href="jack_sparrow.htm"><img src="images/thumbs/1.jpg" alt="#" border=1><\/a>'
slider[1]='<a href="terminator.htm"><img src="images/thumbs/2.JPG" alt="#" border=1><\/a>'
slider[2]='<a href="rocky.htm"><img src="images/thumbs/3.JPG" alt="#" border=1><\/a>'
slider[3]='<a href="avatar.htm"><img src="images/thumbs/4.JPG" alt="#" border=1><\/a>'
slider[4]='<a href="superman.htm"><img src="images/thumbs/5.jpg" alt="#" border=1><\/a>'
slider[5]='<a href="hannibal.htm"><img src="images/thumbs/6.JPG" alt="#" border=1><\/a>'
////NO NEED TO EDIT BELOW THIS LINE////////////
function cbelt(slide, width, height, speed, bg, igap, sgap, altgap){
if(!document.getElementsByTagName||!document.createElement)
return;
if(!cbelt.ar)
cbelt.ar=[];
cbelt.ar[this.slid=cbelt.ar.length]=this;
this.slide='<nobr>'+slide.join(igap)+'<\/nobr>';
this.width=width;
this.height=height;
this.copyspeed=this.speed=speed;
this.sgap=sgap;
this.altgap=sgap-speed;
this.tspan=document.createElement('span');
this.tspan.id='temp'+this.slid;
this.tspan.style.visibility='hidden';
this.tspan.style.position='absolute';
this.tspan.style.top='-1000px';
this.tspan.style.left='-9000px';
this.tspan.innerHTML=this.slide;
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')
write('<div style="position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden">')
write('<div style="position:absolute;width:'+this.width+'px;height:'+this.height+'px;background-color:'+bg+'" onmouseover="cbelt.ar['+this.slid
+'].copyspeed=0" onmouseout="cbelt.ar['+this.slid+'].copyspeed=cbelt.ar['+this.slid+'].speed">')
write('<div id="test2'+this.slid+'" style="position:absolute;left:0px;top:0px"><\/div>')
write('<div id="test3'+this.slid+'" style="position:absolute;left:-1000px;top:0px"><\/div>')
write('<\/div><\/div>')
write('<\/td><\/table>')
}
document.body.insertBefore(this.tspan, document.body.firstChild)
this.fillup();
}
cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
document.getElementById("show").style.display = 'none';
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementById("temp"+this.slid).offsetWidth;
this.cross_slide2.style.left=this.actualwidth+this.sgap+"px"
this.lefttime=setInterval(function(){cacheobj.slideleft();}, 30);
}
cbelt.prototype.slideleft=function(){
if (parseInt(this.cross_slide.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide.style.left=parseInt(this.cross_slide.style.left)-this.copyspeed+"px"
else{
this.cross_slide.style.left=parseInt(this.cross_slide2.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
if (parseInt(this.cross_slide2.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide2.style.left=parseInt(this.cross_slide2.style.left)-this.copyspeed+"px"
else{
this.cross_slide2.style.left=parseInt(this.cross_slide.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
}
//]]>
</script> <script type="text/javascript">
//<![CDATA[
/* array_name - name of array of images for this show (unquoted variable name)
* width - show pixel width (unquoted integer)
* height - show pixel height (unquoted integer)
* speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
* 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
* 'image_gap' - gap between each image, use HTML, or space character (quoted string)
* slide_gap - pixels gap between each slideshow rotation (unquoted integer) */
//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 715, 233, 1, '#ffffff', ' ', 4);
//]]>
</script>
</div><!-- End show -->

You can copy that over what you had as:


<div id="show"><script type="text/javascript">
//<![CDATA[
var slider=new Array()
slider[0]='<a hre . . .


. . . }
//]]>
</script> <script type="text/javascript">
//<![CDATA[
/* array_name - name of array of images for this show (unquoted variable name)
* width - show pixel width (unquoted integer)
* height - show pixel height (unquoted integer)
* speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
* 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
* 'image_gap' - gap between each image, use HTML, or space character (quoted string)
* slide_gap - pixels gap between each slideshow rotation (unquoted integer) */
//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 715, 233, 1, '#ffffff', ' ', 4);
//]]>
</script>
</div><!-- End show -->

shepme47
10-30-2012, 01:46 PM
John, You are correct. The loading.gif now shows up until all of the images have loaded. I thank you so much for your time. I truly do appreciate it.
I did have one additional question. Why does this particular drive appear to play much smoother on Internet explorer vs other browsers where it's a bit more shaky?

On a personal note, I hope that Sandy did not disrupt your life to much. Being born and raised in Miami I am all to aware of the aftermath of these storms.

Best regards
Shep

jscheuer1
10-30-2012, 04:50 PM
That's not my experience on my laptop running Win 7. The page you have is smoothest for me in Chrome (which happens to be the most used current version browser*) and Opera. Next comes IE, then Firefox (which is known to often have problems with animation).

That said, perhaps at least in part because of the lack of smoothness in some browser/computer environments**, these sort of continuous animations are rarely developed anymore in favor of ones where the content periodically updates, either fading or sliding in at a set interval. Often this action is made manual, requiring user interaction to load the next or previous 'slide'.

As computers become more powerful and browsers better integrated with them we may see a resurgence in development of continuous animation features.



*IE is close but only if you count both IE 8 and IE 9 as one browser. IE 9 is the current version and more people use Chrome than either it or IE 8 alone.

**It's not just the browser that affects the smoothness of a continuous animation. It's also how that browser works with the computer it's on, including how much memory and clock time is available to it, as well as how well integrated into the OS the browser is. Which of course means that at any given time results may vary, because they can depend upon whatever else is also going on on the computer at the moment.

shepme47
10-30-2012, 05:56 PM
Interesting. I found it most fluid and smooth on IE9 then as you mentioned chrome was good. Firefox plays it a bit choppy. I have used a "Nivo-slider" style show for other sites that I built and I wanted to try something else for the particular site. I wanted more of a cinematic feel wich I think I achieved using this conveyor belt style.
What are you thoughts on windows 8?
Pleasure to chat with you.
Shep

jscheuer1
10-31-2012, 03:49 AM
I have no real thoughts on Win 8. I don't know enough about it to form any. All I know of it is from its ads. That's nothing to base an opinion on.