PDA

View Full Version : Can someone check this JS and tell me why it isn't quite working (almost)?



Edouble
11-16-2004, 02:44 AM
I know very little about JavaScript but I found this snippit and I am trying to use it. I have 2 probelms - first, how to get all of the answers to be hidden on default (they currently display on default) and second how to make the view all work but in link form not checkbox (it is currently in checkbox form but does not work and I can't figure out why).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
window.onload = onLoad;

function onLoad()
{
var sa = document.getElementById("chkViewAll");
if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
else sa.checked = true;
}



function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';


ans.style.display = 'none';
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>
</head>
<body>
<script language="Javascript">
document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
</script>
<div id="title10" class="body"><a href="javascript:toggleQuestion('title10', 'question10', 'answer10')">Question 1?</a></div>
<div id="answer10" class="body">Answer 1.</div>
<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 2?</a></div>
<div id="answer11" class="body">Answer 2.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 3?</a></div>
<div id="answer12" class="body">Answer 3</div>
</body>
</html>

Thanks in advance for any help!

Nate_Bro
11-16-2004, 04:43 AM
well i see the prob with the check box.

<input id="chkViewAll" type="checkbox" onclick="toggleAll()">

you call the function toggleAll() but there is no toggleAll() function, so thats why that is not working

ummm.... i'm looking over the rest of it right now, hope i can help you out, i'm new at JS too, lol

Edouble
11-16-2004, 04:56 AM
doh! I'm obviously an idiot. Here goes another shot:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
window.onload = onLoad;

function onLoad()
{
var sa = document.getElementById("chkViewAll");
if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
else sa.checked = true;
}

function toggleAll()
{
var sa = document.getElementById("chkViewAll");
var ch = sa.checked;
toggleQuestions(ch);
}

function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';


ans.style.display = 'none';
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>
</head>
<body>
<script language="Javascript">
document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
</script>
<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 1?</a></div>
<div id="answer11" class="body">Answer 1.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 2?</a></div>
<div id="answer12" class="body">Answer 2.</div>
<div id="title13" class="body"><a href="javascript:toggleQuestion('title13', 'question13', 'answer13')">Question 3?</a></div>
<div id="answer13" class="body">Answer 3</div>
</body>
</html>


Any thoughts on how to get the answers to hide on default, and how to change the check box to a link that toggles the show all? My attempts have failed...

Nate_Bro
11-16-2004, 05:06 AM
lol, its ok

ok now that works

i'm still looking over and seeing how they made it, but i think i'm close on it, or maybe not at all, who knows!
i'm new at javascript also :D

Nate_Bro
11-16-2004, 05:06 AM
hmmm... so you only want a link? like a text link?

Nate_Bro
11-16-2004, 05:15 AM
hmmm... i see what you mean

the whole script is based on the check box, i tried a text link, and its all opposite now, it hides all instead of show all

Nate_Bro
11-16-2004, 05:21 AM
well so far all i can see if you put the toggleAll() in the body like so

<BODY OnLoad="toggleAll()">

it hides them all, but, i'm still working on it

Edouble
11-16-2004, 01:52 PM
It hides them all on default?

Nate_Bro
11-16-2004, 02:43 PM
yes, if you run the script that hides them when the page loads, it hides them.

it works just as if you clicked on the check box, but it hides the answers when the page loads, instead of on default, but i'm still working on that one

Edouble
11-16-2004, 03:32 PM
Right you are! Thanks for figuring that out (I couldn't!).

Now I am just trying to figure out how to get this into an anchor tag (stripping out all the table stuff but making it a text link that does the same thing as the check box does).


<script language="Javascript">
document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
</script>

Nate_Bro
11-16-2004, 03:53 PM
Hey i got it working with a text link see if you like



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
window.onload = onLoad;

function onLoad()
{
var sa = document.getElementById("chkViewAll2");
if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
else sa.checked = true;
}

function toggleAll()
{
var sa = document.getElementById("chkViewAll2");
var ch = sa.checked;
toggleQuestions(ch);
}

function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll2");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';


ans.style.display = 'none';
var sa = document.getElementById("chkViewAll2");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>

</head>
<body onload="toggleAll()">

<p><a href="javascript:showAll()">Show All</a></p>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 146px; top: 23px; visibility:hidden" id="layer1">
&nbsp;<td align="right" width="20"><form name="form"><input id="chkViewAll2" type="checkbox" name="checkBox" onchange="toggleAll()"></form></td><td class="selectAll"></td></tr></table></div>

</div>

<script>
function showAll(){

if(document.form.checkBox.checked == true){
document.form.checkBox.checked = false
{toggleAll()}
}
else if(document.form.checkBox.checked == false){
document.form.checkBox.checked = true
{toggleAll()}
}
}

</script>

<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 1?</a></div>
<div id="answer11" class="body">Answer 1.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 2?</a></div>
<div id="answer12" class="body">Answer 2.</div>
<div id="title13" class="body"><a href="javascript:toggleQuestion('title13', 'question13', 'answer13')">Question 3?</a></div>
<div id="answer13" class="body">Answer 3</div>

</body>
</html>

Nate_Bro
11-16-2004, 04:05 PM
Hope that is what you where wonting :) let me know if it is not

Edouble
11-16-2004, 04:05 PM
You're the man! Thanks for the help. I hope you can use this thing somewhere as well.....

Nate_Bro
11-16-2004, 04:17 PM
any thime!

Nate_Bro
11-16-2004, 08:21 PM
Oh, i just thought of this, it looks a little better,

It says Show All and when all are displayed it says Hide All i think it looks a little better then my other one :)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
window.onload = onLoad;

function onLoad()
{
var sa = document.getElementById("chkViewAll2");
if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
else sa.checked = true;
}

function toggleAll()
{
var sa = document.getElementById("chkViewAll2");
var ch = sa.checked;
toggleQuestions(ch);
}

function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll2");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';


ans.style.display = 'none';
var sa = document.getElementById("chkViewAll2");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>

</head>
<body onload="toggleAll()">

<div id="showhide"><p><a href="javascript:showAll()">Show All</a></p></div>



<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 146px; top: 23px; visibility:hidden" id="layer1">
&nbsp;<td align="right" width="20"><form name="form"><input id="chkViewAll2" type="checkbox" name="checkBox" onchange="toggleAll()"></form></td><td class="selectAll"></td></tr></table></div>

</div>

<script>
function showAll(){

if(document.form.checkBox.checked == true){
document.form.checkBox.checked = false
document.all.showhide.innerHTML = '<p><a href="javascript:showAll()">Show All</a></p>'
{toggleAll()}
}
else if(document.form.checkBox.checked == false){
document.form.checkBox.checked = true
document.all.showhide.innerHTML = '<p><a href="javascript:showAll()">Hide All</a></p>'
{toggleAll()}
}
}

</script>

<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 1?</a></div>
<div id="answer11" class="body">Answer 1.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 2?</a></div>
<div id="answer12" class="body">Answer 2.</div>
<div id="title13" class="body"><a href="javascript:toggleQuestion('title13', 'question13', 'answer13')">Question 3?</a></div>
<div id="answer13" class="body">Answer 3</div>

</body>
</html>

Nate_Bro
11-16-2004, 08:23 PM
still needs some work, but i think it will look nicer