|
| |
|
|
Tailslide
Posts: 6272
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 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
|
|
|
|
d a v e
Posts: 4169
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
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: 4169
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
RE: Nice show/hide script - 2/4/2006 3:53:27
yep, i know ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BeTheBall
Posts: 6381
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?
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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)
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
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: 4169
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
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: 2520
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)
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 2/10/2006 4:59:14 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
clum1
Posts: 762
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
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
clum1
Posts: 762
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
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
clum1
Posts: 762
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
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
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.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
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 
