Web Development Link Library

• Custom Google search
• Google Operating System
• Finally finished developing Gertrude Cox Award
• Pueblo Construction was launched the other day
• Animator vs. Animation
• Rocky Balboa Trailer (i've watched this about 40 times AND I'M STILL EXCITED!!!)
• Firefox Tic-Tac-Toe

Random CSS Background Image

I'm flirting with some dangerous downtime right now so I figure I'll write out a blog, maybe with something useful. Here goes nothing...

Link: http://www.javascriptkit.com/script/cut176.shtml

so that's the link I came across while searching for a random background image generator. It takes a little tweaking, but works really well with your style sheet and is pretty light-weight. If you're concerned at all about users browsing with JavaScript turned off you can also define a background image in the CSS file so that will load first and then the random JS image will load (you can see it happen if you rapidly refresh the page a few times, otherwise it's fairly smooth).

I've used this a few times with very little trouble, seems to work fine cross-browser, but again, if it doesn't for some reason, you'll always have the original bg image in the CSS to mask it.

Get FireFox

Cheers,
_Tim

Base Tag & The Named Anchor

I recently ran into an accessibility problem while developing a very large site. To make development easier I used a <base> tag, but what I hadn't planned for (now that I was about 280 pages into development) was the "skip to content" anchor that is needed on every page.

After much cursing, I sat down to hack out a solution. Implementing the anchor link globally wasn't a problem (I just put it in the header include and had the anchor link jump to a div ID, rather than an physical link). This solution technically worked fine, this is where the <base> tag trouble comes into play. I 'Googled' for about 3 hours to find out that this is a fairly common problem, but there aren?t many large-scale fixes out there for it. So I sat down with a co-worker and we came up with this stuff:

Just to clarify:
With the <base> tag, we'll call it: http://www.<root>.com/, is in the header of every page; a normal anchor link "#content" will load up the page http://www.root.com/#content....every time. This is a problem on all pages, other than the index (and there are A LOT), because we can't have people clicking on an anchor and getting sent back to the homepage.

SOLUTION 1:
This is for a static HTML page...
base tag: <base href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.html
anchor link: <a href="contactus.html#content">skip to content</a>

Your anchor links should work just fine, and you can still use the <base> tag. This is a good solution (IMO) for a reasonably size site.
If you have a large PHP driven site here is the solution we came up with:

SOLUTION 2:
base tag: <base href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.php
php in header include:
<?php
    $replaceTxt = 'http://www.<root>.com';
    $anchorUrl = str_replace($replaceTxt,'',$_SERVER['SCRIPT_FILENAME']);
?>
anchor link: <a href="<?php echo $anchorUrl; ?>#content">skip to content</a>

again, I made the anchor jump to: <div id="content"> because I already had it in every page, you can also use a regular named anchor.

That's it, pretty straight forward and it works great! DON'T FEAR THE BASE TAG!

cheers,
Tim

CSS Wildcard - Solving Cross-browser Problems

Many of the problems I've noticed people having while developing a web site is browser compatibility issues between IE 6/7, FireFox, Opera and Safari. And since IE7 removed some of the old hacks we used (the !important tag and the box hack), it's become even more frustrating.

For starters, now we need to make a special CSS file for Internet Explorer, we do this by using an 'if statement' in the HTML. And that looks like this:

<link href="file.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if IE]>
     <link rel="stylesheet" href="file-IE.css" type="text/css" media="all" />
<![endif]-->

That being said, I've been using this method for a while now and noticed that the IE style sheet can get quite large. So I took a step back and tried to think of an easier way to solve the browser compatibility problems. I then ran into the CSS wildcard character. The wildcard will override all values (and browser defaults) defined within it, this is what it looks like, and it should be located at the very top of your CSS file:

* {
       margin: 0px;
       padding: 0px;
       border: 0px;
       font-family: Verdana;
       font-weight: normal;
       font-style: normal;
       text-decoration: none;
}

It will remove all default margin, padding, borders, bolding (anything you want to define) from ALL elements. These can all be redefined later in the CSS file like this (for example):

CSS3 Preview

• multiple background images, this is an OUTstanding feature to have, it should cut down div tag use a lot. I can see it getting abused a bunch too though. This, however doesn't work in IE7 or FireFox 1.5.0.6...so again, probably low usage, but very cool.
• text-shadow, exactly what it sounds like, no more need for image drop shadows on text. This, surprisingly, looks pretty good for a generated shadow, not as hard as the old one. It only works in WebKit right now, I imagine Safari will pick it up soon too.
• text-overflow, this inserts an elipsis (...) in text if it reaches a certain defined point. This is GREAT for when you want to sample text and put a "more..." link at the end. Oddly enough, this is supported by IE6+ and not FireFox 1.5.0.6
• background-size, conrtolling the size of a background image. this doesn't seem very usefull to me for things other than thumbnail images with a hover command, possibly zooming...but it's still pretty neat.
• border-radius, this is BY FAR my favorite new feature, it allows you to set the curve radius of a border, so in theory you could put a circle border around something....BUT of course, no IE support, as of right now. I'm hoping this get put in IE7 before it gets released in the Fall, but I doubt it. This works in FireFox 1.5 if you want to play around with it.

JavaScript Form Checker

I just came across this link that was sent to me about a month ago, it's very cool so I thought I'd share: Remember the Milk.

You don't have to sign up for anything, I'm posting it, basically, to show the form-checking. Up to now I've been using Dreamweaver?s form validator to check if my forms are complete. It's very easy, but doesn't t really add any *POP* to a page.

This is using a JavaScript function to check each form field to see if it?s complete and then producing a check or an 'X' accordingly. Lemme see if I can go a little deeper into that...
The JS file is here if you want to take a look at it

A quick way to get this effect would be to download the .js file, mimic the form, and then customize it accordingly. You?ll get a bunch of code you don't need, but it's a lot faster than hacking through the JavaScript.

They have a cache function called cacheDom that checks each form field if you're a repeat visitor, you might want to take that out, but otherwise, it's pretty clean script.

I really don't have anything of merit to say, just thought I'd share that link.

-Tim

ps. I have another post for dealing with browser compatibility in CSS (IE vs FF & Safari), but I'll save that for another day...suspenseful isn't it?

CSS Resources

• CSS Layout Techniques
• CSS Insider Blog
• Styling Forms
• Position is Everything
• CSS Creator
• Random CSS Imaging
• Styleboost