FadeSlideshow1 conflict with Popup script in IE6 & 7

[Kristin]

1) Script Title: FadeSlideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

We have been running the v2.0 slideshow with no issues. Then this week we added a pop-up survey and is running fine is all but IE6 & 7. Our client and their clients do still run IE7 and do not have the option to upgrade. Below is our code and a link to a test page. Any assistance would be appreciated.
Thanks,
Kristin

https://www.peoplesbanknc.com/conten...x_test0112.php

Head section
<!-- Begin Slide Show Script -->
<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/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: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [700, 355], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../images/landing-page-banner-survey.png", "http://sg.securesurvey1.com/s3/peoples-bank-customer-esurvey", "", "Take our survey"],
["../images/landing-page-banner-centennial.jpg", "", "", "Join Us.", "Centennial"],
["../images/landing-page-banner-rdc.jpg", "../content/business_banking_remote_deposit.php", "", "RDC", "Deposit Checks Anytime"],
["../images/landing-page-banner-really.jpg", "../content/online_banking_apply_fic.php", "", "Really", "Rewards Checking"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:3, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 700, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshowtoggler-wide"
})

</script>
<!-- End Slide Show Script -->

Body section
<div id="fadeshow1"></div>
<div id="slideshowtoggler-wide">
<a href="#" class="prev"><img src="../images/left.png" style="border-width:0" /></a>
<!--<span class="status" style="margin:0 50px; font-weight:bold"></span> -->
<a href="#" class="next"><img src="../images/right.png" style="border-width:0" /></a>

</div>

New pop-up survey code

<!-- begin pop up survey window-->
<div id="survey" class="sg-popup">
<script type="text/javascript">var sg_div = document.createElement("div");sg_div.innerHTML = "<h1>Customer eSurvey</h1><p><em>We want to know what you think! Please take our quick eSurvey.</em></p><p><a href=\"http://sg.securesurvey1.com/s3/peoples-bank-customer-esurvey\">Please click here to start the survey.</a> <br><br>(May take a few seconds to load.)<br>Once you have completed the survey, you will be returned to this page.</p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">No, thank you.</a> ";sg_div.id = "sg-popup";document.body.appendChild(sg_div);</script>
</div>
<!-- end pop up survey window -->

[jscheuer1]

I don't think that has anything to do with the slideshow. Even if it does, I just tested this and it fixes it. Remove the division from around the survey code, it's not needed anyway, and move the script that remains to the last thing before the closing </body> tag of the page.

So take this:

           <!-- begin pop up survey window-->
<div id="survey" class="sg-popup">
<script type="text/javascript">var sg_div = document.createElement("div");sg_div.innerHTML = "<h1>Customer eSurvey</h1><p><em>We want to know what you think! Please take our quick eSurvey.</em></p><p><a href=\"http://sg.securesurvey1.com/s3/peoples-bank-customer-esurvey\">Please click here to start the survey.</a> <br><br>(May take a few seconds to load.)<br>Once you have completed the survey, you will be returned to this page.</p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">No, thank you.</a> ";sg_div.id = "sg-popup";document.body.appendChild(sg_div);</script>
</div>
<!-- end pop up survey window -->

Change it to this:

           <!-- begin pop up survey window-->

<script type="text/javascript">var sg_div = document.createElement("div");sg_div.innerHTML = "<h1>Customer eSurvey</h1><p><em>We want to know what you think! Please take our quick eSurvey.</em></p><p><a href=\"http://sg.securesurvey1.com/s3/peoples-bank-customer-esurvey\">Please click here to start the survey.</a> <br><br>(May take a few seconds to load.)<br>Once you have completed the survey, you will be returned to this page.</p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">No, thank you.</a> ";sg_div.id = "sg-popup";document.body.appendChild(sg_div);</script>

<!-- end pop up survey window -->

and move it to here:

      </tr>
    </table>
  </div>
</div>
<!-- #EndLibraryItem --><span></span>
           <!-- begin pop up survey window-->

<script type="text/javascript">var sg_div = document.createElement("div");sg_div.innerHTML = "<h1>Customer eSurvey</h1><p><em>We want to know what you think! Please take our quick eSurvey.</em></p><p><a href=\"http://sg.securesurvey1.com/s3/peoples-bank-customer-esurvey\">Please click here to start the survey.</a> <br><br>(May take a few seconds to load.)<br>Once you have completed the survey, you will be returned to this page.</p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">No, thank you.</a> ";sg_div.id = "sg-popup";document.body.appendChild(sg_div);</script>

<!-- end pop up survey window -->
</body>
<!-- InstanceEnd --></html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Kristin]

John,
It works - not sure why but it does. Thanks a million for your help.
Kristin

[jscheuer1]

By way of explanation, IE less than 8 is incapable of presenting a web page that alters the DOM in certain ways, like appending an element to the body while inside a table, and sometimes other elements. There might be cases where IE 7 and less will do this, but usually not, so it's best to wait until the body has been parsed* before appending anything to it. This is also good practice in other browsers, but they generally will get the idea and wait until it can be done, before doing it.


*parsed as opposed to loaded. The body is parsed when the browser has read to the end of the file. It's loaded when images and other resources like scripts, styles, etc. are also loaded. jQuery has a handy way of knowing when that (parse) happens, we could have left the survey script in place and used jQuery to tell it when to append to the body. But then if you used the script on a non-jQuery page, there would be problems - on that page jQuery was only used for the slideshow.

BTW - I checked, the slideshow had nothing to do with the problem. Removing it did not fix it.