Skip to content

Floating Divs with jQuery and CSS

Let’s take a second to talk about floating elements. I come from  the days where the only ‘float’ you could find on the web was an ad that scrolled from one side of the screen. Things have changed, for the better too. jQuery makes it easy to now float elements wherever you need. Movement is easy. I have seen this effect in tons of plugins, from CMS to CMS, and the best contain social widgets, or interactive elements. When a user scrolls on a webpage, all of the elements move away from the focus. With a div that floats and keeps absolute positioning, attention is obtained, and more importantly, action is increased.

This demo is a CSS and jQuery combo that will smoothly float a div on the page. I sifted through a few different types of floating divs, and this one seemed to be the best. There is a slight delay with the movement, to make sure the user sees the animation.

Free 30 Day jQuery Lessons

Learning new languages, or in this case, new libraries, can be an interesting process. I have read the dry, 400 page books, and found many blogs that sometimes explain things the wrong way. I can appreciate a good resource when I see one. This link is to a great video tutorial of jQuery, the JavaScript library. The video are incredibly helpful, and set up in a way similar to lynda.com, one of my favorite resources. If you are trying to pick up JavaScript, need to polish up  your event handling, and have a pretty good understanding of how to use it, this is the course for you. Oh, did I mention, its free.

jPlayer, a jQuery Media Player

The Internet and media has always been a rough relationship. With all of the ownership issues going around, embedding videos in your webpage will need more support than what was needed in the past. I remember setting up a site in my early days of development, to host YouTube videos and other content I liked. After so many posts, I found that I needed to dedicate time to check all of the videos. Numerous ones were removed by the user, and others had that goofy little sad red block telling you that you wasted a little more of your life by clicking that link.

Enter open source web development. While I still recommend keeping an eye on bandwidth, every webmaster should realize that hosting your own videos can be much more reliable. jPlayer is an attractive jQuery media player, that you can add to your site. Skin it with your own CSS and HTML. Oh and I need to make sure I mention, it supports IE6!

CSS3 Ribbons

It’s great to see someone use CSS for something other than simple styling. Web development is complex, and building what you need can be done in many ways. I’m providing an example of how CSS can be used to build elements instead of using images. In this particular case you can see a ribbon effect made using various  border properties.

While some web developers will argue that an image is much easier to make in Illustrator and paste over the image, I disagree for a few reasons. First, you must realize that in certain cases you will need this banner to be on many images. If you can think of an app on the market now that uses this same styling, way more than a few. Building this in CSS will greatly reduce load time, especially on a mobile device where bandwidth can easily cause issues. Second, depending on how your site is set up, it can be a pain to change all of the images manually. With CSS, we can simply change the color property.

I have to give a special thanks to Craig for this one. The detailed instructions are great.

Google Chrome Experiments

picture of google chrome experiments

There comes a time where you really need to see the capabilities of the modern day browser. Now with a blend of JavaScript, HTML5, WebGL and more you can see how well a browser can render. Well, how well Google’s browser will render. Chrome Experiments is a small site that hosts user uploaded experiments that range from drawing canvases to 3D interactive lathes. If you need to kill some free time, go check out the site, some are pretty impressive.

CSS3 Transformations with Westciv.com

image of westciv.com

If you have ever played with CSS3 animations, you are probably used to the never ending style sheet update and browser refresh. It always seems like a small annoyance, until around the 100th time. Well begin healing the blister on that index finger from hitting the F5 key. Westciv.com has some great tools to help you out. Their line of tools include a gradient builder, text styler, animations, and more. The builders have great functionality, and even tell you which of the latest browser versions are supported. A bookmark must.

Custom Easing with Ceaser

image of ceaserGood easing is hard to come by these days. Typically, I copy one from another source, and never put too much thought into how my animations are moving. Ceaser is a great tool to stop this lack of effort. I usually do not code too many specialized animations, but I have seen large complex images that use more than a handful of moving elements, which could use more specific easing. Regardless, I love the builder and hope this will encourage you, and me for that sake,  to make more CSS animations.

Shake It Up With jRumble

image of jRumble

Not too long ago I had a client tell me that he wanted an element to shake. After envisioning myself cursing over my computer for hours trying to create this effect, I started looking to see what was out there in the small world of shaking elements. I was beyond happy when I found jRumble, a jQuery script that does exactly what I needed. I soon put my frustration to the side on why a client would want such a thing, and got to work. The project came out great, and I was very pleased with the results. Pleased enough to make a post on the unicorn known as the shaking element.

I think I liked the concept so much because you never see this effect on websites. A simple shake on hover is great for interactivity. Imagine an alarm clock image ringing, or a phone, or a message indicator that creates a instant need for a client to click to see what the alert is. There are several properties you can change with the code, and keep an eye on the CSS that animates, it is browser specific. I also want to thank jackrugile for the clean and neat code.

JavaScript Spinners with Spin.js

spin.js image

If you are hosting any type of videos on your site, and are using JavaScript players like a good little webmaster, you probably have customized your player. Adding a unique look and feel is essential to creating your brand. I’m sharing spin.js because it can play a large part of your styled player. Create a custom spinner to show while your visitors wait for those cat videos to load. The script is also not dependent on any library, but does support jQuery. The creator is pretty fun too, you can make some really neat spinners. Who needs video anyway?

FitText – Browser Scaling with jQuery

fittext image

I know we have all heard the one size fits all website selling point. To tell you the truth there are numerous ways to achieve this goal. One could run a script to check the browser type, or another to check the screen resolution, you could even swap CSS files based on either of the two. If you would prefer to not mess around with all of that testing, you could download FitText, a small jQuery script from davatron5000. This small script will simply re-size your elements based on the parent element’s size. Try scaling the demo in your browser window down to almost nothing. This is amazingly lightweight, and that’s right, you don’t need to make those other CSS stylesheets.