JavaScript posts

Moving Web Page Elements Using The CSS3 Translate Transform

CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we'll go through the process of translating a page element using a CSS3 transform. The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex....

Developing a Responsive Website: The Footer

At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions. Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright...

Creating and Manipulating Modal Popups

Occasionally, I have needed a web page to call a child page in order to display information or to be used in a way to maintain information that will then be re-displayed back on the parent page. I didn’t want the user to be able to get back to the parent page until they have performed some function on the child page. One solution for this scenario is to use Modal Popups.  In this tutorial, I will show how to use JavaScript’s window.showModalDialog() to create a Popup window and display information....

Using HTML5 to Determine User Location

Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser...

Responsive Widgets

Responsive design is a hot topic of web development these days, and with a simple (and now well supported) way of handling the ‘one site for all clients’ model (and I mean clients as in browsers/platforms/devices, not the people that give you money in return for a web site) it should well be. Redirecting mobile users to /m/ or some other cut-down area of your site is becoming a technique of the past. Using collections of utilities, such as the excellent 320&up, makes building responsively much...

Designing a Clean Website: Gradients

This is our third installment of how to design a clean a minimalist website. First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3.  Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3. Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage. We left off in part two after we pulled our header, navigation and main image in to our layout.  Now that we have...

Switch on With jQuery’s New Event Methods

The latest version of jQuery, version 1.7.1 at the time of writing, has completely overhauled its event system, giving us just two new methods to replace all existing event methods such as bind(), live() or delegate(). Event handling has been a core part of jQuery for a long time, but over the years the jQuery event landscape has flourished and grown, with successive releases increasing the number of methods for handling events. The new event methods on() and off() condense these different methods...

The Usefulness of the document.createElement()

The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article. Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly. This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases. It is possible...

Designing a Clean Website Part 2: The Layout

Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current.  It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date. We’ll pick up where...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns