Page 1 of 4 123 ... LastLast
Results 1 to 10 of 32

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

  1. #1
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

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

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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-...mber-2012.html

    Here is the code:

    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

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

    Default

    try adjusting this:
    Code:
    #fadeshow2 {
    	overflow: auto;
    	width: 560px;
    
    }
    to this:
    Code:
    #fadeshow2 {
    	overflow: hidden;
    	width: 560px;
    
    }
    It has no effect on chrome, so it can't hurt, but you might as well try it.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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

    ellenjones6 (10-04-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Default

    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

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

    Default

    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:
    Code:
    #fadeshow2 {
    	overflow: auto;
    	width: 560px;
    
    }
    the width in the css is different from the width in the javascript, causing a conflict:
    Code:
    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:
    Code:
    #fadeshow2 {
    	overflow: auto;
    	width: 560px;
    }
    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>
    to this:
    Code:
    #fadeshow2 {
    	overflow: auto;
    	width: 540px;
    }
    Last edited by bernie1227; 10-06-2012 at 08:46 PM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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

    ellenjones6 (10-07-2012)

  7. #5
    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

    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.
    Last edited by jscheuer1; 10-06-2012 at 02:08 PM. Reason: checked the other page
    - John
    ________________________

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

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

    ellenjones6 (10-07-2012)

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

    Default

    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 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
    Last edited by jscheuer1; 10-06-2012 at 11:54 PM. Reason: merge/fix broken link
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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

    ellenjones6 (10-07-2012)

  11. #7
    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 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.
    Last edited by jscheuer1; 10-07-2012 at 12:12 AM. Reason: add - Oh, and . . .
    - John
    ________________________

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

  12. #8
    Join Date
    Jul 2012
    Posts
    69
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Default

    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

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

    Default

    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. Even if it is not this exact problem, I believe it is related.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  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

    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?
    Last edited by jscheuer1; 10-07-2012 at 05:49 AM. Reason: add BTW
    - John
    ________________________

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

Similar Threads

  1. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 01:18 PM
  2. Ultimate Fade-in slideshow (v2.1) - 1st image no fade in
    By tomkorver in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-05-2010, 06:07 AM
  3. Ultimate Fade-In Slideshow (v1.51) - image is cut off
    By sassenach in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-04-2010, 06:32 PM
  4. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM
  5. 3-image Ultimate Fade In Slideshow possible?
    By btvbill in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-09-2008, 06:13 PM

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
  •