The Professional Portfolio of Stacey Lane

Simple Vector Hearts

Stacey — Tue, 31 Jan 2012 23:19:15 +0000

Another vector heart tutorial? Well, yes! And just in time for Valentine’s Day! But it’s only because there seems to be a lack of really quick and simple heart illustration techniques. Of course, the best way is to draw your heart by hand, but I digress. Here is just one of the many ways (but probably the most simple that I’ve ever put into practice) you can draw a heart in Illustrator.

Step 1

The first thing you need to do is create a perfect elipse. Mine is 100px x 100px but it can be any size you like.

Step 1 - Create perfect elipse

Step 2

Next you will need to use the direct selection tool by pressing A (it’s the white arrow beneath the select tool). Grab the bottom most anchor of the circle and drag down while holding shift. The further you drag it, the more elongated and thin your heart will be.

Step 2 - Extend bottom anchor of elipse

Step 3

Once you have your egg shape, you will need to convert that bottom anchor. Press Shift+C to use the convert point tool (it’s nested under the pen tool) and click on the bottom anchor.

Step 3 - Convert bottom anchor

Step 4

Next you will need to rotate your shape. While your shape is selected, press R to pull up the rotate tool. Hold Option/Alt and click the bottom anchor point. This will bring up a dialog box. Check the preview box so you can see how far your shape will rotate. Enter an angle in the box (it can be positive or negative). Once satisfied, click OK.

Step 4 - Rotate around bottom anchor

Step 5

Select both halves of the heart and use the pathfinder tool to unite the shapes. You now have a perfect heart!

Step 5 - Use pathfinder tool to unite shapes

Step 6

At this point, you may need to tweak your heart just a bit. Switch to outline mode (CMD/CTRL+Y) and zoom in to the bottom anchor point. If you didn’t rotate exactly around the bottom anchor, you may have three points at the bottom of your heart. If this is the case, select the top anchor point (in the middle of the heart) with the direct selection tool. Delete the point. You will now be left with an open path. Select the remaining two anchor points with the direct selection tool. Press CMD/CTRL+J to join the path.

Step 6 - Clean up

Step 7
But what if you want the heart perfectly oriented at a 90 degree angle? Simple! Create a guide, either vertically or horizontally. Line the bottom anchor of your heart with the guide. It may help to switch to outline mode (CMD/CTRL+Y). Once you have lined up the bottom anchor, use the rotate tool (R) to rotate your heart around that bottom anchor. Tweak the number until the center point of the heart comes in contact with your guide. Click OK.

Step 7 - Create guide, align bottom point with guide, rotate around bottom point until top point intersects with line

Step 8

That’s it! All that’s left is for you to design to your hearts (pun!) content! As an added bonus, feel free to download the vector file!

Download This Tutorial - 84.28 kB

Removing Border from IE7 & Opera Submit Buttons

Stacey — Fri, 02 Dec 2011 00:19:14 +0000

It may not be the absolute best way to do it, but it’s quick, doesn’t require javascript and, most importantly, it works.

Insert the following code BEFORE your submit button:

This works on HTML5 doctypes. Taken from Stack Overflow.

GREP Fractions in InDesign

Stacey — Tue, 22 Nov 2011 20:05:30 +0000

InDesign’s GREP feature is awesome. If you haven’t used it yet, could be cutting your production time down to, well, fractions. And, speaking of fractions, one of the most awesome ways to use GREP is to create custom fractions! This tutorial will have you creating custom fractions in no time.

To begin, setup your [Basic Paragraph] style. I used the Caecilia typeface set at 10pt font with 18pt leading. Once you have your basic paragraph style setup, you will need to type in some fraction text. I’ve setup my styles to include mixed fractions as well (2-1/2, etc).

GREP Fractions - Numerator Character Style

Create a new character style called “Numerator”. Scale this character horizontally and vertically by 55% then shift the baseline to 4pt. If you set your type larger than 10pt, you will need to increase the baseline shift to compensate for the extra height.

GREP Fractions - Denominator Character Style

Next, create another new character style called “Denominator”. This character style is essentially the same as the Numerator character style but without the baseline shift.

GREP Fractions - Hidden Character Style

Our last character style is a Hidden Character. This will be used to hide the dashes between the whole numbers and the fractions. Set the type size at .1pt, scale the type horizontally and vertically by 1% and set the character color to match the background color.

Making it Work

The first thing we need to do is create a fraction slash and copy it to the clipboard for later use. You can create a fraction slash by locating the fraction slash character in the glyphs panel (unicode character 2044) and double clicking it. This will insert it into your document. Select the character and copy it (make sure there are no spaces).

GREP Find/Change Flyout Menu

Press CTRL/CMD+F to pull up the Find/Change menu. At the top of the menu, make sure you are in the GREP section. In the “replace with” box, paste your fraction slash (ensure there are no spaces). In the “find what” box, you will need to perform a Positive Lookbehind and a Positive Lookahead. This will tell InDesign to find all instances of the forward slash that have a digit in front and a digit behind it and to ignore everything else. To do this, click the @ icon next to the find box to open a flyout menu. Hover your mouse over “Match” and select “Positive Lookbehind.” This will auto generate the following text in your find field:(?<=)

After the = but before the ) type \d. \d is the wildcard character for any digit. After the ), type a forward slash. After your forward slash, go back to the flyout menu. This time, choose “Positive Lookahead” from the Match menu. This will generate the following text: (?=)

GREP Find/Change Finished Expression

Again, after the = but before the ), type \d. Your expression should now read:(?<=\d)/(?=\d)

Click Change All.

Just a couple of quick notes: First, dates that are formatted in numerical form with forward slashes will be affected by this. A great way to circumvent this is to use en-dashes. However, in text, dates should always be spelled out [Chicago Manual of Style Section 9.36]. Second, since this is a GREP find/change, you will need to do this step again if you add new text or make any changes to your document after this step. It’s not ideal but it works. If anyone knows of a better way to do achieve this result, please leave a comment below.

GREP In Your Paragraphs

The first thing we will need to do is replace all occurrences of the forward slash to a fraction slash. We will need to copy the fraction slash to the clipboard again (make sure there are no spaces when you copy the character).

Numerator GREP Expression

Go back to the paragraph style you setup earlier and double click it to open the Paragraph Style Options dialog. From the list on the left, choose GREP Style. Click on “New Grep Style.” Our goal is to apply the “Numerator” character style to the numerator text, the “Denominator” character style to the denominators and the “Hidden Character” character style to the dashes in between the whole number and fraction. First, select “Numerator” from the “apply style” drop down menu. In the “to text” field, making sure you use the fraction slash instead of the forward slash, type: \d+(?=/)

Denominator GREP Expression

Create another Grep style. This time, apply the “Denominator” style to the following text, again using the fraction slash instead of the forward slash: (?<=/)\d+

Hidden Character GREP Expression

Last, we need to hide the hyphens. Create a new Grep style and apply the “Hidden Character” style to the following text: (?<=\d)-(?=\d)

Click OK. That’s all there is to it! Of course, if you find you do this a lot, you could always get the Proper Fraction plugin! It does cost a bit of money but there is also a free version of this plugin. The downside to the free version is that you have to manually select each fraction to change it. I find that GREP is much simpler and much faster than this option.

Displaying Elements at Specific Hours and Minutes with PHP

Stacey — Mon, 07 Nov 2011 20:56:29 +0000

For one reason or another, you may discover you have the need to display a link or another type of page element within a specific range of time. It’s relatively easy to do and takes only moments to implement if you know a little about PHP. We will be building the notification bar in the above preview. Let’s begin!

The PHP

= 13 && $h <= 15) {
			$toggleBar = 'radio-online';
		} else {
			$toggleBar = 'radio-offline';
		}	

		// Broadcast 1 - Displays Friday's between 13:40 and 13:59
		if ($d == 'Friday' && $h == 13 && $m >= 40 && $m <= 59) {
			$toggleBroadcast1 = 'radio-online';
		} else {
			$toggleBroadcast1 = 'radio-offline';
		}

		// Broadcast 2 - Displays Fridays between 14:00 and 15:00
		if ($d == 'Friday' && $h >= 14 && $h <= 15) {
			$toggleBroadcast2 = 'radio-online';
		} else {
			$toggleBroadcast2 = 'radio-offline';
		}

		// Removes "In" from "Streaming Live In" on the Countdown
		// The countdown is displayed Fridays from 13:00 - 13:45.
		if ($d == 'Friday' && $h == 13 && $m < 45 ) {
			$streaming = 'radio-online';
		} else {
			$streaming = 'radio-offline';
		}
    ?>

There’s a lot going on here. Let’s break it down. First, we’ve set the default timezone to PST via PHP. Ideally you should place this code in the header of your website so that it will work across every page on your site.

Next, we find the current hour in the 24 hour clock format, the current minute, current day and store them all in variables ($h for hour, $m for minute and $d for day).

Next, we define the start time by creating a new variable and having PHP do a little math. The broadcast in our example starts at 1:45pm. Since the countdown begins at 1pm, we only need to worry about minutes. We take the broadcast minutes (45) and subtract the current minute and store that value in a variable.

After we define our variables, we need to declare a few if/else statements to toggle the class names. The first if statement is used to display the whole thing. The PHP will watch for three things: Is it Friday and is the hour greater or equal to 13 and is the hour less than or equal to 15? If yes, it will echo “radio-online” wherever the variable $toggleBar is written in our HTML code.

The if statements for the broadcast buttons are very similar to the container toggle. For the first broadcast button, PHP is watching for the date to be Friday, the hour to be 13, the minute to be greater than or equal to 40 and the minute to be less than or equal to 59. If all of these things are true, it will display the button. If not, it will not display the button. The same goes for broadcast 2, except it is not looking for a minute range but an hour range.

The last if/else statement we need is just a minor one to fix a grammatical error that will occur once the countdown is over. It will remove “In” from “Streaming Live In” above the countdown. Here the PHP is looking for the day to be equal to Friday, the hour to be equal to 13 and the minute to be less than 45.

The HTML Code



    
        Streaming Live In
         1) {
			echo "$startMinute Minutes! Stay Tuned!";
		} else {
			echo "Online! Listen now!";
		}	

		?>Broadcast begins at 1:45pm
    


    
        Launch Player

        Launch Player

The HTML for this is pretty straight forward. Basically, we’re defining a container that will dynamically toggle between a certain block of time. Once it’s toggled, it will display a countdown timer until the broadcast goes live. This will enable the user to see that a broadcast is about to happen and they can choose to launch the player early. When the time comes, the countdown timer will go away and tell the user the broadcast is live. A button will also be displayed so the user may launch the broadcast.

There is a splash of php code in here. First, we’re telling the div#wrapper that it will have a dynamic class as defined by the PHP variable $toggleBar. If the conditions are met, the variable will echo “radio-online.” If they are not met, the variable will echo “radio-offline.”

The variable $streaming is waiting for the minute the broadcast goes online at 45 past the hour. When this happens, the PHP script echos out “radio-offline” for the span class.

The block of PHP in the H6 tag is searching for four things. Is it Friday? Is the hour 13? Is the minute less than 45? Is there more than 1 minute left until broadcast? If yes, the countdown displays. If no, it displays “Online! Listen Now!”

Last, there are two variables being echoed in the div#buttons anchor tags. These are waiting for the conditions to be as defined in the PHP script. Once this happens, the variable will echo “radio-online” instead of “radio-online.”

The CSS

/*` 960 Grid System Framework (Full framework availalbe at 960.gs)
------------------------------------------------------------------- */
.container_16 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}
.grid_8 {
        display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	width: 460px;
}

/*` Globals
------------------------------------------------------------------- */
body {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #666;
}

header {
	margin: 50px;
}
header h1 {
	margin-bottom: 5px;
}
header span {
	margin: 0;
}

p {
	font-size: 14px;
}

/*` Container Styles
------------------------------------------------------------------- */
#wrapper {
	height: 76px;
	background-image: -webkit-gradient(linear, center top, center bottom, from(white), to(#eee));
	background-image: -webkit-linear-gradient(top, white, #eee);
	background-image: -moz-linear-gradient(top, white, #eee);
	background-image: -o-linear-gradient(top, white, #eee);
	background-image: -ms-linear-gradient(top, white, #eee);
	background-image: linear-gradient(top, white, #eee);
	-webkit-box-shadow: inset 0 -1px 0 white;
	-moz-box-shadow: inset 0 -1px 0 white;
	box-shadow: inset 0 -1px 0 white;
	border: 1px solid #d1d1d1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	color: #999;
	position: relative;
}
#countdown {
	margin-top: 20px;
}
#countdown h6 {
	font-size: 21px;
	font-weight: 300;
	color: #1ea2eb;
	margin: 0;
}
#countdown h6 span {
	font-size: 14px;
	color: #999;
}
#countdown p {
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}
#buttons {
	margin-top: 12px;
}

/*` Radio-Online!
------------------------------------------------------------------- */

/* Buttons */
a.radio-online {
	background: #78cdfc; /* Old browsers */
	background-image: -moz-linear-gradient(top, #78cdfc 0%, #44ade2 50%, #268dc1 50%, #116b9d 100%); /* FF3.6+ */
	background-image: -ms-linear-gradient(top, #78cdfc 0%, #44ade2 50%, #268dc1 50%, #116b9d 100%); /* IE10 */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#78cdfc), color-stop(50%,#44ade2), color-stop(50%,#268dc1), color-stop(100%,#116b9d)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #78cdfc 0%,#44ade2 50%,#268dc1 50%,#116b9d 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #78cdfc 0%,#44ade2 50%,#268dc1 50%,#116b9d 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #78cdfc 0%,#44ade2 50%,#268dc1 50%,#116b9d 100%); /* IE10+ */
	background-image: linear-gradient(top, #78cdfc 0%,#44ade2 50%,#268dc1 50%,#116b9d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78cdfc', endColorstr='#116b9d',GradientType=0 ); /* IE6-9 */
	border: 1px solid #0c5984;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0px 1px 0px #072f50;
	-webkit-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px #fff;
	-moz-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px #fff;
	-ms-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px #fff;
	-o-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px #fff;
	box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px #fff;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	text-align: center;
	height: 27px;
	padding: 15px 20px 6px;
	float: right;
}
a.radio-online:hover {
	background-image: -webkit-gradient(linear, center top, center bottom, from(#545454), to(black));
	background-image: -webkit-linear-gradient(top, #545454, black);
	background-image: -moz-linear-gradient(top, #545454, black);
	background-image: -o-linear-gradient(top, #545454, black);
	background-image: -ms-linear-gradient(top, #545454, black);
	background-image: linear-gradient(top, #545454, black);
	border: 1px solid #000;
	text-shadow: 0px 1px 0px #000;
	-moz-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px rgba(255,255,255,0.8);
	-webkit-box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px rgba(255,255,255,0.8)
	box-shadow: 0px 3px 2px #b2b2b2, inset 0px 1px 0px rgba(255,255,255,0.8);
}

/* Block/Inline Elements */
div.radio-online {
	display: block;
}
span.radio-online {
	display: inline;
}

/*` Radio-Offline
------------------------------------------------------------------- */
.radio-offline {
	display: none;
}

Most of this code is making the containers and buttons pretty. The meat and potatoes of the css is the Sections marked Radio-Online and Radio-Offline. Basically, when the broadcast is live, everything is displayed. When it’s not, nothing is displayed.

Download the Files

Download This Tutorial - 4.23 kB

CSS3 & jQuery Expanding/Collapsing Inline Inputs

Stacey — Tue, 25 Oct 2011 20:12:49 +0000

Recently I was tasked with creating a newsletter sign-up box that was simple, elegant and, above all else, usable. I decided to use jQuery combined with CSS3 to create really sleek expanding and collapsing inputs upon interaction. It’s pretty straight forward and simple. Let’s break it down.

Take a look at what we will be creating:
View the Demo

The HTML Code


    Receive Updates
    To recieve notifications when our site is updated, enter your email address and name below!

    
        Name
        Surname
        Email

The first step is to setup the basic HTML form. I’ve contained everything here inside a div with the id of wrapper-newsletter. Inside the div I gave it a basic heading tag and paragraph explaining what this form is all about. The form itself is made up of three labels, a submit button and three inputs with values, which display what to type in the boxes. We will be targeting the inputs with jQuery to clear as soon as a user clicks into the input. The reason I have left the labels in the form is for SEO purposes. With the CSS, we will be moving these off the screen as they won’t be needed for the end user. I have also set the class for all inputs to be “resting-state.”

The CSS

/* CSS5 & jQuery Expanding & Collapsing Inline Inputs by Stacey Lane */

/* GLOBALS */
body {
    font-family: sans-serif;
    font-weight: 300;
    color: #666;
}
h1 {
   font-size: 21px;
   margin-bottom: 15px;
}

/* NEWSLETTER BOX STYLES */
#wrapper-newsletter {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* W3C */
    border: 1px solid #ededed;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    min-height: 100px;
    width: 438px; /* Width + Padding + Border = 460 */
    padding: 10px;
    position: relative;
}

/* TEXT STYLES */
#wrapper-newsletter h4 {
    font-size: 21px;
    font-weight: 300;
    margin: 0 0 5px 0;
    color: #555;
}
#wrapper-newsletter p {
    margin-bottom: 10px;
}
#wrapper-newsletter label {
    display: block;
    float: left;
    text-indent: -9999px; /* this removes the element from the screen but keeps it in the markup for SEO purposes. This trick only works on block elements. Since form elements are defaulted to display as inline elements, we need to switch it to block. They are floated so they do not create any white space once they are moved off screen. */
}

/* BUTTON STYLES */
#wrapper-newsletter .button-submit {
    background: #333;
    color: #fff;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 4px 15px 5px;  /* This is to center the text in the button. If you adjust the fonts, you may need to adjust this to center the text again */
    position: absolute; /* Positioning the button keeps it from moving ever so slightly when the inputs transition to their new widths */
    bottom: 10px; /* This is the same as the amount of bottom padding in #wrapper-newsletter */
    right: 10px; /* Again, same as the amount of right side padding in #wrapper-newsletter */
}
#wrapper-newsletter .button-submit:hover {
    background: #1ea2eb;
    border: 1px solid #0096e8;
}

/* INPUT STYLES */

#wrapper-newsletter input[type=text] {
    height: 24px; /* Height + Border = 26px */
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    color: #999;
    font-family: 'Open Sans', sans-serif;
    padding-left: 7px;
    -webkit-transition: all 0.3s ease; /* Required so the inputs resize in a smooth motion rather than popping to the new size */
    -moz-transition:    all 0.3s ease;
    -ms-transition:     all 0.3s ease;
    -o-transition:      all 0.3s ease;
}
#wrapper-newsletter input[type=text]:focus {
    width: 180px; /* This is the width you would like the input to expand to. Don't forget, it's 2px wider because of the border.*/
    outline: none;
    border: 1px solid #1ea2eb;
}
#wrapper-newsletter input[type=text].resting-state {
    width: 102px !important; /* This is the widths of all the inputs at their resting/untouched state */
}
#wrapper-newsletter input[type=text].shrunken-state {
    width: 63px; /* When an input is selected, the other inputs are passed this class name via jQuery. This will reduce the width of the non-focused inputs to allow more room for the focused input to expand without cascading the button to the next line */
}

/* GETTING FF TO BEHAVE */
@-moz-document url-prefix() {
    #wrapper-newsletter .button-submit {
        padding: 3px 10px 4px;
    }
}

First I’ve styled the parent div (#wrapper-newsletter) with some basic styles which include a gradient background, border, rounded corners, height, width and padding. I have also set the position to relative. This is important later. Next I’ve defined how an H4 and P tag display.

Since labels display inline, we need to switch them to display as block. This is because only block elements can be positioned offscreen using the text-indent selector. I have also set the label to float left. This is important because it will create no additional white space between the paragraph tag and the form.

We’ll skip over the form elements for just a moment and move on to the button. I’ve styled the button by giving it a background and border with rounded corners, as well as declaring how the type will display. You’ll notice that I have also set the position to absolute; 10px from the bottom right. This is why we set the position of the parent div to relative. Since the button is on the right side of the inputs and the inputs are going to be moving, it’s important that we anchor this puppy absolutely so that it doesn’t shift around during the animations. Another bonus about positioning it absolutely is that it will put the kibosh on any clipping that could happen in the event that the browser renders a line break in the animation process. I’ve finished styling the button by giving it different background and border colors on hover.

Alright! Time for the inputs! I’ve set the height to display at the same size of the button. In this case, it’s 26px total (24px for the height and 2px for the border). I’ve also set the background color, border color, text color, size and family as well as added some padding to the left so the text is indented slightly into the input. Last, I’ve set the transition using the CSS3 transition properties. I’ve done this for each browser type. Basically, when something happens to this input it will take .3 seconds to transition, use an ease effect for the transition and apply that transition to all properties that have been changed. In our case, it will be width but it could include, background color, border, height, font style, you name it.

Next we will set a width in the event that the input is clicked. I’ve set this to 180px. I’ve also removed the outline (which is a default action that the browser displays when the input is selected) and instead I’ve chosen to apply a simple border to the input. In addition to setting the :focus pseudo selector, we will need to create two new classes that we’ll use in tandem with the jQuery. The first class is “resting-state.” This will be used when the page loads and after the user has interacted with the form. The second class is “shrunken-state.” This will be used when one input has a focus. This class will be applied to the inputs that are not focused.

Last, to get this to display correctly in Firefox, we need to adjust the padding slightly so the button does not overlap the inputs.

The jQuery

// CSS5 & jQuery Expanding & Collapsing Inline Inputs by Stacey Lane
$(document).ready(function() {
    $('#wrapper-newsletter input[type=text]').addClass("shrunken-state");
    //Every input starts out with the class "resting-state" as defined in the HTML. This line adds a second class, shrunken-state.

    $('#wrapper-newsletter input[type=text]').focus(function() {
        //When an input is focused,

        $('#wrapper-newsletter input[type=text]').removeClass('resting-state');
        //Remove class .resting-state from all inputs

        $(this).removeClass("shrunken-state");
        //and remove class .shrunken-state from the focused input. This leaves the focused input with no class so that #wrapper-newsletter input[type=text]:focus works correctly. It resizes it to the correct dimensions based upon the css :focus pseudo-selector and css3 transitions as defined in #wrapper-newsletter input[type=text]. It also enables the other inputs to shrink down to the value defined in .shrunken-state

        if (this.value == this.defaultValue) {
            this.value = '';
        }
        // on focus, if this objects value is the default value, then remove the default value and display nothing

        if (this.value != this.defaultValue) {
            this.select();
        }
        // on focus, if this objects value is not the default value, select the value
    });

    $('#wrapper-newsletter input[type=text]').blur(function() {
        //When an input loses focus,

        $('#wrapper-newsletter input[type=text]').addClass('resting-state');
        //add class .resting-state (this is added because we previously removed it from the focused input. If we do not add it back to the blurred input, the input remains the size defined in .shrunken-state), then:

        $(this).addClass("shrunken-state");
        //add class .shrunken-state. This reduces the input width to accomodate the increase width of the focused input.

        if (this.value == '') {
            //on blur, if the value is nothing then:

            this.value = (this.defaultValue ? this.defaultValue : '');
            //put it back to the default value. If there is text, leave the text entered.
        }
    });
});

The gist of the jQuery is that we want to apply the class “shrunken-state” to all inputs in addition to the class “resting-state” that we defined in the HTML. On focus, we want to remove the class “resting-state” from all inputs as well as remove the class “shrunken-state” from the focused input. Additionally, we want the jQuery to check the default value of the focused input. If the text in the box is the default value, we want jQuery to remove the value so the user may type without hitting the backspace key. If the text is different, we want jQuery to select the text (in some browsers, the cursor will be placed after the text). Once we’ve clicked out of the focused input into a different input, we want to add “shrunken-state” to the now blurred input and remove “shrunken-state” from the new focused input. Additionally, jQuery should check the now blurred input to see if anything was entered. If nothing was entered, jQuery will display the default text. Review the commented code above to see what each line of jQuery code does.

Download the Files

Download This Tutorial - 3.3 kB

The Professional Portfolio of Stacey Lane

Simple Vector Hearts

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 8

Removing Border from IE7 & Opera Submit Buttons

GREP Fractions in InDesign

Making it Work

GREP In Your Paragraphs

Displaying Elements at Specific Hours and Minutes with PHP

The PHP

The HTML Code

1) { echo "$startMinute Minutes! Stay Tuned!"; } else { echo "Online! Listen now!"; } ?>Broadcast begins at 1:45pm

The CSS

Download the Files

CSS3 & jQuery Expanding/Collapsing Inline Inputs

The HTML Code

Receive Updates

The CSS

The jQuery

Download the Files