This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save the users name and email, as well as send the actual email.

Collis Ta’eed is the kind of guy that every web designer with a little entrepreneurial spirit wants to be. He is a trend-setting designer who’s work is seen, used, and interacted with by millions of people a day on Envato’s sites like PSDTUTS and FlashDen. I would list all of the sites here, but there is just too darn many of them it would take up the whole paragraph! If Collis merely designed all these sites, that would be an incredible accomplishment. But Collis not only designed them all, but is the companies CEO and “idea guy” as well!

CHRIS: You are the CEO of a successful company that you started. You travel around the world living and working from different countries. You work with your wife and family. You get to design websites all day. Is that as awesome as it sounds? COLLIS: It certainly is pretty awesome! I’m not sure what I did to deserve such a good life, but I sure am glad that it happened. Traveling was a really neat experience, we actually decided to do it after my wife Cyan read that Tim Ferriss book “The Four Hour Workweek”. Of course in practice both of us continued working 50-60 hour weeks, so I suspect Tim wouldn’t have been very proud of us. Because Envato has been growing so quickly, we recently decided after one brilliant year of traveling that it was time to come back to Australia and really establish our Melbourne HQ. We have some really big plans for Envato and though most of our team is spread out across the globe it helps to have a core team together in one place.

  CHRIS: All Envato’s sites/businesses are all in some way focused on the design or creative world. Do you have any plans to break away from that and try something different in the future? COLLIS: I think when you get into business it’s always best to work on something you know and understand. For us the creative fields are where we came from so it has made a lot of sense to make that the core of our business. I think we are slowly branching further and further out and I think if all goes to plan next year will see us get into new areas. In particular we’re working on a lot of Tuts+ plans to expand to teaching all sorts of things. But before we get to anything really novel, we still have more than a few creative fields to explore. In particular Skellie is now working on a Cgtuts+ site to teach 3d skills which promises to be very cool!   CHRIS: You literally designed every one of Envato’s sites yourself. They all feel Collis-y to me. You also mentioned on The Netsetter that this may become a problem, as doing things yourself will only get you so far. Is that going to be a hard day when you need to reliquish design control of the sites? COLLIS: Oh yes it certainly is going to be difficult giving up the design work! I love design and I often think about how our sites should work while designing them. Nonetheless my time seems to be getting scarcer and scarcer and lately I’ve been bottlenecking the team while they wait for me which isn’t too good! With the upcoming redesign of our marketplace sites we actually got input from three great web designers - Liam Mckay of WeFunction.com, Aaron Lynch of Stoodeo.com and Kai Loon Chan of Kailoon.com. That was a really neat experience as the three of them had some great ideas that have made the design so much better. It also means I have some scape goats to blame if things go wrong But seriously, I hope we can find designers that talented to join the team later this year!   CHRIS: I’m sure the last thing you have time for these days is freelance jobs, but is there one project that if you were given the opportunity to freelance on, there is no way you could pass up? COLLIS: There sure is, I would LOVE the chance to make some awesome themes for Gmail I use it every day and was thrilled when they introduced their themes feature. Now if someone from Google would just email me to let me make something that looked awesome, I’d be sorely tempted to break my ban on freelance work! [[ ED: Are you listening Google?! You HAVE to get this man on some Gmail themes! ]]   CHRIS: I imagine you get a lot of feedback on all your sites from readers or users who try to tell you how you should be running things. How do you handle this? COLLIS: As we all know sometimes it can be hard taking feedback, especially negative feedback! But I always think I’d rather have our sites filled with people who care enough to give an opinion and we try to take as much on board as possible. Sometimes you can’t keep everyone happy, and sometimes things aren’t necessarily practical, but we do our best! The one thing that always gives me the heeby-jeebies is releasing a new design. The bigger our sites get the more people are involved which can be a bit scary. So far we’ve been really fortunate that most of our designs have gone down well. I guess as long as there aren’t any street protests like Facebook’s redesign got then I’ll be happy

Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we’ll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and quickly touch on some jQuery bonus stuff at the end.

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it’s use a little bit. The basic usage is like this: img { vertical-align: middle; }
Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does “sit inline” mean exactly? That is where vertical-align comes in.

The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage. The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. Douglas Heriot has a good roundup of methods on In The Woods of ways to do this. Baseline The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don’t line up with the lowest point of the descenders, that isn’t the baseline.

Middle Perhaps the most common use for vertical-align is setting it to ‘middle’ on icon-size images. The results are generally consistent cross-browser:

The browser does the best job it can centering the pixel height of the text with the pixel height of the image:

Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be:

Text-bottom Different from the baseline of type, is the bottom of text, where the descenders go down to. Images can be aligned with this depth as well:

Text-top Opposite of text-bottom, is text-top, the highest point of the current font-size. You can align to this as well. Note that the current font, Georgia, probably has some ascenders taller than those represented here hence the small gap.

Top & Bottom Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size. Sub & Super These values stand for superscript and subscript, so elements aligned with these methods align themselves as such:

Vertical Align on Table Cells Unlike images, table cells default to middle vertical alignment:

If you would rather see that text aligned to the top or bottom of the cell when it needs to stretch beyond the height that it needs, apply top or bottom vertical-alignment:

When using vertical-align on table cells, sticking with top, bottom, and middle is your best bet. None of the other values make a whole lot of sense anyway, and have unpredictable cross browser results. For example, setting a cell to text-bottom aligns the text to the bottom in IE 6, and to the top in Safari 4. Setting it to sub causes middle alignment in IE 6 and top in Safari 4. Vertical Align and Inline-Block Images, while technically inline level elements, behave more like inline-block elements. You can set their width and height and they obey that, unlike most inline elements. Inline-block elements behave just like images with vertical align, so refer to the above. However, be aware that not all browsers treat inline-block elements the same way, so vertical-align may be the least of your worries. That’s another story though…. Deprecated as an attribute Occasionally you will see “valign” used on table cells to accomplish vertical alignment. e.g. <td valign=top>. It should be noted that this attribute is deprecated and should not be used. There really isn’t any reason for it anyway as you can do it with CSS anyway.

When it comes to setting the size of type in CSS, you have lots of options. You can apply a “keyword”, like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course. Let’s take a look:

Keyword Valid options for setting font-size in keyword are xx-small, x-small, small, medium, large, x-large, and xx-large as well as relative keywords smaller and larger. Surprisingly enough, keyword sizing is pretty consistent across browsers and platforms. See below a test page in Opera, Firefox, IE 6, and Safari:

Note that although the they are pretty close, there are differences in where the lines break and total paragraph height. Only when one of the relative sizing keywords are used does the “cascade” kick in and the font-size of the parent element effects the child. For example, if the parent was set to medium and the child was set to large. Only large would be used to size the child element. However, if the parent was set to medium and the child was set to larger (note, larger not just large), the child would be “sized up” to be larger than the parents font size. Change the parent, change the child, hence a “cascade”. Keywords are a perfectly fine way to size fonts on the web. One of the more popular techniques is to set a keyword font-size on the body element, and then use relative font-sizing every where else on the page. This gives the ability to really easily size up or down the font size on the page (e.g. with JavaScript) and have the whole page move up and down in size consistently. However, keywords don’t offer very fine-grained control of your typography, as the choices are fairly limited. px If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it’s my favorite). On a computer screen, it doesn’t get any more accurate than a single pixel. With sizing fonts in pixels, you are literally telling browsers to render the letters exactly that number of pixels in height:

Windows, Mac, aliased, anti-aliased, cross-browsers, doesn’t matter, a font set at 14px will be 14px tall. But that isn’t to say there won’t still be some variation. In a quick test below, the results were slightly more consistent than with keywords but not identical:

Due to the nature of pixel values, they do not cascade. If a parent element has an 18px pixel size and the child is 16px, the child will be 16px. However, font-sizing settings can be using in combination. For example, if the parent was set to 16px and the child was set to larger, the child would indeed come out larger than the parent. A quick test showed me this:

“Larger” bumped the 16px of the parent into 20px, a 25% increase. Pixels have gotten a bad wrap in the past for accessibility and usability concerns. In IE 6 and below, font-sizes set in pixels cannot be resized by the user. That means that us hip young healthy designers can set type in 12px and read it on the screen just fine, but when folks a little longer in the tooth go to bump up the size so they can read it, they are unable to. This is really IE 6’s fault, not ours, but we gots what we gots and we have to deal with it. Setting font-size in pixels is the most accurate (and I find the most satisfying) method, but do take into consideration the number of visitors still using IE 6 on your site and their accessibility needs. We are right on the bleeding edge of not needing to care about this anymore. em Em values are probably the most difficult values to wrap the ol’ noodle around, probably because the very concept of them is abstract and arbitrary. Here’s the scoop: 1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

Historically I think the “em” value is based on the width of the uppercase M, but don’t quote me on that. Things start to get slightly more complicated with em’s when we start setting up more complex font sizing. Say we need a header with a larger font-size, so we set h1 { font-size: 2em; } That “2″ is essentially a multiplier of the current em value. So if the current em size is 16px, that header tag is going to turn out to be 32px. That math works out cleanly, but you can imagine that it often doesn’t and rounding needs to take place. The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn’t cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em. So why both with all this em business when it’s just an abstraction of using pixel values anyway? Three possible reasons:

The ARE resizeable in IE 6 The relationship to other sizes (elastic width sites) Em’s cascade like a mo-fo

The first one is the big one. If you basically want to use pixels but don’t like the accessibility problems, em’s may be the ticket for you. Em’s aren’t just for fonts, it’s a unit of measure that you can use for any other length (height, width, etc). Elastic width sites use em values for everything, which essentially makes the site “zoomable”, meaning that when you bump the font-size up everything bumps up all the way down to the width of the site. Em’s have a direct relationship to each other in this way. If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. That exact proportional relationship makes em values a powerful web design technique. There is one potential concern with em’s, with regards to #3. They do indeed cascade. Every em value is relative to its parents value. If you are using em’s as a straight substitution for pixel values, this can cause problems. For example, you might set both your “p” (paragraph) and “li” (list item) font-sizes to be 1.2em. Looks great for you today, but tomorrow some content is published to the site that has a paragraph inside a list item. Those two values will cascade (1.2 x 1.2) and that list item will be bigger in font-size than any of the others. No way around that, other than removing the tag. % Percentages are fairly obvious in how they work. That is, they work just how you think they will. If a parent has the font-size of 20px and the child has a font-size of 50%, it will come out to 10px. Just like em’s the very nature of percentage sizing is that it is relative. It also cascades in the same way, so the very problem described above of the list item and the paragraph item applies here as well. A popular technique using percentages for font-sizing is to set a reasonable font size on the body (like “small”) and then using percentages for everything else. This allows you to swap out that keyword in a single place in order to scale the font sizing on the entire page, which makes things like a font-resizer interface feature a lot easier.

pt The final unit of measurement that it is possible to declare font sizes in is point values (pt). Point values are only for print CSS! A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution. Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes. For good measure, the reason we don’t use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different:

In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuery) to refresh that content without requiring a page refresh.

Thanks to Niki Brown for the idea.

I am not an SEO expert. I said not long ago that I believe it’s mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should. One of the SEO principals that really seems to make sense to me, is having the most important content on the page as close to the top of the HTML markup as possible. Take a look at the web layout below. Common sense would have us order our markup logically as such:

What this screenshot doesn’t show, is that the menu is actually dropdown navigation. It is a series of nested unordered lists. The navigation code is actually 142 lines of code! That is an awful lot of “content” before a search bot would see the important stuff we want it to see. What would be ideal, is to get our source code in the order of importance of the content. Like so:

That’s easier said than done. We’ll have to resort to some CSS trickery to make it happen. Namely, absolute and relative positioning.

It all starts with the header. We’ll put the h1 serving as the page title in a wrapping div with relative positioning. Then we’ll absolutely position the h1 tag inside it, with bottom and left values. That means that if it grows, it will grow upward not downward. We’ll also give the header excessive bottom padding. This bottom padding will be equal in height to the expected height of our navigation bar. This ensures that there will be space after the page title and before the rest of the content. Then we give the page-wrap itself relative positioning, and move the navigation code all the way down to just before closing </div> tag. Then we can absolutely position the nav with top and left values to get it to show up in that gap we created in between. Ta da! We now have source code that begins like this: <body>

<div id="page-wrap">

  <div id="header">
     <h1 id="mainPageTitle">Content is King</h1>
  </div>

  <div id="main-content">

  <h2>This Paragraph Appears Above Nav in HTML</h2>

  <p>Pellentesque habitant morbi tristique senectu.....

The important stuff is right up top. For accessibility, we should include a link like this right in the header: <a class="hide" href="#nav">Jump to Navigation</a> The “hide” class does exactly that, but doesn’t use display: none, which is actually inaccessible. .hide { position: absolute; left: -9999px; top: -9999px; } Now the first thing read in a screen reader is a “jump to nav” link, which may be useful. Does this actually help? I don’t know. It seems like it could to me, but I don’t have any hard evidence. I also don’t think there is much risk on penalization for doing it. After all, this is what CSS is built to do.   View Demo   Download Files  

A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action take place was resize the browser window. Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes to make the parallax effect move without needing to resize the browser window or use javascript. Paul did an awesome job and the demo works great, but of course because it uses the proprietary css extention, it only works in very modern WebKit based browsers (Safari 4 and Google Chrome). While Paul’s example is ideally how this type of effect will be done in the future, I thought it might be cool to toss a little JavaScript in the original and get an auto-moving version out there that should work in all browsers*.   View Demo   Download Files  

How it Works Each “layer” is just an absolutely positioned div that covers the entire screen. <div id="background"></div> <div id="midground"></div> <div id="foreground"></div>

background {

background: url(../images/background.png) repeat 5% 5%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; }

midground {

background: url(../images/midground.png) repeat 20% 20%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; }

foreground {

background: url(../images/foreground.png) repeat 90% 110%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; } The background images are repeating and set with percentages. The percentages are what make the parallax effect work normally. But in this new JavaScript version, we’ll be overriding those and animating those values instead. This requires the use of the backgroundPosition plugin for jQuery, as out-of-the-box jQuery can’t animate the backgroundPosition property. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.backgroundPosition.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){

$('#midground').css({backgroundPosition: '0px 0px'}); $('#foreground').css({backgroundPosition: '0px 0px'}); $('#background').css({backgroundPosition: '0px 0px'});

$('#midground').animate({ backgroundPosition:"(-10000px -2000px)" }, 240000, 'linear');

$('#foreground').animate({ backgroundPosition:"(-10000px -2000px)" }, 120000, 'linear');

$('#background').animate({ backgroundPosition:"(-10000px -2000px)" }, 480000, 'linear');

}); </script> Note before we fire off the animation we have to reset the backgroundPosition within the JavaScript. Weird… but it’s a requirement for the plugin to work properly. Extending the length of the animation Those big numbers in the animation function (e.g. 120000) stand for thousandths of a second. So 120000 = 120 seconds = 2 minutes. Changing those numbers you can extend or shorten the length of time of animation you get. It’s not infinite though… There may be a way to get that done, I just didn’t think it all through. Perhaps abstracting the animation out to a function that could be called and then called again during the callback (or something). *The parallax thing is highly dependent on transparency. If you need it working in IE 6, check out the Unit PNG fix or the DD_belatedPNG.

Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods/players. Two use both JavaScript and Flash, one just Flash, one just JavaScript.

  View Demo   Download Files   The track I used in the demo is from an acoustic Irish punk band I was in a few years ago [iTunes link].

One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different “reason” why it’s on special. Perhaps it’s discontinued, perhaps its special pricing, perhaps it’s free shipping. Originally they wanted a special page built for a new type of discount: “rollback pricing”. We argued that in general, a visitor on the web doesn’t really care why a product is on sale, just that it is, and that it may be of disservice to split up the specials page into different pages. Instead, we compromised on leaving the specials page as a single page, but allowing the products within to be viewed all at once, or filtered by the type of special that it is. A little jQuery is always up for the job!   View Demo   Download Files  

The Markup Each block has a wrapping div. It has one class that it shares with all other blocks for common styling and a class unique to its “type”. Div’s don’t have href elements, but they can have rel attributes, which I used to store a URL. In the demo, div clickablility isn’t implemented, but the code is just commented out in the JavaScript, so you can see how to make that happen there. <div class="discounted-item reduced" rel="/store/catalog/Dryline_Markers-47-1.html">

<img src="images/discountthumb-streamliner.jpg" alt="streamliner" />

<div class="reasonbar">
    <div class="prod-title">Streamliner Field Chalkers</div>
    <div class="reason">Rollback Pricing</div>
</div>

<div class="discount-bar">
    Price lower than catalog. Save $30!
</div>

</div> The “filtering” menu is just a series of links. Each link has an ID that matches the class of the type it intends to filter by: <p id="catpicker"> <a href="#" id="allcat" class="current">VIEW ALL</a> | <a href="#" id="reduced" class="filter">Rollback Pricing</a> | <a href="#" id="freeshipping" class="filter">Free Shipping</a> | <a href="#" id="discontinued" class="filter">Closeout</a> | <a href="#" id="webonly" class="filter">Web Only</a> </p> The CSS There is nothing too tricky going on in the CSS, but I’ll drop it in here just for good measure. * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 12px Georgia; }

page-wrap { width: 690px; margin: 20px auto; }

h1 { font: 30px Georgia; margin: 0 0 10px 0; }

.discounted-item { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer; height: 79px; }

.discount-bar { padding: 10px 0 10px 150px; font: italic 18px Georgia, Serif; }

.reasonbar { padding: 4px 0 4px 150px; overflow: hidden; width: 540px; color: white; }

.prod-title { width: 49%; float: left; font: bold 17px Helvetica, Sans-Serif; } .reason { width: 49%; float: right; text-align: right; text-transform: uppercase; letter-spacing: 2px; padding: 0 5px 0 0; }

.discounted-item img { position: absolute; top: 0; left: 0; }

.reduced { border: 2px solid #A34427; } .reduced .reasonbar { background: #A34427; } .reduced .discount-bar { color: #A34427; background: white; } Random things of note:

Because the height of the page grows and shrinks, it’s best to force a vertical scrollbar to avoid jumps in horizontal centering. Image was placed with absolute positioning. Easy and sturdy layout technique for this, with no floats. Div’s have a pointer cursor applied, since in a live scenario they would be clickable.

The jQuery JavaScript Added a little opacity-rollover action. (Also, this is the area you could make the div’s clickable, see the actual JS in the example). $(".discounted-item") .css("opacity","0.8") .hover(function(){ $(this).css("opacity","1"); }, function() { $(this).css("opacity","0.8"); }); And to make the filtering work: $("#allcat").click(function(){ $(".discounted-item").slideDown(); $("#catpicker a").removeClass("current"); $(this).addClass("current"); return false; });

$(".filter").click(function(){ var thisFilter = $(this).attr("id"); $(".discounted-item").slideUp(); $("."+ thisFilter).slideDown(); $("#catpicker a").removeClass("current"); $(this).addClass("current"); return false; }); Slightly different code for the “View All” button, since all it has to do is reveal everything. In the live demo, there is also some “shuffling” going on, so that the order of the specials is randomized on every page load thanks to James Padolsey’s DOM shuffler. Similar Tutorial Trevor Davis did a very similar demo on NETTUTS a while back.

I had a unique programming challenge the other day that I thought I’d share here. It’s rather specific and probably won’t be of huge general use, but hey, it might be interesting. The idea was to have 160 characters become “selected” when you click on any letter in a block of text:

I didn’t think it was possible to “actually” select the text automatically like that, since that seemed to me kind of like an operating-system level function. I really don’t know though, correct me if I’m wrong. So instead what I set out to do what “fake” it, by applying a background color behind the appropriate characters. In the context of what we were doing, this worked fine anyway. Then those same characters were moved down into a text box for potential editing and submission. The hardest part, to me, was thinking of a way to figure out exactly what character in a string of text was clicked on. So again, I kind of cheated. I figured if I wrapped every single character in a <span> I could watch for click events on each of those spans. Just as good. jQuery as usual: var theText = $("#theText");

var theString = theText.text();

var numCharacters = theString.length;

var newHTML = "";

for (i = 0; i <= numCharacters; i++) {

var newHTML = newHTML + "" + theString[i] + "";

}

theText.html(newHTML); Now I bound (binded?) click events to each of those new span-wrapped characters. When they are clicked, the “selected” class is removed from all of them and applied to the one that is clicked. Then a for-loop fires off looping 160 times. It moves to the next character and highlights it (by adding a class): $("span").click(function(){

$("span").removeClass("selected");

$(this).addClass("selected");

var nextSpan = $(this);

for (i = 1; i <= 160; i++) {

    nextSpan = nextSpan.next();

    nextSpan.addClass("selected");

}

}); Because I also wanted to move this newly-selected text down into a text box (for potential further editing), I run a second loop inside the click function. This second loop loops through each character that is currently selected and appends it to a string being held in a jQuery data chunk. At the end of the loop, that data chunk is applied to the textarea: $("#result").data("result", "");

$(".selected").each(function() {

var oldResults = $("#result").data("result");

var newResults = oldResults + $(this).text();

$("#result").data("result", newResults);

});

$("#result").val($("#result").data("result")); Because the goal of this was to ultimately submit the characters to another URL, I made a button which would do that. When that button was clicked, it took the value of the text area, appended it to a URL and sent it away: $("#sendit").click(function() {

var toURL = "?=" + $("#result").val();

[removed] = toURL;

return false;

}); So again, rather specific and I’m sure not widely useful, but I had never seen any other functionality like this so perhaps it’ll be useful to someone in a similar spot.   View Demo   Download Files   UPDATE: Just as I hoped, someone jumped in with another (smarter) approach: Matt Wondra has a demo available here. It makes use of a textarea and JavaScript “ranges”. The only weakness being textareas inherent dumbness of not being able to grow in height with content.

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.

FAIR WARNING: This video will be useless to most of you. In many ways, this is for me. I get a fair amount of requests for “I don’t know anything about web design, where should I start?”. So I wanted to have a video that covers, as the title says, the VERY basics.

…is now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image/font replacement, “max sides” on images, and a bunch of “quickfire questions”.

The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image…

Devthought had a little CSS tip the other day that is definitely worth repeating. It’s not new, it’s just an important little trick to know. And here it is: img { -ms-interpolation-mode: bicubic; } If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn’t recommended, but of course there are always exceptions.

…and you think it’s a bad idea You think it’s a bad business move on their part. It’s going to cost them a lot of money and you don’t think it has a snowballs chance in hell of making any money back. I mused this (totally hypothetical) situation on Twitter a few days ago, and quite a lot of people had something to say about it. I was actually quite surprised, most people said do the job. My initial feeling was definitely don’t do the job, but now I’m not so sure. Thanks to everyone who responded. I kind of amalgamated the responses and feelings from the responses. Let’s take a look…

What the hell do we know? It’s their business, it’s their customers. Sure, we think we know the web, but do we really know if this idea will succeed or fail? A bad attitude up front may kill a potential job before it ever has a chance.
It’s about integrity Aren’t we doing clients a huge favor, and saving them lots of money, by saying no to a bad idea? Shouldn’t they appreciate that? How many big design studios do you know with a bunch of failure websites in their portfolio? Doing right by your client gives you integrity, and that might be why they come back time after time. Integrity can be one of our most valuable resources. Are we just robots? When we walk into a hair stylist with a picture of a crazy haircut, do they turn you away? Does a pop machine second guess your choice of Mountain Dew when you put your dollar in? We provide a service. We design websites. We got billz to pay Saying no to jobs is saying no to money. We have kids and mortgages and buckets of popcorn to buy at the iMAX. Is this any place to get philosophical? Do the job, take the money. Can a great design agency make any idea succeed? That’s the business we are in, isn’t it? Making ideas happen. Many design agencies, if asked what they do, would say that they help other businesses succeed. Isn’t it kind of like giving up or turning tail and running by saying no to a “difficult” job? How deep will the failure be felt? Is this company going “all in” on this venture? Make it or break it? This should surely factor in to our response. If you knew people could be potentially losing their jobs on this failure, that would be a lot harder situation than a little side project going under in a huge company. Where is the blame going to land? If this idea really does fail, what then? Does it flutter away in the wind? Does the company blame themselves? Or do the fingers come pointing at you? Do we tell them? Take it or don’t take it, do we let it be known how we feel about the idea?   Food for thought.

It’s a fact of CSS life that the ‘border’ of any block level element gets factored into it’s final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. (quick little video example)

CSS does provide us with one very useful property that allows for borders that do not affect layout, and that is the outline property. Outline is nice, but it is limited in that you cannot apply one side or another. It’s all or nothing. Also, outlines can only be applied outside an element. We’ll be using the regular border property to get around that to create some inner borders.   View Demo   Problem CSS

example-problem a img, #example-problem a { border: none; float: left; }

example-problem a:hover { border: 3px solid black; }

This CSS applies a border on a hover where there was none before. Layout problems ensue. Fix #1: Inner Borders

example-one a img, #example-one a { border: none; overflow: hidden; float: left; }

example-one a:hover { border: 3px solid black; }

example-one a:hover img { margin: -3px; }

This CSS applies a negative margin on all sides of the image of the exact size of the border. This pulls the border inside and causes no layout changes. Fix #2: Outer Borders

example-two a img, #example-two a { border: none; float: left; }

example-two a { margin: 3px; }

example-two a:hover { outline: 3px solid black; }

This CSS uses the outline property to ensure no layout changes take place. Alternatively, you could apply a border color that matches the background color and simply change it’s color on rollover, but this is more elegant. Thanks to Ney Ricardo Barão who got the idea from this site.

FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CMS. In this screencast, we integrate it with WordPress. We make a special page template just for products. This page template loads the necessary FoxyCart files and automatically has an add to cart button that is controlled with custom fields in WordPress.

The Steps for Integration

Build a special page template just for products Include the necessary FoxyCart files just for that template Publish pages in WordPress using special template and custom fields Build custom checkout page and use for checkout page

Special Product Page Template Not every single page on our site will be for a product, but for the pages that are, we’ll need a special template. It is easy to make custom page templates in WordPress. Perhaps the best way to start is to duplicate the page.php file already in your theme and rename it page-product.php. Then you need a special bit of commented PHP at the top of the page for WordPress to find it and know it’s a special template: <?php /* Template Name: Product */ ?> In our case, there are two special differences between a regular page and a product page. Our product pages have a FoxyCart “add to cart” button on them as well as a special sidebar. Both of these things will be controlled through custom fields in WordPress itself. Here is the guts of the new page template. Basically it just spits out the page title, the content, and then has a form which is the FoxyCart add to cart button. Notice how it pulls the values for the inputs from special WordPress functions, including pulling the “price” from the custom field: <h2><?php the_title(); ?></h2>

<?php the_content(''); ?>

<form class="foxycart" action="https://campanaceramics.foxycart.com/cart" method="post" accept-charset="utf-8"> <input type="hidden" name="name" value="<?php the_title(); ?>" /> <input type="hidden" name="price" value="<?php echo get_post_meta($post->ID, 'price', true); ?>" /> <input type="submit" name="Add to Cart" value="Add to Cart" class="submit" /> </form> Including the FoxyCart Files FoxyCart needs some CSS and JavaScript files to work it’s magic. We’ll need to load those in the <head> section of our site. But, we’d rather not load them on every single page, as they are only really needed on just the pages that are products. WordPress has conditional tags that make that easy: <?php if (is_page_template('page-product.php')) { ?>

<script src="https://campanaceramics.foxycart.com/files/foxycart_includes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://campanaceramics.foxycart.com/files/foxybox.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="https://campanaceramics.foxycart.com/themes/standard/theme.foxybox.css" type="text/css" media="screen" charset="utf-8" />

<?php } ?> Publishing Pages with New Template The title of our product populates automatically from the title of the page, but what about the price? That will be get populated with custom field data when we publish a page. Making publishing new product pages easy is the whole point of doing all this. See how easy:

Customizing FoxyCart Checkout Page Just like we made a special template for products, we can create a special template for the checkout page as well. Create it however you would like, just make sure that you include these two little bits of text where you would like the cart and checkout areas to go: ^^cart^^ ^^checkout^^ Then publish your page and copy the URL. It will be something like this: http://jeffcampana.com/checkout-template/ Then in the FoxyCart admin area, go to Templates > Checkout. You will have to opportunity enter a URL here in which to cache to use as your checkout page. ADD AN # SYMBOL TO THE END OF YOUR URL FIRST, like this: http://jeffcampana.com/checkout-template/# …and then you will be able to cache that page. Have fun with FoxyCart and WordPress!

DISCLAIMER: I don’t “really” know anything about SEO. What I do know is the folks at Google and other big search engines are just human beings like us who have created and constantly tweak the search algorithms. Their goal is to give us what we want when searching, the best possible websites relevant to what we are searching for. So let’s set aside all the fancy technical stuff and just use some good ol’ common sense. 1. Does this page have a good amount of honest information on it about the subject?

This is, by far, the most important one by my standards. I deal with businesses all the time that want to rank higher in search engines but then don’t provide any content. If you want to be the #1 search result for “ergonomic loafers”, you better start working on a bunch of written content about ergonomic loafers. Good, honest content. Not bullsh*t marketing mumbo jumbo and not keyword-soup. You need research, what they are, why they are good, where you can buy them, every last bit of expert knowledge about ergonomic loafers you can squeeze. 2. Is the information on this page well structured in the markup?

Let’s not get too technical here, but just focus on the common sense. When you “view source”, is the good content stuff right up near the top, or is it buried way down below a bunch of other non-related stuff? Are the important headers in <h1> tags? Is the title for the page something that makes sense? 3. There aren’t any stupid cheap “tricks”

Did your buddy tell you that you should put “paris hilton boobs” in white text on a white background at the bottom of the page so you could get people searching for that? Did you buy some service that promised to submit your sites to 3,253,313 search engines for ONLY $99.99! Did you put 500 keyword variations in your meta tags? Don’t. Search engines are smarter than you. They are looking for dumb “tricks” like that and may even penalize you for them. 4. Is the URL for this page clean and relevant?

You are going to have a heck of an easier time ranking higher for “ergonomic loafers” if you own ergonomicloafers.com. If your page about them is at http://aligatorarmpits.com/2453/234bps.asp?stink=true - it’s going to be a lot harder. Common sense. 5. If you were researching this subject, would you find this page helpful? Would YOU link to it?

Take a step back, read the content, think about it. Put yourself in the mindset of a totally random visitor. Is this page useful? Did I learn something about the subject? If my mom emailed and wanted to know something about ergonomic loafers, would I send her this link or would I sent here somewhere better? If I was writing an article about ergonomic loafers, would I link to this? 6. Is the website a reliable source of quality information?

You might notice when googling, uhm, any major subject, Wikipedia articles tend to be around the top. Clearly Wikipedia has established them selves as a high quality source of information. SEO compounds on itself. You will have an easier time ranking highly for a term if your site is an established and trustworthy source of information. But I did all this stuff and I still don’t rank highly?!?! Them is the knocks, kid. SEO doesn’t happen overnight. It takes a long time. Much of it is based on other sites that link back to your page, and you have no direct control over that. You just need to focus on what you do have control over, which is making your page as compelling as it can be and encourage those links.

We’ve been down the jQuery “sliders” path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider. Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun! View Demo   Download Files