Rumball Motors Interactive » Technologies

Impressive web forms. From coding to validation!

admin — Tue, 30 Mar 2010 11:52:03 +0000

Quite some time ago I have published the first part of this series. Today I’ll tackle coding a good webform, styling it, client-side and server-side validating. The first part of the tutorial was extremely popular, and that’s why I chose to merge parts two and three, which anyway are closely related.PS: You’ll need some patience digesting this tutorial as it turned out to be really complex.The code I am about to present here is the one that has been used in our contact and request quote forms from our newly released web development website, just as the jQuery slider tutorial published a few weeks ago was used in our portfolio section.

via Impressive web forms. From coding to validation!.

Building a To-do List with Local Storage | TutToaster

admin — Mon, 29 Mar 2010 11:39:22 +0000

While I keep on trying to push web developers to start experimenting and exploring HTML 5 and CSS3 technologies, I will keep introducing you to them. Today we will experiment with HTML5 local JavaScript databases, a new feature lots of web developers are excited to start using. You will be walked through on how to create a simple to-do list with jQuery and local storage.

via Building a To-do List with Local Storage | TutToaster.

Purely CSS – Faking Different Color Columns | Build Internet!

admin — Thu, 25 Mar 2010 13:02:45 +0000

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser.

If you would like to see an example of this, check out One Mighty Roar – try resizing your browser and notice that neither color stops short of the window edge.

via Purely CSS – Faking Different Color Columns | Build Internet!.

How to optimize Adsense loading to make your blog faster

admin — Tue, 23 Mar 2010 17:07:50 +0000

Have you noticied how many times you have to wait for ads loading before being finally able to read the content of a website? In fact, ads such as Adsense are very slow to load, which is definitely not good for websites owners because it can result in user boredom or even worst, the use of an adblocker.

In this article, I’m going to show you how you can load your Adsense ads at the bottom of your page and then replace it using jQuery.

via How to optimize Adsense loading to make your blog faster.

A New jQuery Image Slider with 9 Transition Effects | Web Resources | WebAppers

admin — Tue, 23 Mar 2010 13:39:04 +0000

Nivo Slider is a new jQuery image slider with 9 unique transition effects. It is simple and lightweight. Nivo Slider is built with directional and control navigation. It has been tested on Internet Explorer v7+, Firefox v3+, Google Chrome v4 and Safari v4. You are free to use it under the GPL license.

via A New jQuery Image Slider with 9 Transition Effects | Web Resources | WebAppers.

Interactive Image Vamp up with jQuery, CSS3 and PHP | Codrops

admin — Mon, 22 Mar 2010 14:28:08 +0000

Today we will show you how to create an online application for giving some funny touches to an image. We will be using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.

Ok, let’s get started!

via Interactive Image Vamp up with jQuery, CSS3 and PHP | Codrops.

Visually Connect HTML Elements: jsPlumb

admin — Mon, 22 Mar 2010 12:57:10 +0000

jsPlumb is a jQuery plugin for visually connecting HTML elements on a web page.It uses a HTML5 canvas element when supported and Google’s ExplorerCanvas script to support older browsers.The styles, shapes of the wires and “the position of the connection” can be customized easily.

via Visually Connect HTML Elements: jsPlumb.

Create a Colourful Web Button with CSS :: Echo Enduring Blog

admin — Thu, 18 Mar 2010 11:25:31 +0000

Sometimes, I think that there are not nearly enough tutorials here on the Echo Enduring Blog. There are articles and freebies, but not many technical expositions (and the like). I suppose that part of the reason is that I have a tendency to write these crazy long tutorials, which take an equally crazy amount of time to compose. Those usually get posted on other sites, though, like SpyreStudios, and most recently, TutToaster.

Today, though, I hope to start changing that trend, with a relatively quick tutorial about how transform a simple HTML link into a button-like UI element using a single image sprite and some simple styles, including some pseudo CSS3 properties.

via Create a Colourful Web Button with CSS :: Echo Enduring Blog.

Colorful Sliders With jQuery & CSS3 – Tutorialzine

admin — Wed, 17 Mar 2010 10:41:02 +0000

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.Also, be sure to go ahead and download the PSD, so you can create your own colors and shapes.

via Colorful Sliders With jQuery & CSS3 – Tutorialzine.

Create A Floating Navigation Using HTML, CSS and jQuery | Creative Urbia

admin — Tue, 16 Mar 2010 10:42:36 +0000

As we were saying, jQuery is a powerful tool to use if you want to create a website. So I made this tutorial in which I will show you how to create a minimalist floating navigation using jQuery HTML and CSS of course.

Here are some files you will need:

1: Because we will use Cufon to spice up the fonts you will need to go to Cufon’s site, download the cufon-yui.js file and the generated file of your font. We used the Anivers font but you can use any font you like.

2: Now go to vTip project website and download the files. We will use them also in this tutorial.

Ok, now we have all the files that we need in order to make this navigation work.

via Create A Floating Navigation Using HTML, CSS and jQuery | Creative Urbia.