<![CDATA[Content with Style - Comments on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/feeds/rss/comments/6 Fri, 12 Mar 2010 21:13:27 +0000 Zend_Feed http://blogs.law.harvard.edu/tech/rss <![CDATA[Content with Style - Comment #1 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-27 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-27
Here’s another application to the technique you describe. You can create nice menus automatically from the following code:



<ul id="menu">

  <li><a href="home.html">Home</a>

  <li><a href="products.html">Products</a>

</ul>


What is necessary is to take the URL from the HREF of A tag wrapped with LI and create onClick function on that LI with appropriate HREF. The ID of UL element will allow to find only necessary LI’s and A’s. Doing so will guaranty that if user clicks anywhere on the cell (not only on the A tag text) he will be forwarded to a new page. And the processing can be automated down to onLoad=”processMenu(‘menu’)” in BODY tag. In conjuntion with correct cursor shape set for LI in CSS (to mimic the one when over the link) the overal look and feel will be excellent.

We use this technique for several years already and it’s proved to work wonderfully.]]>
Here’s another application to the technique you describe. You can create nice menus automatically from the following code:



<ul id="menu">

  <li><a href="home.html">Home</a>

  <li><a href="products.html">Products</a>

</ul>


What is necessary is to take the URL from the HREF of A tag wrapped with LI and create onClick function on that LI with appropriate HREF. The ID of UL element will allow to find only necessary LI’s and A’s. Doing so will guaranty that if user clicks anywhere on the cell (not only on the A tag text) he will be forwarded to a new page. And the processing can be automated down to onLoad=”processMenu(‘menu’)” in BODY tag. In conjuntion with correct cursor shape set for LI in CSS (to mimic the one when over the link) the overal look and feel will be excellent.

We use this technique for several years already and it’s proved to work wonderfully.]]> Sun, 22 May 2005 06:30:54 +0000 <![CDATA[Content with Style - Comment #2 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-29 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-29 Using css and switching the “li” to inline, the “a” within the “li” to block should do the same, right? And you don’t “pollute” the body tag. And would ensure that, if JS is off, it still works on new generation browsers. Does that make sense?]]> Using css and switching the “li” to inline, the “a” within the “li” to block should do the same, right? And you don’t “pollute” the body tag. And would ensure that, if JS is off, it still works on new generation browsers. Does that make sense?]]> Sun, 22 May 2005 09:24:31 +0000 <![CDATA[Content with Style - Comment #3 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-34 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-34 class="popupLink" instead?]]> class="popupLink" instead?]]> Mon, 23 May 2005 08:48:07 +0000 <![CDATA[Content with Style - Comment #4 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-38 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-38 rel attribute instead. Rel=”external” for popups is both semantic and human readable… I’ve also got a rel=”choice” which, at runtime, triggers a script to run through and add a little popup icon after the link to open in a new window, allowing people to choose between same and new windows.]]> rel attribute instead. Rel=”external” for popups is both semantic and human readable… I’ve also got a rel=”choice” which, at runtime, triggers a script to run through and add a little popup icon after the link to open in a new window, allowing people to choose between same and new windows.]]> Mon, 23 May 2005 11:10:37 +0000 <![CDATA[Content with Style - Comment #5 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-39 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-39
I have been using the rel attribute for a couple of things in the past, including image rollovers and other things where I wanted to trick the validator; until I got worried that I don’t follow the idea of the attribute. But your way of using it seems actually close enough to what it’s supposed to be.]]>
I have been using the rel attribute for a couple of things in the past, including image rollovers and other things where I wanted to trick the validator; until I got worried that I don’t follow the idea of the attribute. But your way of using it seems actually close enough to what it’s supposed to be.]]> Mon, 23 May 2005 16:17:43 +0000 <![CDATA[Content with Style - Comment #6 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-66 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-66 about page will be thinking you’re my stalker!]]> about page will be thinking you’re my stalker!]]> Tue, 24 May 2005 22:19:40 +0000 <![CDATA[Content with Style - Comment #7 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-84 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-84 Thu, 26 May 2005 09:59:55 +0000 <![CDATA[Content with Style - Comment #8 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-86 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-86 this way to insert pop-ups in a web page.

Throw into the popup variant and you are done, accessible popup windows for the masses!

cheers,
deelan.]]> this way to insert pop-ups in a web page.

Throw into the popup variant and you are done, accessible popup windows for the masses!

cheers,
deelan.]]> Thu, 26 May 2005 11:07:27 +0000 <![CDATA[Content with Style - Comment #9 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-88 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-88 Your suggested solution is getting used more and more, which is good, and Pascal had mentioned it in his article as well (ok, minus the target=”_blank”, but that’s really a question of strict or transitional xhtml).

What I like about Pascals approach is, that you can separate content from functionality. The html stays the same, clean and lean. I’m sure instead of the target you could use other ways of determining which links are popups and which stay in the same window, such as an id (don’t forget to keep it unique) or the surrounding html structure.

Cheers,
Matthias]]> Your suggested solution is getting used more and more, which is good, and Pascal had mentioned it in his article as well (ok, minus the target=”_blank”, but that’s really a question of strict or transitional xhtml).

What I like about Pascals approach is, that you can separate content from functionality. The html stays the same, clean and lean. I’m sure instead of the target you could use other ways of determining which links are popups and which stay in the same window, such as an id (don’t forget to keep it unique) or the surrounding html structure.

Cheers,
Matthias]]> Thu, 26 May 2005 13:56:21 +0000 <![CDATA[Content with Style - Comment #10 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-89 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-89 Matthias is right about that. you could trigger the same by using any attribute, a surrounding or a childnode element … target _blank is just an example and for sure not best practice for accessible HTML.

The weak point of way you suggest is the “pollution” with the onclick handler within the markup, and the redundant string for the href, which is exactly what you can get rid of...]]> Matthias is right about that. you could trigger the same by using any attribute, a surrounding or a childnode element … target _blank is just an example and for sure not best practice for accessible HTML.

The weak point of way you suggest is the “pollution” with the onclick handler within the markup, and the redundant string for the href, which is exactly what you can get rid of...]]> Thu, 26 May 2005 16:02:21 +0000 <![CDATA[Content with Style - Comment #11 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-130 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-130 Mon, 06 Jun 2005 21:20:12 +0000 <![CDATA[Content with Style - Comment #12 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-246 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-246
Note that the first two old ways are really annoying, because it prevents to allow to drag the link to a tab (in Mozilla or Firefox or custom IE base browser), which is the usual way I use to open a link in another window (that and Ctrl+Click, of course);.

I also just want to point out two typos:
propper and getElemet (3 times…)
HTH.]]>
Note that the first two old ways are really annoying, because it prevents to allow to drag the link to a tab (in Mozilla or Firefox or custom IE base browser), which is the usual way I use to open a link in another window (that and Ctrl+Click, of course);.

I also just want to point out two typos:
propper and getElemet (3 times…)
HTH.]]> Mon, 26 Sep 2005 04:52:10 +0000 <![CDATA[Content with Style - Comment #13 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-280 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-280 Thanks for pointing out the possibility with dragging links to a tab (I never thought of that actually).

Fair enough that you don’t do popups, but in fact the article was more about showing non-intrusive javascript and the popups were just an example. So if you didn’t know about this before I hope you could use bits and bobs.

For the typos: Shame on me! Removed them.]]> Thanks for pointing out the possibility with dragging links to a tab (I never thought of that actually).

Fair enough that you don’t do popups, but in fact the article was more about showing non-intrusive javascript and the popups were just an example. So if you didn’t know about this before I hope you could use bits and bobs.

For the typos: Shame on me! Removed them.]]> Thu, 27 Oct 2005 03:29:11 +0000 <![CDATA[Content with Style - Comment #14 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-323 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-323 Opening pop up windows with no extra markup]]> Opening pop up windows with no extra markup]]> Tue, 08 Nov 2005 09:57:28 +0000 <![CDATA[Content with Style - Comment #15 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-326 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-326 Picking up the discussion above: Is there any reason for using “class” instead of “rel” to trigger what’s popup and what’s not?]]> Picking up the discussion above: Is there any reason for using “class” instead of “rel” to trigger what’s popup and what’s not?]]> Thu, 10 Nov 2005 07:11:09 +0000 <![CDATA[Content with Style - Comment #16 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-333 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-333 The specs say (about “rel”):
This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.
This section is about link types, it lists their conventional interpretations
The way I read this, I’d say using “class” would be more appropriate.

BTW, thanks for the compliment about my article.]]> The specs say (about “rel”):
This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.
This section is about link types, it lists their conventional interpretations
The way I read this, I’d say using “class” would be more appropriate.

BTW, thanks for the compliment about my article.]]> Wed, 16 Nov 2005 23:43:17 +0000 <![CDATA[Content with Style - Comment #17 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-534 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-534 I have a question, I’ve always used class as a “second” identifier, id for unique and class for group of items, am I wrong?

I really enjoy the possibility to describe an object with non-intrusive Js (I dont really knew how to name this) using many class identifiers heh.

Thanks!]]> I have a question, I’ve always used class as a “second” identifier, id for unique and class for group of items, am I wrong?

I really enjoy the possibility to describe an object with non-intrusive Js (I dont really knew how to name this) using many class identifiers heh.

Thanks!]]> Sat, 15 Apr 2006 11:30:14 +0000 <![CDATA[Content with Style - Comment #18 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-536 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-536 the w3c definition for id and class both elements can be used “For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.)”.

So scripting wise you have the choice what to do with them. CSS wise there is always the specifity that has to be taken into account. And yes, id has to be unique within the document.]]> the w3c definition for id and class both elements can be used “For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.)”.

So scripting wise you have the choice what to do with them. CSS wise there is always the specifity that has to be taken into account. And yes, id has to be unique within the document.]]> Sat, 15 Apr 2006 14:58:40 +0000 <![CDATA[Content with Style - Comment #19 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-2318 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-2318 Tue, 18 Sep 2007 09:18:09 +0000 <![CDATA[Content with Style - Comment #20 on DOM scripting or how to keep the code clean]]> http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-2332 http://www.contentwithstyle.co.uk/content/dom-scripting-or-how-to-keep-the-code-clean/#comment-2332 Fri, 21 Sep 2007 02:58:04 +0000