Category Archives: Web

Webdagene 2010

Under følger en løpende rapport av begivenhetene som finner sted på Radisson Blu Plaza Oslo i tidsrommet 30.09.2010 kl 08:00 – 01.10.2010 kl 15:00. Subjektive meninger kan forekomme. For arrangørenes eget syn på saken kan jeg anbefale å ta en kikk på Webdagene 2010. Siste oppdatering øverst.

Det jobbes med saken

Oppdatering 8. juli
Jeg skrota det og begynte på nytt. Dette er wip-resultatet. Looks like hell, men du verden som det har potensiale til å bli en KPI-booster. Ingen detaljer er tilfeldige. Alle elementer er vurdert, forkastet, prioritert; analytiske diagrammer er satt opp, reagensrør har blitt knust, og komiteer har blitt nedsatt, oppløst og gjenoppstått. Såpass må til når man lager et WordPress-tema.

Jeg hadde store ambisjoner om å bygge det nye tårnet i Babylon før en grandios avdukning med fanfarer og fyrverkeri, men faen heller, her pusher vi heller ut halvfabrikata og flikker på resten underveis. Mellom lufteturer med to stykk gneldrebikkjer, ferieinnspurt på jobb, litt søvn og mye fotball på tv har jeg de siste dagene også stirret på en del kode og fylt inn noen bokstaver og tall der det passet seg sånn. Resultatet er det du ser nå: Undertegnedes modifisering av det nye standardtemaet til WordPress.

Jeg har ikke blitt så veldig mye klokere, men jeg har i det minste utviklet en forkjærlighet for Child Themes. Og det er ikke så perverst som det høres ut for de uinnvidde. Det betyr bare at man lager et nytt tema som i utgangspunktet arver alle egenskaper fra temaet det er basert på. Så i stedet for å lage fjorten håndfuller med templatefiler fra scratch har det holdt med en og en halv. Win. Fortsettelse følger.

Totusenogti

Jeg tenkte jeg skulle benytte anledningen (anledningen er oppgraderingen til WordPress 3.0) til å prøve å fikse litt opp her. Å bygge opp et eget WordPress-theme har vært noe jeg har skjøvet foran meg lenge nok nå. Det, og mye annet. I mellomtiden nøyer jeg meg med standardtemaet Twenty Ten. I og med at jeg er verdens mest strukturerte person setter jeg selvfølgelig opp en liste over nødvendige gjøremål:

• Wireframing
• Design
• Koding
• Fjerne hint av norwenglish og språklig miks
• Lage verdens beste innhold

Om jeg feiler går jeg under jorden som rosablogger på blogg.no.

–

Hunder er forresten på sitt minst sjarmerende klokken 6 om morgenen på lørdager.

Counting childnodes with JavaScript – The Whitespace Incident

Update: Since this is by far the most visited page on this blog (Google likes it I guess) I figured I’d write a short summary. I guess you found this page searching for a way to properly count html elements with JavaScript after getting different results in different browsers in which case I hope you’ll find what you’re looking for here.

The problem I encountered was that IE and Firefox behaved differently when counting child elements/nodes, where IE returned the expected value. Turns out IE is wrong, but because it skips whitespace (linebreak, tab, space…) while counting, the problem appears to be related to other browsers. Anyway, in order to get the expected value in other browsers too the script has to run a check on whether or not each child node belongs to nodetype 3. There are a whole bunch of different nodetypes, 3 being whitespace.

The following code example should give you something to go by:

var kids;
var realKids;
var parent;
var i = 0;
function countTheKids(){
	realKids = 0;
	parent = document.getElementById("parent");
	kids = parent.childNodes.length;
	while(i < kids){
		if(parent.childNodes[i].nodeType != 3){
			realKids++;
		}
		i++;
	}
	return realKids;
}

Feel free to drop a comment, or take a look at the original post below

–

I’m currently working on a project where I get to explore the world of JavaScript, which means I keep running into all kinds of new problems related to compatibility issues between the different web browsers. HTML and CSS: Been there, done that, you name it, I fix it. JavaScript however…

Anyway, after a day of battling my company’s CMS, implementing custom scripts and markup, and eventually getting everything running the way I wanted – checking only in IE as I went along (don’t ask) – I gave my newborn creation a go in Firefox. Epic fail. Nothing really worked. At all. But after a while I finally figured out that there was a problem related to how specific elements within a page are counted.

Now, consider the following code:

<div id="parent">
	<div class="child">This contains a lot of other divs</div>
	<div class="child">So does this one.</div>
	<div class="child">And this.</div>
	<div class="child">Your guess.</div>
</div>

This is a very simplified version of my original code, but a valid example nonetheless.

XML, DOM and whatnot, even if you’ve never heard of these terms you’ll probably notice that the parent div has four children. Or so it seems. Anyway, to count the number of child elements I naturally assumed the following JavaScript code would get the job done:

var kids;
function countTheKids(){
	kids = document.getElementById("parent").childNodes.length;
	return kids;
}

And it sort of did. Internet Explorer returns a value of 4. Firefox, Opera, and who knows which other browsers will tell you that there are in fact nine kids running around, which raises the question: Where the hell are the remaining five? Let’s ask the DOM…

It turns out that ghosts are also children. Or nodes. And in this case, the ghosts’ true shape is whitespace. Line break, space, tab, all those things that are neatly ignored in most programming languages. Thus we wind up with 9 child nodes, living and dead.

But in my case it was critical to get the number of proper child elements, and I suddenly found myself in the middle of a headscratching routine. So, why didn’t I just write a small function to get the number of elements with class=”child”? you ask. Because I couldn’t. The CMS I’m using has a habit of adding bits and pieces to my code, and in this case class=”child” would be transformed into something like class=”child 341125″. Bummer. The good thing is, the function I wrote to analyse the child nodes isn’t exactly rocket science either:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var kids;
var realKids;
var parent;
var i = 0;
function countTheKids(){
	realKids = 0;
	parent = document.getElementById("parent");
	kids = parent.childNodes.length;
	while(i < kids){
		if(parent.childNodes[i].nodeType != 3){
			realKids++;
		}
		i++;
	}
	return realKids;
}

The magic happens at line 10. It turns out that all markup nodes are defined as a nodetype. Whitespace, every one of them, is type 3. So by adding up all nodes that are not type 3 I find the number of proper child elements, and my troubles are over. This solution is not the most elegant one, but it works and solved my problem, so there you have it. Go count those kids!