Results 1 to 4 of 4

Thread: FadeSlideshow1 conflict with Popup script in IE6 & 7

  1. #1
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default FadeSlideshow1 conflict with Popup script in IE6 & 7

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    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:

    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 -->
    Change it to this:

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

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

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

  3. #3
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

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

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
  •