blog.paulgueller.com

You may have heard of the Suckerfish Dropdowns featured on A List Apart (which use CSS and JavaScript along with valid HTML to create vertical or horizontal “drop-down” menus) and the the extended revised version Son of Suckerfish, but if you’re already using the jQuery library on your site the code to mimic the :hover pseudo-class gets even simpler.

Instead of:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

You only need to write:

$('#nav li').mouseover(function(){
 	$(this).addClass('sfhover');
 }).mouseout(function(){
 	$(this).removeClass('sfhover');
 });

Such is the beauty of using css-style selectors to build an array of affected elements. Of course, you must make sure the code is wrapped in $(document).ready(function(){…});, but there is no need to modify the window.onload event in this example. Otherwise, refer to the code provided in the above examples to get your markup and formatting styles in place.

My editor of choice lately has been Eclipse, even though I don’t know anything about Java. The PDT project for PHP development is wonderful for keeping track of variables and functions and classes that my site/application uses, and it has just enough panels that provide information about the projects that I am working on, as well as the attributes for just about every HTML/CSS element.

Coupled with Subclipse for Subversion source control, Eclipse is my one stop shop for all things web development.

My only problem is that I know I haven’t much scratched the surface of what it can do, or how it can help to simplify my workflow. I discovered the plugin library at EasyEclipse, but only experimented with a few of them; the HTML Tidy and webDAV + FTP plugins. I know that there are keywords and shorthand commands that can be entered to cut down on the entry of raw text, but I can’t seem to find a good resource for them.

If you use and love Eclipse, post a comment and share your resources about how it improves your workflow.

A number of code monkeys that I know use the Web Developer Toolbar in conjunction with the Firefox browser. The addition of a menu/toolbar is quite handy, especially the abilities to enable or disable JavaScript and CSS, and providing line guides and rules to ensure proper alignment of layout elements. Despite being so comprehensive in its features, it lacks the ability to view the loaded assets of a page, explore the DOM tree, or view box model for any element.

This is where Firebug comes in, allowing you to not only inspect an element with one click to reveal all of its defined and inherited styles and attributes, but also to edit the properties in the browser without having to make changes to the source documents.

With the most recent version of Firefox, I had issues with viewing the attributes and styles of the A element, but I found that an upgrade to beta version 1.1 solved the problem.

And for testing in Safari, Opera or dreaded Internet Explorer, they offer Firebug Lite that can be implemented via Javascript file to take advantage of the console object, which can be very useful for debugging JavaScript. I plan to write in further detail later about the wonder and majesty of this feature, so stay tuned.

If you enjoy the inspection aspect of Firebug, there is another cross-browser tool available called pi.debugger. It does not work with Safari (at least not version 3) but performs like a champ on IE, Camino and Flock. The script can be downloaded to your workspace or linked to from the Google source page in the link.

Given the number of options and resources available, the task of finding that one property that is throwing your whole layout off should be made that much easier. Happy hunting!

No, I’m not talking about this ThinkGeek item, I just installed the ScribeFire extension (or add-on, if you’ve never worked with the older versions of the browser) for Firefox. Hopefully this will help me to actually create some of the blog postings that I set out to when I was envisioning these pages.

I don’t think of myself as on who frequently uses trendy catchphrases or jargon excessively (and I can’t stand those people who use the word “blog” like the Smurfs use “smurf”) but I hope that through this channel I can accomplish the following things:

1. Improve my own style, grammar and vocabulary through writing on a more regular basis, though I will try to avoid too many obscure esoteric references
2. Provide interesting links and useful resources to others in the web development field
3. Rant/vent about things in life unrelated to my workplace or personal relationships (I can’t exactly be anonymous about these things people)

So, with this in mind, stay tuned and feel free to comment or contact me if you have suggestions. (or complaints!)

Thanks to some DOM-magic and a little help, the ThickBox iFrames on my portfolio are opened with dimensions relative to the size of the browser window. Check it out!

I think that title is pretty appropriate; considering when a person learns a new programming language, the first attempts usually involve outputting the text ‘hello world.’ So this is me learning the language of blogging. <blog on>

I hope to use this forum to share resources and links about web design, programming, and general geekery, as well as to talk about things going on in my life (sorry no sex or violence here). I will try to keep this regularly updated, and we’ll see where this all leads!