create Faq page

[Rani]

I want to create an FAQ page like this link http://www.bigfatwebhosting.co.uk/help/index.php?view=2#top

I would appreciate some tips on this. Thanks

 

[djjeavons]

Hi

Are you asking how to create a page that contains a series of links at the top that then jump to a specific section on the page? If so, then this is accomplished using Anchor tags.

For example, Assume I had an HTML page with two links at the top as such:

<a href="#Link1">Goto Link1</a><br />
<a href="#Link2">Goto Link2</a>

Then after this I might have a heading for each of the two Links to point to. When you write those headings out, you first give them an Anchor tag:

<a name="Link1"><h1>Link1</h1>
your paragraphs of text here
<br />
<a name="Link2"><h1>Link2</h1>
more paragraphs of text here

Notice that in the original links the #LinkName was used to signify that the link is to point to a location on the page defined by LinkName.

If you want to provide back to top links as in the example you provided then you can either use the same approach as the above by specifying an anchor tag at the top of the page and then a link to it, or alternatively, create a link that only has the # symbol as it's href value:

<a href="#">back to top</a>

If this isn't what you were referring too, could you be more specific.


HTH

 

[Rani]

how to FAQ

I am using .net framework 1.1
This request is for faq.
I have two pages.
one for question showing as links on the page when clicked a link passes the query string to go to the answer page where the answer's are displayed for the question clicked.
how would i do that on the same page. meaning the links on the top of the page, when the user clicks on one of the links it should bring them to the bottom of the page where the answer is displayed.
my code on the first page:

For i = 0 To ds.Tables(0).Rows.Count - 1
Response.Write("<left><li><a href=""FaqAns.aspx?id=" & ds.Tables(0).Rows(i).Item("faq_id") & """>")
Response.Write(ds.Tables(0).Rows(i).Item("question") & "</a></li></left>")
Next
on the first page i am writing all questions as links to the screen. Alternatively i am trying repeater control.
my code on the second page:
Dim sql As String = "select * from Faq where faq_id = " & Request("id")
Dim ds As New DataSet
Dim da As New SqlDataAdapter(sql, con)
da.Fill(ds)
Me.lblQues.Text = ds.Tables(0).Rows(0).Item("question")
Me.DataGrid1.DataSource = ds.Tables(0)
Me.DataGrid1.DataBind()

on the second page i have the lblquestion to write the question
and using datagrid i display the answer to the question in the lbl.
please guide me the right direction. any sample site would be also wonderful. Thanks

 

[djjeavons]

Hi

I'm sorry, but I am a little confused. Do you want to write the questions and answers all on the same page and then use anchors to jump around the page or do you want the questions on one page and hyperlinks to another page that will display the answer?

If I was to assume that you were going to show this all on one page then it would be easier to use a repeater to display the list of questions and within the repeater's ItemTemplate, use an hyperlink control and set the NavigateURL property to "#" + the name of the anchor you are going to jump to (this would probably be an ID or something from your database). You can do this either within the repeater (on the ASPX) use the DataBinder.Eval method or within the Repeater's ItemDataBound which is fired when the Repeaters DataBind method is called, although using this approach would mean that you would need to use the FindControl method on the e.Item property to find the hyperlink control and then set the NavigateURL property, something like:

CType(e.Item.FindControl("NameOfControl"), HyperLink).NavigateURL = "#" & DataRow("FieldName").ToString

Then when it comes to printing out your answers (assuming on the same page) use a repeater again and inside the item template have two labels. The first is for the anchor and the second for the question. Again, using either the ASPX page or the ItemDataBound event, you can set the anchor label to the value "<a name="IDFromDatabase">" and the answer label to the answer field from the database.


HTH

 

[Rani]

Thank you it makes sense reading your suggestion. I will give it a shot and let you know how it goes.
Thanks for your time.

 

[Rani]

href

<asp:HyperLink NavigateUrl='<%# "FaqAns.aspx?id="&databinder.eval(container.dataitem,"faq_id")%>' Runat=server><%# DataBinder.Eval(Container.DataItem, "question")%></asp:HyperLink>

The above does send to the page faqans.aspx.
If i want to send to the same page.meaning question on the top of the page and when clicked answer to the particular question showing at the bottom of the page? How would i do this?

If i have to use the anchor tag could you show some ex using the above code please?
Thanks.

 

[JohnH]

hey Rani, see this tutorial page on how to use named anchors to navigate within a page http://www.w3schools.com/html/html_links.asp

 

[Rani]

Does not help from what i want to do.

<asp:HyperLink NavigateUrl='<%# "FaqAns.aspx?id="&databinder.eval(container.datait em,"faq_id")%>' Runat=server><%# DataBinder.Eval(Container.DataItem, "question")%></asp:HyperLink>

The above does send to the page faqans.aspx.
If i want to send to the same page.meaning question on the top of the page and when clicked answer to the particular question showing at the bottom of the page? How would i do this?

If i have to use the anchor tag could you show some ex using the above code please?
Thanks.

 

[JohnH]

If you don't understand how it is described see also the example on how the named anchors work, there is link at that page under "more examples" Link to a location on the same page where you can actually try it out live. That's how Html work, that's how they link to particular places in same page, that's how most faq are built. Of course you may incorporate the dynamics of ASP.Net code generation, but the principle is still the same; if you name an anchor "thename" you link to it with the "#thename" qualifier.

 

[Rani]

Now i am trying with two div's inside a repeater.
and i get this error on the second div.

DataBinder.Eval: 'System.Data.DataRowView' does not contain a property with the name answer.

This is the example i followed:
http://aspnet.4guysfromrolla.com/articles/091504-1.aspx

<script language="JavaScript">
function ToggleDisplay(id)
{
var elem = document.getElementById('d' + id);
if (elem) 
{
if (elem.style.display != 'block') 
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
} 
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script>
 
<style>
.header { FONT-WEIGHT: bold; FONT-SIZE: larger; CURSOR: pointer; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #cccccc }
.details { DISPLAY: none; VISIBILITY: hidden; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #eeeeee }
</style>
</HEAD>
<BODY bgColor="buttonface" MS_POSITIONING="GridLayout">
<FORM id="Form1" method="post" runat="server">
<asp:Repeater id="rptFaqs" runat="server">
<ItemTemplate>
<div id='h<%# Databinder.Eval(Container, "ItemIndex")%>'class="header" onclick='ToggleDisplay(<%# Databinder.Eval(container, "ItemIndex")%>);'><%# Databinder.Eval(Container.Dataitem, "question")%></div>
<div id='d<%# Databinder.Eval(Container, "ItemIndex")%>'class="details"><%# Databinder.Eval(Container.Dataitem, "answer")%></div>
</ItemTemplate>
</asp:Repeater>
</FORM>
</BODY>
</HTML>

 

[Rani]

English Please!

I followed this on this site example for an faq project.
I want to clearly understand what this javascript in plain english. I am having trouble understanding this.
here is the link http://aspnet.4guysfromrolla.com/articles/091504-1.aspx

<script language="JavaScript">
function ToggleDisplay(id)
{
var elem = document.getElementById('d' + id);
if (elem) 
{
if (elem.style.display != 'block') 
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
} 
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script>

 

[JohnH]

In plain this script toggles the style of an element from visible display-style:block to non-visible display-style:none. It is a common way to show/hide an element with DHtml in a web page. Try their 'interactive demo' to see what it does.

 

[Rani]

Thanks very much.