Articles Tagged

jQuery

It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name …

I’ll be speaking at the upcoming jQuery Conference. It is in the San Francisco Bay Area (Mountain View, at the Microsoft Campus) on April 24 – 25, 2010. Just check out that link for all the details. It looks …

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever …

This is an update to original Chat Room we published here on CSS-Tricks. In some ways, the technology is the same. We are going to employ PHP to talk to the server, jQuery to keep the chat rolling, and the …

These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for …

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The “30” represents speed. preventDefault ensures the page won’t scroll down.

$(function() {

   $("body").mousewheel(function(event, 

…

It is pretty common when using jQuery's .animate() function that it is triggered by a mouseEnter or hover event. This means that we need account for those events being triggered multiple times. This article goes through my journey of trying to find a good solution for this, and ultimately a plugin that does the job rather nicely.

There is an updated version of this!

The Plan

In this tutorial we are going to build a little chat program that is really easy to get up and running on any server running PHP. No database is required – …

When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you …

Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior.

html {
  scroll-behavior: smooth;
}

And before you reach for a library like jQuery …

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” …