Javascript

The Fastest Way to Invoice Your Clients

How to install the new referral banners

by John Coates - August 22/2010

Been sharing the FreshBooks love? There are now also new banners to help!

We love seeing people share FreshBooks. Every time we see a tweet or a banner on a website,  it motivates us to make FreshBooks even better for you.

This week, we released some new banners that will help you earn 25% commission on the first year’s subscription revenue on your referrals. They are new and shiny but what’s really neat is that they also can now be easily coded ...


Security in the JavaScript

First, a good measure is to “Pack” the javascript so it isn’t so easily readable, as well as downloads faster. There are a lot of tools available to do this, including this one by Dean Edwards.

Client Side Sanitization

Secondly, because we are inputting data and turn it around to display immediately on the screen, it’s best to do some of that input scrubbing directly in the JavaScript. When a user enters a new list item, we’ll take two steps to scrub it. First we’ll ensure they aren’t naughtily trying to insert immediately executable JavaScript ...


AnythingSllider jQuery Plugin

Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.

Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.

This new AnythingSlider is an attempt at bringing together ...


What is Vertical Align?

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 ...


Auto-Moving Parallax Background

By: Chris Coyier on 4/6/2009

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 ...


Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do.

 

.htaccess file

AuthType Basic
AuthName "restricted area"
AuthUserFile /path/to/the/directory/you/are/protecting/.htpasswd
require valid-user

The exact path to the file is extremely important here. If you have it wrong, it will still ask for a password but nothing will seem to work. On Media Temple, my path looks like this:

/home/21410/domains/css-tricks.com/html/examples/PasswordProtected/.htpasswd

You should be ...


We visited this concept of re-sizeable background images before… but reader Doug Shults sent me in a link that uses a really awesome technique that I think is better than any of the previous techniques.

fullpagebackground

This technique and the above background image is credited to this site. Here is what this technique is going to accomplish:

  • Fills entire page with image, no white space
  • Scales image as needed
  • Retains image proportions
  • Image is centered on page
  • Does not cause scrollbars
  • Cross-browser compatible
  • Isn’t some fancy shenanigans like Flash

 

This is a very tall order, and we are going to ...


ID’s and Classes are “hooks”

We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example <ul id=”nav”>, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant ...


ie-bug

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6′s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

The Box Model

This is perhaps the most common and ...


© 2008-2010 KPSOFT INC. KPCMS