nikki/liteaccordion

A lightweight horizontal accordion plugin for jQuery.

liteaccordion's Issues

Remove hash from URI

After clicking on an item, a "#undefined" is appended to the URI.
Is is possible to remove it?

Deactivate Autocycling

Hi,

sorry for the question but is there a way to disable autocycling?

Thank you

best regards
Holti

$.browser is deprecated

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, $.browser is being removed and turned into a plugin ($.browser has been deprecated since jQuery 1.3). This isn't an immediate concern since we're just now getting ready for jQuery 1.7.2's release, but 1.8 is not that far out.

This is mostly a tracking issue to see if you would begin thinking about removing $.browser from liteAccordion in favor of $.support to target the specific issues you're working around.

Thanks again for your work!

Focus problem

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.

Stop Auto play while video is playing in slide

Hi
I s there a way to stop auto play while there is video playing on one of the slide

Autoplay steals focus

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.

Doesn't work anymore with parameters...

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 !

ie9 rotate span in accordion header

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

Cant get this to install

I followed instructions but cant get this working

Please help

Many Thanks

IE7 Problems

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?

http://www.thesmcl.co.uk/our-training

Responsive layout

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

More than just selected

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.

IE9 Issue

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?

IE9 not animating some of the slides

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,

http://staging.thesmcl.co.uk/our-training

Resize after application

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.

position incorrect in IE

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!

Can the titles be different widths?

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

Close already opened tab by clicking to its header

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.

IE 10 support

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?

Linkable slides not working in IE7

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

works in local but not in host

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

IE6 - Any clues?

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

flickering accordion

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?

Possible to scroll text ?

Is it possible to scroll text if you have more text than that will fit in the box?

pause on mouseover

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!

Make slides linkable and bookmarked by slide number as an option

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):

1. Place the slide number as the div ID's within each slide
2. Calculate the first slide by the location.hash for firstSlide option
3. When the slide is clicked on the screen, update the URL for bookmarking on slideCallback

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
});

Closing entire group

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.

Selector options

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

IE8 - Colors & PNG

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.

Last has no click event (possible all IE versions certainly 9)

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...

Stop video when sliding

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.

Issue

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-

Doesn't work on distant wordpress

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.

Problem opening tabs with IE8 and IE9

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.

Unable to use as wordpress plugin

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.

width of tabs

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"

Wrong index when going back in tabs

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.

Works on localhost,uploaded it to server and plugin doesn't run...

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.

Anything else instead of ol and li

I want to use lists (li) as content within the tabs, however they are your building block

any suggestions?

links vs. autoplay

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

IE9 accordion tab click area

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/

Accordion tries to switch, even if it's invisible

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

and wasn't there for the eye.
So the CSS was set to display: none.
That's why the PLAY method of your liteAccordion messed up and threw errors.

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

Unable to use lists inside slides

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!

Allowing Multiple Hash Tags.

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.

can't stop autoplay in Safari

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...

Slider not loading

http://new.ticketwerk.co.uk

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!

IE8 Wrapping Issue

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)

IE8 difficult clickable tabs

In IE8 only the top part of a tab is clickable.

Unopenable slides

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 :)

docs for methods like "destroy"

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');