JavaScript Archive

Design an iPhone App Website Template With E-Mail Signup

Design an iPhone App Website Template With E-Mail Signup

If you’ve been on the scene with iOS then you’ve surely seen some of the beautiful app websites cropping up. These have been released over the past couple of years as developers have been looking for ways to attract marketing potential. There are a lot of very standard-looking templates out there for web designers – but my hope is to tackle something new!

Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.

September 12th, 2011 Posted in JavaScript
Code a Web Magazine Style Dropdown Navigation Menu

Code a Web Magazine Style Dropdown Navigation Menu

Frontend web development has grown into a very popular niche. With the expansion of jQuery more web designers are beginning to create fantastic animations and page effects. The possibilities are limitless!

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.

September 2nd, 2011 Posted in JavaScript
Developing a jQuery Private Messaging Modal Box

Developing a jQuery Private Messaging Modal Box

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.

August 24th, 2011 Posted in JavaScript
Developing a Digg-Style Input Form With CSS3 and jQuery

Developing a Digg-Style Input Form With CSS3 and jQuery

Digg form with CSS3 and jQuery

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.

August 8th, 2011 Posted in JavaScript
Create an Awesome Zooming Web Page With jQuery

Create an Awesome Zooming Web Page With jQuery

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.

May 25th, 2011 Posted in JavaScript
What’s Better Than a Slideshow? A Triple Slideshow!

What’s Better Than a Slideshow? A Triple Slideshow!

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!

April 27th, 2011 Posted in JavaScript
Easily Create a Full Screen Photography Slideshow Website Without Flash

Easily Create a Full Screen Photography Slideshow Website Without Flash

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.

First, it’s not always easy to find a quality, free slideshow template to start from, and if you’re not a Flash developer, this could lead to significant costs. Secondly, the world is in quite the love/hate relationship with Flash at the moment, with many developers switching to JavaScript, CSS3 and HTML5 where possible.

So today we’re going to build a beautiful, Javascript-powered photography site with a full-screen slideshow. Literally all of the heavy lifting will be done by an awesome free jQuery resource so our job will be mostly customization. Let’s get started!

January 12th, 2011 Posted in JavaScript
Weekly Freebies: 10 Brilliant jQuery Plugins

Weekly Freebies: 10 Brilliant jQuery Plugins

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!

January 11th, 2011 Posted in JavaScript
Effortless Full Screen Background Images With jQuery

Effortless Full Screen Background Images With jQuery

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!

November 5th, 2010 Posted in JavaScript
Build an iPad-Themed Image Slider With jQuery

Build an iPad-Themed Image Slider With jQuery

screenshot

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!

August 31st, 2010 Posted in JavaScript
Subscribe
Membership