Borgar.net » html

Node members or Node attributes

Borgar — Thu, 29 May 2008 23:22:17 +0000

Having given it a bit of thought I think that this problem stems from a slight confusion as to how DOM nodes’ attributes work.

You would expect javascript code to execute when you apply it to an attribute:

someNode.onclick = "alert('foo');";

And you expect this to work because this is exactly what you do in your HTML. And in some browsers it does. Some browsers.

I don’t know another way to say it, maybe there is someone who can fix my terminology but here’s the thing: Element attributes are different from node members.

I remember all to well the grief this caused me when I started working with DOMnodes in Javascript. Sooner or later, you will run into these inconsistencies. The browsers also try their best at blurring the difference between attributes and members. Which is helpful when you know how it works.

Consider this CSS:

input[type="text"][value=""] { background: teal; }

It colors an empty input field. But why doesn’t the field update when you type text in the box? theInput.value gives you whatever you typed in there.

This is because .value is a node member that contains what is displayed in the box, while the actual attribute contents are exposed on .defaultValue, which incidentally is what [value] is examining (and what is copied to .value should the inputs form be reset).

With onclick, the node has a .onclick member that is a reference to a function (or null). When the HTML is parsed into a DOM tree, any code in onclick attributes is turned into an anonymous function and a reference to it is placed on the onclick member of the node.

So why does the following code fail in MSIE?

someNode.onclick = "alert('foo');";

Because MSIE doesn’t evaluate the string as it is placed on the member. The onclick becomes a reference to a string and if the event occurs MSIE will complain because effectively we’ve just tried to do this:

"alert('foo');"();

Does this make any more sense, or did things suddenly get more complicated?

Lesefni handa upprennandi vefurum

Borgar — Mon, 12 Feb 2007 10:59:02 +0000

Læra eins og margföldunartöfluna og þjóðsönginn:

Möst lesning:

Fylgjast með:

Gúrú:

CSS display:

Tæki og tól:

Gott reference:

Replacing HR elements with images

Borgar — Tue, 09 Jan 2007 14:52:22 +0000

Yesterday I was presented with the problem of using an image for the HR tag. Quick googling confirmed my suspicion, that this is something a lot of people want to achieve but apparently it can’t be done because of, as usual, IE’s limitations.

The recommendations seem to be to either wrap the HR in a div and styling that, or just simply work around it by not using images. But of course it can be done, and here’s how:

We start with some nice clean code for all the “alternative” browsers:

hr {
  border : 0;
  height : 15px;
  background : url(hr.gif) 0 0 no-repeat;
  margin : 1em 0;
}

This seems to work for all standards compliant modern browsers. I’ve tested it on Opera, Safari & Firefox. However, it does not work on Explorer. IE treats the element as inline and demands a border around it and a minimum height of 1px.

IE supports very basic generated content with the list-style-image setting when combined with display: list-item. This is what I’ve used to get around the limitations.

Add this into conditional comments (or hacks if you prefer) to shift the element out of the way and insert a bullet picture in the resulting space:

hr {
  display : list-item;
  list-style : url(hr.gif) inside;
  filter : alpha(opacity=0);
  width : 0;
}

~~My implementation here has the limitation of demanding that the image you use is equal to the width of the text area, but this should be easy to get around or customize.~~

The border setting can be replaced with a color: #fff;. To kill the default border you must set either one to the background color. Possibly it might be shifted out of hidden overflow but I have not tried it.

You can view a live example here.

Updated – 16. 1. 2007:

I’ve updated this entry and the example with the improvements suggested by Már. There are no longer any limitations on this technique.

Hamskipti

Borgar — Wed, 02 Jul 2003 23:04:13 +0000

Nýi vefurinn minn er loksins kominn í loftið. Hann er svo 1000x þægilegri að skrifa á en sá gamli vegna þess að ég er búinn að forrita mitt eigið wiki kerfi. Það þýðir (á mannamáli) að ég þarf ekki lengur að skrifa HTML þegar ég vil framkvæma hluti eins og línubil. Ahhh…

Vefurinn er ekki fullkomlega tilbúinn ennþá en ég var farinn að fá svo mikið að kvörtunum að ég gat ekki lengur beðið með þetta. Ég mun svo í rólegheitum setja inn commentakerfi, betra stílblað, osfrv…