Beyond PHP

Client-Side menu separators with jquery

Ben Peter — Sun, 11 Mar 2007 08:54:00 +0000

Have you ever pulled your hair about separators between menu entries on websites? Or just plain fell asleep? The task is trivial, but it is boring. Depending on what server side solution you are using, you end up with 4 to twenty lines of code.

CSS3 would save us from that boredom, but there is almost no CSS3 support in today’s browsers. That is, there’s no native CSS3 support. We can do the same and more with jquery, which does have CSS3 support.

What I have is:
(this is the HTML as output to the browser).

Impressum
Über Mich
Möbel
Innenausbau
Sonstige Leistungen

Which gives me this:

But what I want is:

I could inject conditions into my server-side code to insert the bullets after all but the last menu entry (or before all but the first). But this has many drawbacks: usually, there’s more conditions involved in such menus like considering hidden pages if I am working in a CMS or similar, navigation states (which is the current page, etc), and so on. Also, it makes the HTML cluttered and charges the server-side code with view-dependant details. The server-side code in this case would be considered UI-driven anyway, so this is not inherently bad. But it’s still nicer not to.

Anyway, there’s a rather easy way with jquery (if you are new to jquery, just grab jquery.js from jquery.com). The relevant code:

Explanations:
The $(document).ready function is executed after the DOM is completely available.
$(”#mainmenu ul li:not(:last-child)”) selects DOM elements with a CSS3 selector, in this case all li elements that have a ul as their parent and #mainmenu as their grandparent and that are not the last child of their parent.
after(”

•

”) simply injects the HTML after each element in the collection just selected.

The CSS, for completeness’ sake:

#mainmenu{width: 800px;border: 1px solid #006633;border-left: none;border-right: none;background-color: #e5e5e5;}#mainmenu ul{display: block;margin: 0;margin-left: auto;margin-right: auto;height: 18px;}#mainmenu ul li{display: block;float: left;margin-left: 10px;margin-right: 10px;}#mainmenu ul li.bull{margin-top: 2px;}#mainmenu ul li a{display: block;text-decoration: none;color: #006633;background-color: #e5e5e5;font-size: 14px;}

Isorecorder by Alex Feinman

Ben Peter — Fri, 09 Mar 2007 04:32:41 +0000

http://isorecorder.alexfeinman.com/isorecorder.htm

Isorecorder is a free tool for Windows XP and Vista that can perform the following transformations:

CD/DVD -> ISO Image
Directory Tree -> ISO Image
ISO Image -> CD/DVD (DVD only on Vista)

Especially the latter is a great equivalent to the ease of use that dd brings on Unix.
I like to just save an ISO image of CDs and trash them. I don’t much like those stacks of never-used driver CDs…

Isorecorder does not mount ISO images as virtual drives.You still need Microsoft’s Virtual CD-ROM Control Panel for Windows XP, which you can download from Microsoft. The only official link to this tool is found in the MSDN FAQ. There is no corresponding page on Microsoft Downloads.

Ströer has encountered a problem and needs to close

Ben Peter — Mon, 26 Feb 2007 12:22:03 +0000

Every day, I walk past several Ströer appliances, and more often than not, they show interesting error messages. This time, I couldn’t resist.

Using Word 2007 to Post to WordPress

Ben Peter — Sat, 24 Feb 2007 02:15:20 +0000

Word 2007 works well for posting to a WordPress blog. Here is a step-by-step description.

Use any existing document or create a new one. Once you’re done, hit the Office Button -> Publish -> Blog
You’ll be asked to set up a blog account. Select WordPress as the blog provider and enter the URL to xmlrpc.php, your user name and your password.
Then, hit the Picture Options button and enter your FTP URL and the URL used in the Blog Posts.
For WordPress, you’ll need to use “My own server” – “My blog provider” won’t do.
The FTP URL is where your images will be stored. Source URL is what Word will prepend to the src= attribute of the img tag.
You can now publish, publish as a draft, edit categories, and edit existing posts. Wow.

A draggable masked image behind transparent navigation

Ben Peter — Thu, 16 Mar 2006 03:21:45 +0000

A friend asked whether it would be possible to have an image that can be dragged behind a mask, with a transparent navigation in the upper part of the page. The images are too large to fit on the page, so you need to be able to move it. Yes, they could be resized, but it’s a wanted effect.

Making things transparent in the top part is easy. A little extra treatment for Internet Explorer, and a transparent PNG will do. Making the image draggable was a single line of JavaScript with prototype/scriptaculous. Below is an example in an iframe (i know, i know, but it’s so easy this way). I have added a Fade/Appear for the navigation while the image is dragged, but it leaves the navigation hidden if the drag ends while the navigation is still fading. There certainly are ways around this, but this is enough for a proof of concept.

here is the whole thing out of the iframe

AJAX: back to static HTML pages

Ben Peter — Mon, 06 Feb 2006 09:41:30 +0000

AJAX allows for a lot of geeky stuff. I won’t talk about that. What I like particularly about AJAX is that it makes it so easy to serve static pages in complex applications.

Let’s start with an example: I often do sites on which 90% of the pages are static, only a few contain functionality that requires server-interaction, like contact forms, calculators, subscriptions, etc. I always use some kind of framwork for navigation and templating. Sometimes a CMS is appropriate, sometimes I take my hand-rolled, which is XML and Smarty based.

Considering how many pages are static, it would be good to pull the static pages through wget and just display them statically. There is absolutely no need to parse XML, build navigation, and build content on each request for a page that never changes. But that disconnects the 10% of pages where content depends on user input. It is hard to build a elegant solution which knows a ‘render’ mode and a ’serve’ mode.

That’s where AJAX comes into play: if all functionality is AJAX driven, then it becomes easy to render the pages statically, as AJAX allows us to completely separate HTML generation and logic processing server-side. They happen in two different requests.

This does not work with most of the existing AJAX frameworks, as they mangle HTML rendering and AJAX processing, although there is no need at all. It might work with PEAR’s HTML_AJAX, I’ll need to investigate.

Not convinced? Rendering pages statically can be taken to exremes. For example, Saab’s configurator consists only of statically rendered HTML pages. This works, because it does not contain any dynamic elements. Now take the OPEL configurator: it cannot be statically rendered as it contains service boxed, like a finance calculator in which the user can change parameters. But with AJAX, it can still be static: all server-interaction can be made when the page is loaded and when necessary.

AJAX: for real separation of presentation and logic.

Internet Explorer cuts off the ‘W’ with 11px Arial

Ben Peter — Wed, 25 Jan 2006 14:23:49 +0000

I noticed several times that sometimes Internet Explorer cuts off the left leg of the W. After a little investigation, I found that this happens when a W in 11px Arial touches the left border of a box without left padding or margin. If the box is the first element in another box, and that box has padding, the error does not occur.

(more…)

Setting up a Strato HighEnd Server with Plesk

Ben Peter — Sat, 21 Jan 2006 20:50:53 +0000

The Strato HighEnd Root Servers come with Plesk 7.5 preinstalled, and everything is ready to roll. But looking at phpinfo()’s output, it was obvious that there were still things to do to get to a system on which ez publish websites would run. Here is what I did.

(more…)

Agile Messenger - Problem solved

Ben Peter — Sat, 21 Jan 2006 07:49:06 +0000

I finally received a satisfactory answer to my problems with Agile Messenger. They gave me three free months, and have talked to my provider (I don’t know whether they talked to the SMS service provider or to E-Plus) and that I won’t be charged for the SMS. Here is the entire mail:

(more…)

Deficiencies in Strato’s ServerAdmin 24

Ben Peter — Thu, 19 Jan 2006 08:45:48 +0000

For a client, we rent a Strato Server with ServerAdmin24 pre-installed. ServerAdmin 24 is a customized ViSAS version.

The web interface is supposed to give a hassle-free access to typical tasks of the server admin, clients, and domain owners. But outbound email from PHP did not work, and neither could FTP users set up through the web interface log in.

(more…)