SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE Form Issues with Hidding and Unhidding Elements

    I'm totally stumped on this issue, so if anybody has any insight I would be greatly appreciative.

    I'm coding in ASP.NET C#.

    I've coded a form, that has some elements that change visibility depending on which radio check boxes are selected. The Form elements are surrounded by Div tags, and it is these div tags which are dynamically switched from visible to hidden (and visa-versa) in the javascript.

    The Javascript code is

    Code:
    function showElement(id) {
        //alert("showing element id: " + id)
        $(id).style.position = 'relative'
        $(id).style.visibility = 'visible'
    }
    
    //// Base Function to hide an element
    function hideElement(id) {
        //alert("hiding element id: " + id)
        $(id).style.position = 'absolute'
        $(id).style.visibility = 'hidden'
    }
    Then as the radio buttons are selected they call a function which sends the correct element ids to those two functions.

    I got it all working beautifully in Firefox. But then when I went to test it in IE7, it all goes terribly wrong.

    When the radio buttons are clicked on the div tags that are changed to hidden, are successful, but the div tags that change to visible, only halfway work. The text becomes visible but the actual form elements, (other radio buttons, drop down select list, and text fields) don't show up.

    The real puzzler, is if I uncomment those 'Alert statements' in the code, then run it, the form elements show up just fine.

    Things I've tried already with NO success.

    1. Using display='block' and display='none' instead of visibility.
    2. Adjusting the Z-index of the div tags.
    3. Calling showElement with the Form elements, not just the div tags.
    4. Adjusting the z-index of the Form elements, not just the div tags.
    5. Changed the form elements from ASP elements to standard HTML form elements


    So why does it work when the alert statements are active, but fails all other times? How can I simulate the effect of the alert statement with out actually having an alert statement?

    I'm willing to try any ideas you guys might have, and really hope that someone can help me find an acceptable solution. (Unfortunately not using IE is not a valid solution )

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few suggestions:

    1) Look for a little yellow icon in the Internet Explorer status bar that indicates a JavaScript error. If present, click the icon and see what the error message says.

    2) Try putting a space between the // comment marker and the statement that follows it.

    3) Put a semicolon at the end of each statement.

    4) Try using the standard construct document.getElementById(id) instead of the $(id) syntax.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A co-worker and I continued working on it, and found a solution.

    The issue was IE was not repainting the screen after the showElement.

    So we added a

    Code:
    $(id).style.width = '100%'
    
    $(id).style.width = '0%'
    to each function respectively and now it works.

  4. #4
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Melsana View Post
    The issue was IE was not repainting the screen after the showElement.
    That is odd, but typical of the kinds of bugs I have been seeing in recent versions of IE. Go figure.


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
  •