HTML: "To Top"-link made perfect


In order to optimize the usability of your web project you may use the famous “To top”-link – a link at the bottom (or at the end of an article) of your page that scrolls to the very top of the website. To the very top? Usually, the top link jumps to the anchor position but this can’t be placed at the very top of your website. There will always be a header/logo above your top link anchor. But with a small trick, it’s quite easy to make the link jump the topmost position of your website.


Article postedPosted in @ 11/12/08

TargetChooser: Option-Tooltip for HTML-links


Recently, there was an article on SmashingMagazine which covered the topic whether links on websites should open in a new window. Personally, I almost always open links in a new tab unless I’m done with the current site. So if I’m reading an article on a website, I’m letting to open links in the background (tab) but I keep reading the main article — when I’m finished, I’ll check the opened links in order to read them carefully. But this is just a personal behavior. The main reason, why I’m having links with the ‘open in new window’-property (target="_blank") is that I’m having internal and external links on this website. Only internal links will be opened in the same window while external links are opened in a new window.
So I’ve developed a small JavaScript based tooltip which generates two links (target="_blank" and target="_self") from a source link — the two links are displayed in a tooltip below the source link when you hover the cursor over it.


Article postedPosted in @ 07/15/08

Edit any website live in browser


On Blogstorm there’s an article that describes a simple method that allows you to edit any website live in your browser. You just have to type the following code in your address bar:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
This helps a lot when you just want a quick preview of how the website would look with another text/without the menu and so on.
The method works in all modern browsers (Internet Explorer 6 also). The edit mode can be disabled by typing this code in the adress bar (doesn’t work in Firefox):
javascript:document.body.contentEditable='false'; document.designMode='on'; void 0
Of course, modern web development tools like Firebug also support this feature but for a quick change (you can simply bookmark the code line), this method is very nice I think.

Article postedPosted in @ 07/09/08