Does anyone know if it's possible to make drop down areas for a FAQ page, formatted with Q's collapsed, like this one: https://hamiltonexhibition.com/faq/
Can't figure out a way to do this with my Xara Web Designer Premium:rolleyes:...
Thanks, Todd
Printable View
Does anyone know if it's possible to make drop down areas for a FAQ page, formatted with Q's collapsed, like this one: https://hamiltonexhibition.com/faq/
Can't figure out a way to do this with my Xara Web Designer Premium:rolleyes:...
Thanks, Todd
ANYONE??
Time zones Todd.
You are seeing a vertical accordion.
Not possible in native Xara unless you want to add scores of pop-up layers. Look at https://www.talkgraphics.com/showthr...370#post581370.
I created a CSS3 approach here: https://www.talkgraphics.com/showthr...250#post600250. Use the https://accordionslider.com/ and put <head> code in the Placeholder HTML code (head) and the remainder in the HTML code (body). You cannot use Xara for formatting of the FAQs and have to use HTML coding instead.
Acorn
ACORN YOU'RE AWESOME AS ALWAYS, i'LL TRY THIS OUT LATER TODAY! TODDQuote:
Originally Posted by Acorn
Acorn, how do I get it to work on mobile also? It works fine on desktop but then when I do the same on the mobile version it messes up the desktop version? https://museum.tv/faq.htm
just use the Generator again for the narrower Placeholder in the Variant, keeping the same HTML Code (body) detail.Quote:
Originally Posted by trnhockey
It is possible to change all the widths to 100% in the CSS Code (head) to make the FAQs match whatever the width of the Placeholder is but you have to be careful and check each change in turn; the padding becomes the problem.
Acorn
You can see both versions I did links below. I can give you the code if you want.
I installed two different codes because I could not repeat the same twice on desktop nor variant, xara has issues with that.
https://www.minirinx.com/faq.htm
https://www.minirinx.com/contact.htm
That would be excellent! Thank-you.Quote:
Originally Posted by behzad
Just email me, go to my website down at my signature and email me.
Acorn, I tried using Behzad's idea but I can't figure out how to make it work. If I just wanted to use basic text for the mobile version (since I can't get these drop downs to work on both desktop and mobile) do you know of a way to do that? It's a FAQ page which looks great on desktop.... https://museum.tv/faq.htm but the mobile version is blank. I tried to just paste basic text on the mobile version, that won't work either. Is there any other way to do this????Quote:
Originally Posted by Acorn
Todd
As you can see on behzad's sample websites, he used a different version for each variant. Apparently, Xara has difficulty with one code for two (or more) variants.
Todd, I already advised using the on-line generator, https://accordionslider.com/. This works fine for Variants.Quote:
Originally Posted by trnhockey
An example file: Attachment 125427.
Do note, I place some text in different locations to check the detail. This was deliberate.
Ensure you wrap the CSS in <style></style> tags.
You could move the CSS to the Website head code area to save duplication but I left it with the Palceholders so you could experiment with it for different styling.
Acorn
Thanks very much Acorn!!Quote:
Originally Posted by Acorn
I know this thread is pretty old, but I could not get the generator mentioned above to work. I did a lot of search for this feature a few years ago and decided JotForm.com was the easiest to work with, however the free plan does have it's limitations. Here are the results. https://www.madaboutmolds.com/Everyt...ht%20here!.htm would be interested if there are any other generator options out there now that offer free or no plan to use it.
There have been several recent posts in this thread Marjorie, and some offer a solution you might want to try. Read backwards.
?Quote:
Originally Posted by marjorie
JotForm doesn't do drop down FAQs unless I have missed out.
Acorn
I believe the above example https://www.madaboutmolds.com/Everyt...ht%20here!.htm uses the Highslide JS Generator http://highslide.com/configurator.php ? (at least it looks that way from the code).
I've worked it out. marjorie is using https://www.jotform.com/help/297-Sho...Collapse-Field and text/images for the FAQs; there being no actual form fields on the page.
For 10 FAQs as here, I would just have created pop-up Layers for each
My own design decision might have been to put all the FAQs in as ten separate pages and present them through an IFRAME (eleven as there is the fully collapsed FAQ Options used as a safe return point).
Only two of the FAQs need much space so the long main page could be much reduced and the two long ones just rely on an IFRAME vertical scrollbar.
Here is an example: Attachment 125484.
It only handles the FAQ pages for A, B & C as I have left the rest as your homework.
To develop:
- In the Page and Layer gallery, select the faqs page.
- Duplicate it. // Creates faq-d page.
- Move faq-d page to the bottom.
- Select faq-d page.
- Select all FAQs below Option D and move them to the bottom of the page.
- Clone the white rectangle and red latter in any prior page and move to faq-d.
- Change the Option D link to faqs.htm // Ensure Correct automatically is unticked.
- Change the left arrow to an up arrow.
- Save the file
- Repeat for all other Options.
If more space is required, delete all but the above and below Option bars and change their text to Previous FAQs and Next FAQs and set their link to faqs.htm.
Clearly the contents of each Option are up for grabs as are the Option Questions. I have used marjorie's styling as a starter.
Acorn
Yes, if you look at my link. This example is built with a free plan in Jotform. Unfortunately, it's limited to only 100 page loads per month, but it works well and is very easy to set up. For now, I have what I need in case another client would need it. I was just wondering if there was anything easy without coding that would not need a plan. I have other options I could use as well, such as expandable text code, expandable pins, and images. I would just rather not work with code if possible.https://www.madaboutmolds.com/Everyt...ht%20here!.htm
Shamelessly stealing Acorn's hard work. I would attack it using layers rather that separate pages which keeps everything in the same place, gives the option of using the built in animations and eliminates the small amount of code.
Attachment 125486
The only code is in the Placeholder,Quote:
Originally Posted by marjorie
This is no different to Xara's Embed a website Widget but it works for the site it is hosted in as well. Xara - IFRAMEd FAQs.xar is not dependent on any third party support, hosting or charge. the FAQ pages can be a separate .XAR file publishing to the same folder or sub-site folder. Finally, it works right out the box with Variants.Quote:
<iframe src="faqs.htm" name=""faqList" width=100% height=100% scrolling=no style="border:none;">Your browser does not support IFRAMEs</iframe>
Acorn
Nicely lifted Chris, I avoided Layers as you cannot (easily) collapse the expanded FAQ.Quote:
Originally Posted by Chris M
Acorn
Quote:
Originally Posted by Acorn
The layers are left at the default 'Close Pop-up Automatically'. Click anywhere and the pop-up closes.
I would have been nice to have the the animation drop downwards on the index page, then push upwards on a layered page, but alas it was not meant to be.
Chris, with the popup: open "...2 close "..." Tweak, you can add Fades: https://www.talkgraphics.com/showthr...anced-features in and out: Layer Name: layerX (fade-in 2) (fade-out 5) for a 2 second fade in and a 5 second fade out and the Link call would be popup: open "(fade-in 2)", "(fade-out 5)". I have found these undocumented features usually quite difficult to remember and maintain.Quote:
Originally Posted by Chris M
Acorn
This will be my afternoon reading. Thank you.
I use the 'layer name(lock)' - 'popup:close' quite often and it will be good to find other little snippets.
I have just separated my FAQs into a separate design file and changed all the links back to Link > Link to Page: xyz.
I then made the show a Vertical Supersite with Horizontal Cube Rotate.
If this is published to the same folder and the main site, the Placeholder link should still work.
I feel this is superior to layering as it then becomes more portable.
Acorn
Afternoon Acorn,
Like the idea of using a supersite; it would be good to see your updated XAR doc. It gives you a neat solution for vertical accordions without having to write code (save for the two lines in the placeholder).
Gary
Gary, here is a working example of the FAQ Supersite: Attachment 125487.Quote:
Originally Posted by Initiostar
The required Placeholders need to be 960px wide by 100px deepfor the Main one and 640px wide for the Variant.
The displaying site needs to be exported or published to the same folder level as the FAQs Supersite.
The use of the new v16.3 SmartFields:text and SmartFields:link will vastly improve the development and modification time for the Bars Headings...
Acorn
Many thanks Acorn,
Fortunately, my upgrade to 16.3 worked as expected.
Gary