/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] I’m blind !!! can’t seem to see what’s wrong….

Copy linkTweet thisAlerts:
Oct 19.2007

Hi,

I have implemented the JS code below ([URL=”http://www.webdeveloper.com/forum/showthread.php?t=163654″]http://www.webdeveloper.com/forum/showthread.php?t=163654[/URL]) and I might’ve messed something up, because I get sporadic behaviour (no errors) when the section sometimes is not expanded when a checkbox within it is checked and sometimes when I select checkboxes in multiple sections, some sections expand and some not… Perhaps the problem is obvious but I can’t seem to be able to see it…

[code=php]

<script type=”text/javascript”>
/*
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
*/
function showHideAnswer(q)
{
var obj=q.answer;
obj.style.display=(obj.style.display==’block’)?’none’:’block’;
}

function initShowHideContent()
{
var divs = document.getElementsByTagName(‘h3′);
for(var no=0;no<divs.length;no++){
if(divs[no].className==’question’){
divs[no].onclick =function(){ showHideAnswer(this); }
divs[no].answer=document.getElementById(‘a’ + divs[no].id.replace(/[^d]/g,”));
if (divs[no].answer.getElementsByTagName(‘INPUT’)&&divs[no].answer.getElementsByTagName(‘INPUT’)[0].checked) showHideAnswer(divs[no])

}
}
}
</script>

<BODY onLoad=”initShowHideContent()”>

<?
$i = 0;

foreach ($filmCrew as $value){

$n = $i++;

echo ‘<h3 id=q’.$n.’ class=question>’.$value.'</h3>
<h3 id=a’.$n.’ class=answer>
<table cellpadding=0 cellspacing=5 border=0 style=”padding-left:135px”>’;

$crewPosition = $db->get_results(”
SELECT crew_id, crew_position
FROM crew
WHERE crew_dept = ‘”.$value.”‘ “);

foreach ($crewPosition as $crewP[$n]) {

$CRdb = $crewP[$n]->crew_id;

echo ‘<tr>
<td align=right><input type=checkbox name=crew[‘.$CRdb.’] value=’.$CRdb;
if ($crew[$CRdb] == $CRdb) {
echo’ checked’;
}
echo ‘>
</td>
<td>’.$crewP[$n]->crew_position.'</td>
</tr>’;
}

echo ‘</table>
</h3>’;
}
?>
[/code]

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsOct 19.2007 — best to post the rendered code or a link to the page
Copy linkTweet thisAlerts:
@KorOct 19.2007 — This looks like a typo:
<i>
</i>if (divs[no].answer.getElementsByTagName('INPUT')&amp;&amp;divs[no].answer.getElementsByTagName('INPUT')[0].checked) showHideAnswer(divs[no])

If that what?

It is a good habbit to mark the start/end of the if statements

if()[B][COLOR="Red"]{

}[/COLOR][/B]
Copy linkTweet thisAlerts:
@santaauthorOct 19.2007 — Here's a snippet of the page source:

[code=php]
<script type="text/javascript">
/*
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
*/
function showHideAnswer(q)
{
var obj=q.answer;
obj.style.display=(obj.style.display=='block')?'none':'block';
}

function initShowHideContent()
{
var divs = document.getElementsByTagName('h3');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick =function(){ showHideAnswer(this); }
divs[no].answer=document.getElementById('a' + divs[no].id.replace(/[^d]/g,''));
if (divs[no].answer.getElementsByTagName('INPUT')&&divs[no].answer.getElementsByTagName('INPUT')[0].checked) showHideAnswer(divs[no])

}
}
}
</script>

<BODY onLoad="initShowHideContent()">

<h3 id=q1 class=question onMouseOver="this.style.backgroundColor='#f5f5f5'" onMouseOut="this.style.backgroundColor='#ffffff'">Art Department</h3>
<h3 id=a1 class=answer>

<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td width=20 height=24 align=right style="border-top: 1px solid #eaeaea;">
<input type=checkbox name=crew[15] value=15>
</td>
<td>
Production Designer
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[16] value=16>
</td>
<td>
Art Director
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[17] value=17>
</td>
<td>
Set Designer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[18] value=18>
</td>
<td>
Assistant Art Director
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[19] value=19>
</td>
<td>
Set Decorator
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[20] value=20>
</td>
<td>
Buyer
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[21] value=21>
</td>
<td>
Lead Man
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[22] value=22>
</td>
<td>
Set Dresser
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[23] value=23>
</td>
<td>
Props Master
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[24] value=24>
</td>
<td>
Props Builder
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[25] value=25>
</td>
<td>
Armourer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[26] value=26>
</td>
<td>
Construction Coordinator
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[27] value=27>
</td>
<td>
Head Carpenter
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[28] value=28>
</td>
<td>
Key Scenic
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[29] value=29>
</td>
<td>
Greensman
</td>
</tr></table>
</h3><h3 id=q2 class=question>Camera</h3>
<h3 id=a2 class=answer>
<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td>
<input type=checkbox name=crew[38] value=38>
</td>
<td>
Director of Photography
</td>
</tr><tr>

<td>
<input type=checkbox name=crew[39] value=39>
</td>
<td>
Cinematographer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[40] value=40>
</td>
<td>
Camera Operator
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[41] value=41>
</td>
<td>
First Assistant Camera (Focus Puller)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[42] value=42>
</td>
<td>
Second Assistant Camera (Clapper Loader)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[43] value=43>
</td>
<td>
Loader
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[44] value=44>
</td>
<td>
Camera Production Assistant (camera intern)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[45] value=45>
</td>
<td>
Digital Imaging Technician (DIT)
</td>

</tr></table>
</h3><h3 id=q3>Editorial</h3>
<h3 id=a3 class=answer>
<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td>

<input type=checkbox name=crew[57] value=57>
</td>
<td>
Film Editor
</td>
</tr><tr>

<td>
<input type=checkbox name=crew[58] value=58>
</td>
<td>
Colorist
</td>
</tr></table>
</h3>
[/code]
Copy linkTweet thisAlerts:
@KorOct 19.2007 — Once again:

if[B]([/B][I]condition[/I][B])[/B][COLOR="Red"][B]{[/B][/COLOR][I]statements[/I][COLOR="Red"][B]}[/B][/COLOR]
Copy linkTweet thisAlerts:
@santaauthorOct 19.2007 — I put {} but it did not fix the problem...
Copy linkTweet thisAlerts:
@vwphillipsOct 19.2007 — Had trouble with you regex in your last post

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.answer {
display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
*/
function showHideAnswer(q)
{
var obj=q.answer;
obj.style.display=(obj.style.display=='block')?'none':'block';
}

function initShowHideContent()
{
var divs = document.getElementsByTagName('h3');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick =function(){ showHideAnswer(this); }
divs[no].answer=document.getElementById('a' + divs[no].id.replace(/D/,''));
if (divs[no].answer.getElementsByTagName('INPUT')&&divs[no].answer.getElementsByTagName('INPUT')[0].checked) showHideAnswer(divs[no])
}
}
}
</script>
</head>

<BODY onLoad="initShowHideContent()">

<h3 id=q1 class=question onMouseOver="this.style.backgroundColor='#f5f5f5'" onMouseOut="this.style.backgroundColor='#ffffff'">Art Department</h3>
<h3 id=a1 class=answer>

<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td width=20 height=24 align=right style="border-top: 1px solid #eaeaea;">
<input type=checkbox name=crew[15] value=15 checked="checked" >
</td>
<td>
Production Designer
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[16] value=16>
</td>
<td>
Art Director
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[17] value=17>
</td>
<td>
Set Designer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[18] value=18>
</td>
<td>
Assistant Art Director
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[19] value=19>
</td>
<td>
Set Decorator
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[20] value=20>
</td>
<td>
Buyer
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[21] value=21>
</td>
<td>
Lead Man
</td>

</tr><tr>
<td>
<input type=checkbox name=crew[22] value=22>
</td>
<td>
Set Dresser
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[23] value=23>
</td>
<td>
Props Master
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[24] value=24>
</td>
<td>
Props Builder
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[25] value=25>
</td>
<td>
Armourer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[26] value=26>
</td>
<td>
Construction Coordinator
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[27] value=27>
</td>
<td>
Head Carpenter
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[28] value=28>
</td>
<td>
Key Scenic
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[29] value=29>
</td>
<td>
Greensman
</td>
</tr></table>
</h3><h3 id=q2 class=question>Camera</h3>
<h3 id=a2 class=answer>
<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td>
<input type=checkbox name=crew[38] value=38>
</td>
<td>
Director of Photography
</td>
</tr><tr>

<td>
<input type=checkbox name=crew[39] value=39>
</td>
<td>
Cinematographer
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[40] value=40>
</td>
<td>
Camera Operator
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[41] value=41>
</td>
<td>
First Assistant Camera (Focus Puller)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[42] value=42>
</td>
<td>
Second Assistant Camera (Clapper Loader)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[43] value=43>
</td>
<td>
Loader
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[44] value=44>
</td>
<td>
Camera Production Assistant (camera intern)
</td>
</tr><tr>
<td>
<input type=checkbox name=crew[45] value=45>
</td>
<td>
Digital Imaging Technician (DIT)
</td>

</tr></table>
</h3><h3 id=q3>Editorial</h3>
<h3 id=a3 class=answer>
<table cellpadding=0 cellspacing=0 border=0 width="100%"><tr>
<td>

<input type=checkbox name=crew[57] value=57>
</td>
<td>
Film Editor
</td>
</tr><tr>

<td>
<input type=checkbox name=crew[58] value=58>
</td>
<td>
Colorist
</td>
</tr></table>
</h3>

</body>

</html>[/CODE]
Note

[CODE] divs[no].answer=document.getElementById('a' + divs[no].id.replace(/D/,''));
[/CODE]

Note, the code will only look at the checked condition of the first input(asumed to be a checkbox) in the answer div, say if this is not what you require.
Copy linkTweet thisAlerts:
@santaauthorOct 20.2007 — Not quite.

There could be about a dozen sections (q) and all answers collapsed. Each answer (a) section will have checkboxes, anywhere from 2 to 12. User can click a section to expand and check any number of check boxes. If at least one checkbox in section is checked, then the section needs to be expanded on page load.

For example if a user checked selections in a2, a7 and a9 those 3 need to be expanded.

Sorry about not being able to explain it clearly innitially.
Copy linkTweet thisAlerts:
@vwphillipsOct 20.2007 — still not sure I understand but

[CODE]function showHideAnswer(q){
var a=q.answer;
a.style.display=(a.style.display=='block')?'none':'block';
}

function initShowHideContent(){
var divs = document.getElementsByTagName('h3');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick =function(){ showHideAnswer(this); }
divs[no].answer=document.getElementById('a' + divs[no].id.replace(/^D/,''));
if (divs[no].answer){
divs[no].answer.style.display='none';
var ips=divs[no].answer.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<ips.length;zxc0++){
if (ips[zxc0].type=='checkbox'&&ips[zxc0].checked){
showHideAnswer(divs[no]);
break;
}
}
}
}
}
}
[/CODE]
Copy linkTweet thisAlerts:
@santaauthorOct 20.2007 — We'll for not quite understanding my mumbling you certainly got it right! You rock! It works beautifully. I would've never figure that one on my own. Thanks a bunch!!!
×

Success!

Help @santa 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.24,
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,
)...