Converting a string to slug with JavaScript

Recently I've been working on implementing slugs in my CMS to be able to generate nicer URLs. In order to do so I've created a little JavaScript function that converts a string to a slug. I'll first give you the code and then explain it a bit. [update: 2.07.10 Fixed IE issue][update: 18.09.10 Minor improvements] Read the full text...

Posted 090503, in: English, Web, JavaScript
Tags: regular expressions

Internet Explorer and innerHTML in PRE elements

While I was working on modifying SHJS (a JavaScript syntax highlighter), I came across a very frustrating (and initially extremely puzzling) IE bug. Well, it might not be a bug, but it's a very strange and illogical behaviour. In short: IE performs text normalization when setting innerHTML. Sebastian Redl explains it in The Internet Explorer innerHTML Quirk. Read the full text...

Posted 080924, in: English, Web, JavaScript
Tags: ie6, innerHTML

New (modified) JavaScript syntax highlighter: SHJS

I was having a few problems with the syntax highlighter I was using for the code blocks in this blog, so I decided to look for an alternative. There are a few out there, but my choice went to SHJS. I liked it straight away, although I wanted a couple of features that are not there. So I got my hands dirty and wrote some code to implement them. Here's a description of what I've done, in case someone has similar needs. Read the full text...

Posted 080817, in: English, Web, JavaScript
Tags: javascript syntax highlighting, SHJS

How to display code fragments in web pages

Since in this blog I'll be writing about JavaScript, XHTML, CSS and other languages, I was wondering which would be the best way to display code fragments in a web page. Obviously each fragment will go inside a CODE element, but there's other things I'd like to implement:

1. When the page is displayed without CSS, I'd like the code fragment to have a decent formatting.
2. I'd like to add a sort of caption to each code block, to add things like "add this to your .css file" (see the code fragments below as an example).

And of course, I'd like to do it with the cleanest possible XHTML. Let's go! Read the full text...

Posted 080219, in: English, Web, JavaScript
Tags: programming

FixIE v0.5 released

This is a bug fix release that solves the problems when there were empty instances of the elements used as containers for the addFirstChild method. Head over to the FixIE page to donwload the new version.

Posted 080218, in: English, Web, JavaScript
Tags: ie6, programming

FixIE

FixIE is a little script that I've created to overcome a few of the CSS selector limitations in IE6. What it does is adding a few helper classes to certain elements/states, which then can be used in your .css files to reference those elements/states. In particular:

• It adds the"first-child" class to the first child of certain containers (by default UL and OL).
• It adds/removes the class "hover" to LI elements inside certain containers (by default an element with id="nav"), to provide support for CSS drop-down menus.
• It adds a class to all INPUT elements, matching their type. That is, all inputs of type "text" will also have the class "text", and so on.

It is possible to configure the first two features, choosing any number of containers. For example, you could add first-child functionality to all divs, or apply the hover functionality to several navigation menus (see the JS source). Read the full text...

Posted 080215, in: English, Web, JavaScript
Tags: ie6, programming