I am making a modification to an existing stylesheet. Initially, I had

.formlayout p.otheropts {
	clear: left;
	padding-left: 120px;
	margin-left: 10%;
}

.formlayout p.otheropts strong {
	color: #cc6402;
             font-weight: bold;
}

But it appears that the font should be bold in all instances. Rather than slapping <strong> tags around everything, I was going to modify the base style to include the font-weight. However, that would mean setting <strong> would only change the color of the font, not the weight itself. That doesn’t seem semantically correct! I think I am going to change <strong> to <em> because I believe that’s more semantically correct. (Sure, that could be debated). However, now I need to find where I’ve used <strong> tags within the otheropts class.. a global search for <strong> will bring up lots of false positives.

So.. here is my idea, and perhaps something that navigates through the DOM tree would do it. A tool that enables you to set the context you’re searching in. As follows:

Insert context: (in this case, otheropts)
Insert specific tag:

Then set something up to getElementsByClassName, grab all instances of otheropts for the entire site, then… hmm, does getElementsByTagName retrieve <strong>? I have no idea.. something to check out…

So that’s my rough idea. I’m sure there’s already something out there someplace…

we develop prototypes, but often we don’t have to build out all the functionality. Recently I was working on something wherein alot of the links just popped up alert messages saying what functionality would be implemented.

This got me thinking of a class=”tdb” (to be developed). This could be associated with an event that would pop up a message akin to “this component has not been developed in this prototype”. We could incorporate this through the development process, and it could be a quality control mechanism wherein we could check to see what elements returned this classname and ensure there was not still outstanding development to be done.

I wonder if an alternative message could also get passed in? hmmmm….

I’ve been reading DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith, and have been impressed with the focus on gradeful degradation, unobtrusive javascript and backwards compatibility.

I am going to start adopting a new method of coding links that evoke js calls. In the past, I’ve done as follows:

<a href="javascript:void(0)" onclick="showPic('bigben.jpg');return false">view Big Ben<a>

I’ve long known that this isn’t accessible if the user does not have js enabled. I ignored this little fact. But Keith offers up such a simple alternative, there is no reason not to do it.

1. use the href attribute. Link to the image:
<a href="bigben.jpg">

2. separate the behavior from the content. Add the appropriate function externally using an event handler: (note this assumes this is a list of links within a ul or ol with an id of ‘gallery’) note: it also doesn’t add the event handler as generically as I’d like, shouldn’t it check for click as well as onclick? ah well…

....
var gallery = document.getElementById("gallery");
var links = gallery.getElementByTagName("a");
for (var i= 0; i < links.length; i++) {
   links[i].onclick = function() {
      return showPic(this);
     }
 }

Where showPic uses the getAttribute method to get the value of the href attribute.

function showPic(whichpic) {
 if (!document.getElementById("placeholder")) return true;
 var source = whichPic.getAttribute("href");
 var placeholder = document.getElementById("placeholder")
 placeholder.setAttribute("src", source);
 return false;
}

One trick is that it function also checks to see if the function executes properly to determine its return value; if it is able to properly execute, it returns false, and the link is not followed by the browser. But a check within the function returns true if the showPic function does not execute properly. As an alternative to the picture showing in an appropriate location on the page (its desired behaviour), clicking on the link will allow the user to still access the content, by navigating to it directly.

Good, robust code.