Widgets
Author: Des M.
Visited 3737,
Followers 3,
Shared 0
I would like to use compatible widget software within my websites to create Tabs, Accordions, etc. An early recommendation cited some time ago was http://jqueryui.com/
Is that still the best recommendated software or are there others alternatives particularly for ease of use and changing colour?
Posted on the
Hi
we have various tutorials for accordions, toggles, tabs and sliders on http://www.x5tuts.com
regards
jamie
Author
That site looks very helpful. Thanks
Author
I have tried copying and pasting the Accordion code from http://www.x5tuts.com but I am not getting the correct result.
In the advanced settings / statistics, SEO and Code / expert section, I already have pasted Google analytic code. I've pasted the accordion code after the google code - would there there be a conflict?
I've then pasted the second suggested code into the HTML code on a page.
I'm attaching an image of the results from previewing the page.
there is no conflict. its better to copy the google code in "before closing body" section.
I am assuming you chose accordion set 4 v11, after doing step 1, on step 2 you need to remove the check mark inside your html object to show scroll
on step 3, when you adding those two files, remember to choose the right path! when you are adding js file, in path field type js and when you adding css file, in path field you need to type css.
or
you can leave them as it is and go back to step 1, the code that you copy paste,
original code
<!-- X5 Accordions CSS -->
<link type="text/css" rel="stylesheet" href="css/x5_accordion_toggle.css">
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="js/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- X5 Accordions JS -->
<script type="text/javascript" src="js/x5_accordion_toggle.js"></script>
replace it with this code
<link type="text/css" rel="stylesheet" href="files/x5_accordion_toggle.css">
<script type="text/javascript" src="files/jquery.min.js"></script>
<script type="text/javascript" src="files/x5_accordion_toggle.js"></script>
Author
I've tried what you suggested but without success. I replaced the code with the bottom code and still no joy.
I think the problem lies in the advanced settings / statistics, SEO and Code / expert section - I'm attaching a screen shot of the coding.
Hi
did you add the files in the html widget. Make sure they are in the correct folders as well.
regards
jamie
All the tutorials have been tested on v9, v10 & v11 and they all work.
regards
jamie
Author
Jamie
Did that again, same result!
can you upload your website so we can see it live?
Author
Anthony
http://www.murtaghfamilytree.com/widget.html
If you need me to give you access to the backend just let me know how to send it privately.
Hi right after looking through your site it seems like the files are not on the server you need to add a html widget then add your files like the image attached
Anthony
if you look at his source code and click on the files, you'll agree with me that there not on his server correct.
regards
jamie
Author
Jamie
Thanks for your help. Unfortunately I can't find the fills required to be uploaded as I don't know what I am looking for - the tutorial is not explicit or helpful.
I've been trying widgets from http://www.x5tuts.com and I find them more user friendly and easier to install in the website.
Des
In the project files downloaded you will find the Css and js files required, all you do is add them in the required folders in the code. Is it Evo 11 or pro 11 that your using.
Author
Evo 11
Yes Jamie, I see that
Des, follow these steps
1) go to advance settings>statistic>expert tab and remove the codes and files
2) download the zip file attached to this message
3) extract the zip file
4) add the following 3 files "x5_accordion_toggle.css" & "jquery.min.js" & "x5_accordion_toggle.js", IMPORTANT: while adding them place a checkmark on "Link the file"
5) add all the image files, IMPORTANT: while adding image files, change the "Path on server" from "files" to "images"
6) go back to your page and hit the preview
Done!
Anthony
thanks very much, Des if you follow the instructions above you shouldn't have any problens, if you do I will gladly add the files to your project for you.
regards
jamie
Author
Thanks very much, I got that sorted. If I want to setup other widgets (Tabs) I presume it is a similar process in downloading the files? Is there a download button on the website?
Thanks again.
Des
Hi des
all the tutorials come with project files, just click on the box at the bottom of the tutorial.
regards
jamie