Nice show/hide script (Full Version)

All Forums >> [Community] >> OutFront Discoveries



Message

Tailslide -> Nice show/hide script (2/2/2006 11:55:20)

Here's a lovely show/hide script which you could use for things like FAQs - it's accessible, and it degrades nicely (don't we all) with JS switched off.

http://www.tjkdesign.com/articles/toggle_elements.asp

Edit: further to me saying it's accessible - it's not mouse reliant. I haven't checked it properly yet to see what a text reader would make of it.



womble -> RE: Nice show/hide script (2/2/2006 12:07:31)

Oooooooh, Tail, that's just...WOW!!!!! Just....WOW! You must be psychic. I was just about to set off on a google search for something nice and accessible like that! (after taking hours and hours to find an accessible glossary solution I wasn't too looking forward to it)

You are queen of cyberspace indeed! [;)] [sm=bowdown.gif]




Tailslide -> RE: Nice show/hide script (2/2/2006 12:21:07)

quote:

ORIGINAL: womble
You are queen of cyberspace indeed! [;)] [sm=bowdown.gif]




Aww gee shucks [:)]



caz -> RE: Nice show/hide script (2/2/2006 13:58:46)

That's also an interesting site Tail, thanks. [:D]



womble -> RE: Nice show/hide script (2/3/2006 19:19:38)

Update: used that script on a page in one of my current projects Tail and it's working like a dream, and it only took about 5 minutes to set up. [:)]

(now I just gotta put some FAQs in it! [:D])



d a v e -> RE: Nice show/hide script (2/3/2006 19:40:11)

could be very hadny if you had news items and wanted to expand the headlines for more details, for example...



womble -> RE: Nice show/hide script (2/3/2006 20:19:38)

Excellent idea Dave! [:)]



d a v e -> RE: Nice show/hide script (2/4/2006 3:53:27)

yep, i know ;)



BeTheBall -> RE: Nice show/hide script (2/4/2006 20:44:50)

quote:

it's accessible


Beautiful! Have needed something like this for a while. Would be curious to know how JAWS handles it. Will put this to work first thing Monday for exactly the purpose Dave mentioned.



Tailslide -> RE: Nice show/hide script (2/5/2006 3:39:43)

The page does make use of "display:none" so here's a table displaying what the various screen readers do/don't do with display:none http://www.access-matters.com/screen-reader-test-results/

Other thing is - don't try serving your page as application/xhtml+xml with this script as it uses document.write.




BeTheBall -> RE: Nice show/hide script (2/5/2006 14:01:10)

[&o]



Ken of Kentropolis -> RE: Nice show/hide script (2/8/2006 15:29:55)

Pardon my ignorance, but how does this differ from the collapsable outline built into FrontPage?



Tailslide -> RE: Nice show/hide script (2/8/2006 17:17:23)

I don't actually know the FP item you're mentioning - but if it's similar to other FP specific "widgits" it won't validate, it won't necessarily work well without Javascript enabled, it won't work without FrontPage extensions and it may not be as accessible as far as text readers go - also not much good to those of us who don't use FP.

(some of that statement is me making assumptions based on the FP widgits I've seen in the past)



Ken of Kentropolis -> RE: Nice show/hide script (2/8/2006 19:54:53)

Example can be found at http://Kentropolis.Com/common/outline.htm

It's done under formatting options for Bullets and Numbering.



Kitka -> RE: Nice show/hide script (2/8/2006 23:38:06)

It doesn't function properly in Firefox, although it does degrade okay to nested lists.

It also doesn't validate, but that was almost a foregone conclusion being M$ proprietary coding. [:'(]



Ken of Kentropolis -> RE: Nice show/hide script (2/9/2006 9:07:20)

Anyone try it in LINX? I used to have it on my system, but can't find it offhand.

(But only if you're bored - I don't use these ... just curious)



d a v e -> RE: Nice show/hide script (2/9/2006 13:20:32)

haven'y got lynx anymore but using the 'emulate text browser' in opera it shows everything expanded.



Ken of Kentropolis -> RE: Nice show/hide script (2/9/2006 14:08:24)

That settles it then for me ...

It's shown expanded where it doesn't work, even in text only. That's all that matters.

I tried it in FF too and like most other things not pure vanilla HTML I never expected it to work the way intended. (At least it doesn't look as bad as bulleted lists using heading tags ... what's up with that?)



Kitka -> RE: Nice show/hide script (2/9/2006 17:45:10)

quote:

It's shown expanded where it doesn't work, even in text only. That's all that matters.


I find it a bit odd that you'd be happy to settle for something that only works as intended for visitors using one particular browser, when Tailslide has found an excellent script that works in all browsers. To me it feels that you don't care about what sort of experience approx 20% of visitors (who don't use IE) have on your site. I respect your right to do it that way, but do not understand it.

quote:

At least it doesn't look as bad as bulleted lists using heading tags ... what's up with that?


I haven't seen that anywhere - can you show an example?



Ken of Kentropolis -> RE: Nice show/hide script (2/9/2006 18:37:25)


quote:

ORIGINAL: Kitka

I find it a bit odd that you'd be happy to settle for something that only works as intended for visitors using one particular browser ... you don't care about what sort of experience approx 20% of visitors (who don't use IE) have on your site.


I find it a bit odd that anyone making a browser wouldn't make sure commonly used code that's rendered properly in the vastly dominant browser would not bother to make sure it works in theirs.

And I can't think of any time I've ever looked at traffic stats that showed as much as 20% non-IE. It's usually much lower in the everyday sites I work with. IT-related sites on the otherhand can expect more variety of browsers, but that's not the mainsteam population most sites are trying to reach.

But I DO consider the non-standard browsers* with regards to usability -- but that is all. Unless a client asks, it's a waste of my time to make eye candy issues work on 5-15% of users' screens.

My rule is this: I design for most resolutions, connection speeds, and browsers. If someone can't use or appreciate my work beczuse they are outside of that demographic, they are used to MOST web pages loading too big, too slow, or with big holes where simple scripts would be.


quote:

At least it doesn't look as bad as bulleted lists using heading tags ... what's up with that?


I have an immediate example, but it's in a password protected web. And it's my bad ... it doesn't have to do with heading tags. Screenshot attached.

Upper left is FF, Lower right is IE.



*Real standards are only standards because of common use, not because someone declares them so, no matter how wise they think they are, or if it's "best" for the consumer or the industry. That is politics and theory. I myself have no opinion on what is best -- it is simple reality that Microsoft is far more relevant than W3C in the real world.




[image]local://upfiles/17456/6E29E9BD6B1542BCAC9269D23C381A25.gif[/image]



Tailslide -> RE: Nice show/hide script (2/10/2006 3:06:17)

Edit:

I've just removed my reply about standards/lack of standards debate - this isn't the place for it.

This was a link to a lovely accessible, valid, cross-browser-friendly script. If you like it then use it. If you want to keep using your MS proprietory code then do so.



clum1 -> RE: Nice show/hide script (2/10/2006 8:48:19)

Back to the real debate! I've used the TJK script on a page and it works beautifully. One thing though, I can't get it to work multiple times on that one page (e.g. for different FAQ lists).

The original article mentions "Assign a specific ID to your DL:" but goes no further. Please help if you can!

clum1



Tailslide -> RE: Nice show/hide script (2/10/2006 8:57:32)

Hi

(and belated congratulations re: the rugby by the way - keep forgetting to say!)

If you want more than one instance of this script on a page then (and I'm guessing here) you need to give another name to each set of FAQ dls like this: 

<dl id="TJK_DL">
	<dt>Question 1</dt>
	<dd>The vitality of conceptual synergies...</dd>
	<dt>Question 2</dt>
	<dd>To focus on improvement, not cost, ...</dd>
</dl>


Second set: 

<dl id="secondfaqs">
	<dt>Question 1</dt>
	<dd>The vitality of conceptual synergies...</dd>
	<dt>Question 2</dt>
	<dd>To focus on improvement, not cost, ...</dd>
</dl>


etc etc. Then you'd need to repeat the script within the external .js page but change the references to the original Definition List (TJK_DL) to whatever you've called the second one.

You should be able to add the new DL to the CSS like this: 

/*  "Show All" + "Hide All" links */
#TJK_ToggleON, #TJK_ToggleOFF, #secondfaqsON, #secondfaqsOFF {whatever}


i.e. just adding the new DL id after the old ones, separated by a comma.




clum1 -> RE: Nice show/hide script (2/10/2006 9:25:28)

Hmm... not sure if I'm missing something here. I've left my current one with the id TJK_DL and added one called TJK_Fac.

My CSS now looks like this: 
/*  "Show All" + "Hide All" links */
#TJK_ToggleON, #TJK_ToggleOFF {border:1px solid #333;padding:0 5px;margin-right:5px}

/* zeroing out padding and margin */
#TJK_DL dd, #TJK_DL dt, TJK_Fac dd, #TJK_Fac dt {margin:0;padding:0} 

/* margin for the DTs (shorthand) */
#TJK_DL, TJK_Fac dt {margin:7px 0}

/* image and left padding for DDs */
#TJK_DL, TJK_Fac dd {background:url('answer.gif') no-repeat;padding-left:55px}

/* styling all anchors in the DTs */
#TJK_DL, TJK_Fac dt a {background:0 50% no-repeat;padding-left:32px;color:#000;text-decoration:none}
#TJK_DL, TJK_Fac dt a:visited {color:#666}
#TJK_DL, TJK_Fac dt a:visited:hover,
#TJK_DL, TJK_Fac dt a:hover,
#TJK_DL, TJK_Fac dt a:active,
#TJK_DL, TJK_Fac dt a:focus {font-weight:normal; color: #ff6633}

/* the + and - gif in the anchors */
#TJK_DL, TJK_Fac .DTplus .Facplus a {background-image:url('toggleDLplus.gif')}
#TJK_DL, TJK_Fac .DTminus .Facminus a {background-image:url('toggleDLminus.gif')}

/**********************************/
/**********************************/

#TJK_DL, TJK_Fac .showDD {position:relative;left:0}
#TJK_DL, TJK_Fac dd, .hideDD{left:-9999px;position:absolute}
#TJK_ToggleON, #TJK_ToggleOFF {display:inline;cursor:pointer;cursor:hand}


AndI've copeid the JS file to itself subbing TJK_DL for TJK_Fac. Should any other changes be made? JS ain't my bag I'm afraid!

calum



Tailslide -> RE: Nice show/hide script (2/10/2006 9:43:07)

Yes a couple I think (unfortunately JS isn't my bag either!).

You'll need to make sure that you're repeating the exact same CSS rules for the new DL id - looks like there's a couple missing on your post.

You'll also need to go through the JS file too - basically copy and paste the script again within the same page - change the function name and change all the references to the original DL id to your new DL id. Then you'll have to add the second function call to the body onload - separate the two calls with a comma.




clum1 -> RE: Nice show/hide script (2/10/2006 10:00:00)

Thanks; I'll take a look at this over the weekend - my brain hurts too much at the moment!



Tailslide -> RE: Nice show/hide script (2/10/2006 10:24:42)

I managed to get it nearly working like this - it wasn't opening properly though. I see he's saying to use classes instead of ids to get more than one working on a page. Unfortunately it'd probably take me a day to figure it out!!

If I come up with something I'll post it.



Ken of Kentropolis -> RE: Nice show/hide script (2/10/2006 10:41:07)

Sorry I unecessarily stirred up the hornet's nest on that one. I thought about it a while after I posted ... at least you guys know my deep, dark secret where I stand on standards. (Any other forum would have booted me by now for such heresy! [:(] )

Anyway, I looked at the FP code that doesn't render that I mentioned above. The problem is when you use anything more than basic font formatting (font, bold, italic, etc.), such as heading tags and "formatted"(<pre>), AND use an image as a bullet, as in a theme.

The HTML I work with onnthe back end:

<li>
<h4><b>This is an outline</b></h4>
<ul>

is rendered:

<!--msthemelist--><tr><td valign="baseline" width="42"><img src="_themes/blends/blebul1a.gif" width="15" height="15" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<h4><!--mstheme--><font color="#330099"><b>This is an outline</b><!--mstheme--></font></h4>

Man, that's bloated code -- glad it's much more HTML edit-ready on the back end. Anyway, If I only use "bold" and "normal" (default) size:

<!--msthemelist--><tr><td valign="baseline" width="42"><img src="_themes/blends/blebul1a.gif" width="15" height="15" hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><b>This is an outline</b><!--mstheme--></font><!--msthemelist--></td></tr>

So basically, when a bulleted list element is converted when it's served to the browser into table cells, it's really about the positioning of certain formats of text within those cells.

So I wonder if Forefox renders realitive positioning within cells of these formats incorrectly within cells even WITHOUT FrontPage gobbledy gook ...

Which mean's it may not be MS being proprietary IN THIS CASE, but a simple HTML rendering issue with FireFox.



Tailslide -> RE: Nice show/hide script (2/10/2006 11:01:10)

Sorry Ken you've lost me (it is friday). Why would a bulleted list be converted into a table in FP? (not being smart - I just don't know!).

Firefox and the other "standard compliant" browsers pretty much render as they should (Opera and Safari have the odd small weirdnesses) - but if there's a lot of MS proprietary stuff in there I suppose they would take a best guess and the result would be unpredictable.

Without the proprietory stuff you can get differences depending on whether IE is in Quirks Mode or not for example (if it's in Standards Mode then it's using the W3C box model - if not then it's using the MS box model). IE and the "good" browsers handle other stuff such as bullet positioning differently too.










Ken of Kentropolis -> RE: Nice show/hide script (2/10/2006 11:27:36)

I think it's just that using an image as a bullet REQUIRES it being a table, but FP enables you to design without the hassle of any of that, AS IF it was merely a bulleted list in the back end HTML.

Is there any way using CSS or otherwise that you can substitute images for bullets? If not, then that's a major advantage of FrontPage's automatic coding.

But I've had rendering issues with "other" browsers long before this. Simple tables sometimers just don't render the same in different browsers, and even in IE, spacing around Heading Tags doesn't jive with the WYSIWYG editing in FP. But like any software you use, you spend the time getting used to various quirks until you don't notice them and just compensate.

Again, I'm thinking it's a table rendering issue with FF ... I'll test it from a notepad-made similar table without any proprietary FrontPage code. I'll post my results in a bit.



Page: [1] 2 3 4   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625