Skip to main content
CSS is fun and cool and I like it.
Article

Seeing The Details

When a great musician hears a great song, what do they hear? I am not a great musician so I can only speculate. I would guess that they listen for the emotion behind the song. Great songs are great because of their delivery of honest emotion, in any genre. I also think they listen for the intangibles. They try and put their fingers on the elusive qualities and little details that make a great song great.

I think this is … Read article “Seeing The Details”

Snippet

CSS Only Image Preloading

One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up.

Technique #1

Load the image on the element’s … Read article “CSS Only Image Preloading”

Article

Automatic IMDb / Netflix / Amazon Movie Links

In this article we'll look at a way to automatically create and insert links that link out to the popular movie-based sites (or sections) Netflix, Amazon, and IMBb. We'll use jQuery JavaScript for this, so that this happens on the fly using soley the name of the movie, reducing what would be a tedious chore of manually collecting all these links into just a few lines of code.
Article

Multi-product Quantity-based Order Form

The point of this form is that users enter quantities for different products and the math is done automatically updating all the different totals: quantity total, subtotal, shipping total, and final total. Monetary formatting is kept intact with some helper functions. Foxycart is integrated to show how it might work in the "real" world.
Snippet

Get URL and URL Parts in JavaScript

JavaScript can access the current URL in parts. For this URL:

https://css-tricks.com/example/index.html?s=flexbox
  • window.location.protocol = “http:”
  • window.location.host = “css-tricks.com”
  • window.location.pathname = “/example/index.html”
  • window.location.search = “?s=flexbox”

So to get the full URL path in JavaScript:

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

A bit of a more modern way of working with URLs is the URL() global method.

If you need to break up up the pathname, for example, a URL like https://css-tricks.com/blah/blah/blah/index.html, you … Read article “Get URL and URL Parts in JavaScript”

Article

Design v6

I've been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just did it. As usual, it's not an absolute overhaul, more of a refresher.
Article

Aborting Links, Cross Browser Comparisons

The situation: you click down on a link and you suddenly realize you didn’t want to click that link. So before you release the mouse button, you move the cursor away from the link.

This is what I am calling “aborting” a link. Years ago now, I remember seeing somebody’s demo where they found some weird combination of CSS which made it so you couldn’t abort from a link. It’s been on my to-research list for a long time, and … Read article “Aborting Links, Cross Browser Comparisons”

Snippet

jQuery Sticky Footer

In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn’t require JavaScript. If the markup required simply isn’t possible, this jQuery JavaScript might be an option.

HTML

Just make sure the #footer is the last visible thing on your page.

<div id="footer">
    Sticky Footer
</div>

CSS

Giving it a set height is the most fool-proof.

#footer { height: 100px; }

jQuery

When the window loads, and when it is scrolled or … Read article “jQuery Sticky Footer”

Snippet

Put Comma Values in Numbers

This function assumes what is being submitted to it is a string, with a decimal point and two places after the decimal. To get your number into that format first, use this.

Then this function will properly comma separate the number. For example, 2345643.00 will return 2,345,643.00

function CommaFormatted(amount) {
	var delimiter = ","; // replace comma if desired
	var a = amount.split('.',2)
	var d = a[1];
	var i = parseInt(a[0]);
	if(isNaN(i)) { return ''; }
	var minus = 
Read article “Put Comma Values in Numbers”