Function works with inline CSS only

Hi Digital Point,

I'm writing a content sliding function without the use of jQuery or any other JS library.
I don't want to discuss the reasons or start WW3 over this, but I'm not using jQuery because it requires including another file for the user (yes I know about caching) and I don't want to use many of it's functions anyway.
The latest working version of my content slider requires that the height of your element is specified with inline CSS.
Here it is, working at least in latest version of Chrome:
http://jsfiddle.net/fortninja/jx74b/69/
And here is the same JS but with ALL CSS in the <style> tag.
http://jsfiddle.net/fortninja/d4QVQ/1/
Can anyone explain how to fix this or at least let me know why this is happening?

Thanks,
-Tony

 

Add the following at the beginning of the function:

if(!element.style.height) {
 var s = getComputedStyle(element);
 element.style.height = s.getPropertyValue('height');
}

Code (markup):

You can use a currentStyle fallback for MSIE, if you'd like.

 

Thanks!
What version(s) of IE would require currentStyle?

-Tony

 

I did a quick IETester test, and it appears that getComputedStyle works in IE9+.

Hate to admit it, but I actually prefer currentStyle to getComputedStyle, and wish more browsers supported it. This is a fallback for IE8- (it works in any MSIE browser):

element.style.height = element.currentStyle.height;

Code (markup):

So the full beginning code would be:

if(!element.style.height) {
var s;
try {
  s = getComputedStyle(element).getPropertyValue('height');
} catch(msie) {
  s = element.currentStyle.height;
}
element.style.height = s;
}

Code (markup):

 

Thanks a lot!
My website won't be live until IE 11 or 12 so I don't need to worry about compatibility.

If you don't mind I'd just like to know why you prefer currentStyle over getComputedStyle (it might be useful to know).

-Tony

 

There are a number of issues with your approach that really should be addressed. One of the biggest is the COMPLETE lack of graceful degradation scripting off. Any good script to do this should leave all the items expanded when scripting is unavailable given how many users disable it on purpose. (see Opera users, all the people who have downloaded the noScript plugins for FF and Chrome...)

Good rule of thumb, if you can't make the page work without scripting, you probably shouldn't be throwing scripting at it.

Rather than playing with computed style, I'd use the script to add a extra DIV around the parent DIV, using the heading as the script's target. You could then use offsetHeight on the existing DIV to set the height of the outer DIV, or the height of the heading since it could be targeted. I would NOT use the onclick attribute in the markup, as good scripting really shouldn't be in the markup to begin with. (I personally feel that all the 'on___' attributes should be made obsolete and removed from the specification). Even better, since we can just set the height on an outer element, we can use overflow:hidden to much better effect along with CSS3 transitions. Old browsers it will pop open instantly, modern browsers (and IE 10) will get the animation.

So for example if you had this markup:

<div class="content">
	<h2 id="demoNotice">No JQ, CSS does the hard stuff</h2>
	<p>
		jQuery? We don't need no steenking jQuery!!! Just more proof what pointless bloat that idiotic BS library really is.
	</p><p>
		Unlike a lot of other attempts, this gracefully degrades scripting off since the outer wrapper used to constrain these sections is applied by the script.
	</p>
</div>

Code (markup):

You could use this script:

function showHide(targets) {

	var
		d = document;

	function addShowHide(targetId) {
	
		if (control = d.getElementById(targetId)) { 
			var
				newDiv = d.createElement('div'),
				newSpan = d.createElement('span'),
				p = control.parentNode;
				
			newDiv.className = 'showHide';
			p.parentNode.replaceChild(newDiv,p);
			newDiv.appendChild(p);
			newDiv.style.height = control.clientHeight + 'px';
			newSpan.appendChild(d.createTextNode('+'));
			newSpan.className = 'showHideControl';
			control.shrunk = true;
			control.insertBefore(newSpan,control.firstChild);
			
			control.onclick = function(e) {
				e = e || window.event;
				var t = e.target || e.srcElement;
				if (t.className == 'showHideControl') t = t.parentNode;
				t.shrunk = !t.shrunk;
				t.parentNode.parentNode.style.height = (
					t.shrunk ?
					t.clientHeight :
					t.parentNode.offsetHeight
				) + 'px';
				t.firstChild.replaceChild(
					d.createTextNode(t.shrunk ? '+' : '-'),
					t.firstChild.firstChild
				);
				e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
			}
			
		}
	}

	if (targets instanceof Array) {
		for (var t=0; t<targets.length; t++) addShowHide(targets[t]);
	} else addShowHide(targets);
	
}

Code (markup):

To set it's states cleanly. (should work cross browser back to at least IE7, may even work in 6 though I've not tested it). The CSS for that:

.showHide {
	overflow:hidden;
	margin:0 1em 1em;
	border:2px solid #000;
	-webkit-transition:height 0.5s linear;
	transition:height 0.5s linear;
}

.content {
	background:#FFF;
}

h1 {
	font:bold 200%/120% arial,helvetica,sans-serif;
	padding:0.5em;
}

h2 {
	zoom:1; /* trip haslayout, fix IE 7- bugs */
	font:bold 125%/120% arial,helvetica,sans-serif;
	padding:0.4em;
	margin-bottom:0.4em;
	color:#FFF;
	background:#04C;
	border-bottom:2px solid #000;
}

p {
	padding:0 0.5em 1em;
}

.showHideControl {
	display:inline-block;
	overflow:hidden;
	vertical-align:middle;
	font:bold 80%/100% arial,helvetica,sans-serif;
	height:1em;
	width:1em;
	margin-right:0.4em;
	text-align:center;
	color:#000;
	background:#FFF;
	border:2px solid #000;
	border-radius:6px;
	-webkit-box-shadow:inset 0 0 0.3em 0.1em #DEF;
	box-shadow:inset 0 0 0.3em 0.1em #DEF;
}

Code (markup):

Adds a nice styled button. Notice I swap out the button's contents on the fly to indicate the state.

In a production copy, I'd call it thus just before </body> in the markup:

<script type="text/javascript" src="showHide.js"></script>
<script type="text/javascript"><!--
	showHide(['demoNotice','demoLoremIpsum']);
--></script>

Code (markup):

But for now I tossed a working example up on jsfiddle here:
http://jsfiddle.net/SmNXD/1/

You'll notice I use clientHeight for the header and offsetHeight for it's parent DIV -- clientHeight doesn't include borders, which is good since we don't want to leave that dividing bottom border showing. Far cleaner and compatible than trying to play with computedStyle, which can do funky things if you accidentally interrupt your animation mid-animate. Likewise the CSS3 transition handles the real grunt-work of opening and closing for you.

... and because it's built on the DOM it doesn't force a complete reflow adding the scripting only elements. Again I add the outer DIV and the button/indicator from the scripting, as there is no good reason to have them present when scripting is off.

The function can take either an array of ID's to target, or a single ID string, and can be called multiple times safely if so desired.

Hope this helps, or at least gets you thinking different ways of handling this.