SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 scrolling and quirky image

    When users go to our registration page (greenbackstreet.com > create your free account) and click "Membership Agreement" near the bottom of the form, in Firefox or Chrome or Safari, the red x in the upper right corner of the floating div appears instantly so the user can close the floating div.

    But do that same thing in IE7 and the red x does not appear until you scroll all the way to the bottom of the div and back up again. The thumb on the scroll bar for the div acts funny too, shrinking and growing as you move around, unless you get the very bottom, then it stabilizes itself.

    Anyone every seen anything like this before and been able to make IE 7 behave like the others (aka: properly)?

    The javascript that creates the floating div uses the dom to create it and populates the content of the div from the return of an ajax type call.

    Thanks in advance for any help. The javascript function that creates the box is below:

    function displayBox(strPage, intWidth, intHeight, bClose) {

    //grab content from specified page
    var pauser = 0;
    elemID = "";
    var xmlHttp = getXmlHttpObject();
    xmlHttp.open("GET", strPage, false);
    xmlHttp.send(null);
    strResponse = xmlHttp.responseText;
    xmlHttp = null;
    bExternal = true;

    ...

    //ceate the box
    var box = document.createElement("div")
    box.id = "newBox";
    box.className = elemID;
    box.style.position = "absolute";
    box.style.width = intWidth + "px";
    box.style.height = intHeight + "px";
    box.style.overflow = "auto";
    box.style.padding = "21px";
    if (ss != "") box.style.backgroundImage = "url('/images/" + ss + "/common/displaybox_bg.png')";
    else box.style.backgroundImage = "url('/images/common/displaybox_bg.png')";
    box.style.backgroundRepeat = "repeat-x";
    box.style.zIndex = 100;
    box.innerHTML = strResponse;
    document.body.appendChild(box);
    sr = document.getElementById("newBox").getElementsByTagName("h3")

    ...

    //add the close image
    var cls = document.createElement("img")
    cls.name = elemID;
    cls.id = "clsButton";
    cls.src = "/images/spacer.gif";
    cls.className = "icon_close";
    cls.width = 20;
    cls.height = 20;
    cls.style.position = "absolute";
    cls.style.top = "5px";
    cls.style.right = "5px";
    cls.style.zIndex = 101;
    cls.onclick = function() {
    destroyElement('newBox');
    destroyElement(this.id);
    if (document.getElementById("selWL") && navigator.appVersion.indexOf("MSIE 6") > -1) document.getElementById("selWL").style.visibility = "visible";
    box.appendChild(cls);
    }

    Rick

  2. #2
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i solved it mostly. After 7 hours of trial and error, I figured out that basically, IE doesn't like it when you use the DOM method of appendChild on a parent that scrolls.

    I was doing this...
    document.createElement("div")
    set parameters for div
    document.body.appendChild(thediv)
    document.createElement("img")
    set parameters for img
    thediv.appendChild(theimg)

    IE didn;t like that.

    I got it to work by adjusting the innerHTML of the created div. I created the image than took its outerhtml and appended that to the beginning of the innerhtml of the div. So now I am doing this instead...

    document.createElement("div")
    set parameters for div
    document.body.appendChild(thediv)
    document.createElement("img")
    set parameters for img
    thediv.inerHTML = theimg.outerHTML + thediv.innerHTML

    Now IE plays nice - mostly. Now when you call up that box, you get a warning about insecure items (which of course there aren't any that I could find with the IE WebDeveloper Toolbar anyway).

    Any suggestions?


Tags for this Thread

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
  •