Advertise here via BSA

Manoj Sachwani — a contributor here at Fuel Your Coding — is launching a free weekly newsletter just for web developers!

Manoj says there will be just one email each Saturday and absolutely no spam. Right now the newsletter will mostly be sharing valuable links for developers, but he is open to feedback and would love us to help him improve it.

Potential topics include:

AJAX, AS3, ASP, ASP.net, Browsers, CSS,Cappuccino, CoffeeScript, Cold Fusion, Flash, Flex, HTML, HTML5, JavaScript, Media, PHP, Photoshop, Prototype, RSS, Rails and Ruby, SOAP, SQL, SVG, Semantic, WAP, XML, YUI, jQuery,Jobs, & more

Looks like he has something for everybody in that list. If you’re interested head on over to WebDeveloperWeeky.com and subscribe!

Advertise here via BSA

This is just a short Friday post to announce a new jQuery plugin for you to use, fork and adapt for your projects! This plugin takes either a part of a web page, or the entire page, and builds a table of contents based on the H1 through H6 tags. Additionally, it can add “Top” links to the headers, be styled as nested <ol> or <ul> list, be styled as a straight list of links, and it even supports a proportionate spacing style that matches the actual distance between the headers.

All this was inspired yesterday by Janko’s article yesterday, “Automatically generate table of contents using jQuery.” Start by reading his article to get a background on the topic, then head over to the documentation page for the download link as well as three different examples of usage.

This plugin is version 0.8, so please comment on any bugs you find. Feel free to follow or fork the project on github as well! Keep in mind I didn’t spend ages getting the CSS on the example pages to be cross-browser ready, though the plugin itself has full cross-browser support.

Advertise here via BSA

Last week I was dealing with a unique problem. I needed to set focus to a username field, but the field had an in-field label. The script was set to clear out the helper text (label) when the user entered the field. Hmm…. that won’t work! I remember seeing a nicer implementation on Mobile Me for their login. Basically the label stays over the input element even after it had focus. Only after typing began did it totally disappear. Inspired by that implementation, today I am releasing the In-Field Labels jQuery Plugin so you can use this new method as well. The plugin is open source and available for download or on Github. If you can make it better, please fork it and send a pull request when you have finished your changes!

Benefits

• The input element or textarea never really has content, so validation can proceed without first checking for the field value.
• It uses standard markup for form elements
• It is under 1KB when minified and gzipped
• It takes one line of jQuery code to implement.
• The overlay can contain images and other HTML elements
• Its compatible with all modern browsers (And even IE6, the “not-so-modern” browser).

Issues

Like all in-field label implementations, this plugin still has problems when the browser tries to pre-fill the fields. When Safari and Firefox pre-fills the fields for the user, it never sends a “change” event to hook into. You can get around this by adding autocomplete=”off” to the input elements, but this is undesirable for longer forms. I am looking for a fix, but for now, this plugin is still usable for shorter forms!

Quick Overview

The effect is achieved by overlaying the label element over the input, password, or textarea and making it semi-transparent when the field has focus. Once a keystroke is detected the label disappears entirely until the field loses focus. If it is empty on blur, then the label fades back in. Clicking on the label auto sets focus on the field.

Download It

Head over to the Sample Page to read more about the plugin and to download it. Let me know your thoughts and suggestions in the comments below!

Advertise here via BSA

As a webdesigner you might have had this problem: “I’ve got a nice looking wide image, but I don’t want my visitors to scroll horizontally.”

A colleague showed me a new project he was working on. A large image appeared and I had the ability to drag and move the image around in a container. Not super efficient if you ask me, I still had to grab the image and move it around holding my mouse button. Can’t there be an easier way?

This article will show you my solution to the problem and maybe even a different approach on navigation.

The example page is located here:
http://www.fuelyourcoding.com/scripts/photonav/

And the archive is downloadable here:
http://fuelyourcoding.com/scripts/photonav/jqueryphotonav.zip

What is it?

This photo container has been adjusted to “move” with the cursor. To achieve this I used Javascript and a library called jQuery.

What do we have and what do we need to do?

1. Create a HTML layout for the picture to get in.
2. Adjust the CSS.
3. Make a call to PhotoNav in Javascript.

1. Create a HTML layout

This is the easiest step. It might just as well be a copy paste of the code below. But be aware of three things.
First give the overall container an id (so Javascript can grab the object).
Then make sure the div with classname fixed gets a second classname to correspond with the CSS (I used opt1 and opt2).
Determine if you want to have links inside of the container, if not; you can leave the container empty.

Take a look at the code below:

<div class='photo' style='display: none;' id='navigate'>
	<div class='fixed opt1'>
		<!-- this is optional --!>
		<a href='http://gayadesign.com/post/' class='button1'>

		</a>
		<a href='http://gayadesign.com/portfolio/' class='button2'>

		</a>
		<a href='http://gayadesign.com/about/' class='button3'>

		</a>
		<a href='http://gayadesign.com/partners/' class='button4'>

		</a>
		<a href='http://gayadesign.com/contact/' class='button5'>

		</a>
	</div>
</div>

The overall container “navigate” will always be hidden prior to the actual Javascript call. I also gave the fixed div a second class. This classname will point to the options of the container; the height and the background image (the actual image that needs scrolling).
You can add <a> tags to the fixed container. I gave them all classnames so they can be positioned in the CSS. This part is optional.

Remember to include the jQuery library and the PhotoNav Javascript files in the header. Also include the CSS file photonav.css.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/photonavjQuery.js" type="text/javascript"></script>
<link href='css/photonav.css' rel='stylesheet' type='text/css' />

2. Adjust the CSS

The top part of the CSS has to stay the way it is, do not adjust it if you don’t know what you are doing. I put a comment at the spot where you can start to edit the CSS.
I’ll describe what to do at each part of the CSS.

.photonav .photo:

.photonav .photo {
	width: 400px;
	margin: 10px;
	border: 1px solid gray;
}

Adjust the width of the total container. This has to be a fixed width in order for it to work in IE6. I have no idea why, but if the width was set to 100%, the height was 0px. You can do 100% in other browser with the !important trick.
The margin and border are optional, just make it as you’d like.

.photonav .photo .opt1:

.photonav .photo .opt1 {
	height: 100px;
	background-image: url();
}

This is the height of the photo container, at least, the fixed container. But notice the .opt1, it is the second classname we added to the fixed container in the HTML part.
The background image is the image that has to be viewed inside the container.

The next part is optional and only if you want buttons inside the container.

a.button*:

a.button1 {
	margin-left: 20px;
	margin-top: 30px;
	width: 100px;
	height: 90px;
	background-image: url();
}

a.button1:hover {
	background-image: url();
}

In order to create a menu navigation like I did on the preview page, you need to add a tags with different classnames. Define the pixels from the left side and the top of the container in the margin values. State the width and height of the button and the background image (if needed).
To create an onhover effect you can add an other image in the :hover part.
If you want a second a tag next to the other, subtract the height of the previous button from the margin-top.

3. Make a call to PhotoNav in Javascript

Now that you’ve got all the necessary HTML and CSS set, you can call the PhotoNav functionality. The following code can be put in a js file or in a script tag.

document.getElementById('navigate').style.display = 'block';
PhotoNav.init('navigate', 758, 1412, false);

The specification is:
function init(String id_of_container, int width_of_container, int width_of_panorama_picture, bool debugMode);

String id_of_container:
The id of the container.

int width_of_container:
Give the width in pixels of the fixed container. For calculating reasons.

int width_of_panorama_picture:
Give the width in pixels of the panoramic picture. For calculating reasons.

bool debugMode:
Enable debug mode. Outputting value to the HTML element with id ’status’. (default: false)

If you want to enable debug mode, you have to insert the following code somewhere in your HTML:

<div id='status'>
	&nbsp;
</div>

Conclusion

Now that everything is set, you can fire the thing up! Enable the navigation on loading a page or by triggering an event in Javascript. If you have implementations of this script, post your examples in the comment section, I’d like to see them.

Good luck!

Advertise here via BSA

The GarageDoor effect – creating one has now been made easy! This tutorial explains everything you need to know on how to create the same effect yourself.

An example of the GarageDoor effect in work is found here: http://www.fuelyourcoding.com/scripts/garagedoor/
Download the following archive containing everything you need: http://www.fuelyourcoding.com/scripts/garagedoor/garagedoor.zip

Unzip the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs.

First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need Scriptaculous. This library enables interface effects, so you don’t have to create it yourself. So grab Scriptaculous and upload it to your server. Make sure you also upload the prototype.js file (in the lib folder).

Add the following code in the <head> tag of your page:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

<script src="js/garagedoor.js" type="text/javascript"></script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css' />

This will load the scripts and styles needed for the GarageDoor to work. Adjust the paths where needed.

The next thing you want to do is to create the HTML layout for the garagedoors. The following code shows the structure you need to create for your document:

<div class='garagedoor' id='garagedoor'>
	<div title='linktofile' class='item'>
		<div class='underlay'>
			Caption text
		</div>
		<img src='uritooverlayimage' class='overlay' />
		<div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
	</div>
	<div title='linktofile' class='item'>
		<div class='underlay'>
			Caption text
		</div>
		<img src='uritooverlayimage' class='overlay' />
		<div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
	</div>
</div>

This contains two items that will be the garagedoor. The keywords linktofile and uritooverlayimage have to be adjusted in order to make it work. Linktofile is the URL of the page the button has to link to, might be confusing because it’s not an a tag, but Javascript fixes it for you.

The items have a default size of: 100px width and 80px height. Create overlay images according to these dimensions. In order to change the size, take a look in the garagedoor.css file andadjust the width and height of several elements.

All there is left to do is call the GarageDoor to enable the effect!

<script>
	GarageDoor.scrollY = -55;
	GarageDoor.scrollX = 0;
	GarageDoor.setBindings('garagedoor');
</script>

The first line in the <script> tag sets the amount of scrolling the overlay has to do when the cursor is floating over an item. In this example the overlay has to go 55 up, which means move -55px on the Y-axis.
You can also make it scroll horizontal.

Give the id of the garagedoor container to the setBindings method and the GarageDoor effect will be initialized! Be sure to make the call after creating the html.

You are now set to use the GarageDoor Effect. Good luck!