Ultimate Fade-in Slideshow -- Image Shifts in IE 8

[ellenjones6]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Sorry to keep coming back so often for help, but I just discovered a problem with the slideshows on a Windows laptop using Internet Explorer 8. The images in the slideshow seem to expand and then contract, appearing to shift slightly to the left by about one pixel as they fade in.

Here is the URL for the page: http://adirondackvic.org/Adirondack-Birding-Center-Bird-Walk-12-September-2012.html

Here is the code:


<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 540px;
height: 411px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 540px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 560px;

}
#fadeshow2 img {
display: block;

}
#fadeshow2toggler * {
display: none;

}
#fadeshow2toggler .noscript {
display: inline;
}

</style>
</noscript>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) 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 this script and 100s more
***********************************************/
</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [540, 411], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-1.jpg", "", "", "Adirondack Wetlands: Heron Marsh from Barnum Brook Trail (12 September 2012)"],
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-2.jpg", "", "", "Fall in the Adirondacks: Hobblebush along the Barnum Brook Trail (12 September 2012)"],
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-3.jpg", "", "", "Adirondack Wetlands: Wetlands around Barnum Brook (12 September 2012)"],
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-4.jpg", "", "", "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail"],
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-5.jpg", "", "", "Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail (12 September 2012)"],
["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-6.jpg", "", "", "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)"] //<--no trailing comma after very last image element!
],
titlesAndAlts: [
{title: "Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)", alt: "Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)"},
{title: "Fall in the Adirondacks: Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)", alt: "Fall in the Adirondacks: Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)"},
{title: "Adirondack Wetlands: Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)", alt: "Adirondack Wetlands: Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)"},
{title: "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)", alt: "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)"},
{title: "Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012", alt: "Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012"},
{title: "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)", alt: "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)"},
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler",
onslide: function(c, i){
var im = c.getElementsByTagName('img')[i], tas = this.setting.titlesAndAlts;
im.title = tas[i].title;
im.alt = tas[i].alt;
}
})

</script>
<div id="fadeshow2"><img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-1.jpg" alt="Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-2.jpg" alt="Fall in the Adirondacks: Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)" title="Fall in the Adirondacks: Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-3.jpg" alt="Adirondack Wetlands: Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands: Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-4.jpg" alt="Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)" title="Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-5.jpg" alt="Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands: Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-6.jpg" alt="Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)" title="Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)">
</div>
<div id="fadeshow2toggler" style="width:540px; text-align:center; margin-left: auto ;
margin-right: auto ;margin-top:10px"><span class="noscript">You have JavaScript turned off in your browser. To view the slideshow, please enable JavaScript. Instructions may be found here: www.enable-javascript.com
</span>
<a href="#" class="prev"><img src="http://Adirondackvic.org/Images/left.png" alt="left button" style="border-width:0"></a>
<span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next"><img src="http://Adirondackvic.org/Images/right.png" alt="right button" style="border-width:0"></a>
</div>


Every slideshow in my site seems to have this problem with IE8. There is also a problem with the slideshow on the home page (http://adirondackvic.org/index.html), but in this case the images appear to shift up and down a pixel.

The slideshows all work perfectly on IE9, Firefox, Chrome, Opera, and Safari (all in Windows). The demo slideshows on the Dynamic Drive page work fine on the IE8 laptop, so I know that it's a problem with how I have integrated the slideshows in my site. What have I done wrong? I am sorry to be a pest, but this is driving me nuts! Please help. Ellen

[bernie1227]

try adjusting this:


#fadeshow2 {
overflow: auto;
width: 560px;

}

to this:


#fadeshow2 {
overflow: hidden;
width: 560px;

}

It has no effect on chrome, so it can't hurt, but you might as well try it.

[ellenjones6]

Thank you, I tried that, but it did not work to fix the problem of image shift in IE8 on the laptop I am experimenting with. The change also took away the image window for users who do not have JavaScript enabled. There must be another solution... ellen

[bernie1227]

Alright, I've had a look at it on ie8, and what appears to be happening is that the width is changing slightly every transition.
the problem I believe, is that:


#fadeshow2 {
overflow: auto;
width: 560px;

}

the width in the css is different from the width in the javascript, causing a conflict:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [540, 411], //width/height of gallery in pixels. Should reflect dimensions of largest image


so in order to fix the problem, all you will need to do, is to change this:

#fadeshow2 {
overflow: auto;
width: 560px;
}



<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 540px;
height: 411px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 540px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 560px;

}
#fadeshow2 img {
display: block;

}
#fadeshow2toggler * {
display: none;

}
#fadeshow2toggler .noscript {
display: inline;
}

</style>

to this:


#fadeshow2 {
overflow: auto;
width: 540px;
}

[jscheuer1]

That 560 only comes into play for non-javascript enabled browsers, so cannot be the problem. Further, I've run both pages in IE 9 in its IE 8 mode and don't see any shifting. I then ran the pages in IE 8 in all of its standard modes (IE 8, compatibility, and IE 7), still can't get it to misbehave. The problem might be the laptop. Or, the IE 8 I have is under Windows XP, if the one you have is under Vista or Win 7, that might be it. Both of those could be updated to IE 9 and should be though.

If it is only on a few computers and only 1 pixel, I wouldn't worry about it.

Oh, and you should not merge the two style sections. The second is in a noscript tag and only comes into play if javascript is unavailable, so has no bearing on this issue.

[bernie1227]

It doesn't come up in ie8 mode in other versions of ie, it's only in actual ie8. It's on all ie8 that I can see so far, rather than just one machine as well. Didnt see the noscript there, so ignore the most of the earlier post, as I had assumed that they were two different lots of css, conflicting, this also explains, why before when I told you to change it, it changes it when there was no javascript enabled. I wonder what happens when you change it on the regular css. However, the fact that it was actually ie9 you were testing on, means it won't show you the shifting. You need an actual machine running so in order to see the shifting. I do agree with John about the not worrying, as the shift is really quite minuscule, and I'm guessing that your proportion of ie8 users will be quite low.

After some research, there is actually a noscript ghost bug in ie8 (hence why the problem only occurs in ie8)
See here (http://www.positioniseverything.net/explorer/ie8stylednoscriptbug/index.html) about it, so in actual fact, I might have been right.
Unless you can find a better fix John, I'd suggest trying my option

[jscheuer1]

I tested in a real IE 8 and found no such shifting, go back and reread my last post.

And that bug has nothing to do with this situation. It only covers noscript tags that are styled. That situation does not exist here. Additionally, in browsers with javascript on, the script will overwrite the directives from the noscript section.

But there might be some other bug relating to noscript that only manifests for some IE 8. To test that, ellenjones6 could simply remove the noscript section, clear the browser cache and refresh the page. If that 'gets it', then there probably is some problem relating to the noscript section.

Oh, and that bug that you linked to does show up in IE 9 in its IE 8 mode.

[ellenjones6]

The laptop with IE8 is not available to me at the moment to test. I should have it back in a week or two and will test then. Thanks again! ellen

[bernie1227]

Well, I'm still getting the problem on my ie8. It could be to do with the settings on each? However, I stick with my solution of changing the noscript styles to match the regular width.
One thing I would try, is comment out the noscript for now, to remove that as a variable in the issue, and test again. As of yet, I can't see anything else that might be the issue, the main reason that I think it is the noscript's fault, is because it is only happening in some versions of ie8.
here is another page documenting the problem (http://haslayout.net/css/noscript-Ghost-Bug). Even if it is not this exact problem, I believe it is related.

[jscheuer1]

Bernie, you could check your theories yourself. Just make a mock up of the page.

I would do so myself. However, since I cannot see it happening in the first place, there's no way I would know if any changes I made were of any use.

BTW Bernie, what OS is your IE 8 under, XP, Vista, 7, something else?

[bernie1227]

You will be delighted to know John, my theory and my solution are both correct.




BTW Bernie, what OS is your IE 8 under, XP, Vista, 7, something else?

windows xp

here's a tip if you want it, if you don't have access to an earlier browser, you can install a virtual machine on something like oracle's virtualbox and install the browser on there. In this case however, I was using an actual machine.



Oh, and that bug that you linked to does show up in IE 9 in its IE 8 mode.

then how come you couldn't test it yourself?

[jscheuer1]

I have XP on a virtual machine and that's where I'm running a real IE 8.

The bug I'm talking about that shows up in IE 9's IE 8 mode is the bug you - Bernie linked to. The noscript tag ghost bug. It's not the one that ellenjones6 and you are seeing on ellenjones6's pages.

That bug, the one pixel shift in the slideshow doesn't show up for me in IE 9 (any mode) or in my real IE 8 (also any mode).

I even reinstalled IE 8 on the VM, not only for this, it had been bugging me because the advanced settings and custom security panels were showing blank where the scrollable lists of choices are supposed to be. It fixed that, but still no one pixel shift in ellenjones6's slideshows.

Have you setup a mock up of ellenjones6's page yet for testing? Do you now how/want help with that? Since you're the only other person so far who can see the problem and ellenjones6 won't be able to test for about a week, it might speed up the process.

Never mind, I just did it:

http://home.comcast.net/~jscheuer1/side/adirondack-bird_no_noscript_h.htm

Try that version and see if it fixes it. I took away the noscript tag completely, and changed the overflow to hidden in the remaining stylesheet where the width was already correct. If that takes care of it, then we can test whether which or both are required to fix it and hopefully come up with a solution that won't mess up the customization of this script that allows for non-javascript users to see all of the images in a scrolling div.

[bernie1227]

Thanks for that John, I had done a mockup before, and as I said in my post, the solution I proferred in my earlier post worked just fine.

[jscheuer1]

Well, that's not entirely acceptable, unless it's different than what I did. It needs to preserve the noscript functionality. What exactly did you do? And does my page fix it or not?

[bernie1227]

In what way isn't it acceptable? It's simply what I suggested in my earlier post, firstly, I tried it with just that part deleted, and that worked fine. I'll test your site, but it will take me a good 10 minutes to boot the computer.

[jscheuer1]

Not acceptable in that it wrecks the non-javascript behavior of the page. I have a pretty good idea what can be done though, depending upon just what the problem is.

So you just took out the noscript tag and all it's contents? Or did you alsu change the overflow to hidden in the stylesheet that was left? I'd need to see the exact code.

[bernie1227]

Like I said, I am booting the machine up, and I have a mockup on the desktop (it's a rather old machine so it might take a while, I'll get back to you as soon as I can)

[bernie1227]

this modified code works fine on ie8:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/RegularPageFatFooter.dwt"

codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Adirondack Birding: Teddy Roosevelt Bird Walk at the Paul Smiths VIC | 12 September

2012</title>

<meta name="description" content="Adirondack Birding Center Director Brian McAllister led a

bird walk at the Paul Smiths VIC on 12 September 2012. Highlights of the walk included a

Belted Kingfisher hovering and repeatedly diving for fish, then being driven off by a

Merlin. The VIC attracts birders from throughout the Adirondacks and upstate New York." >
<meta name="keywords" content="Adirondack, Visitor Interpretive Center, Paul Smith's

College VIC, Paul Smith's VIC, Paul Smiths VIC, Paul Smiths Visitor Center, Paul Smiths

Visitor Interpretive Center, PSC VIC, birding, trails, nature walks, bird walks,

wildflowers, walking paths, hiking trails, birds, butterflies, trees, wetlands, bog, marsh,

swamp, fen, Heron Marsh, Barnum Brook, Barnum Pond, Barnum Bog, orchid, TR bird walks,

Teddy Roosevelt bird walks, beginner birder, wildflower walks, Great Blue Heron, Gray Jay,

Paul Smiths, wilderness, backcountry, walk, hike, mountain scenery, nature, nature

photography, interpretive trails, slide show, photography, photographs, pictures, slides,

images, woodland, outdoor photos, Barnum Brook, Barnum Brook Trail, Barnum Pond, Heron

Marsh Trail, Shingle Mill Falls, Forest Ecology, Boreal Life, Boreal Life Trail,

Silviculture Trail, St. Regis Mountain, Jenkins Mountain, Black Pond, Long Pond, Forest

Ecosystem, boreal forest, directions, hours of operation, events, upcoming events, past

events, Adirondack Birding Center, Art at the VIC, Great Adirondack Birding Celebration">

<!-- InstanceEndEditable -->
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
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_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_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];}
}
</script>

<link href="StylesRegularFatFooter6.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->

<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 540px;
height: 411px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 540px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 540px;

}
#fadeshow2 img {
display: block;

}
#fadeshow2toggler * {
display: none;

}
#fadeshow2toggler .noscript {
display: inline;
}

</style>
</noscript>
<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) 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 this script and 100s more
***********************************************/
</script>
<script type="text/javascript">



So what I did, was as I suggested earlier, there was a conflict with the css in the noscript tags, which is easily fixed by correcting the widths, as mentioned before.

[jscheuer1]

OK, but that's not going to work well with the non-javascript part of things. I have an idea that will though. I put up a demo to see if it also fixes the pixel shift problem.

http://home.comcast.net/~jscheuer1/side/adirondack-bird_3_h.htm

Let us know.

[bernie1227]

That has also fixed the pixel problem.
If you have anything else needing testing, it will have to wait until tommorow morning.

[jscheuer1]

Nope, that's it:


<style type="text/css">
#fadeshow2 {
overflow: hidden;
width: 540px;
height: 411px;
margin: 0 auto;
}
#fadeshow2toggler {
width: 540px;
margin: 0 auto;
text-align: center;
}
#fadeshow2toggler .noscript {
display: none;
font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
overflow: auto;
width: 560px;

}
#fadeshow2 img {
display: block;

}
#fadeshow2toggler * {
display: none;

}
#fadeshow2toggler .noscript {
display: inline;
}

</style>
</noscript>
<!--[if lt IE 9]>
<script type="text/javascript">
document.write('<style type="text/css">#fadeshow2 {width: 540px;}<\/style>');
</script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynam . . .

[ellenjones6]

Thank you both for your help. I will incorporate and test it out when I get the laptop back.

Meanwhile, I have discovered another IE problem, this time with IE9 with the slideshow banner on the home page -- http://www.adirondackvic.org/

The slideshow works fine in IE9 when JavaScript is enabled, but when it is not enabled, it does not degrade gracefully. It shows a window with both a horizontal and vertical slider. I tested this out on my computer up in Lake Placid in IE9 and (as I recall) it worked fine on that computer; but it doesn't work in non-JavaScript mode on this computer here in Arlington. Both systems are running Windows 7; both are running IE9. Microsoft just did an update this morning on my system here in Arlington; maybe that created the problem.

The non-JavaScript version works fine in all other browsers on both computers.

This is driving me nuts! I am beginning to hate IE. ellen

[jscheuer1]

On that page, since you're not trying to show the other images when javascript is disabled, it should be overflow hidden:


<style type="text/css">
#fadeshow2 {
overflow: hidden;
width: 960px;
height: 102px;
margin: 0 auto;
}

</style>

And it should perhaps be noted that even on the page where you do want to show the other images, the first style block should be overflow hidden (which is how I have it in my last post). The only time you need overflow auto is for non-javascript when there also are other things to scroll into view via a scrollbar. On the page where that is the case, that's controlled by the stylesheet in the noscript block.

[ellenjones6]

That worked like a charm! Many thanks! Should I change all the other slideshows (the first style block)?

[jscheuer1]

I don't know how many you have, but yes. The overflow: auto; is only for non-javascript and only if there's something you want the non-javascript user to be able to scroll to, and in those cases should only be within the noscript tag area.

[bernie1227]

there appears to be several missing resources:
4792

[jscheuer1]

Your image is uninformative. You either reduced it's size too much, or more likely the forum's method of dealing with images 'stepped on it' too much.

Either way, a copy and paste from the console would be a better way to present that information.

Oh, and are you sure all of those errors/missing resources are from ellenjones6's project? Can you pinpoint where they're coming from in the page?

[bernie1227]

sorry about that John, the forum has made the image smaller, here are the ones that appear to be directly relevant:


Failed to load resource: the server responded with a status of 404 (Not Found) http://adirondackvic.org/loading.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://adirondackvic.org/x.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://adirondackvic.org/restore.png

[jscheuer1]

Those are helper images for the Ultimate Fade-in Slideshow. For what ellenjones6 is doing, they're not strictly required. But the x.png and restore.png do show up visually as missing image tokens in some browsers. They're respectively for hiding and restoring the captions. The loading.gif is for display during the beginning of the slideshow, so there's something to look at while its first image loads. However, it usually doesn't work out that way due to some faulty logic in the way that part of the script was written. I have an update that handles that and a few other things a little better:

http://home.comcast.net/~jscheuer1/side/inmotion/js/fadeslideshow.js

And you're right, to avoid those errors ellenjones6 needs to upload those images. They're available on the demo page for the script.

I get the impression though that ellenjones6 might not want the x and restore PNG images showing up. They could be replaced by transparent GIF images and/or have their css set to display none in overriding style:


.fadeslidedescdiv img {
display: none !important;
}

Their locations, dimensions and filenames are configured here in the script:


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

as is the loading image's.

[bernie1227]

In case ellenjones6 simply forgot to download the images, they are here:
loading.gif (http://www.dynamicdrive.com/dynamicindex14/loading.gif)
restore.png (http://www.dynamicdrive.com/dynamicindex14/restore.png)
x.png (http://www.dynamicdrive.com/dynamicindex14/x.png)
(Right click to download)

[ellenjones6]

John -- I discovered that I had put the three missing files in the wrong place. I have now restored them to the correct place (I think) and uploaded them again.

However, I am not sure what I need to do to correct the error Bernie 1227 discovered. Do I replace fadeslideshow.js with the file you referenced above (http://home.comcast.net/~jscheuer1/side/inmotion/js/fadeslideshow.js )? If I do that, are there things I need to modify for my particular slide shows? (The slideshow on the home page is a bit different, of course; I had to modify that for the banner slideshow.)

Or, do I add the code you mentioned to my slideshow pages and if so where?


.fadeslidedescdiv img {
display: none !important;
}

Or what? As usual, I am completely befuddled.... ellen

[jscheuer1]

It depends upon what you want to happen.

The images are now in the right location. So those errors are gone. And as a result the x and restore PNG images are showing up on the pages with slideshows that have descriptions. The x one appears to the right of the descriptions. If you click it, the descriptions go away and the restore image appears in the lower right corner of the images. If you click that one, the descriptions come back. If you don't want your visitors to be able to do that, then add the style:


.fadeslidedescdiv img {
display: none !important;
}

to those pages. They will still see the descriptions, they just won't be able to turn them off and on.

As for using the updated script from my link. It will allow first time visitors to see the loading image while the slideshows load. This is what the official version is supposed to do, but it doesn't. You can use the update as is for all the slideshows. Yes you can also use it for the banners on the home page. You didn't need to make a script modification for that. You can use the same script. On that page just add the highlighted as shown to the oninit of the new fadeSlideShow() on page function:


oninit: function(){
var sObj = this.setting;
--sObj.totalsteps;
sObj.$wrapperdiv.bind('mouseenter', function(){sObj.ismouseover = false;});
sObj.$gallerylayers.each(function(){
jQuery(this).find('img').each(function(i){
this.alt = sObj.titlesAndAlts[i].alt;
this.title = sObj.titlesAndAlts[i].title;
});
});
sObj.dpause = 2000;
sObj.dfade = 1000;
},

That will make it stop on the last image.


In a slightly related matter, you have some other errors on the home page:


Timestamp: 10/9/2012 12:00:55 PM
Error: ReferenceError: MM_preloadImages is not defined
Source File: adirondackvic.org/index.html

Timestamp: 10/9/2012 12:07:02 PM
Error: ReferenceError: MM_swapImage is not defined
Source File: adirondackvic.org/index.html

Timestamp: 10/9/2012 12:07:02 PM
Error: ReferenceError: MM_swapImgRestore is not defined
Source File: adirondackvic.org/index.html

To fix those replace:


<body onLoad="MM_preloadImages('Images/HomeDownRedesign.jpg','Images/AboutDownRedesign.jpg','Images/TrailSystemDown.gif','Images/EventsDownRedesign.jpg','Images/ProgramsDownRedesign.jpg','Images/ExploreDownRedesign.jpg','Images/HoursDownRedesign.jpg','Images/DirectionsDownRedesign.jpg','Images/DonateDownRedesign.jpg','Images/TrailMapDownRedesign.jpg')">

with:


<body>

And get rid of the highlighted and similar:


<a href="AboutVIC.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','Images/AboutDownRedesign.jpg',1)">

If you're no longer using those rollover images, get rid of all that code as I've just outlined. If you want to use them but just somehow those functions aren't on the page, keep all that code and put the MM_preloadImages, MM_swapImage and MM_swapImgRestore functions on the page.