The Horizontal Accordion provides a vast amount of options to adjust its settings to your liking and allows you to integrate it fast into your website. You have complete design freedom and can interact with the plugin through css, plugin methods and external function calls. The plugin is under constant development. I deliver the foundation and you can go wild on the design :)
Started with the XBOX design :)
Base functionality
- No dependencies
- Optional use of easing plugin
- Close and open content one after the other
- Close and open at the same time
- Choose trigger (mouseover, click …)
- Easily control through external calls
- Open content on load
- Open content through hash tags in the url (#tab1, #tab2…)
- Position of handle (left, right)
- Mixed handle positions – 2 left , 2 right …
- Cycle through content by interval
- Events when animations starts and ends
- Hide content until all has been assembled
Dependencies / Tips
- jQuery 1.7+ / 1.8+
- jQuery Easing (optional)
- Tips
- Make sure to load the css definitions before you load jQuery
- When adding Youtube videos, make sure that the wmode is set to opaque, just add “&wmode=opaque” to the video url.
- Use Child selectors to prevent inline lists to be handled by the main stylesheet. “.container > ul > li”
Use http://selectivizr.com/ to simulate and use them in IE - Bad fonts rendering on IE (Cleartype)
– check for a windows hotfix
– set a fixed background color for the container. - Apply “position: relative” to content wrappers, to use absolute positioning within.
New features for 2.5 / 2.6
- Cleanup of width and container calculation. The full width of the container is used now, all hacks have been removed :)
- Stop/start cycling on mouseenter / mouseleave
- Call external function on complete
- Namespace cleanup
- Clean method layout
- New methods to call content
- More options to add your own external calls
- CSS cleanup & optimization
- Automatic background image slicing for handles + looping
- New resize method
- Refacture the loop to set new loop position, when a button has been clicked
- Animation tweaks
Coming for 2.7
- complete cleanup
- easy to extend using modular methods, even core methods can be easily overwritten
- easy way to execute new methods on init, eventstart, eventcomplete and eventend
- easy way to extend settings
- after release resizing and looping will be moved to modules
- jQuery 1.7+ required
- tested and working on JQuery 1.9 / 2.0b1
- size reduced
- examples updated
- many other minor fixes with the help of some of you :)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(document).ready(function () { $(".test").hrzAccordion({ eventTrigger: "mouseover", openOnLoad: 1, cycle: true, mouseEnterFunctionName: "mouseEnterTest", mouseLeaveFunctionName: "mouseLeaveTest", eventAction: function (i) { $("#eventRunning").html(" Opening - " + (i + 1)); }, completeAction: function (i) { $("#eventRunning").html(" Completed - " + (i + 1)); } }); var test = window.setInterval(function(){ var data = $(".test").hrzAccordion('loopStatus'); var instance = $(".test").hrzAccordion("instanceStatus"); $("#statusCheck").html(data.status) $("#widthCheck").html("Container "+instance.containerWidth+"px / Content "+instance.finalWidth+"px") },2000); }); function mouseEnterTest() { $(".status").html("entering") }; function mouseLeaveTest() { $(".status").html("leaving") }; |
Options Version >= 2.6
The current plugin provides some simple options to alter its look and behavior.
Methods Version >= 2.5/ 2.6
The current plugin provides some simple methods to handle external tasks.
Method | options |
show $(container).hrzAccordion(‘show’,id); | container: same the accordion was applied to id: zero based. 0 for first container and so on |
Open content on demand. See example provided with your download. | |
resize $(container).hrzAccordion(‘resize’); | resize accordion, see default.examples.js for usage |
Resize accordion on demand | |
loopStatus var object = $(container).hrzAccordion(‘loopStatus’); | js object object.loop (element number – zero based) object.status (“start” or “end”) |
holds the current status of the loop (example1) | |
instanceStatus var object = $(container).hrzAccordion(‘instanceStatus’); | js object object.finalWidth (content width) object.elementCount (amount of elements) object.handleWidth (handle width) object.containerWidth (container width) object.container (active container number) |
holds the current data of the active accordion instance | |
startpause $(container).hrzAccordion(‘startpause’); | start or pause loop (toggle) |
holds teh current status of the loop (example1) | |
History
- Version 2.60.05 (11/2012)
– cleanup, fixes, new methods - Version 2.00 (2012)
– minor cleanups - Version 2.00 Beta (2011)
-complete rewrite - Version 1.00 beta
– Cleanup of the plugin.
– Accordion resizes now on window resize
– use of custom handle content added (see DEMO) - Version 1.00 alpha
First plugin release - Version 0.52
Disable click for open content - Version 0.51
Updated content handling and position of the click handlers. Will be moving this to a plugin and allow a more generic usage. - Version 0.5
First release
License
HORIZONTAL ACCORDION LICENSE
Copyright 2012 portalZINE(R) NMN, Alexander Graef, Germany
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Non-Commercial Use:
The Horizontal Accordion is free for non-commercial use (i.e. personal, educational). Redistribution of the code is unrestricted as long as it remains free and in a non-commercial context.
Commercial use:
If you decide to use the Horizontal Accordion for your commercial projects, I ask you to support my work with the purchase of a pro license.
Commercial redistribution of the code is not permitted except by arrangement with portalZINE(R) NMN, Alexander Graef, Germany.