Following a comment I put on the amazing redesign of Veerle’s Blog, she answered that she needed to use two links – one for a text and one for an icon to make the icon clickable.

It can be done in one link in various ways (embedding an image for example) ,but the coolest seems to be to use a background image in CSS, and add enough padding to show it as a background. This also allows you to easily create a rollover state with CSS and an appropriate picture.

Check the example page

The code:

articles RSS

And the CSS trick:

p.rss a:link,

p.rss a:visited{

padding-right:28px;

line-height:17px;

font-size:.85em;

text-decoration:none;

color:#9b9c93;

height:25px;

float:left;

background:url(rssani.gif) top right no-repeat transparent ;

}

	
p.rss a:hover,

p.rss a:focus,

p.rss a:active{

background-position:100% -91px;

}

According to news.com, Microsoft will stop Active-X controls like embeded media or flash to start automatically in the next security upgrade.

This is very bad news for Flash designers (and may give DOM scripting another boost). Microsoft recommends as a workaround to Activate the control dynamically by writing it out via JavaScript. The examples given are rather messy, and I wonder if Bobby van der Sluis’ Unobtrusive Flash Object wouldn’t have been a better example to promote as a fix.

German Visitors: Zur deutschen Version gehts hier – auf dem Blog von Jens Grochtdreis

If you are just getting your teeth into JavaScript, or if you used it in the past and re-discovered it in the wake of the AJAX craze you might have been baffled by scripts that come in a new syntax.

While older copy and paste scripts looked like this:

var commonSense=null;
var standardsCompliance="50%";
function init(){
  // code
}
function doStuff(){
  // code
}
function doMoreStuff(){
  // code
}

Newer scripts inside tutorials tend to look like this:

awesome={
  commonSense:null,
  standardsCompliance:"50%",
  init:function(){
    // code
  },
  doStuff:function(){
    // code
  },
  doMoreStuff:function(){
    // code
  }
}

The new syntax is called the object literal and is pretty close to sliced bread. Here is why: (more…)

It is bad practice to rely on the maxlength attribute of form fields to ensure the real length of entered data. That much I knew, as playing with curl made me aware how vulnerable forms are on the wild wild web.

However, I was a bit agog when I realised that it is possible to change the value of a field to a word longer than maxlength on MSIE and Opera.

I set up a demo that shows how to override maxlength with JavaScript .

So, don’t trust maxlength, make sure to also check the real length on the server side.

Following a thread on the evolt list about reading the next sibling element of a current element and making sure it really is an element and not a text node (line break), I decided to add a small helper object to my upcoming JavaScript book that takes care of some of these issues.

Give it a try: DOMhelp

My questions now are:

• Is that something that really can help save beginners frustration
  about different browsers and DOM oddities?
• Is it pretty bullet proof?
• can you think of other methods that should be in there?

I promise to add a greeting, should you come up with something I
forgot or find out I did wrong. I don’t get many free copies though…

:-)

I am aware that there are a lot of libraries already out there, but
most of them are just too massive to use in a beginner book.