/    Sign up×
Community /Pin to ProfileBookmark

display:none bug in IE – must click?

Copy linkTweet thisAlerts:
Jul 11.2007

hi there

i’m fairly new to css, so this might be an easy answer.

i’m using js and checkboxes to toggle the display of div’s. it’s working beautifully on mac and on FF on pc. but on IE6 on pc, it almost works. the user has to click somewhere on the page to complete the action and make the div appear or dissappear. i have no idea why. i’ve tried to set blur and focus on the checkbox, on other elements in the form, blur the whole form, etc. nothing seems to work.

see the example here: [url]http://d48568.u47.fluidhosting.com/test/test.html[/url]
css: [url]http://d48568.u47.fluidhosting.com/test/test.css[/url]
js: [url]http://d48568.u47.fluidhosting.com/test/test.js[/url]

see how in IE6 on pc you have to click on the page after you click the checkbox? other browsers it works well.

any help is greatly appreciated!

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJul 11.2007 — Hi there split19,

and a warm welcome to these forums. ?

Change [b]onchange[/b] to [b]onclick[/b].

[i]coothead[/i]
Copy linkTweet thisAlerts:
@split19authorJul 11.2007 — 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>[/CODE]

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;
}
}
}[/CODE]


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; }[/CODE]
×

Success!

Help @split19 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...