nikki / liteaccordion Goto Github PK
View Code? Open in Web Editor NEWA lightweight horizontal accordion plugin for jQuery.
License: MIT License
A lightweight horizontal accordion plugin for jQuery.
License: MIT License
Great plugin! It took quite a bit of digging for me to figure out how to reference the accordion after creation to execute methods like "destroy". Your test code has an example in it, but a mention like this in the documentation would be helpful:
var accordion=$('#accordion').liteAccordion();
accordion.liteAccordion('destroy');
By setting firstSlide = 0 I'm able to have the group start as closed; however, I'm trying to hack the code to have if you click on the first slide while it's already open it actually closes the entire group.
If you know of any easy solution to this it would be much appreciated.
Hi! Thanks for the excellent plugin; we use it across six hundred Volkswagen dealer sites and dealers love it :)
As jQuery 1.8 is quickly approaching,
This is mostly a tracking issue to see if you would begin thinking about removing
Thanks again for your work!
Similiar to JQuery UI tabs, we needed for each slide to be linkable via a URL hash and be able to be bookmarked for its content.
We came up with the following quick fix, but this could easily be incorporated into the library as a true/false option (i.e. like linkable: true/false):
Example:
http://jsfiddle.net/bandrzej/raA46/
Quick fix to work for the plugin:
$('#demo').liteAccordion({
slideCallback: function() {
if (this.attr('id') != "") {
location.hash = this.attr('id')
}
},
firstSlide: (location.hash && parseInt(location.hash.substr(1))) != 'NaN' ? parseInt(location.hash.substr(1)) : 0
});
Is it possible to pause the autoplay on mouse over of the entire accordion and then resume autoplay on mouseout? Would really like this feature and any help would be appreciated...thanks - great script!
When you change the width of the tabs through the settings with 'headerWidth : 48' it keeps the text at the same padding.
I solved it through changing the line-height of h2 span in the css file.
This is with the theme called "dark"
Feature request here--it would be handy to be able to resize the accordion after creation--to issue new width and height parameters to it. My use case is a full-browser-width accordion, this makes a great way to flip through pages of content.
Hey Nikki
Great work on this – thanks!
i must have done something wrong here… trying to setup a barebones (ie - themeless) version of this. on FF it works great, though in IE the H2 handles are off - in the middle of the container instead of the side.
can you tell what i did wrong?
http://bit.ly/wBsMBj and here: http://bit.ly/GBs1U8
by the way - in Chrome - the H2 handles (text) don't appear at all - see above examples.
thanks a mil!
Unless I'm missing something, it seems that setting autoplay to 'true' breaks linkables. Is there any way to have an accordion autoplay but still have the links work? In my mind I can sort of see something involving the stop and play methods used on the links, and I may give that a try, but thought I would see if you already had a solution to this.
Thanks
I'm testing the RC of IE 10 and liteaccordion content doesn't show up very well at all. I'm seeing only the last slide's content with real messed up styling. No accordion movement.
Anyone else had a chance to look at IE 10 compatibility?
When some tab is open and I click to its header nothing happens. Maybe it’s better to close tab which header is clicked? I tried to implement this behavior by adding
if (core.currentSlide == index)
methods.prev();
into function triggerSlide after variable declaration, but it doesn’t work.
Hi, I seem to be having problems with IE9, the tabs are not stacked 90 degrees they are all inline....
FF, IE7,8 Are all fine its just 9
Any ideas?
Hello -- first contact, so let me just say that this is a fabulous widget!
For the bug: I am placing regular HTML inside slides, and it works great until I put a list into it. Then it miscalculates the width of the slides. I narrowed it down to line 41 in the code, and just as a suggestion, using this fixes it:
$slides = $accordion.children('ol', 'ul').children('li')
Thanks!
Can get the accordion working fine in IE8,9 etc however it looks totally screwed up in IE7, I was hoping you could take a look at the source and see if there is any reason for this?
Hi Nicola, the linkable slides option is not working in IE7 on our installation in SharePoint, or on your demo suite by the looks of it...presumably it should, though?
Kind Regards
Steve
when using the accordion on ie9 - the click area is only a small area at the top of that bar - not the entire bar like other browsers.
I went to the demo page with Firefox and the stitch accordion looks great. I go with IE8 and there is no color?
The contents in the pages is colored but the accordion is not. I tried on 2 different computers both running IE8.
When an element in an closed tab gains focus the whole design get scrambled.
Scenario:
Suppose you have 4 tabs, each containing a different forms
move through inputs using the tab key
when you reach the last input and after pressing the tab key the next input in the second form gains focus and the layout gets ruined.
Any help would be appreciated.
Best Regards,
Mazen.
I followed instructions but cant get this working
Please help
Many Thanks
Without any parameters (the default one so), it works.
When I put some parameters... it breaks !
jQuery('#miniloops-7 div.widget-inside').liteAccordion({
containerWidth: 1000,
containerHeight: 280,
headerWidth: 35,
autoPlay : true,
pauseOnHover : true,
cycleSpeed : 5000,
easing: 'easeInOutQuart'
});
Here's the page with the 2 states : 2012.antidot.net
Thanks for your help !
Hi, I have changed the autoplay and pauseONHover actions to true but I can't get the thing to pause when user selects a tab. Maybe I misunderstand, but when it takes longer to read the text or play the video than the user has time for, it is annoying...
It would be nice to be able to specify the selectors, rather than relying on a particular HTML structure. So something like this as the defaults:
{
slideEl : $(this).children('li'),
headerEl : $(this).find('h2'),
contentEl : $(this).children('li').children('div')
}
Also, I'm not sure why you need the DIV around the OL. Could the default structure not just be the following?
ol
-li
--h2
--div
It would be good to have a status to show which 'side' of the accordion the slide was, so that a right or left arrow could be shown.
when using the accordion on ie9 - the click area is only a small area at the top of that bar - not the entire bar like other browsers.
example:
http://nicolahibbert.com/demo/liteAccordion/
EDIT:
I have found that its the span inside the h2 that is not being rotated correctly IE rotate
maybe this will apply:
http://stackoverflow.com/questions/2630504/css-rotation-ie-absolute-positioning-seems-to-break-ie
Hi, I've been using Lite Accordion in a project and I've noticed a weird and annoying issue (not calling it a bug yet).
Whenever you have an autoplaying accordion in the page and you do something like try to enter data in a form, on every slide animation, the accordion is going to steal focus.
I've found and fixed the problem for myself, but want to post it here for review so that if anyone assesses that it is indeed a bug it can get fixed.
The reason for this behavior is that the methods.play() method is doing this:
header.eq(next()).trigger('click.liteAccordion');
so whenever focus is on another element the click is stealing it towards the accordion, which for me wasn't acceptable behavior.
The way I fixed it means checking to see if autoPlay is true (otherwise the issue doesn't matter). I'm doing this because it is sort of a hack, and I don't want to break behavior when autoPlay is false. If autoPlay is true I call the triggerSlide() method independently from the actual event and providing the this object and an empty object.
The empty object is required by triggerSlide() because it's doing something like:
if (e.originalEvent && settings.autoPlay) {
methods.stop();
methods.play(index);
}
So here's my methods.play method which fixed the issue for me.
play : function(index) {
var next = core.nextSlide(index && index);
if (core.playing) return;
// start autoplay
core.playing = setInterval(function() {
// check for autoplay and use the hack, if autoplay isn't true,
// use the normal click triggering
if (settings.autoPlay === true) {
core.triggerSlide.call(header.eq(next()), {}); // this is my hack
} else {
header.eq(next()).trigger('click.liteAccordion');
}
}, settings.cycleSpeed);
}
You can see I'm trying to be as in-obtrusive as possible with this, just handling the autoPlay flag.
Please contact me for discussing this code.
I'd like the one of the left to be wider than the rest, I can't seem to figure out how to edit the code to do this.
Thanks.
Dan
I'm havving issue with slider. 1. I have dropdown navigation bar (table). I wanna keep slider on backward but it's always on top and covers navigation menus. Tried to change z-index. No success
2. I wanna add hyperlinks to whole slide images. how to do it?
3. I can't contorl, manually switch to other slide on IE9. How to fix it? Only auto slideshow works
Please help me-
Simple question , cause i'm not a big guy with javascript: how can we stop/pause a < video > when liteAccordion jump to another part of his list ?
merci d'avance.
After clicking on an item, a "#undefined" is appended to the URI.
Is is possible to remove it?
Many thanks look at my last problem, I am sorry to bombard you, but I have come across a problem in IE9 when the last tab on the right of the accordion does not trigger the click event, meaning that it does not reveal it's content, you can see this at,
http://thesmcl.co.uk/why-choose-us + and try clicking on The Team...
Not sure what is happening, but i cant for the life of me figure out why it isn't loading. Im using javascript on the whole site, facebook plugins are functioning and text effects are working too.
Made sure all urls are working, and all javascript sources are accessible, but still no luck. I haven't changed anything except for the style in one of the JS files.
Any help would be amazing!
When I click on a tab that is before the current tab, the tab that shows is one tab before the one I clicked. My configuration is currently without number tabs.
Let's say I'm in tab #4 and I click tab #2, the tab that shows is tab #1.
My fix for this (don't know if will workwith other configurations):
in utils = { ......
around line 47 on the .js file, on the first option: getGroup
this lines:
if (this.offsetLeft === pos.left) {
return $header.slice(index , slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth});
changed to:
if (this.offsetLeft === pos.left) {
return $header.slice(index+1 , slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth});
What I did:
I added +1 on header.slice(index) --> header.slice(index+1)
and worked fine. Still don't know if with other configurations, such as numered tabs will work.
In IE8 only the top part of a tab is clickable.
I want to use lists (li) as content within the tabs, however they are your building block
any suggestions?
Hi, The accordion is great with some minor amends I've made I've got it working on all browsers - apart from IE6. It looks awful unfortunately. I have been playing for a while to create conditional styles for IE to make it work but to no avail. Do you or anyone else have any answers to making this work in IE6?
Any help would be gratefully received!
Regards,
Ian
Hello.
I've found next problem:
I click on header of any slide, it starts to open and then i click to header of another slide. In this moment, that another slide become "unopenable" - maybe because when user click to any slide it marks as open, but really previous slide is opened.
I am new in JS, but i've fixed this problem by adding "if ($header.is(':animated')) { return; }" in beginning of handler $header.click.
Best regards,
Oleg
P.S. Sorry for my english :)
i am trying to use this in my wordpress template is should be / there should be an option to use this as a wordpress plugin.
please if u can its very nice.
It works great on xammp on localhost. But I have just uploaded all the files and directories to my server and everything works (inluding all other jquery I have used) except for the accordion. I cannot figure out why, when it's exactly thr same as my locahost setup.
Can you have a look please at http://www.absolute-websites.com/newportfolio/ and let me know if you have any suggestions? Here is a screenshot of how it shouldlook - this is from localhost - http://www.absolute-websites.com/newportfolio/js/screenshot.png
Thanks.
Hello,
I've included liteAccordion in my homepage wp site; it works well in local but not on my distant server.
Images are there but badly displayed and non-interactive.
Others jQuery works on my distant homepage after changing $ by jQuery.
I ckeck the test html page: it is ok: images, lay-out and interactivity.
Could you please tell me if there is a solution, where is the conflict ?
Thanks.
Hey Nikki,
I just found some info in my debugger, that your nice liteAccordion was trying to get the $groups variable and change to the next tab, even if the whole accordion was not visible.
My litteAccordion was toggeled within a
Here is a small an simple bugfix for this issue (showing only the utils.play() function I changed):
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
if($header.is(':visible')) {
$header.eq(getNext()).click();
}
};
utils.playing = setInterval(start, settings.cycleSpeed);
},
I just added the if($header.is('visible')) { }.
So the interval will be kept and as long as the liteaccordion is not shown, it'll not try to click/change to the next tab.
Perhaps one could blow this up with a new option, like "autoStopOnHide" which will automatically stop the sliding ( clearInterval() ) during the liteAccordion is hidden.
But you'll have to manually allow to start the sliding afterwards again, by making the play method able to be used from your external source code, or by triggering a mouse hover and leave perhaps (this is only a workaround ;-) )
Regards
MaD
Hey There,
Im using your slider as a part of a project and im using Anything Slider within the lite Accordion. I need both sliders; when the back button is clicked they both return to the slider they left.The Anything Slider works fine. But the Accordion does not. I have narrowed it down to one problem.
They will both return to correct slide when the URL only has an item from the Accordion in it. ex: www.site.com/#featured
But when i select a panel within the Anything slider the URL will look like this: www.site.com/#featured&panel1-2. This will break the Lite Accordions position and default it back to the first slide. But when i navigate to the correct Lite Accordion slide, Anything slider will have the correct slide displayed. Because its Reading the "&panel1-2".
So what im basically asking is there a way to make the lite Accordion read the #featured just like what the Anything Slider does.
Its the last problem i have in this and i really hope i can sort it because when i get this part done im finished.
Look Forward to hearing from you. Thanks :)
P.S. Sorry if this was confusing.
Hello,
I have set up your liteAccordion and I must say I am very impressed, however I am having massive issues in IE9, it would seem that values are not getting passed around correctly and some of the tabs do not animate at all, please see the links below for an example of what I mean,
Hi
I s there a way to stop auto play while there is video playing on one of the slide
Hey Nikki. I've seen in your Q&A that liteAccordion works properly with percentage width but I can't make it work. Is there a trick that I can't find or it's not possible to use percentage for container width?
Cheers,
Ivan
Hi,
sorry for the question but is there a way to disable autocycling?
Thank you
best regards
Holti
Hey there, my accordion is flickering as a result of using it with hi-res pngs. Previously it was working fine, but now a white bar flickers on the left and right side of the sliding panels. Check it out:
http://crimetv.faceyspacey.com/
Do you have any idea what the issue might be? do i need to use smaller jpgs? is there a fix for pngs? is it something else?
I'm using IE8 on Windows XP and am experiencing an issue with my content not wrapping correctly.
It appears to be present in the 'basic' example on this page as well: http://nicolahibbert.com/demo/liteAccordion/
I can send screenshots if you need them. Basically the content on the right hand side appears to be extending under the tabs to the right for a bit before wrapping...
An easy way to see this is to simply modify the "Link Somewhere" link with a float right. It will disappear and be hidden behind the tabs.
Works fine in Opera/Firefox (of course)
Yesterday I uploaded my site in the host but the script doesn't work. this is mt site, the script stuck like this: http://altrevento.net/ and http://altrevento.net/corsocucina.html , I tought it was a problem of the host because in local it works, so i sent them a ticket and they told me that from the servers there weren't problem. Thank you
Hi, I have been testing your plugin, and it's really great, but there are some issues with IE8 and 9. First one, shows okay, but the tabs only works if you click at the top of them.
IE9 doesn't even show correctly. I guess it something related with translation/rotation properties.
PS: I'm using 1.1.2 version, but the bug is still there. Surprisingly, it works perfect on IE7.
Regards.
Is it possible to scroll text if you have more text than that will fit in the box?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.