I'm working on a site I inherited at work that shows donation progress using progress bars / labels. The majority of the lists will have 9 years in the (e.g. 1990-1999) but the last one has 13 (2000-2012). Because of this, I have a javascript function showHiddenBars() which shows / hides the respective elements.
On first load, everything displays correctly (2000-2012 is displayed by default) but after hiding them and then showing them, it messes up the layout. From what I can tell via Google Chrome's inspector is that when the .show() function is used it is adding style="display: inline-block" to my span element which houses the label. I am using the clip easing effect of jQuery UI with the show and hide functions.
How do I prevent .show from adding style="display: inline-block;"
Full Javascript: http://pastebin.com/ZmbQqwWF
Full HTML: http://pastebin.com/mf6W1ahF
Example Site: http://kirsches.us/3000Strong/decadeProgress.html
The javascript:
function showHiddenBars() {
"use strict";
//show the bars we aren't using.
$('#decade10').show("clip");
$('#decade11').show("clip");
$('#decade12').show("clip");
$('#decade13').show("clip");
$('#decade10label').show("clip");
$('#decade11label').show("clip");
$('#decade12label').show("clip");
$('#decade13label').show("clip");
$('#decade10AmountGiven').show("clip");
$('#decade11AmountGiven').show("clip");
$('#decade12AmountGiven').show("clip");
$('#decade13AmountGiven').show("clip");
}
function hideHiddenBars() {
"use strict";
//hide the bars we aren't using.
$('#decade10').hide("clip");
$('#decade11').hide("clip");
$('#decade12').hide("clip")