Comments on: Revealing Details with jQuery

By: vFragoso

vFragoso — Fri, 16 May 2008 20:25:04 +0000

Just correcting an error, it should be:
$('span.details').css({ display: "none", opacity: 0 });
In the first line. ;D

By: vFragoso

vFragoso — Fri, 16 May 2008 20:23:21 +0000

Hi Claire,
After revealing the details, I looked at the DOM for that span element using the IE Developer toolbar. One of the inline style properties that was applied to it was “zoom:1″. Knowing that setting the zoom property is a common technique for forcing IE’s hasLayout, I tried removing it to see what would happen. Voila

I can’t test right now, but I guess animate doesn’t add the “zoom: 1″. So, we can try this another way:

$('span.details').css({ display: none; opacity: 0 }); $('a.read-more').click(function() { $(this).hide(); $(this).next('span.details') .css({ display: "inline" }) .animate({ opacity: 1 }); });

The display: inline, should deal with the line-break, and the animation with opacity gives the fade sensation. We could also add speed to our animation, or do any other effects with it.

This is all guessing, since I can’t test this right now, but it shoudl work.

By: Karl

Karl — Thu, 15 May 2008 15:27:51 +0000

Hi Bryan,

Thanks for the comments. Take a look at my Expander Plugin, as it gives options for that sort of thing.

By: Bryan

Bryan — Thu, 15 May 2008 00:33:07 +0000

Thanks a lot for the excellent tutorial!! I have one minor suggestion: It will be even more reader friendly if the code can append a … mark at the slice point to give the readers a visual hint that there are more text to come.

With current implementation if the slice point is right after a period then readers might mistakenly think that’s the end of the paragraph and skip the link.

By: Karl

Karl — Sun, 11 May 2008 20:00:42 +0000

Hi Ricardo,
Thanks a lot for letting me know about that. It was a problem with the syntax-highlighter plugin I’ve been using. I fixed the bug, so there should be no more shrinkage.

By: Ricardo

Ricardo — Fri, 09 May 2008 14:59:45 +0000

Your code box doesn’t work in plain-text mode on Safari (shrinks)!

By: aw

aw — Fri, 01 Feb 2008 02:40:17 +0000

But I don’t think it works fine with Chinese Characters. I’ve done some test….

As a webdeveloper in China, to deal with Chinese characters is really involved. You need to do many actions as decoding, replacing, scanning….

anyway, great post. Very detailed! Thanks from China !!

By: Karl

Karl — Tue, 29 Jan 2008 17:05:43 +0000

Hi Rob,

I see your point about the definition list. Interestingly, though, the W3C HTML 4.01 spec seems to think it’s okay to use a

for dialog(ue): “Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.”

But to answer your question — no, you wouldn’t lose anything by using divs. The Expander Plugin that I put together (still in “beta”) will operate on any selector you give it.

By: Rob

Rob — Tue, 29 Jan 2008 16:46:18 +0000

Good stuff, although it might be rather better to not use a definition list for something that…isn’t a definition list.

Would you lose anything by using divs and spans? Then it should degrade gracefully.

By: Scott Lenger

Scott Lenger — Mon, 21 Jan 2008 20:22:50 +0000

I recently made a similar (non-jQuery) script that toggles an items details.

See this example and click on the “we’ll beat any…” graphic on the sidebar

Some of my newer projects make use of jQuery so I’ll most likely be using the plugin on those sites to take advantage of the fancy fades and stuff.