SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display:none toggle in IE - must click?

    hi there.

    i'm using js and css to toggle visibility of a div. it's working beautifully in all browsers and platforms except IE6 on pc. seems the user has to click on the page after clicking the checkbox in order for the action to complete.

    check out the example:
    http://d48568.u47.fluidhosting.com/test/test.html
    http://d48568.u47.fluidhosting.com/test/test.js
    http://d48568.u47.fluidhosting.com/test/test.css

    any help is very much appreciated. thanks!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint Forums, split19.

    IE doesn't trigger the onchange event on checkboxes until they lose focus. I suggest you use onclick instead.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks!

    ah! perfect-o! thank you! would never have thought of that. much appreciated.

    i took down the files, so, for future readers, here's the code:

    html:
    Code:
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>test</title>
    	<link rel="stylesheet" href="test.css" type="text/css">
    	<script language="javascript" type="text/javascript" src="test.js"></script>
    </head>
    
    <body class="internal">
    
    <div class="searchgroup">
    	<div class="checkboxandinput"><p><input type="checkbox" name="includeAll" onchange="showHideItems('kw1','kwinput1');" id="kw1"><span class="advsearchlabel">with all of the words</span></p>
    	<div class="keywordinput" id="kwinput1"><input type="text" value="" id="kwinput1_txt" name="includeAllInput" class="advsearchinput"></div></div>
    	
    	<div class="checkboxandinput"><p><input type="checkbox" name="includeExact" onchange="showHideItems('kw2','kwinput2');" id="kw2"><span class="advsearchlabel">with the exact phrase</span></p>
    	<div class="keywordinput" id="kwinput2"><input type="text" value="" id="kwinput2_txt" name="includeExactInput" class="advsearchinput"></div></div>
    
    </div>
    
    </body>
    </html>
    js:
    Code:
    function showHideItems(myCheckboxId, myDivId){
    	var myCheckbox = document.getElementById(myCheckboxId);
    	var myDiv = document.getElementById(myDivId);
    
    	if (myCheckbox.checked) {
    		myDiv.style.display = "block";
    	} else {
    		// hide div
    		myDiv.style.display = "";
    		
    		if (myDivId.substr(0,2) == "kw"){
    			// for keywords, clear textfield so it doesn't get submitted with form
    			document.getElementById(myDivId.toString() +'_txt').value = "";
    		} else if (myDivId.substr(0,2) == "as"){
    			// for assets, uncheck sub choices so they don't get submitted with form
    			document.getElementById(myDivId.toString() +'a').checked = false;
    			document.getElementById(myDivId.toString() +'b').checked = false;
    			document.getElementById(myDivId.toString() +'c').checked = false;
    			document.getElementById(myDivId.toString() +'d').checked = false;
    			document.getElementById(myDivId.toString() +'e').checked = false;
    			document.getElementById(myDivId.toString() +'f').checked = false;
    		}
    	}
    }

    css:

    Code:
    INPUT.advsearchinput { font-size: 13px; height: 18px; width: 209px; margin: 6px 0 8px 17px;  }
    SELECT.advsearchselect { font-size: 14px; height: 23px; width: 209px; }
    
    /* Advanced Search Popup - Additional */
    .searchgroup { margin-top: -3px; }
    .checkboxandinput { margin: 0; }
    .checkboxandinput p { margin: 0; }
    .assetcb { margin: 0; width: 200px; }
    .assetcbsubs { margin: 0 0 0 14px; display: none; }
    .keywordinput { display: none; }

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    1) You should use <label> elements instead of <span>s there.

    I suggest you read these which explain how to make your forms even more usable and accessible:
    Simple Tricks for More Usable Forms: Labels
    Accessible HTML/XHTML Forms
    Accessible forms: Guidelines, examples and accessible JavaScript tricks.
    Prettier Accessible Forms

    2) You should remove the <p>s. Those don't seem to each contain paragraph of text.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excellent! thanks for the links. i'll check them out.


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
  •