jQuery: preloaders!

Tweet

Do we need preloaders? Maybe... maybe not. It's up to you.

Here is a short list of jQuery solutions for you.

QueryLoader2

"What QueryLoader2 does is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)
QueryLoader currently works with jQuery v1.6.4 and in IE version > 7, Chrome, Safari and Firefox."

Spinner – A jQuery Preloader Plugin

"Spinner provides a simple approach for adding and removing a preloader for your web applications. Usage is as simple as calling $(‘elem’).spinner() and subsequently $(‘elem’).spinner(‘remove’). You may create your own custom preloaders at http://www.ajaxload.info. Please note that if you use a custom preloader, you must pass in the new height and width as options."

jQuery - Preloader

"This jQuery plugin preloads css, js, html and images with visual loader, fast and very small (~3Kb)."

jQuery.Preload

"This is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation."

Seriously easy jQuery preloader

"[...] We aren’t actually going to build a preloader in the way that a Flash preloader works. Essentially, what we’re going to do is hide everything until the site is loaded. You do this by creating a div that covers the entire window, so you can’t see the site loading behind it and then when the site is completely loaded, you remove the div. We aren’t technically preloading anything, but we’re faking it and mimicking what people are used to with Flash preloaders."

jquery preloader.js

"jquery preloader.js is an advanced multi-functional preloader, that has 4(actually 5) modes integrated.
Each mode suits a different, common situation."

Simple jQuery Preloader Plugin

"After several searches for a pre-loading plugin for jQuery I came up short – they either did too much and had hundreds of options I didn’t want, or they were packaged with something else had a lot of code I didn’t need. The following plugin will allow you to pass in a selector (div, body, any other element) and pre-load all images within it, the plugin is very lightweight with only 17 lines from start to finish."

jQuery UI Preloader plugin

"The main purpose of this plugin is to show indicator that some operation is in progress. As usually, it's rotating image or something like this." 

JavaScript: create an analogue clock with canvas

Tweet

There's an interesting example buried in the MDM HTML5 pages, where we can create an analogue clock with JavaScript and <canvas>.

There's not much to say about it. What is interesting for us, is the way the clock is actually drawn.

jQuery & JavaScript: Christmas effects

Tweet

Christmas is coming and you might want to put some effects on your web page.
I have thought a lot about saying this or not, but I couldn't pass over in silence: I really hate those kind of things, but I know that some of you might be interested anyway.
If so, please look into this short list of possible JavaScript and jQuery solutions.

Flashing lights

JavaScript Christmas Countdown digital clock

Google's Christmas Doodle

Snow Effect

Snowstorm

30/11/2011 Update: Following a kind  comment from Jason, I decided to add his jQuery plugin page:
jQuery Snowfall

Compatibility: do we need to consider IE7 support?

Tweet

I recently had a interesting conversation with a friend of mine. He develops web sites and we were talking about compatibility. Or, to better put it, how many situations a developer should consider when testing a new site. We started counting browser versions, and then we considered all the possible screen resolutions. After that, we added tablets and smartphones with related browser mobile versions.
We ended up with a long list and we were quite bewildered. If you stop for a moment and think about it, developing a new site, ensuring full compatibility, is a complete and utter madness.
I tried to shorten the long list of possible situation and the first thing that came to my mind was Internet Explorer, which, we know, is the most problematic browser. My friend said that we could remove IE7 from the list. I was not so sure. Then we made a bet: let's see how many 'major' web site do support IE7.

It has been a dirty job, but someone had to do it. And I did.
I tested a lot of corporate web sites using Internet Explorer 7 in a Windows Xp environment with a 1280x1024 screen resolution. However I would like to show only the following sites, that might be worth mentioning:

1. BBC;
2. Facebook;
3. Google;
4. HP;
5. Sony;
6. Nokia;
7. Twitter.

Would you like to see the results? Ok! Follow me.

Google+ Page

Tweet

This short post just to inform you that I decided to create a Google+ Page for The Web Thought.

Please visit the page by clicking on the red G+ on the right pane and add it to your circles.

Have a nice day and keep on reading!

CSS: style your form elements

Tweet

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.

HTML: HTML5 new input types

Tweet

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

• email;
• url;
• number;
• range;
• dates;
• color.

As you can see they are quite interesting. Let's take a tour and see how they work.

HTML & ASP: form methods, get or post?

Tweet

"In forms, should I use 'get' or 'post' when defining the method?"

This was a question a friend of mine asked me a few weeks ago. I thought he was joking, and I tried to find a humorous answer in the back of my mind. Finding none (as I'm a serious guy!), I answered with the usual backup phrase: "It depends". That gave me enough time to think, search my brain database for a technical explanation, and then provide a complete and reasonable answer to his question.
The problem was that the first word which came to my mind was 'idempotent'. I ended up answering his question, without using the word 'idempotent'. And believe me, my friend was happy enough with my answer. The debate went on and we talked about the different way of using the submitted data with ASP.

My friend is not really new to programming in HTML or ASP, but confessed that he has always been confused by the two form methods. That gave me the idea to write the following post.

ASP: how to create effective date fields for forms

Tweet

Today we are going to create a date field for a form. The goal is to make it beautiful to see, easy to use and with validation. We are going to use ASP and just a touch of CSS.
The form element will look like:

Day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Month 01 02 03 04 05 06 07 08 09 10 11 12 Year 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

In the example above, I have inserted all the options manually, but as I will show you, we are going to make the values of the three option controls automatic. - Note that if you are reading this post via your RSS reader you might not see the above example in the way it was meant.

Ok. Let's start with the code.

SQL: how to update two (or more) tables at the same time

Tweet

******IMPORTANT NOTE******
Only now after a few years of comments, I understand the big confusion I generated, and I understand it's been my fault and for that I do apologize.
The query works but NOT in MSSMS: the query works in ASP or in a Ms Access environment with linked tables to MS SQL. I hope this clarify a bit...


Sometimes, when searching for an answer, we end up making things too much complicated, while easy solutions are just round the corner. This is the case of a simple task like updating two related tables with just one SQL query.

Suppose we have two related tables. The first contains user names, and the second email addresses related to the first table names.

First table ("names")

ID	name
1	John
2	James

The second table ("addresses")

ID	address
1	First Street
2	Second Street

How do we change the name and the street of the first record (with id equal to 1)?
With one simple query.

ASP: simple form validation

Tweet

Form validation is an important element in every web site. In order to be sure that the user submits data in accordance to what our code (or backend database) is expecting, it is mandatory to check the information before doing anything else.
There are tons of ready-made form validation functions on the web, especially written in JavaScript, however sometimes we might need to do something a little bit more customized.
Here I will explain the basic concept behind a form validation using VBScript in an ASP page.

CSS: the use of styles in Apple homepage

Tweet

As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.

The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.

Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.

Please follow me...

jQuery: create tabs with jQueryUI

Tweet

In order to create tabs on a web page, jQueryUI is a powerful tool and helps us to divide content into tabbed sections. The use of different pages to display appropriate information is an old technique now. It is undoubtedly faster and more efficient to show the content in tabs, even using AJAX.
jQueryUI is a unique tool, and "tabs" is one of its features.

Let's see how it works.

We need some libraries

First of all we need to link to jQuery, jQueryUI and a jQueryUI CSS. To make things easier we can connect to the Google Api library.
The base CSS:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">

jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>

and jQueryUI:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Now we have everything we need. That will all go into the head of our web page.

ASP: create an automatic email alert

Tweet

Recently, I had to create an automatic alert for a company intranet. The final user wanted to receive an e-mail - and just one email - a month prior to an expiration date. Basically I had a list of names and a related date which represent an issue date for a document. This document expires after one year and the final user needed to receive an email alert a month before the expiration date.

It looks like an easy task, doesn't it? In the following post, we are going to see the logic behind it and how to build the alert system.

Some assumptions

As usual we need to consider some things before going into the theory behind it all.
As said above, we need a table (called 'table') in our database with a date field. The date is representing our expiration date, and we call it 'exp_date'.
Then we need another field, that we can call 'email_notification'.
There will surely be other fields in our table, however, for the purpose of the following exercise, we don't really care. Let's say we have just another field, called 'name' (aside for the usual id field).
Thus, our table structure is the following:

id - int (unique)
name - varchar(255)
exp_date - smalldatetime
email_notification  - numeric(18,0) - default value = 0

That is all.