Rumball Motors Interactive » JQuery

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.

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.

Sprite Animations With jQuery: Spritely

admin — Thu, 11 Mar 2010 15:43:46 +0000

Spritely is a jQuery plugin for creating dynamic character & background animations using HTML + JavaScript.

With the power of JavaScript, the animations can be controlled on events (clicks, mouseovers) easily.

jQuery Spritely

Animated elements can fly over the page without effecting any other element (can be ideal for floating-type banners) & the page still remains accessible.

Specially, for the platforms where Flash is not supported, Spritely can be an alternative (like iPhone, iPad).

It works in all major browsers including IE6.

via Sprite Animations With jQuery: Spritely.

A Fresh Bottom Slide Out Menu with jQuery | Codrops

admin — Wed, 10 Mar 2010 13:33:24 +0000

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.The Luna Grey iconset can be downloaded at DryIcons: http://dryicons.com/free-icons/preview/luna-grey-icons/In the downloadable ZIP I will not be able to provide them, but I kept the naming, so that you can easily integrate it.Ok, let’s start with the Markup.

via A Fresh Bottom Slide Out Menu with jQuery | Codrops.

Dynamic Drive DHTML Scripts- jQuery Image Magnify

admin — Thu, 04 Mar 2010 11:32:56 +0000

Some images are worth a closer look, which is why there’s Image Power Zoomer. It gives any image on your page the ability to be magnified when the mouse rolls over it. A “magnifying glass” that appears over the image lets the user zoom in on any portion of it as it follows the cursor around. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs. Lets take a closer look at this script’s features: Applies the zoom effect to any image on the page without adding any additional markup to it. The default zoom level ie: 2x can be changed for each image. When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction. The range of zoom can be changed ie: 2x to 10x. The size of the “magnifier” can be changed for each image.It’s time to shine the spotlight on deserving images on your site with this script!

via Dynamic Drive DHTML Scripts- jQuery Image Magnify.

How To Build An Ajax Contact Form With jQuery | thatryan

admin — Wed, 03 Mar 2010 17:20:52 +0000

Ajax is cool. I mean, as long as you use it when practical and necessary, the benefits both visual and experience wise are very evident. The days of submitting a form and being sent to a new page just to have to navigate back to where you were are passed, and sending information without page reloads is a nice touch to add to your site. You do however want to make sure you are not “Ajaxing” your entire site, but hey this is just a contact form, so let’s go make a cool one!

via How To Build An Ajax Contact Form With jQuery | thatryan.