|
| |
|
|
Tailslide
Posts: 6755
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
 |
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.
< Message edited by Tailslide -- 2/2/2006 12:29:44 >
_____________________________
Little Blue Plane Web Design | Land Rover project
|
|
|
|
d a v e
Posts: 4414
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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...
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4414
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Nice show/hide script - 2/4/2006 3:53:27
yep, i know ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BeTheBall
Posts: 6502
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
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.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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?
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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.
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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
Posts: 4414
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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
Posts: 2517
Joined: 1/31/2002
From: Australia
Status: offline
|
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?
_____________________________
Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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.
Thumbnail Image
 Attachment (1)
| |
|
|
|
clum1
Posts: 778
From: Glasgow, Scotland
Status: offline
|
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
_____________________________
kenilweb.com; simple, effective web design
"So I said to the Gym instructor "Can you teach me to do the splits?" He said "How flexible are you?". I said "I can't make Tuesdays"."
Tim Vine
| |
|
|
|
clum1
Posts: 778
From: Glasgow, Scotland
Status: offline
|
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
_____________________________
kenilweb.com; simple, effective web design
"So I said to the Gym instructor "Can you teach me to do the splits?" He said "How flexible are you?". I said "I can't make Tuesdays"."
Tim Vine
| |
|
|
|
clum1
Posts: 778
From: Glasgow, Scotland
Status: offline
|
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!
_____________________________
kenilweb.com; simple, effective web design
"So I said to the Gym instructor "Can you teach me to do the splits?" He said "How flexible are you?". I said "I can't make Tuesdays"."
Tim Vine
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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.
| |
|
|
|
Ken of Kentropolis
Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline
|
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.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
