accordion slider plugin help

[Kami]

url - tarptest3.freemessageboards.com/

Okay, this isn't a plugin from the library. I currently have this accordion slider on my forum as a plugin that I put together myself.

It works, but for some reason it does not always open with the last expanded tab expanded. Instead of expanding the first tab (or the last opened tab) on the page load, the entire accordion will be collapsed. This kinda defeats the purpose for me in having the announcement tab open first, so if anyone has any idea why this is happening / how to fix it I'd be grateful.

I'm not sure if you guys can check plugin info from just viewing the source or not, so let me know if I need to post what I have in the plugin on here. :)

[Chris]

Nov 27, 2013 15:59:54 GMT -8 Kami said:

<abbr data-timestamp="1385596794000" class="time" title="Nov 27, 2013 17:59:54 GMT -6">Nov 27, 2013 17:59:54 GMT -6</abbr> Kami said:

It works, but for some reason it does not always open with the last expanded tab expanded. Instead of expanding the first tab (or the last opened tab) on the page load, the entire accordion will be collapsed. This kinda defeats the purpose for me in having the announcement tab open first, so if anyone has any idea why this is happening / how to fix it I'd be grateful.

I took a look and could not reproduce the condition you mentioned, I'll however venture a guess that you might have browser cookies deleted by default when browser closes or a third-party app that periodically does this which would produce the same condition.  A tab is saved to a cookie when selected so on your next visit that info can be pulled from the cookie in order to restore the previous state, if that cookie has been deleted then obviously no saved state would exist.

This does not however account for it being completely collapsed if you set a default tab ([0, true]) which you do in hc1 but not in hc2 ([-1, true]). The hc2 accordion however is capable of being completely collapsed since it does not define a default tab and also has collapsecurrent set to true meaning the last state could also conceivably be everything collapsed.

[Kami]

Chris- Would this be relevant if there is currently no slider with the ID hc2? The accordion slider currently on the site is hc1 only. Are the hc2 settings somehow overriding the hc1 settings despite no slider being labeled as such?

[Chris]

The code would still save settings for a phantom hc2 slider since there exists a call for it in the coding but no it should not interfere with a slider possessing a different ID. I have however come up with another possibility since I see you're using a webkit browser and that is the unload handler created by the accordion code is not being called at all (this is a known problem in chrome/safari and the Proboards coding itself makes allowances for this by using onbeforeunload instead the last time I checked) and it is within that handler that state cookies are saved. If you have a non-webkit browser such as Firefox or IE available you can easily test if this problem persists in those browsers.

[Kami]

Chris - I don't have Firefox on this computer (I'll check on the other one later) but in IE this doesn't seem to happen, so I guess it's that issue? Which is weird to me since the dynamicdrive page doesn't do this for me on chrome so =/

[Chris]

I'll note that if I use Chrome to view the dynamicdrive page, select a new tab, close the browser then reopen and return to the page that tab is forgotten. If I however close only the browser tab then reopen it, the accordion tab is remembered, the method in which the page gets torn down appears to be relevant in determing whether the event fires. (I did not test merely navigating away then returning)

[Kami]

Chris - I just checked on Fx and the issue is not occurring there either, so I guess it's chrome. Is there any way around it or is it just something I'm going to have to deal with? I mean, this site never does that and they use the same code. :S

While I have you - would it be possible to have some sort of CSS or something, that allows the collapsed tabs to be a different colour and slightly transparent?

[Chris]

Nov 29, 2013 11:14:29 GMT -8 Kami said:

Chris - I just checked on Fx and the issue is not occurring there either, so I guess it's chrome. Is there any way around it or is it just something I'm going to have to deal with? I mean, this site never does that and they use the same code. :S

While I have you - would it be possible to have some sort of CSS or something, that allows the collapsed tabs to be a different colour and slightly transparent?

I just checked that site you gave as an example and the problem is present in Chrome for me there as well (reloading the page or closing the tab then re-opening it is fine, but closing the entire browser then reopening fails to save the last state). The standard workaround would be the same workaround Proboards uses when they encountered that bug in beta which is to switch from using the unload event to using the beforeunload event. The "known problem" article I mentioned earlier offers a more elegant solution but it would be useless on Proboards since it already uses the solution I just mentioned so there would be no benefit from that.

As for the styling, something like the following could be used to target the inactive tabs in order to do things such as change color


li:not(.hactive) .hactive {background-color:green;}

[Kami]

Thanks for the reply!
I tried the code above but it wound up working for all of them, including the active tab. I'm not experienced enough with CSS to figure out what to do instead, any thoughts?

NEVERMIND sorry sorry cached page.
I've managed to get the images in the divs to be semi transparent, but i cannot get the background colour to be so. can i do that or no?

[Chris]

You've set the color to transparent (with alpha channel) and the opacity .4 but if you're expecting to see the body background shine through then you'll still need to override the color assigned to the .hpanel parent element by the following rule

#hc1 li .hpanel {
 background-color: #FEFFD3;
 color: #231A09;
 padding: 0;
}

To do that for inactive tabs add a new rule to what you added before

#hc1 li:not(.hactive) .hpanel {
 background-color: transparent;
}
If that is not what you're after then you might need to explain a bit more.

[Kami]

beautiful. is there a reason that the active box takes on this styling until it's hovered over, or is that a chrome thing like w/ how it doesn't properly stay open to the first tab?

(but it works so i'm satisfied. thank you so much!)

[Chris]

I assume you're referring to when a default tab or a last opened tab is first loaded and that is most likely the accordion code itself forgetting to add the hactive class when auto-expanding a tab in those situations. You can correct that by editing the plugin and locating this part of the js coding to add the blue

selectedli = parseInt(selectedli)
if (selectedli >= 0 && selectedli < config.$targetlis.length) {
config.$lastexpanded = $targetlis.eq(selectedli)
config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')).addClass('hactive')
} 

[Kami]

fabulous! thanks so much!