Well it’s finally here Firefox 3 download day. Although it was off to a slow, if not buggy, start it’s finally here and I bet you can’t wait to download it. But wait a second if your like me you rely on all the fantastic Firefox extensions to get your job done. Extensions such as Firebug and the Web Developer make Firefox what it is, the most powerful browser to develop web sites on.

(more…)

I thought I’d share some of my CSS habits/top tips, some of my habits may be more controversial than others, but it’s always good to share.

There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.
(more…)

Of all the CSS3 selectors the structural pseudo-classes have to be my favorite. In particular I love :last-child. The :last-child CSS selector is increabily powerful especially when positioning elements in a row. Instead of providing a last class on the very last element in the row, you can now use pure CSS to achieve the same effect.

CSS 2.1

/*Each Element*
.image { margin-right: 5px; height: 20px; width: 20px; float:left; background-color: red; }
/* remove the margin on the last element so it lines up
.image.last { margin-right: 0px; }

CSS 3

/* parent of the image element */
.parent div:last-child { margin-right: 0px; }

The Downside

Unfortunatly the bad aspect of this selector is that it does not fail gracefully. Meaning that a user in a none CSS3 complient browser (IE) it will fail horribly for, this means that everything will be out of line.

Example

If you look at this in anything but Firefox the last element will be on the next line.

This is quite a well known but under used technique for highlighting your form elements without any JavaScript. By using the CSS property focus you can apply style to a form element when it is clicked, also know as focus.

Example:

The HTML

The HTML is really simple all you need is a input box:

<input type="text" />

The CSS

The CSS can be approached by one of two ways you could either apply a class name to any form element which is applicable.

input:focus.yourclassname { background-color: red; }

Or you can use the CSS selectors to highlight every form like this.

input[type="text"]:focus { background-color: red; }

The focus selector only works in the modern browsers, and not IE7 and below. If you want this to be compatible with IE6 use this JavaScript, along with prototype

$$('input[type="text"]‘).each(function(element)) {
  Event.observe(element, ‘click’, function() {
    element.toggleClassName(’yourclassname’);
  });
});

Its CSS naked day today (9th of April). In my support for CSS naked day dtsn.co.uk will be CSS free to the 48 hours which is April the 9th. CSS naked day is designed to promote web standards throughout the web.

You can read the original post on CSS Naked Day on Blog Herald.

As with most of you, Internet Explorer 6 is the bane of my life. I waste 100’s of hours every year creating IE6 specific JavaScript and CSS. Thats why I am supporting Save The Developers, a site which hopes to educate users not to use IE6.

However I must point out that IE6 is not the only buggy browser around at the moment, IE7, Firefox, Safari and Opera all do have buggy tendencies as well, just not as bad.

I have been an advocate of Firebug for a long time now, it’s the only reason why I still use Firefox! I’ve mainly been using it for CSS/HTML - it’s inline editing is a dream. However lately I have found myself doing a whole bunch of JavaScript, and Firebug still keeps surprising me. I must admit, I never read the instruction manuals, so this one was a bit of a surprise when I found it, the profiler.

Your web app is almost perfect. You’ve got all the bugs worked out, the artwork has been dropped in, and the users are loving it. Only one problem - some of your features are a little bit sluggish and you’re not sure why.

With Firebug, you’ll never again wonder why your code is slow. Using the Firebug profiler, you can separate the tortoises from the hares within seconds.

To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You’ll then see a detailed report that shows what functions were called and how much time each one took.

Basically it lets you find out what the hell is causing your JavaScript to run slowly. Thank you Firebug!

This article has been updated please see here.

I have only just started using Wordpress and first on my list of things to do was to create a custom theme for the blog. Theme creation is simple in Wordpress just copy and paste your HTML code into another theme. The one area I did have trouble in was creating a menu which used the sliding doors principle.

Typically root navigation in Wordpress is achieved through wp_list_pages which outputs a html list (<li>) of the pages complete with their links. However the sliding doors principle requires an extra tag in the list structure i.e. <span>.

Wordpress Outputs:

<li>
      <a href=<a href=”http://www.dtsn.co.uk”>www.dtsn.co.uk</a>
</li>

However we require:

<li>
     <a href=”http://www.dtsn.co.uk”><span>www.dtsn.co.uk</span></a>
</li>

To overcome this we use a little PHP and a SQL query to select all the pages from the database and display them in a custom list:

<?php
   $querystr = “SELECT $wpdb->posts.* FROM $wpdb->posts WHERE $wpdb->posts.post_status =
                    publish’ AND $wpdb->posts.post_type = ‘page’ ORDER BY $wpdb->posts.post_title ASC”

   $pageposts = $wpdb->get_results($querystr, OBJECT);
   if ($pageposts)
   {
      foreach ($pageposts as $post)
      {
         setup_postdata($post);
         $title = the_title(”,”,FALSE); //wp conditional statement
         ?>
           <li<?php
              if ( is_page($title) ) {
                ?> id=’selected’<?php
              } ?>>
              <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
                 <span><?php the_title(); ?></span>
              </a>
           </li>
    <?php
    }
} ?>

The code above pulls out the database information regarding pages, we then call the corresponding wordpress functions (such as the_parmalink()) to insert the data in the correct place. The code above also applies a ’selected’ class to the menu item so that the user can determine which page they are on. Thus giving you the effect you see on this blog. This is done using one of Wordpress’s conditional statements (the_title()) which calls the title of the page you are currently on.