In This Issue...

• Introduction
• Step Right Up!
• Spanky Corners: Right Round, Baby
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks

by Cameron Adams and James Edwards

"Take Control With the Ultimate JavaScript Toolkit".

The JavaScript Anthology is collection of over 100 thoroughly-tested, customizable and elegant solutions that will show you how to add usable and accessible interactivity to your site: from slick drop-down menus, to style sheet switchers, to AJAX applications, and much more.

Download free chapters from the JavaScript Anthology Now!

Introduction

Welcome to Design View #20.

April is here, and don't internet geeks love an April Fool's Day prank? At sitepoint.com you may have come across Matt Magain's contribution to prankery, ' Build Your Own Web 2.0 Application Using Fluff and Hot Air, and no doubt many SitePoint Forum junkies got a rude shock when they were asked for their credit card details when starting a general chat thread.

My favorite would have to have been ThinkGeek's USB tanning lights. Is there anything USB can't handle?

It hasn't been all back-slapping and guffaws though. We added a new tab to the site for the first time in years. In case you're not familiar with 'Marketplace' yet, I thought I'd show you how you can put it to work for you.

I've also been working on a little CSS experiment which the guys dubbed 'Spanky Corners' -- it's rounded corners with clean markup with no JavaScript required.

It's still a little raw, but with some more polish I think it might prove handy for a lot of people. Check it out.

Cheers,

Alex Walker
Editor
SitePoint Design View

Step Right Up!

Web forums are funny things -- sometimes they develop a life and mind of their own.

The SitePoint Marketplace has developed, in only a few years, from a trickle to a raging torrent of activity. Today users are trading everything from $5 domain names to $100,000 online businesses.

What has this got to do with you, the designer?

The SitePoint Marketplace has evolved to become a brilliant and cost-effective way of generating new design concepts for your business; including logos, Website templates and even business cards.

Now I'm not suggesting that you stop designing, but most clients demand choice, and expect you to develop 2, 3 or 4 concepts for them to decide from - this is where the "Design Contests" area of the Marketplace comes in. It allows you to generate alternate design concepts cheaply and more efficiently than you normally could by keeping things in-house.

The process is fairly straightforward :

• Supply a detailed brief of what you require.
• Name your price; the prize money for the winning design. Logo designs typically go for $50-$300, while site mock-ups are more often in the $300 + range.
• Set a closing date.
• Monitor the forums as work is being submitted so that you can provide feedback and art direction when it's required.
• Select your winner and pay them their prize money.
• That's it. It's that simple!

Our own Web Services Team, SitePoint Solutions, has been obtaining some excellent results for their clients using the Marketplace, and have gone on to establish important ongoing relationships with some of the designers they've worked with there.

Are all the designs of a high quality?

No, it depends on the prize money that's being offered. You get what you pay for right? Remember though that you're only paying for the best design at the end of the contest, and if you're not happy with any of them, you don't have to pay a cent.

On the flip side...

If you're a budding designer looking to build your portfolio, gain exposure, source leads for your freelance business, or just make some spare cash, the "Design Contests" are just the thing!

It has the potential to become a valuable resource for any design company.

Spanky Corners: Right Round, Baby

If you spent time last week reading the blogs, you would probably have seen a spirited discussion on Greg-J's SpiffyCorners.com and good markup vs. getting results. Greg was even good enough to give us his views.

The executive summary: SpiffyCorners is an online generator that allows easy production of rounded corners on content boxes (DIVs). The main 'bone of contention' in our discussions, was that the curve is achieved using fairly heavy markup that only exists to make the effect work -- in this case, hardcoded empty <B> tags.

Obviously we wouldn't recommend this for exactly the same reason that most of us have stopped using TABLEs for layout -- markup was invented to make our content make more sense than plain text. Bad markup does just the opposite.

To my mind, there is an obvious reason why SpiffyCorners has caught the imagination of many despite these issues. It provides a solution that works.

While many web standards advocates (myself included) are quick to tell you what you shouldn't do, they don't necessarily always tell you what you should. At the end of the day that doesn't help you to deliver a site to your client.

With that in mind, I thought I'd experiment with a semantically-solid alternative to SpiffyCorners and share the results with you. Around the office this has become affectionately known as 'Spanky Corners'.

Spanky Corners

Here's the markup I want to start with:

<div class="rounded">

<h4>Heading Goes Here</h4>

<p>Lorem ipsum dolor ... </p>

<p>Pellentesque fermentum ...</p>

</div>

That's about as succinct as you can get.

The heading is a requirement. It doesn't have to be an H4, but it's reasonable to assume that, as a rule, you'll need an explanatory title for your content box.

The problem we've always been stumped by with rounded corners is that you need four 'hooks' for your four corner images, and there simply don't seem to be enough (hooks).

To get around this, we're going to have to brutalize CSS-2, forcing it to do something it doesn't want to -- although it will validate fine.

I've created some example pages that allow us to build a rounded box on the above markup corner-by-corner.

ProWorkflow - The Business/Project Dashboard for Web Design Firms and Freelancers!

ProWorkFlow is a web-based application that allows you to manage your projects, tasks, time, contacts, notes and more.

• Keep accurate time usage records
• Deliver projects on time, and on budget
• Organize, plan and delete jobs and tasks
• Get a global overview of company activity

ProWorkflow is customisable and expandable to suit your business and is available in two flavours: subscription account or permanent license to run on your own server.

Click here to view our Free Online Demo or start your 14 Day Trial.

1) The Setup:

Let's start with the obvious stuff. After resetting all paddings and margins to 0, add the bottom-left corner graphic to your DIV and give the DIV margins. To make the example more real-world, I've floated the DIV and limited its width to 48%, but the DIV could be full width if you wanted.

div.rounded {
background :#fffff1 url(bl.gif) bottom left no-repeat;
position:relative;
width:48%;
float:left;
margin:1em 0 10px 10px
}

The result is simple and predictable.

2) The Top-Right Corner

It's still like shooting fish in a barrel at this point, as we add the top-right corner graphic to the top-right of our H4 heading:

div.rounded h4{
font-size:1.3em;
color:#993300;
background-color :#fffff1;
background-image: url(tr.gif);
background-repeat: no-repeat;
background-postion:top right;
}

2). The Bottom-Right Corner

To nail the bottom-right corner we have to start getting crafty.

In theory, we do have some markup down there to 'hang' our corner on -- the last <p> in our <DIV>. The problem is that we've got too many of these. If we add the graphic to one <p>, we add it to them all.

So what if we did add the corner to every <p>, but we used a negative margin on the bottom to make them overlap enough to hide the corner graphic? Just like overlapping playing cards, the bottom <p> would be the only one that we could see in full (see diagram).

So if our corner graphic is 26px high, a -26px margin on the bottom of the <p> should tuck it nicely under the <p> below (see diagram).

div.rounded p{
background-color :#fffff1;
background-image : url(br.gif);
background-repeat : no-repeat;
background-postion : bottom right;
padding:1em 2em 26px 3px;
margin:0 0 -26px 25px
line-height:1.2;
}

Now although our negative margin does a good job of hiding our corners, it also obscures some of our text. That's why we need to add 26px of padding-bottom to keep it clear.

Of course if you expect that your boxes might finish with a H5, H6 or other tag, you can apply the same trick. I've applied it to the P, the H5 and the PRE tag in this example.

That's three down. One to go.

2). The Top-Left Corner

So now we're one corner short, but we've used up all our markup hooks -- the DIV, the H4, the Ps.

We've used up all of the available background image attributes (the DIV, the H4, the Ps and the H5), so we are going to have to think outside the box, rather than adding another one.

Q: What is the only full CSS2 object that can handle two images?

A: The list item. It has access to a back-ground-image and a list-item-image.

Although we don't actually have any lists on our page, that doesn't prevent us from accessing its listy specialness. Switching our H4 from its default display:block to display:list-item, temporarily grants it this miraculous super power.

Here's the updated H4 styling.

div.rounded h4{
font-size:1.3em;
color:#993300;
background :#fffff1 url(tr.gif) top right no-repeat;
display:list-item;
list-style-image: url(tl.gif);
list-style-position:inside;
}

Along with setting the list-style image as our top-left corner graphic, we have to make some other minor adjustments. The postion that our list image sits in relative to its text varies between browsers, so using list-style-position:inside to move our list image to inside the text area gives us much more control.

Load that up, and BAM! We have a happy, four cornered result in IE6, IE7, Firefox 1.5, Opera 8 and Safari 1.3.2.

Even on the older browsers things are amazingly close to working. IE5 and IE5.5 on PC, and IE5 MAC both get all but one corner perfect.

IE's Conditional Comments allow you to target only those browsers without resorting to hacks. Though it may be possible to fix the issues, for this example I'm recommending that you simply create a linked stylesheet that 'undoes' all your corners in those browsers. In my view, square corners in those oldies is no huge sacrifice.

<!--[if lt IE6]>
<style type="text/css">
/* ie5 only conditional comments */
...
</style>
<![endif]-->

Are there any issues to look out for?

Like any new method, 'Spanky Corners' has not yet been put through the mincer of everyday use. Undoubtably quirks will emerge as time moves on.

We have found that there is occasionally a funny 'jog' issue on the left side when resizing in IE6+7. Zooming the text and shrinking the browser way, way down break the corner positioning if you go far enough, but it certainly doesn't effect readability significantly.

Otherwise it seems pretty robust.

Spanky Corners: Code Generator (beta)

Although I may not be keen on the Spiffy code, Greg did a great job at showing the value in making stuff simple for people to use.

With some help from Lachlan, Kev and Tom, we are working on a 'Spanky Corners Code Generator - beta'.

It doesn't work properly -- yet.

Developing the algorithms that work in all situations is certainly more demanding than making it work in one example, however you're more than welcome to experiement with it while we finish it. I'll blog about it when it's 'battle-ready'.

Repeat: I doesn't work 100% correctly yet. We should have the bugs out of it in a day or two.

Have a play, watch it develop and let us know what you think.

P.S. Also a very big thanks to Julian and the guys at ProWorkflow for their patience as we held back the Design View to get the generator online. Much appreciated.

Cheers,

Read the blog entry:

DHTML/CSS Blog: Stylish Scripting by Alex Walker You’ve Come A Long Way, Baby… Not. (28 comments)

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!