A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how they like, which includes the font size and the size of the screen.

Because of this, it is generally accepted that ‘em’ or ‘%’ are the best units to use for sizes, rather than ‘px’, which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.

By default the ‘em’ is a standard of the default size. For instance, if you set {font-size:2em}, you are telling the browser “make the font two times the current size.”

Using ‘em’ units can be a bit overwhelming when you first start using them, but here is a tricky bit of way to use the functionality (sizeability) of the ‘em’ unit while keeping the ‘px’ thought process in your head … you’ll have to do some math, but if you can move a decimal, you can use this:

1. start by setting your font-size in the body to 62.5%
   body {font-size:62.5%}
2. from there on out, for every element that you size (font, border, width, height, margin, padding, etc) all you have to do is divide whatever ‘px’ value you would have used by 10 and add ‘em’

Keep in mind; however, that for people who use the “text resize” feature in their browser (IE, really), EVERY element that uses the “em” as a unit of measurement will grow/shrink accordingly. So, if you want just the body text to resize itself, only use “em” on that part, otherwise, any boxes or borders or margins or padding you have set on other things using “em” will grow/shrink as well. Just a little tip.

Example:
instead of - h1 {font-size:18px}
use - h1 {font-size:1.8em} ← see, moved a decimal one place (divide by 10)

As if there was a shortage of CSS/javascript drop-down menus already, here is another one that was found not too long ago. It’s called “AnylinkCSS.”

AnylinkCSS hss probably the easiest drop-down menu implementation that we’ve worked with so far. As with every other drop-down function we’ve tried out, there are some limitations, but those limitations aren’t a big deal.

You can see it in action on a couple of our recent sites: Houdyshell & Associates, IntelliTec Medical Institute, The Academy of Health Care Professions, and a few sites that are still in production - Image Capsule, Pennco Tech and McMurry University.

HOW EASY IS IT?
Ok, enough babbling. Here’s the down and dirty:

1. Save this javascript file as ‘anylinkmenu.js‘ - our structure policy is such that every element type has its own directory in the structure: CSS gets its own, scripts gets its own, images, include, pdf, etc - so that everything is kept separate. If you don’t do it that way, make sure you modify what’s coming up next
2. Call the external script to each page like this:
   <script type="text/javascript" src="scripts/anylinkmenu.js"></script>
3. Create your navigation elements. Here, we’ll only use three nav items to keep it somewhat simple. For each new drop-down element you will have to modify the ‘anylinkmenu’ number, both in the navigation and in the CSS
4. The CSS - you’ll need to play with it to make it do what you want it to do - or we’re always happy to take your money … uh, I mean to help.

Have some fun with it. This is a fairly basic example, and there is a lot you can do to spice it up. Let us know if you have questions or comments

So we tackled this issue in PHP a few posts back, but now it’s time to look for something that ASP sites can use in a similar fashion.

This is really simple to use, modify and customize. Find a valid feed URL that you want to use, place it where it says to, follow the instructions that are provided in the comments, modify how you want each item parsed out, upload it and you’re pretty much done.

1. Get the Simple ASP RSS Parser code. Copy the entire block and place it where you want the feed to parse out on your “.asp” file
2. Get the XSL template - copy, paste and save as “news.xsl“
3. Modify the XSL file to match your site structure, and zippidy-do-dah, there you go

Let us know if you have questions or comments. There are ways to customize this and modify it to do just about whatever you need. This is definitely not a cookie-cutter script that can only be used one way. There are countless ways to implement this thing. If you want to use it, but aren’t sure … ask. We’ll be happy to help.

Have you been wanting a simple text rotation script where on every page load the given text is selected randomly? Do you want to keep the “spiderability” (SEO value) of the text - unlike javascript rotators?

Look no further as your question has been answered. Enter - Easy Rotator.

<?php
$aText = array(
1 => ‘<h1>random header 1</h1> <p>random text 1</p>’,
2 => ‘<ul><li>random list 1</li></ul>’,
3 => ‘whatever you want to put here’);

echo $aText[rand(1, $iNumText)];
?>


In each array you can put nearly whatever you want. Create entire blocks of elements, rotate a single word, rotate an entire page of content, rotate headers, etc. See it in action.

It’s as simple as putting this script wherever you want something rotated, and then modify each array item with the (x)HTML or text or images you want rotated. Feel free to contact us with any questions.

Code: See it in action
Added benefit: It will keep the “spiderability” (SEO value) of the text - unlike javascript rotators

Need to rotate some images on a page? Want to call a script from your CSS to randomly rotate background images? This sucker can do it all … as long as you’re running PHP, anyway. This script will load an image at random from a certain directory (all images from the same directory as the script is located) each time the page is loaded/refreshed.

rotator script (will open in new window)

Wanna know? Here we go:

1. Click on the link above. This will open the script as a text file in a new window.
2. Copy and paste the script in your favorite HTML or text editor, and save as rotator.php
3. Place the rotator.php file in the same directory as the images you want to rotate … ONLY THOSE IMAGES you want to rotate can be in the directory. Keep in mind the script will use any image it finds in its directory.
4. make a call to the file just as you would any other image:
   • On-page images: <img src="http://www.yoursiteurl.com/images/rotate.php" alt="" />
   • CSS background: background:url(http://www.yoursiteurl.com/images/rotate.php) no-repeat bottom center; (or whatever positioning styles you need)
5. Follow any other instructions that may be in the comments of the script, and you should be good to go.

It’s really pretty simple to use. You can even have this script in multiple directories with images used for various elements, and have tons of things rotating on your page(s) … though that may not be advisable for usability reasons - try to keep it simple.

Questions? Comments.

Source: Automatic Labs
Kudos: Dan Benjamin
Also featured on: A List Apart

First introduced to the world in 2003, Suckerfish is a handy-dandy, CSS-based dropdown (or out) for list items - and it has just a tiny bit of javascript to include (11 lines is all).

Not that this is the only CSS dropdown script, or the newest, or the greatest - this is simply the one that we’ve used the most (since discovering in mid-2004). It has been kind to us, so we’ll be kind enough to point others in their direction.

Name: Suckerfish dropdown
Source: A List Apart, HTMLDog
Kudos: Patrick Griffiths, Dan Webb

You’ve found some parsers out there, but they seem too complicated?

The solution is here (it’s actually a solution that’s been around for a few years, now), and was developed, modified and jimmied around by Tim Baxter and Jamon Abercrombie as a way to parse MULTIPLE feeds through a single, simple script.

This is really simple to use, modify and customize. Find a valid feed URL that you want to use, place it where it says to, follow the instructions that are provided in the comments, modify how you want each item parsed out, upload it and you’re pretty much done.

See the Simple PHP RSS Parser in action (generic, but in action nonetheless).
Get the code (.txt) - copy, paste and save into/as a PHP file.

Let us know if you have questions or comments. There are ways to customize this and modify it to do just about whatever you need. It is in use on at least 15 sites (that we know of), and has been customized to various levels on each one. This is definitely not a cookie-cutter script that can only be used one way. There are countless ways to implement this thing. If you want to use it, but aren’t sure … ask. We’ll be happy to help.

Based on the technology and techniques of sifR, a flash replacement for text, swifR is a flash replacement for images!

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

While sIFR uses Flash to replace boring browser text with interesting custom-rendered Flash text, swfIR uses Flash to replace boring browser images with more interesting custom-rendered Flash images. So instead of settling for plain, rectangular jpegs and gifs, you can now apply borders, rounded corners, shadows, opacity, and more to your images … dynamically, without having to edit your images or muddy up your beautiful code.