Forum Moderators: open
I have designed a website using HTML and DHTML. I have FAQ's also in my site.
While vising some sites I came across a site given below:
[microsoft.com...]
In this site, When u click on a question, the answer comes below it. I have gone through their coding, I think they have used java script.
I am quite new to java script, so dont have any idea about javascript programming. While going through the code I came across some function "getpar(this)",
what does this do?
I liked the way they have presented the FAQ's and would like do something like this for my FAQ's also.
I tried for that but it didn't workout.
I have also gotsome coding from dynamicdrive.com. Pls check :
[dynamicdrive.com...]
Now in this coding when we moves the mouse over "Dynamic Drive", the decription written in ""
i.e. linktext[0]="something.........", appeares.
But if I am using such code, thenI would not be able to insert any link in my answer.
So can anyone pls help me so that I can improve the looks of my FAQ's??
Thanks in advance.
Happy.
The Dynamic Drive code you indicated is for a visual effect called mouseover. Simply put: when the cursor crosses the item (for example: link text or button) the code executes and does something - like change the color of the text or change an image on the page. You should be able to create whatever links you want within your FAQ and still use the code (mind you I haven't looked at the code that carefully).
<html>
<head>
<title>Sample</title>
<script language="JavaScript">
var answer1 = 'This is your first sample answer.';
var answer2 = 'This is a different sample answer.';
function answer(x){
if ((navigator.appName == "Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion) >= 4))
switch(x){
case 10:
document.all.message.innerHTML=answer1;
break;
case 20:
document.all.message.innerHTML=answer2;
break;
}
}
</script>
</head>
<body>
<a href="javascript:answer(10);">A question?</a>
<br><br>
<a href="javascript:answer(20);">A different question?</a>
<br><br>
<div id="message"></div>
</body>
</html>
<a href="javascript:void(0);" onclick="document.getElementById('answer1').style.display = 'block'">How do I view the anwswer to this question?</a>
<div id="answer1" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
</div> This has a number of advantages; It comes at less cost (quicker) than modifying the innerHTML property, easier to manage and edit in a WYSIWYG tool and most spiders will still read the contents of your answer. Again you'll need to modify the scripting flavours for NN4 & co.
Josh
Josh graciously helped me assign styles to the toggles for the above script in the thread below. Using his method ment that I only needed to insert cursor: hand; in my IE CSS to make it all work.
[webmasterworld.com...]
Seeing as how his method in this thread is lighter than what I'm using and works in NN6 maybe he could explain how it could be altered to be hidden again?
<html>
<head>
<script>
function switchDisplay(elmid)
{
var swElm = document.getElementById(elmid);
if (swElm.style.display == 'none')
{
swElm.style.display = 'block';
}
else
{
swElm.style.display = 'none';
}}
</script>
<style>
.indent { margin-left:15px; }
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="switchDisplay('answer1')">How do I view the anwswer to this question?</a>
<div id="answer1" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
<div class="indent">
<a href="javascript:void(0);" onclick="switchDisplay('answer1_1')">How do I have sub-questions?</a>
<div id="answer1_1" style="display:none">
Just by cleverly nesting the tags....
</div>
</div>
</div>
</body>
</html>
There you go! should recollapse onclick and has nested sub-items that are indented.
Let me know if you need any clarification.
:)
I noticed in the link below that the display:none property is supported by IE4 and NN4 and "block" by NN4 but It doesn't work in NN4. I'm not interested in making the code incrementally huge to support these browsers and can change the display properties in their CSS but am curious as to what is happening?
[w3schools.com...]
Special thanks to "joshie76". The coding which u have given, is exactly what I was looking for.
Happy.
My FAQ's are ready now, but what I want is , when I click on any question, the rest of the answers should not be visible, I mean if someone has already opened the answer for Q.1., when he clicks on Q.2, only the Answer of Q.2. should be visible and not A.1.
I have tried the another coding for sub questions , which u have given, but that is not solving my problem.
Pls help me.!Thanks in advance.
Happy.
<html>
<head>
<script>
var numberOfQuestions=3;function switchDisplay(qnumber)
{
for (i=1; i <= numberOfQuestions; i++)
{
var swElm = document.getElementById('answer' + i);
if (i == qnumber)
{
if (swElm.style.display == 'none')
{
swElm.style.display = 'block';
}
else
{
swElm.style.display = 'none';
}
}
else
{
swElm.style.display = 'none';
}
}
}
</script>
<style>
.indent { margin-left:15px; }
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="switchDisplay(1)">1. How do I view the anwswer to this question?</a><br/>
<div id="answer1" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
<a href="javascript:void(0);" onclick="switchDisplay(2)">2. How do I view the anwswer to this question?</a><br/>
<div id="answer2" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
<a href="javascript:void(0);" onclick="switchDisplay(3)">3. How do I view the anwswer to this question?</a><br/>
<div id="answer3" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
</body>
</html>
Happy
I want to make a check box, such that if I am clicking that check box, all the answers will be visible. Pls help me, how do I do this??
<input type=\"checkbox\" id=\"toggle\" onClick=\"togglefaq()\" value=\"On!\">
I think I have to do something like this, but where I am going wrong?? Pls help me.
Happy.
<html>
<head>
<script>
var numberOfQuestions=3;function switchDisplay(qnumber,allvis)
{
for (i=1; i <= numberOfQuestions; i++)
{
var swElm = document.getElementById('answer' + i);
if (allvis)
{
swElm.style.display = allvis;
}
else if (i == qnumber)
{
if (swElm.style.display == 'none')
{
swElm.style.display = 'block';
}
else
{
swElm.style.display = 'none';
}
}
else
{
swElm.style.display = 'none';
}
}
}
</script>
<style>
.indent { margin-left:15px; }
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="switchDisplay(1)">1. How do I view the anwswer to this question?</a><br/>
<div id="answer1" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
<a href="javascript:void(0);" onclick="switchDisplay(2)">2. How do I view the anwswer to this question?</a><br/>
<div id="answer2" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
<a href="javascript:void(0);" onclick="switchDisplay(3)">3. How do I view the anwswer to this question?</a><br/>
<div id="answer3" style="display:none">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<p/>
</div>
<input type="checkbox" onclick="if(this.checked){switchDisplay(null,'block')}else{switchDisplay(null,'none')}">
</body>
</html>
I've made some quick changes and been a little lazy. You'll get some strange behaviour if you show all and then click on a link but the changes (in blue) should at least get you started.
Thanks for the code snippet. I really thought that was usefull. Will modoify to fit in for what I need.
Thanks again,
Brian
Now this could be my last question to you, but this is the totally new question and not related to this FAQ's.
I want to give "online help" on my site, i.e. I want to create my own forum. I am trying this since so many days, I have that much idea that I must have database server. I have referred some sites also to learn ASP , as I need to have some idea about ASP, for creating such a forum. But still not finding any solution.
I have already asked this question in the same forum, but still not getting any reply.
PLs help me!! Thanks in advance.
Happy.
I had to skip all those above posts with all the code...all over my head :)
if youre looking for an ASP forum, you might want to look for "Snitz"...maybe for use or just to play around with. Another one, though I havent used it ....may be "tableeditor"...no doubt it can be customised enough to forum-like properties :)
When I try and move display:none out of the tags it takes two clicks to open the menu when the page is first loaded. If I leave the style in the tags, NN4 and Opera 6 read display:none but won't show the hidden div.
Is there a work around for this code that would allow display:none to be put in external CSS for IE and NN6?
<html>
<head>
<script>
function switchDisplay(elmid)
{
var swElm = document.getElementById(elmid);
if (swElm.style.display == 'none')
{
swElm.style.display = 'block';
}
else
{
swElm.style.display = 'none';
}
}
</script>
<style>
.indent { margin-left:15px; }
#answer1,#answer1_1 { display:none; }
</style>
</head>
<body>
<a href="javascript:void(0);" onclick="switchDisplay('answer1')">How do I view the anwswer to this question?</a>
<div id="answer1">
Easy, click the link above and style="display:none" attribute of this div tag will be set to "display:block" instead.
You can extend this method to allow the div to be hidden again. Happy Coding.
<div class="indent">
<a href="javascript:void(0);" onclick="switchDisplay('answer1_1')">How do I have sub-questions?</a>
<div id="answer1_1">
Just by cleverly nesting the tags....
</div>
</div>
</div>
</body>
</html>
Switch the if statement around to look like
if (swElm.style.display == 'block')
{
swElm.style.display = 'none';
}
else
{
swElm.style.display = 'block';
}
Removing the display:none will obviously mean your folder is open to start with... you'll need to somehow deliver the pages differently for Op & NN6. If you put the display:none property into CSS then you'll have to modify the className property of the elements as opposed to the .style.display property.
For ASP and so on try the Server Side Scripting forum.
