add to cart divaFAQ for Dreamweaver: Frequently Asked Questions PC/Mac  DWMX-DWCS4  $29.00

It is quite easy to change the CSS styling of your divaFAQ FAQs. To assist you, we offer:

  • detailed comments throughout the /diva/divaFAQ/divaFAQ.css file (which is added to your site when you add divaFAQ to a page) and
  • a free divaFAQ Demonstration Pack loaded with great tips and suggestions. Click the User Interface's Help button to obtain this great resource.

divaFAQ Frequently Asked Questions

 I created a test page and clicking OK to add divaFAQ gives an error: "While executing onClick in diva_FAQ.htm, a JavaScript error occurred,"
There is a bug in Dreamweaver that manifests only when your page BEGINS with a DL tag. Insert most any other tag before the DL and the problem is solved.
I own easyFAQ and you kindly sent me divaFAQ, which one should I use?
If all is well, there is absolutely no need to update or change any of your current pages. Use divaFAQ for future FAQs. Or if you would like to convert your current pages, simply remove the easyFAQ Behavior using the Behavior Window, and then go to the Insert Bar's diva tab to add divaFAQ. Once you have removed all easyFAQ's from your pages, it is fine to Uninstall that Extension via the Extension Manager. If you are sure you've removed all easyFAQ behaviors from your website, you can also delete the vwd_scripts/tjk/easyFAQ/ folder from your local and remote drives.
Can I add my own images or edit the supplied images for the Group Togglers, Questions and Answers?
Sure!

To add your own images, simply put your new images in the appropriate image subfolders in the diva/divaFAQ/i/ folder and the next time you open the User Interface, they will appear in the Select Lists for you to use. Cool, huh? Be sure to check the images we supplied for the proper image dimensions to use.

Feel free to edit any of the supplied images, as well as the bonus images (including all the Fireworks pngs) which available for free download via the divaFAQ UserInterface's Help button. divaFAQ will never overwrite any of your edits, which are easily accomplished by using our png files and exporting the new gif files.

The /diva/divaFAQ/i/Toggler image folder is empty!
When you choose the Single Text Group Toggler option, the images used for the Group Toggler are found in the ..../i/Q folder! So upload THAT folder to the server.
I have a sliver of yellow right above the uppermost plus icon online, is that normal?
Somehow you have the design-time css, which should only be used within DW, to be on your page in the real world. Simply remove this line of code from the head region of your page: <link rel="stylesheet" type="text/css" href="diva/divaFAQ/divaFAQ_designtime.css">
If I customize my CSS (or an image) file, will divaFAQ ever overwrite it and lose my changes?
No your CSS styles (and image edits) are safe. divaFAQ will not overwrite existing css (or image) files!
Why am I getting this alert? "Making this change would require changing code that is locked by a template or a translator. The change will be discarded."
Is your page valid html? If so, then you likely have Include statements in the Head of your page, some of which may confuse the DW API. Work around this easily by temporarily adding a space between the # sign and the word "include" to disable it, so change this:
<--#include...

to this:

<--# include...
Then when you are done adding divaFAQ, go back and remove that added space to reactivate the Include statement. By the way, it is possible that there will be more than one <include> statement that you need to address. If so, Find/Replace will make quick work of these edits.
I got this alert: "There is an error on this Child page. No EditableRegion named "head" was detected."
Your Template for this page was apparently created in Dreamweaver 4, which means it is missing a critical Editable Region in the head and should be fixed. Do this by manually adding the missing Head tags. Add this code to the Head of the DW4 Template:
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
Save the Template, updating all its Children. Now your pages are compatible with all versions of DW, and you can go ahead and add divaFAQ.
Nothing happens when I click on the divaFAQ icon OR I get this message: "divaFAQ can not be added to this document which lacks a complete, valid DOM. See Help."
Either your page has Validation errors that need correcting, OR you are not using the latest version of the Extension. If the former, fix the errors (they need to be fixed any way) but if the latter, contact us to get an update.
Help! I moved my page to a new folder in the Site Window and divaFAQ no longer works in a browser. How do I fix it?
Simple to fix. Open your page in Code View and find this line of code in the document's Head region:
var gDivaPath2LocalRoot="";
You simply need to enter the document relative path to the site's root folder there. So for example if the page is now in a subfolder right below the root, the path should be:
var gDivaPath2LocalRoot ="../";
and if it is in a subfolder below that, then it should be:
var gDivaPath2LocalRoot="../../"; etc .
What versions of Dreamweaver are supported?
The UI has been tested in DWMX-DWCS4 on Mac OSX 10.4+ and 10.4.9 and PC WinXP.
Is it possible to load the page with a specific answer already opened?
Yes. Simply place a Named Anchor
(<a id="theAnchor"></a>)
in the Question (DT), and then when you link to that page, add that anchor in the url like this: www.yourwebsite.com/FAQpage.htm#theAnchor
The Question (DT) icons are doubled, there are two icons per DT (in Internet Explorer)!
When you add a namedanchor to a DT, this occurs in IE as a result of an IE work-around we added to the stylesheet recently. Scheduled to be fixed in the next update, for now you can easily fix this yourself. In the /diva/divaFAQ/divaFAQ.css file, at about line 32, change this selector:
.divaFAQ_DL dt a,
.divaFAQ_DL dt a:visited {
to this:
.divaFAQ_DL dt a:link,
.divaFAQ_DL dt a:visited {
Can I change the styling of the FAQ?
Absolutely. Absolutely, and we have included many comments in the CSS file (/diva/divaFAQ/divaFAQ.css) that controls the FAQs' appearance to make this as easy for you as possible. In addition, in the package you download when you purchase divaFAQ, you will get a demonstration site with many tips and pointers to assist you even further.
I get a Javascript error in the browser. What does "zDD[i] has no properties" mean?.
This error most likely means you are using an old version of divaFAQ. Please update to the latest version.
How come under some conditions in Internet Explorer, the icons that appear to the left of the DT (Question) are not clickable? AND Why is the file divaFAQ.css not Validating?
To handle a well-known Internet Explorer bug, we have added a trick to the css file, which, if we were to Validate the file, would throw a Validation error. It is easy to make the css file Valid once again, AND to resolve this IE bug in all modern versions of Internet Explorer by using Conditional Comments.
The trick we included in the css file is to make sure this element "hasLayout". To make the css file valid once again, you can simply remove our trick (Find in the /diva/divaFAQ/divaFAQ.css file this line: "zoom:1;" and simply delete it) and instead place the following Conditional Comment before the closing HEAD tag in your document):
<!--[if lte IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt a {zoom:1}
</style>
<![endif]-->
If the above gives you a different result between Internet Explorer versions 6 and 7, try the following (both together):
<!--[if IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt {zoom:1}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dt a {height:0}
</style>
<![endif]-->
The icon I am using for the DTs (Questions) is being partially cut-off. Why that?
The idea is to give a minimum height to the DT to make sure it leaves enough room for your icon.
For this, you need to use two different properties, one for the good browsers out there and one for the bad ones:
In the divaFAQ.css stylesheet, find the
.divaFAQ_DL dt a,
.divaFAQ_DL dt a:visited {...}
rule and add the following declarations to it (use the same value as your icon's height):
min-height:20px;_height:20px;
If you prefer to use a Conditional Comment rather than the CSS filter above (the underscore hack), then replace that second declaration with the following, before the closing HEAD tag in your document (or just add the rule to an existing Conditional Comment if you have one already):
<!--[if lt IE 7]>
<style type="text/css" media="screen">
divaFAQ_DL dt a, .divaFAQ_DL dt a:visited {height:20px}
</style>
<![endif]-->
The image I'm using for the DDs (Answers) is being partially cut-off. How come?
Same as above. The idea is to give a minimum height to the DDs (Questions) to make sure it leaves enough room for your image.
For this, you need to use two different properties, one for the good browsers out there and one for the bad ones:
In the divaFAQ.css stylesheet, find the
..divaFAQ_DL dd {...}
rule and add the following declaration to it (use the same value as your image's height):
min-height:40px;_height:40px;
If you prefer to use a Conditional Comment rather than the CSS filter above (the underscore hack), then replace that second declaration with the following, before the closing HEAD tag in your document (or just add the rule to an existing Conditional Comment if you have one already):
<!--[if lt IE 7]>
<style type="text/css" media="screen">
.divaFAQ_DL dd {height:40px}
</style>
<![endif]-->
In Safari, and only in that browser, the DDs (Answers) do not expand. How can I fix it?
It seems that Safari has trouble opening DDs that begin with certain tags, particularly <P> and <UL> tags. If you experience this wierd behavior in Safari, you can remove these elements, OR insert some text or even just a &nbsp; entity before the offending tag, OR try adding one of these three CSS rules:
.divaFAQ_DL dd {display:table;}
or:
.divaFAQ_DL dd {display:inline-table;}
or:
.divaFAQ_DL dd p {position:relative;}
In Safari, icons do not appear next to the DTs (Questions) and DDs do not expand or when they do, they overlap each other. Why?
Are you using PRE elements inside the DDs? If this is the case, I don't know of any fix besides removing them from your markup.
In Internet Explorer, the "+/-" icons flicker when the user hovers over the questions. Is that normal?
This is due to an Internet Explorer bug related to image caching. By default, this does not happen, as it depends on custom user settings usually only used by (us) developers.
To make the flickering disappear, add the following within the HEAD element of your page:
<script type="text/javascript">
<!--
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
//-->
</script>
My two Group Toggler buttons have no space between them and/or in Internet Explorer the first Question is indented!
Most likely you have a CSS style on our page that is telling images to float. This is easily fixed. Simply find this selector in the /diva/divaFAQ/divaFAQ/css file on your site:
img.divaFAQ_twoi_spacer {
and add to it:
float:none ;
What should I include in my "print styles sheet" to allow the Answers to be printed?
Add the following rule:
dl.divaFAQ_DL dd.hideDD {position:relative;top:0;}
Can I nest DLs in an FAQ, in other words, can I put a second set of Questions&Answers inside a Question?
Sure, simply add a unique id to each DL, and apply divaFAQ to both of them. We've seen good success with the No Group Toggler Option, but experiment with whatever option you'd like. And then add these styles either to a style tag in the head of your page, or even right in the /diva/divaFAQ/divaFAQ.css file if you wish (Thierry has not reviewed this, so any foolishness is mine - emb):
.divaFAQ_DL .divaFAQ_DL .DTplus a, .divaFAQ_DL .divaFAQ_DL .DTminus a {   background-image:none
}
.divaFAQ_DL .divaFAQ_DL .DTplus a a{
  background-image:
    url(diva/divaFAQ/i/Q/Q_00-1_open.gif);
}
.divaFAQ_DL .divaFAQ_DL .DTminus a a{
  background-image:
    url(diva/divaFAQ/i/Q/Q_00-1_close.gif)
}
.divaFAQ_DL .divaFAQ_DL dt a,
.divaFAQ_DL .divaFAQ_DL dt a:visited {
  padding-left:25px;
}
.divaFAQ_DL dl.divaFAQ_DL {
  margin-left:-20px;
}
.divaFAQ_DL dl.divaFAQ_DL dd{
  margin-left:22px;
}
I do want to support IE5mac. Is there anything special I need to do?
In IE5mac, hardcoded onload events in the <body> tag will prevent diva scripts from firing. So to support IE5mac you will need to move those <body> onload events to a window.onload functon. But that's easy. Here's how to move body onload events into windows.onload.