You can build some really neat things using jQuery. The latest release bundle updates a lot of bugs and even hints at support for a new jQuery Mobile. With frontend scripting you can build practically any type of web application. But more specifically we’ll be looking into constructing a small modal box window.
I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.
Digg is one of the most popular social news networks to date. They garner a massive audience in the millions of members. Recently the company has carved a new direction with the launch of Digg v4. The entire system has been replaced with new statistics and followers/following networking.
One of the most notable changes is in page aesthetics. With the launch of Digg v4 boasts a brand new design with a unique look and feel. In this tutorial I’ll be going over how you can create your own Digg v4 style input form using some basic CSS3 properties.
Want to create a really unique and eye-catching effect for your site? How about an animation that zooms into a specific portion of the page when you click on it?
It may sound like a lot of work but with jQuery and Zoomooz.js, it’s a snap! I’ll walk you through the process step by step as we build a stunning zooming thumbnail gallery.
Today we’re going to build a web page that uses not one but three separate slideshows that come together to look like one seriously dynamic element. This effect is perfect for any designer or photographer portfolio.
Along the way we’ll be using some extremely basic HTML, CSS and jQuery. Open up a text editor and follow along to build your own!
Photography websites nearly always run on Flash. Adobe’s increasingly notorious technology simply does an excellent job of displaying imagery in a dynamic way that’s perfect for photography showcases. However, there are a few downsides.
This week’s collection of awesome free resources includes some of our favorite jQuery plugins. Utilizing these in your site designs can save you loads of time in development and will help ensure that both your code and design is top-notch.
There are a few random plugins for tooltips and Twitter widgets but most of the resources you’ll find below help with image presentation. Whether you want a 3D carousel or a fullscreen slideshow, there’s something here for you!
Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.
We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!
If you’re not a seasoned web developer, it can be quite intimidating to approach a project where your client is looking for something trendy and interactive such as an Apple-centric slideshow.
Today we’ll teach you how you can create just such a project in mere minutes using some awesome free resources from around the web. We’ll walk you through ten super simple steps so even if you have little to no web experience, this project should be a breeze!
This post will briefly point you to 27 great utilities that not only help you store your favorite snippets both locally and in the cloud, but also make sharing with others a breeze. Enjoy!
I recently came across a neat tutorial at Woorkup pointing out a MooTools feature that allows you to turn any item on a web page into a positionable element.
Today we’re going to use this technique to create a simple and fun sticky note that a user can play with and move anywhere on the page. Along the way will be using lots of CSS3 so make sure you’ve got a decent browser!
Today we’re going to finish up our two-part cu3er tutorial.
For those who don’t know, Cu3er is an awesome 3D image slider that’s free to use and easy to setup.
This section will examine how to tweak your slideshow using some of Cu3er’s many customization options. We’ll mostly be editing an XML page but don’t worry about it getting too techie. Even if you don’t know what XML is, it’s all pretty straightforward and easy to understand.
Today we’re going to build a simple web page with an amazing and free tool: Cu3er.
In this article, we’ll get the page built and the slideshow up and running. Next time we’ll return and see how to customize some of Cu3er’s many features and variables.