JavaScript: syntax checker

Tweet

In this short post I'm going to share some really useful JavaScript syntax checker.

When programming we surely need to check what it's been done. It's better to verify the code when still in production, during the so-called test period. When published, a web site could still contain errors, but what we surely need to avoid is those annoying syntax errors.

There are specific programs freely available that we can use to do so. Here we are going to see 3 tools that we should carefully consider.

Merry Christmas

Tweet

MERRY CHRISTMAS

FROM

CSS: overflow

Tweet

Working with containers in a web page could be tricky, especially if we need to manage large text. There's a CSS declaration which we need to fully understand in that matter: overflow.

When we create a container - let's call it "box" - the overflow declaration helps the browser to understand what to do with the eventual content that doesn't fit in the container. If the container has a fixed height, what will happens to the content that doesn't fit in the box?
When the box has not a fixed height, the content will fit in any case and the box will enlarge, giving the needed space to the content. When the height is fixed, we might need to use the overflow declaration.

The overflow declaration
There are four possible values for overflow:
1) visible
2) hidden
3) auto
4) scroll

jQuery: image gallery plug-ins

Tweet

 jQuery image gallery plugins! You all know there are so many of those plug-ins, however, here's a list of the best... in my opinion...



bxGallery
"bxGallery is jQuery image gallery plugin that contains automatic thumbnail generation."

Galleriffic
"Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains."

Pikachoose
"Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things."

YoxView
"YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich."

GalleryView
"My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features."

FlexSlider 2
"The best responsive slider. Period."

wmuSlider
"wmuSlider, a jQuery responsive slider"

ResponsiveSlides
"ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size."

AD Gallery
"...It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox."

ASP: permanent redirect with HTTP 301 status code

Tweet

There are situations when we need to redirect the visitor to a web site to another place.
This is done for example when the web site is no longer updated or valid.
In order to do so we can redirect the visitor permanently with HTTP 301 response code. That is done because we need to tell the user-agent that the location is permanently moved elsewhere.
I believe you all know what HTTP headers are... or maybe we should start from there...

SQL: the power of left, right and IN

Tweet

As the title mentions, in this short article I will show you how to benefit from the use of the left and right SQL functions together with the IN operator.
Before doing so, we need to understand what are the two functions and what the operator is doing.
Please follow me and see what we can do!

jQuery: snow effects for Christmas!

Tweet

As I did last year, here is a quick collection of Christmas effects. In particular we are talking about snow effects made exclusively with jQuery.

Ready for the holiday season? Here we go:

jQuery snow falling plugin
"Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed."

jQuery font flake / snow flake experiment
"was bored one night, had an hour charge left in the laptop, challenged myself with this."

jQuery Snowfall 1.5 update now with snow buildup!

jQuery Snow
"This extension decorates your webpage with falling snow."

Beautiful Christmas Santa Snow Falling Greetings with html5 css3 and jquery
"Hey, Still using old Flash Christmas Greetings ? For this Christmas, We are Introducing a Snow Fall Animation with HTML5 CSS3 and Jquery."

jQuery: get and set information for DOM elements

Tweet

jQuery is a great tool when we need to manipulate elements in our web page.
Today I would like to focus your attention on some useful methods that allow us to get or set information of DOM elements.
We are talking about:
1) .text()
2) .html()
3) .val()
4) .attr()

Let's see them one by one.

JavaScript & XML: validate an XML document

Tweet

I think we all know how to use XML documents. For example RSS feeds are basically XML files, as well as sitemaps. Those files may be very important when managing a web site, but those examples are just a small part of the common use of XML documents. Just to make things clear, another example: when you export a Blogger blog, the file you get is an XML file.
When I've written the article on how to create an RSS feed, I discovered a very useful JavaScript snippet that helps us to validate an XML file.
Unfortunately I don't remember where I got it, but, even if I surely rearranged it, if you know the original source, please let me know so that I can give due credit to the author.
Ok, said that, let's see how to do it.

JavaScript: validate an URL

Tweet

I've already posted an article on how to validate forms with Regular Expression. But, have you ever needed to valid an URL?
We can do it quite easily using Regular Expressions and JavaScript. Specifically we are going to use the .test method.

The code
The first thing we need to do is set two variables: one is the URL to be validated, the second is the Regular Expression.

<script type="text/javascript">
var url = "http://www.google.com/";
var urlCheck = /^http:\/\/(www\.)?[a-zA-Z0-9-]{3,}\.[a-zA-Z]{2,}(\/)?$/;

JavaScript: document.lastModified with a trick

Tweet

Again another JavaScript article...
This post in fact might be interesting for some of you. We are talking about those fancy lines we sometimes find at the end of a web page where we are informed about the document last modification date. Something like:


How do we do it automatically? And... that is not an European date, is it? If so, how can we manipulate it in order to make it European?

JavaScript: check the mime type and charset

Tweet

I always underestimated JavaScript. I know it has been a problem for me, because I've really missed lots of interesting things until I decided to explore the programming language.
In the following article I will show one of the useful things we can do with JavaScript: discover the charset and mime type of a web page.
You might wonder what's the use of it. Well... as usual try to broaden your view and consider the fact that every visitor is visiting your beloved web site from somewhere in the wide world, sitting on a different kind of chair (if not standing or lying), with a different piece of technology or device, and finally (but I could go on forever) with a specific browser ... ... type and version (the mixture of the two is a deadly issue for any web developer).
Ok, said that, don't you think that knowing the mime type and charset of a page might be useful?
Let's see how to do the magic.

jQuery: cookies!

Tweet

I've already talked about cookies. We explored the way to use them with ASP, but have you ever wondered how to manage them with jQuery?

This is a very short article because I don't want re-write an already made guide...
We are talking about a jQuery plug-in called jquery-cookie which allows us to manage everything about cookies with jQuery.
We will be able to read, create and delete cookie sessions. The plug-in can manage session expiration and it can be configured in order to define a valid path for cookies.

Just go to the above page and see for yourself...

SQL Server: import a MS Access database

Tweet

As I wrote in a past article, MS Access can be used to manage databases for a dynamic web site. However, some times, it is not enough and its features can be not enough. In those cases we really need to move to a more performing software like SQL Server.
Especially in situations were large quantities of information are managed by a dynamic web site, SQL Server can be a great solution.
If you are a reader of the web thought, you know how much I am a fan of SQL Server. so in this short post I will explain how to import an Access database to SQL Server... a few steps and we will ready to go.

jQuery and JavaScript: generate and read a QR Code

Tweet

Hello everybody!
today we are going to see something really interesting that someone in the past asked me via email.
We are going to generate a QR code using a jQuery plug in and then we are going to use a JavaScript library to read the very same QR code.
What do you think, is it interesting enough?

JavaScript: dashboards with Drinks Toolkit

Tweet

Web applications are evolving rapidly. While only a few years ago we just needed to manage basic operation for - as an example - a company's  intranet, today, we are asked to create effective and attractive pages together with complex functionalities.
In order to create efficient dashboards, Drinks Toolkit is a really valuable helping tool.
It is a "Web-Based widgets to easily develop control panels and dashboards" and it includes a series of widgets each corresponding to a specific tag.

Drinks is HTML5 powered, using canvas and not needing any Flash.
It uses AJAX to gather data and it is cross browser, as long as the target browser is HTML5 compliant. In terms of simplicity, Drinks is really very easy to use, because in order to insert a widget, we just need to insert the related tag (each widget a tag e.g. <knob>).
Finally it's basically open source, thus free. In fact there are three possible options: the Open Pack which is a "pay what you want (even nothing)" option, the Business Pack for professionals and the Custom Pack (Choose what you need).
Ok, that's all for today. Go to Drinks web page and have a look for yourselves.
See you on thursday!

CSS3: use hyphens to control text flow

Tweet

It seems that I somehow discovered CSS3 lately. I am aware that recently I wrote a lot about it, but today I feel like sharing the following info.
Have you ever needed to control the text flow in web page?
With the CSS3 hyphens property we can really do interesting things.

An intro
We can use hyphens to automatically hyphenate a justified text, giving it the same flow as we can see on books, magazines and newspapers.

CSS: button generators

Tweet

Ever needed to create buttons in pure CSS?
The following is a list of the best on-line CSS code generators available.
This time is an easy post, but, as you may understand, I do need a break sometimes.
Enter and enjoy the list!

HTML5: video on a web page

Tweet

Using HTML5 in order to display a video on a web page is easy and complex at the same time.
You might wonder why I'm saying so and that's why I wrote the following short guide. We will see the syntax, advantages and disadvantages of using just HTML5 to display videos.



The syntax
Let's start from the HTML syntax:

<video width="800px" height="600px" controls="controls">
  <source src="test1.mp4" type="video/mp4">
  <source src="test2.ogg" type="video/ogg">
Your browser does not support the HTML5 video tag.
</video>

Fairly easy, isn't it? Well, maybe not...

ASP: CursorType and LockType

Tweet

With ASP we usually connect and retrieve data from a database. We do it almost every day and we use the relative code without really thinking about it. Things are working and we get what we need, however... do we really know what we are doing?
I’m talking about two particular properties: CursorType and LockType.
In my experience, when I first used ASP to open a recordset, I used the two properties without really understanding their significance. But, because I am basically a curious guy, I wanted to understand what those numbers are, why I needed to use them and why I got different results, when changing them.
Let’s see together what are those two properties.

jQuery: hide and show DOM elements

Tweet

I've recently talked with a friend of mine about jQuery. I soon realised that some common methods are not so easy to understand, especially for beginners.
That's why I decided to write this short post. We are going to see how to hide and show a DOM element. Not very complicated, but that's what beginners usually start to do the first time they use jQuery. Understanding the following tricks, will simplify the whole understanding of jQuery.
Follow me...

Web Development: Firefox 16 and the developer toolbar

Tweet

A few days ago Mozilla has released the new Firefox 16.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.

The last is what we are talking about here: the developer toolbar. Let's see what it can do.

CSS3: can we use it or not?

Tweet

Do you like CSS3? Do you think it gives you a big help in doing things you've never dreamed of?
Are you aware of what browser is supporting your wonderful new CSS?
Let's see those obscure CSS3 properties and whether we can use them freely or not...

CSS: colours!

Tweet

What would the world be without colours?
We work with colours every day, especially with CSS. But, do we really know what are all the available colours values types?
Well... following the previous post about measurements values - drums roll - here we go with colours...

CSS: measurement values

Tweet

Have you ever wondered what pc stands for in a CSS file?
Measurment values in CSS can be different and they usually have different use.
It is quite normal to use pixels or percentage and I believe we all consider them the most important. However, when for example we are working on a fluid or responsive layout, we might even need other kind of measurment values.

Let's see them!

ASP: the InStr function

Tweet

One of the most used functions in ASP is InStr.
In this short article we are going to see how to use it.

The Syntax

The InStr function has the following syntax:

InStr([startOfStr,]stringSearched,search[,compare])

where:
startOfStr is optional and it specifies where the search will begin. By default is set to1 (first character of the string). It is required when compare is used.

ASP: how to get a file extension

Tweet

While we have already seen how to upload files and how to work with the Scripting.FileSystemObject, today we are going to see how to get a file extension, for example before authorising a user to upload a file to our server. We all know very well how important is security when working with the file system objects: for example, we don't want the user to upload executable, or other potentially malicious files on our server.
Said that, we can create a short ASP function to check the file extension, and grant or deny the upload.
Let's see how...

ASP: how to keep track of downloaded files

Tweet

Today we are going to see how we can keep track of downloaded files in a web site.
We normally link files with an hyperlink. The trick in this case is to pass the file information to another ASP page and then - after "taking note" of the relevant information - initiate the download.
Ready to see the code? Follow me...

SQL Server: SQL Server maintenance solution

Tweet

Today we are going to see a wonderful set of utility, we might need to manage our SQL Server.
We are talking about SQL Server maintenance Solution.

"The SQL Server Maintenance Solution comprises scripts for running backups, integrity checks, and index and statistics maintenance on all editions of Microsoft SQL Server 2005, SQL Server 2008, SQL Server 2008 R2, and SQL Server 2012. The solution is based on stored procedures, functions, the sqlcmd utility, and SQL Server Agent jobs. I designed the solution for the most mission-critical enterprise environments, and it is used in many organizations around the world. Numerous SQL Server community experts recommend the SQL Server Maintenance Solution, which has been a Gold and Silver winner in the 2011 and 2010 SQL Server Magazine Awards. The SQL Server Maintenance Solution is free."

jQuery: dNotify - A simple user notification plugin for jQuery

Tweet

Today we are going to talk about dNotify, a simple user notification plugin for jQuery.
The way this simple plugin works is very interesting. Because I usually hate when popup message start to - well - pop up all over the web site, I've found dNotify quite unobtrusive. Moreover, we should consider the use of dNotify in web applications, where we do need to interact with the user more than in other situations.
What makes the plugin almost unique is the fact we can control everything about the notification.
Let's see how we can use it.

IIS: customised error messages

Tweet

Hey everybody! Today we are going to work on IIS, and give those boring error messages a new look.
Customising error pages is an underestimated thing by most web developer. However, as you may understand, it can really make our web site different, and - for example - prevent visitors from going away.
In order to customise the error pages we need to use IIS Manager on the web server. If you're not the server administrator, you can always ask for help. If your web site is hosted somewhere by some web hosting company, well... check if you've access to such configuration from your web site control panel (if you've such a tool) or ask the company directly.
Now... let's see how to customise error messages.

CSS: a shadow on just one side of a box

Tweet

The following trick is quite interesting: we are going to create a box shadow only on one side of a box with CSS.
Just to be clear, something like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I just added a white background to make it more clear...
Do you like it? Let's see how to do it.

CSS: Firefox 16 and prefixes

Tweet

I don't know if you are using Firefox or not, but the following information are quite important to any web developer.
We are talking about some CSS3 properties which are now supported by Firefox with prefixes.

I've already showed a way of removing those annoying prefixes from our code in a specific article, however it seems that the new version of Firefox (the 16th) will get rid of some of them.

According to Paul Rouget (who work at Mozilla) there's an unprefixing work in progress for Firefox 16. Specifically they are going to remove prefixes for:
- CSS3 Animations
- CSS3 Transitions
- CSS3 Transforms
- CSS3 Gradients
- IndexedDB
and probably for calc() as well.

What's in for us, web developer? A possible nightmare if we have been not very careful.
In fact in the near future, the unprefixed properties will be the only one supported by the browser. It means that we are facing a potential complete review of our CSS code. If we forgot to use unprefixed properties, the prefixed ones will not work. And the nightmare is not finished: what about users who don't update their browsers?
We need to consider all possible situation. If in the past we had to use prefixes for Mozilla and for Webkit, now we have to be sure the unprefixed property is there as well.

I'm sure that if you're reading The web thought, you already know how important is to plan your code. And if so, you have already taken into account the possibility of unprefixed properties.
If not, well it's better to start worrying and to start planning a review of your CSS code.

The web thought

Tweet

The following graph represent the growth of hits for The web thought. I know it's not very reliable (it's taken from Blogger statistics) but it visualises how things have changed lately.

Obviously a big thank to all of you!

My new job is keeping me away from the blog lately and I still find difficult to find time to dedicate to new posts. I will try to put my best efforts in keeping The web thought updated with new articles... so stay tuned!

DOM: the document.getElement[s]By

Tweet

I can feel that the summer is almost over and it's time to get to serious things again.
In the following post, we are going to see how to manipulate the DOM elements with document.getElement[s]By.
As you may know we have different way of manipulating DOM elements and here we will see all of them:
1) document.getElementById;
2) document.getElementsByClassName;
3) document.getElementsByName;
4) document.getElementsByTagName;

As you can see there are 4 possible way of using the document.getElement[s]By[something].
Are you ready?

DocHub: a reference to almost all programming things

Tweet

Today I would like to share a web site I recently found and which might be of interest for many of you.

The place is called DocHub - Instant Documentation Search and has references to all things in programming CSS, HTML, JavaScript, DOM, JQuery, PHP and Python.
Well, as you can see ASP is not there (while there's PHP and Python) but the resource is really incredible and it is a quick and complete guide to the above programming languages.

The site is made of two panels: the left one allow us to search the wanted term (and it's a free search box), while on the right panel the searched information are made available when selected.
Believe me when I say the database is very well done and it has many valuable information either for the experienced programmer or the newbie.

So... what you're waiting for? Go there and have a look for yourself!

Neil Armstrong

Tweet

.

jQuery: extract the page title and URL

Tweet

Sometimes we need to obtain the page title and URL that the user is viewing. This might be useful for different reasons: for example just to create breadcrumbs with customised menus, or simply because we need to gather where the user is.
We are going to use jQuery in order to do that.
Please follow me in this short example.

ASP: database connection strings (basic)

Tweet

After a few days of deserved rest, here we get back to work! No that I want to, but I'm sure you are all waiting for new posts ... ... ... or not?

In the following short article I would like to list all possible database connection strings, just in case you need them in your projects. We will see just the basic way of connecting to data sources, so keep in mind that specific additional security parameters may be used, in case you need them.
Ready? Then please follow me...

ASP: not installed by default on IIS

Tweet

As almost all the web thought readers know, I am a long time ASP fan - and as I can see from your comments, many of you feel the same way.
With the most new (!) MS operating systems, when we install IIS, classic ASP is not included by default. We are talking about IIS7.0 and 7.5 here.
Accustomed to having ASP automatically installed, when we see a HTTP 404 error on our browser the first time we browse our beloved ASP web site, we remain completely lost. That happened to me in the past, because I couldn't imagine the real situation behind it.
Is MS trying to put ASP aside? I don't think so, but surely they are trying to promote .NET in any possible way.
Ok. If you don't know how to install classic ASP in IIS and your great .asp pages are not shining in all their glory, here you will find a quick and swift solution.
Follow me...

CSS: Less!

Tweet

I don't know if you are already aware of LESS. If not, you will probably find it quite interesting. In fact if you're programming using CSS a lot, LESS is a powerful add on which will make things easier for you.

"LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino"

If you are intrigued by LESS and don't know about it already, please follow me...

Web Development: Adobe Brackets

Tweet

As I told you in my last post, I'm actually away from my beloved desk at work. I'm on vacation for a while, but to keep your attention high, here are some interesting news for those of us who like to explore new way of writing code.
We are talking about Brackets, a new code editor by Adobe. How is Brackets different from other editors? Well... as a start:

"[...] Brackets [is] a code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript."

Not bad eh?

Interested in more info?
Well, just follow the above link and read the "read me" section... There, you will find everything you need to know.
If you have already used Brackets, just use the comments section below to share your experience...

... I'm not dead yet

Tweet

Dear all,

I must say I'm not dead yet...
Lately, I had a lot to do at work, and I'd not much time for the blog. However, tonight I'm going on vacation and I will have plenty of time to update the web thought... or I hope so...
Anyway, stay tuned for more articles and see you soon!

SQL Server: linked server

Tweet

When working in a MS SQL Server environment, it is sometimes really useful to connect to another DBs. Those databases can be on the same machine or on the net, it doesn't matter. We can connect to those data sources using linked servers in MS SQL server.
In this article we will see how to do it.

CSS: menu generators

Tweet

We all like to build CSS menus from scratch! However, sometimes time is not enough and even related costs are too high. If you need a helping hand in creating a good CSS menu, here's a collection of online tools which will speed up the developing process.
I hope you find it useful!
Here we go, my friends...

Strange requests for an ICT manager

Tweet

As you may already know, I have changed job. In my previous position, I was ICT manager and strange requests were ordinary every day.
In this post I will list the strangest and funniest. I believe that all my previous colleagues won't care, and probably will laugh thinking about them. In any case, I don't want to embarrass anyone, so I won't tell who was the person asking and the related company. If anyone thinks differently, please let me know and I will remove the related parts.
Ok, ready? You won't believe what you will read...

Jon Lord

Tweet

R.I.P.

JavaScript: avoid frames

Tweet

There's one thing that I really can't stand: when, redirected from a site, the destination page is included in a frame. You surely have experienced the situation and you may understand how much I hate it.
Anyway, there's a quick and easy solution for that using JavaScript.
In this - very - short post, I will show you how to do it.

CSS: grouping and nesting

Tweet

One of the basic things to know about CSS is how to select elements in a page. However, not many of us know how to do it efficiently.
In this short post, we are going to see how to group and nest CSS selectors.

Happy Birthday to the Web Thought!

Tweet

Today, the web thought is two years old.
It sounds incredible even to me. But here we are.
In the past two years I have published more than 300 posts and I must say I have received a good response from visitors. At the moment the blog has had more then 120.000 pageviews still counting.
I have received many kind email, from people asking for help. Some just said thanks for the articles, some needed help badly (and said thanks afterward!).
Some comments to articles were great (I think about the comments in ASP: why am I still using it? ), some interesting... some difficult to understand (!)

Unfortunately, I cannot put the time I would like to put into the writing of new articles. My new job is quite time consuming, and when I get back at home, my two children drain the last drops of energy from me.

I've had some help from Ben who wrote a great post. But that's not enough...

We can still build a new ASP community, where we can share our experience! But that means I need your help... again...

Anyway. I will put my best efforts into the blog. Despite the job and family obligations.
So let's dive into the web thought third year!

Oh... by the way... A BIG THANK TO ALL OF YOU! Keep on following the web thought!

ASP: how to use datediff

Tweet

As I said in my last post, today we are going to explore a VBScript function called DateDiff. There's not much mystery behind it, in fact, as the name says, DateDiff calculates the difference between two dates. The resulting value can be in different format and, generally speaking, the function can be used in many situations.
let's see how it works.

ASP: how to use dateadd

Tweet

ASP is a powerful tool. Here, as usual, we are talking about a VBScript function that let us manipulate dates: DateAdd.
Whenever we need to perform operations on a date, we can benefit from the use of the this function. In the following post we are going to see how to use it.

jQuery: the evolution of jQuery

Tweet

jQuery, the famous JavaScript library, today is a web development standard.
Started in 2005 by John Resig, the library gets to a 1.8 version (still in beta while I write) with many new features. Today jQuery is used by major companies in their web sites, and many web developers include the library in their projects.

CSS & ASP: let the user choose the style

Tweet

When we create a web site, we usually decide the look of it and the way the visitor is actually experiencing it. Sometimes we might need to create different look for the same site, especially if we are dealing with specific groups of users. I'm going to explain in a simple way how to let the user choose the style of the web page according to its needs. To do so, we are going to use CSS and ASP.

Web Design: the good use of white space

Tweet

White space in web design is, in my opinion very important. The correct use of it can really make a difference.
In this short article, I would like to share my ideas on the good use of white space in web design. What I write here is my personal opinion, and it comes from years of web design. I may have read the following things somewhere in the past, but I truly don't remember where and when. So, if you find something that you have already read somewhere, please remember the above.
Now, follow me, and don't forget to share your thoughts.

jQuery: what if Google Libraries API is offline?

Tweet

When we build pages with jQuery, we have two possible way of including the library.
First we can actually save the .js file in a specific folder of our web site and then include it directly.
Another way is to use the Google Libraries API deposit and get it from there.

But what if the GLA is not available? In those cases some functionality might be lost.
Here I show you how to create a proper fallback.

CSS: the resize property

Tweet

With the introduction of CSS3, one of the new properties available is resize. With it we are able to make an element resizable vertically, horizontally or both.
We have to take note that the property is available only for Firefox, Chrome and Safari. For those browsers, some elements like the textarea are considered resizable by default (and you may have already noticed that).
Let's see how to use it.

iPhone: web design and web development apps

Tweet

Do you like your iPhone so much that you take it everywhere and play with it every spare moment? Are you a web designer and/or developer? Well, here's a list of interesting iPhone apps that you should have.

Enjoy!

JavaScript: smooth scroll to the top of the page

Tweet

If you have long pages, it is quite clear that a user will scroll your pages and eventually reach the end of the content area. In some case, however, menus or other relevant elements of the web site will stay at the top of the viewport. How do we create a link which will scroll smoothly back at the top?
We can use a small JavaScript function. Here I explain how...

Web Design: Designers Toolbox

Tweet

Today I will share a very useful web site called Designers Toolbox.
As the name says, on the site there are different interesting tools making the life of a designer easier. Keep in mind that it is not just for web designers, in fact it contains information even for general design.
The list of the tools includes:
-  a lorem ipsum generator;
- web safe areas;
- HTML characters;
- banners sizes and formats;
- how to use fonts for the web.

Add to the above, useful info on envelope sizes, folding methods, paper sizes and so on.
The site is very well done and easy to navigate, with a simple design that will make the visitor curious.

I believe you might find the resource interesting... so have a look and let me know.

SQL Server: useful query for DBAs

Tweet

If you are a Database Administrator and you work with MS SQL Server, there are some useful queries you could use to check how things are going with your databases. Being always aware of what's going on is very important, and in some cases a good control panel with appropriate queries can be developed just to quickly display the databases status.
We are going to explore some interesting administration queries. Just select those that you might be interested in and add them to your personal control panel.

It's a new day!

Tweet

Today it's my first day at a new job.
As I said last week, I'm starting a new adventure in a completely new and unknown place.
Wish me good luck and keep on following the web thought.

"There are those who think that life has nothing left to chance take. A host of holy horrors to direct our aimless dance.
A planet of playthings, we dance on the strings of powers we cannot perceive.
"The stars aren't aligned, or the gods are malign..."
Blame is better to give than receive.
There are those who think that they were dealt a losing hand, the cards were stacked against them; they weren't born in Lotusland.
All preordained, a prisoner in chains, a victim of venomous fate.
Kicked in the face, you can't pray for a place in heaven's unearthly estate.
 
You can choose a ready guide in some celestial voice.
If you choose not to decide, you still have made a choice.
You can choose from phantom fears and kindness that can kill.
I will choose a path that's clear, I will choose freewill.

Each of us... a cell of awareness, imperfect and incomplete.
Genetic blends with uncertain ends on a fortune hunt that's far too fleet."
[Rush - Freewill 1980 lyrics by Neil Peart]

JavaScript: select all checkboxes in a form

Tweet

A common feature in many web site is the possibility of checking a series of checkboxes in just one go. For example, when managing emails in a web site, we can allow the user to select a bunch of messages and move them all together.
How can we create such a toggle all button?
We are going to use a simple JavaScript function. Follow me and see how...

CSS: Making background image fit any screen resolution (revised)

Tweet

After the great success of my previous post "CSS: Making background image fit any screen resolution" I would like to share a new version of the same.
The following is just a revised post, so basically it contains the same code, but with a twist.
The point is that many readers have asked me how they could have a scrolling page while the image stays stretched and fixed.
Well... I suppose you could get there and find how to do it by yourself, but I thought I could share it anyway, maybe for those of you that are not really experienced enough already (time to grow ladies and gentlemen - I'm joking... obviously...). We are going to use a few CSS lines and two HTML tags.

Ok, let's get into it!

Happy...

Tweet

...Towel Day!

and don't panic! 

p.s. If you don't know anything about it go here.

JavaScript: avoid double submit in forms

Tweet

When working with complex forms, a developer's nightmare is the double submit of data. There are many users that double click on links, buttons etc, as if the browser was just like their desktop. If a user submit the form data twice, it could be that we will gather information twice, creating redundant records in our database.
There's a simple solution to that, and today I will show you how to do it with a little JavaScript function.
Follow me...

The future of The Web Thought

Tweet

Things change.
Lately the web thought has reached the 100.000th pageview while the new Blogger policy for country specific URLs has tragically hit the overall visitor number.
The blog has some returning visitors and regular readers, but most visitors are just passing by, looking for immediate answers and nothing more.
As I said, things change. And even my commitment for a ever growing blog is changing. I do love what I've done for the web thought, and I really appreciate when some of you has shared their opinions, ideas and thoughts. Sometimes you have thanked me, sometimes you have shared your solution, sometimes you've just showed your doubts and critical opinions. Well, in the end I really appreciate it, in any case.
Three posts every week is a big effort. When I started the blog almost 2 years ago, I thought it was just enough. Today I think it is too much, without help.
I've asked for your help in the past and Ben Rogerson has surely contributed with his article, however it's not enough for me.

Things change and I am ready to move on. I'm ready to change job and in some way change life. It might be that the web thought will change as well, because I don't really know what will happen in the near future.
Keep on following the blog, and rest assured that I will try my best to keep it alive.

ASP & jQuery: linked list boxes with AJAX

Tweet

Today, I would like to share a quick and easy solution to link 2 list boxes with jQuery and AJAX.
Situation: we have two list boxes. One (number) is already populated. The second (letter) is populated according to what is selected on the first list box, via AJAX (not reloading the page).
We need to build two ASP pages.
Let's start and have fun!

Just for fun: the restart page

Tweet

Would you like to see how old Operating Systems managed system restart?
The Restart Page is a collection of simulated OS where you can see how they behaved when restarting the system. It is more complicated to explain than to see.
Just go and have a look! You will take a journey through time and enjoy the good old days...

Web Design: a collection of progress bars

Tweet

In the past I've published a post about developing a progress bar/indicator for ASP pages. In that article we used a small rounded gif to make the user aware of the fact that something is going on and information is gathered.
Today, for your joy, I want to share my collection of animated gifs that can be used as progress bar. Some are simple, some are a little bit bizarre and some are a little bit intrusive.
You can choose the one you prefer, and use it on your pages. I believe they all are copyright free, but if you recognized your copyrighted work here, just drop a line and I will give credit to you or remove it, if you prefer.

Here we go... the great progress bar parade! (this post is some kind of a joke or not?)

JavaScript: set image height according to viewport

Tweet

I've recently had to deal with a strange situation in a web project. I basically had an image in the home page which filled roughly the 60 percent of the viewport. The image was responsive and it was adapting to the browser window size. The problem was: the image was resizing following its width and it was not shrinking after a certain point. The result was that when viewed with a 16:9 monitor, the image was somehow too tall to fit the screen and the annoying vertical scrollbar made its appearance (which was meant, for the rest of the pages needed it).
Solution? Well, I decide to use JavaScript and specifically window.innerHeight in order to control the image height according to the viewport.
Before getting into the actual code, I need to explain some things, so bear with me and be patient.

Blogger: prevent new country-specific URLs

Tweet

As you may have noticed, the people of Blogger have decided to implement a new URL system. Basically, the blog URL is changing to a country specific domain based on the origin of the browser request.
To simplify it, if you visit the web thought from the UK, the original blog URL (which is thewebthought.blogspot.com) will be changed to thewebthought.blogspot.co.uk.
And that is happening for each country.
As a result, the new country specific URLs have, among others, a great impact on blogs traffic statistics. However there's a solution which is quite simple and which I explain in the following post.

CSS: create boxes with arrows

Tweet

Today, in this short post, I would like to show you how to easily create something like the following box:

The Web Thought

Isn't it great? We can obtain it with just CSS and a simple div.
There's a good tool that can create all the needed CSS and all you have to do is create the div with a class="arrow_box" and see the result.
Please visit CSS arrow please and see the magic.

Short post for busy days... see you next time.

CSS: clip your image or a container

Tweet

Images are a important part of a web site. We know how to correctly place images, how to resize them, but how many of you know about clipping?
An image can be absolutely placed and clipped just to fit its container... with just a line of CSS.

An example?
Well, let's see the following image:

And now we try to clip it.

Can you see what's the effect?
How does it work?

ASP: avoid SQL injections

Tweet

If you work a lot with ASP and SQL, you might already know about SQL injections.
It's quite clear that every time we offer a visitor the possibility of filling a form (whatever its purpose may be), there's a security risk for our database. Basically, an attacker can insert some code in a form element, which will serve as a breach, allowing access to data stored in the database.
How that's done is not the main topic of this short post, however we should be aware of the fact that those threats are often used to update, delete and insert data, or in worst cases, they are used in order to gain access to reserved areas of a web site.
In this article, we are going to create a small VBScript function to avoid SQL injections.

JavaScript: asynchronous loading

Tweet

JavaScript is an important part of web developing. We heavily rely on JavaScript library and more than often we use external reference to load js snippets. In order to link an external js file we usually insert the following code where needed:

<script src="http://externalDomain.com/script.js"></script>

If the externalDomain is someway busy or down, our page will hang, waiting for the externalDomain. The page will eventually be loaded and displayed when the resource becomes free. Worst case scenario: the externalDomain stays busy and our page stays completely blank.
There's a solution to the above issue: using asynchronous loading and here I show you how to use it.

Exchange: delay the startup

Tweet

The last time I had to change the company server hardware, I decided to use a virtual domain controller, while the Exchange Server remained on the physical machine.
Upon boot, Exchange couldn't find the domain controller and that gave me a lot of trouble. I needed to delay the Exchange Server service enough to allow the virtual DC to boot and be ready.
How can we do that?

Follow me and I will explain it to you.

CSS: IE hacks

Tweet

In March last year, I've published a post about CSS conditional statements. The article explains how to create conditional statements and load specific stylesheets for specific Internet Explorer versions.
We all know that, in order to guarantee a cross-browser full compatibility of our web sites, the above solution gives us a possible clean way out of the problem.
With that in mind, there are situations when we don't really want to create different stylesheets for each version of IE, and a simpler solution would be preferable.
Those are the cases where we can use the famous IE CSS hacks.

jQuery: how to use it only for mobile

Tweet

Developing responsive web sites is not always easy. We have seen something about it with media queries, but that was aimed to managing CSS stylesheets. Today I'm going to show you how to deal with jQuery.

I've found the following trick somewhere on the web, but I don't remember where, so if you are the author please leave a comment and I will give you credit for it.

Let's try to clear up a bit the situation. We want to trigger some jQuery or, generally speaking, some JavaScript code just when the visit is coming from a smartphone. Because we know that those devices mainly have a screen width of 480px, we are going to use that as condition.

VBScript: how to schedule the opening of an ASP page

Tweet

Following an exchange of ideas with Still_ASP, a loyal reader of the web thought, I thought to write something about scheduling events on a Windows server.
Sometimes we might need to trigger some events independently from the actual opening of a page or a specific action taken by a user. If nobody is browsing your page, how could we trigger an event anyway?

To do so, we need to use a little trick that I will shortly explain.

CSS: backgrounds with CSS3

Tweet

As I can see from the web thought statistics, there's a increasing interest in how to manage backgrounds with CSS and specifically with CSS3. So I decided to write down the following short tutorial. We are going to explore three interesting CSS properties: background-clip, background-origin and background-size.
I know, I've partially covered the subject in another post, however here we are going to see it more in depth.

Are you ready? Ok then, follow me...

CSS: how to forget about prefixes

Tweet

Writing CSS stylesheet today can be a nightmare. With the high number of specific browser prefixes, we might end up banging our heads against the wall in the effort of not forgetting how to be sure our code is cross browser compatible.
Just to make things clearer: let's consider the following CSS:

.container {
  -moz-border-radius: 4px 0px 0px 4px;
  -webkit-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
  -webkit-box-shadow: 0 0 4px #9c9c9c;
  -moz-box-shadow: 0 0 4px #9c9c9c;
  box-shadow: 0 0 4px #9c9c9c;
}

jQuery, JavaScript & ASP: barcodes resources

Tweet

Following a brief exchange of thoughts with Carlo (one of the web thought readers), I have decided to publish a list of resources aimed to the creation of Barcodes. Originally, Carlo wanted to insert a barcode in a PDF document using FPDF, however the subroutine he found generates a HTML table that is almost impossible to embed in a PDF with FPDF.
Other solution are possible. The point is to create a Barcode image, save it on the server, and then insert it into the PDF. I haven't explored the above idea, but I think that the following resources might help some to accomplish the task.
Here's the list:

Barcode Coder (jQuery)

jQuery-Barcode (jQuery)

Pure ASP Barcode Generator (pure ASP)

ASP Barcode Script (pure ASP - Thanks to Carlo)

Barcode Generator (JavaScript)

Creating a Code 39 Barcode using HTML, CSS and Javascript (JavaScript)

Javascript Code128 Barcode (JavaScript)

Web Development: compress your code

Tweet

When developing web documents, we should always take a close look at the size of the resulting code. While it is very important to keep things minimised in terms of file size, sometimes it's not easy just applying the usual rules, tips and tricks.
It is well known that, for example, it is a good habit to compress jpgs, and images and photos in general. At the same time, it is advisable to use minimised JavaScript libraries, such as reduced versions of jQuery or jQuery tools and plugins.

But sometimes, following all those simple rules could be not enough.
In those cases I've found an online tool which might be used to compress and minimise our code: HTML compressor.

Rush: new album on the way!

Tweet

Rush - Clockwork Angels

ASP & CSS: dynamic style rules for database items

Tweet

If you work a lot with ASP and get data from databases, you might have been in need of creating different CSS rules for each item in a recordset.
We can create dynamic CSS rules with a simple loop, assuming we know the number of items to which we will apply the rule. The point is that we don't know how many recordset items we will get from the database, but we can create rules according to different situation, as I will explain shortly.

Now follow me and see what we can do.

CSS: text to path generator with csswarp

Tweet

Today I would like to share an online tool which some of you might find interesting, at least as an clever example on what we could do with CSS3 and HTML5.
But before showing you this "wonder", I would like to spend a few general words and possibly gather your ideas on the matter.

I've recently read that in 2012 there will be an incredible expansion of HTML5 webapp. The use of the not-so-new HTML version will help developers in building specific applications that will work with recent browsers. For what I have seen lately, the most of those new webapp are basically drawing tools. Canvas, trasformation and animation are wisely used in order to allow free hand drawing using only the browser.
In a perfect future, we might end up without desktop applications, while the web will be the place where everyone can find the right tool, when needed.
It is an old idea that I've partially already encountered in a book by Jeremy Rifkin, in the early 2000. People will eventually use software on-demand and they will just pay for the time they use it. That could be the future... the not so far future, as I can see. Following the reasoning, we might just need a pc with a minimum set of system tools, while when we will need to write a document, prepare a spreadsheet or retouch a photo, we will just open the browser and go to the appropriate web site where the application will be always updated and ready to be used. With that in mind, it won't matter which will be our hardware: it could a smartphone, a tablet or a pc. At the same time, it won't matter where we will be - we will just need a data connection.

Happy Easter...

Tweet

... to anyone reading the web thought.

Have a splendid day and relax!

ASP: the dictonary object

Tweet

I've recently worked a lot on ASP arrays. One thing that is rarely used in ASP is the dictionary object which is similar to an array but has some useful methods and properties, making it easier to manage.

The dictionary object can store information in pairs: key and item. Every key refers to an item. When we build a dictionary object we create a relation between a key and an item, so we can recall an item by its key.

An example

To create a dictionary object we simply do the following:

<%
Dim dicObj
set dicObj = Server.CreateObject("Scripting.Dictionary")

Now our object is ready to accept keys and items. In order to add them we use the .add method:

dicObj.add "one","firstItem"
dicObj.add "two","secondItem"

and so on.

Google+ and Google+ Page

Tweet

As you may have noticed, today I've added the two new Google+ Blogger gadgets.

On the right hand side of the page, you can +1 the whole blog (while before you could only share single posts on Google+, Facebook, Twitter and so on) and contribute to the growth of the web thought.
Just below the Google+ badge, you can join the blog Google+ Page. Please, if you're interested and you want to be updated with the blog activity, either join the Google+ twt page, or follow in a reader (with RSS feed) or by email, subscribing with your preferred method.

Keep on following the web thought and stay updated with new articles!

SQL: wildcards

Tweet

While we all know about the "%" wildcard, we might not know that there are other interesting ways of using special characters when building queries.
I suppose you are aware of what a wildcard is. Anyway, if you're new to SQL, wildcards are special characters used in queries and they can be used to substitute one or more characters while retrieving data from a database.
We must remember that we can use wildcards only with the "LIKE" operator.

Before going into the available wildcards, let me show you a basic example:

SELECT productCode, description, price
FROM prodTable
WHERE description LIKE 'p%'

The above query will retrieve all the products that have a description starting with "p" from the prodTable table.
Now, let's see which are the available wildcards.

JavaScript: 3D rotating images

Tweet

I've recently needed to display products in 3D. It is a quite often requested feature, especially for commercial web sites, where items need to be shown from different perspectives.

Different solutions are available, but they usually contemplate the use of Flash or Java Applets. I must say, I don't like that kind of tools, especially Flash, because they require the installation of specific plugins on the client machine.

I started to search a JavaScript solution as soon as I realised that animated gifs involved a big (BIG!) work and not satisfactory result.
I knew that if the client have JavaScript disabled, it might pose a problem as well. However detecting JavaScript status and creating fallbacks is not a big issue. Thus I decided to follow the JavaScript solution.

What I've found is a remarkable script that I would like to share: 3D rotating images.
The author (Mark "Tarquin" Wilton-Jones) explains the script thoroughly in his page, so I won't get into it too much. It is enough to say that the script:

"[...] allows a normal image of a product to be replaced by images that appear to rotate. The images can be rotated or tilted automatically, or manually by the user. Manually, they can be changed using buttons, links, or simply by dragging the image with a mouse. Basic zooming is also possible. All of these features can be seamlessly combined, so the image could begin rotating automatically, then the user could take over and rotate it manually."

Just follow the above link and enjoy.

jQuery: Simple Fixed Previous & Next Buttons

Tweet

The following article has been kindly submitted by Ben Rogerson. It shows a simple way of creating Previous & Next buttons with a short jQuery snippet and some CSS. I hope you like it!
 
Here's a simple little usability update you can quickly apply to your existing blog or results pages.

It will allow users that have a slightly larger running resolution to lessen the time taken to find the 'next page' and 'previous page' buttons which are normally at the bottom of your page.

The first task is to make sure your existing previous and next buttons at the bottom of the page have a class or id attached to them. This is so we can easily target them for replication.

ASP: calculate if a number is odd or even

Tweet

In this short post I will explain something that I see asked often on forums and ASP help site.
How can we calculate if a number is even or odd?

The question is quite easy and the answer is hidden in the MOD function. I've talked about that function in a past article (ASP: resulting recordset in two columns), where we used the MOD function in order to create a two columns table and display data using the same table.

As a reminder, "the MOD function provides the remainder value in a division. The remainder is what's left over after you do a division."
Apart from the fact that I'm starting to quote myself - and I probably should talk to my wife who is a psychotherapist, it is quite easy, even if you are not a math expert, to understand how we can benefit from the MOD function to determine if a number is odd or even.

ASP: dynamic variable names

Tweet

I've been programming in ASP for such a long time that sometimes I do not really value its power. Today we are going to see an extreme example: dynamic variable names. I say "extreme" because I believe that the real use of the following code might be quite rare, however in some extreme situations, we need extreme - I know I repeat myself - solutions.
We are going to use different ASP stuff: an array and the execute and eval functions. At the same time we are going to use the split function, in order to create the array.

SQL SERVER & ACCESS: working on large tables

Tweet

When dealing with large tables, with big quantities of data, it might be a good idea to link a SQL Server table to Ms Access.
I know that the above statement doesn't sound too much professional, but in my experience it is incredibly easier to manage data using the Ms Access interface than using SQL Server Management Studio (SSMS).

Linking a SQL Server table to Ms Access is fairly easy. From the file menu we can find the appropriate command to link an external table. We actually have different choices, but what we need to do is to connect to the ODBC service and link to a SQL Server database. It is clear that the first step is to create a System DSN for the appropriate SQL Server database. To do so is quite easy, because the ODBC control panel will guide us through the procedure: just follow the steps and create the DSN connection.
Once we have done that, we can link a specific table inside the connected database directly from Ms Access.

When Ms Access has a linked table, we can freely work on the data contained and benefit from the flexible tools provided by Access. Some of this basic tools are not really available in SSMS and even every day shortcuts like cut, copy and paste are managed in an easier way through the Ms Access interface.

Some little tricks need to be follow, though.

ASP: the split function and arrays

Tweet

The ASP split function is used to - guess what - split a string into specific parts. The resulting number of items is variable and depends on how we use the function.
Basically the split function has the following syntax:

VarArray = split(string, delimiter, numberOfItems)

where:
1) string is the string to be split;
2) delimiter is the element used to determine where to split the string;
3) numberOfItems is optional and limits the number of returned items in the array.

ASP: make the first letter uppercase in a string

Tweet

There are two ASP functions that allow us to change the case of a string: UCase and LCase.
The first change all the string in uppercase:

<%=UCase("string")%>

 The above gives us the following output:

STRING

While

<%=LCase("STRING")%>

gives us:

string

If we don't know what is the case of a string, because, for example, we get it as a query result, how can we make the string with only the first capital letter?

CSS: change image background colour

Tweet

The trick we are going to see today is very basic, but it has many possible implications. It depends on what you are really trying to do, however changing the background colour of an image can be very handy when we want to highlight a picture, or even sections of an image.
Let's see how it is done with just a line of CSS.

The image

The image we are going to highlight needs to have a transparent background. A gif could be what we need.
The only thing we should consider when choosing the right image is that the transparent part of it will be the part changing colour. Thus, if we want to highlight only a specific part of it, we should make only that part transparent. For example, we could make a star sparkle when the mouse gets over it; or we could emulate a shining effect on a polished metal button.

ASP: the AND operator

Tweet

I've recently had an interesting mail exchange with one of the web thought reader about the ASP AND operator. I have used the AND operator in a previous post about alternating colours rows in a table and now I realise I haven't really explained how the AND operator works, and why it is useful in that situation and others.

If you try to output results, like our friend did, using a snippet like:

<%
   Dim i
   i=1
   while i<=15
      Response.Write("("& i &"," &(i and 2) &"),")
      i=i+1
   wend
%>

You get strange results. The series is:

(1,0),(2,2),(3,2),(4,0),(5,0),(6,2),(7,2),(8,0),(9,0),(10,2),(11,2),(12,0),(13,0),(14,2),(15,2),

That obviously raise a question: why we get that result?
And further more: how, in the end, is the AND operator working?

SQL & ASP: custom queries for the user (a theoretical post)

Tweet

This post was conceived as a theoretical experiment on dynamic queries. The original idea was to let the user create custom SQL queries against a database.
 The whole thing is not so crazy, and it kept forming in my mind while I was thinking about it.

Imagine a situation where a user can select a table from the list of tables in a SQL Server database. That is not a problem; infact we can retrieve table names with:

SELECT name
FROM sys.Tables

CSS: input text inside table cell without overflow

Tweet

If you ever worked with forms and tables together (and I believe you have at least once in your web developing career), you surely have found that input boxes width can be difficult to manage.
Presume you have a table and inside a <td> you have an input text box which should have a 100% width. The input box should stay inside the <td> and fill all the available space. However that doesn't happen, and the input box overflows the available space. Why?

Explanation

The reason is because you have set borders and paddings. Let me show you an example: your input box has a width set to 100%, a border of 1px each side and a padding of 2px each side. That means, the input box width will be:

100% + 2*(2px+1px) = 100% + 6px

Those extra 6 pixels are your trouble, and the input box will overflow by those 6px.

JavaScript: check if it is enabled or not

Tweet

Web developers rely heavily on JavaScript. However, a whole web site project might be jeopardised if in the end the final user's browser has JavaScript disabled. In those cases a good web developer plans good fallbacks accordingly. But, how can we check if JavaScript is enabled?

Believe me it is very simple. When I found the following solution a long time ago, I was amazed by its simplicity and effectiveness.

As a start, we need to insert a form in the body of our page. I would suggest, we put it at the very beginning of the page:

<form name="js" id="js">
  <input type="hidden" name="JSstate" value="false">
</form>

CSS: simple tooltips

Tweet

When navigating a web page, the user sometimes needs some help on words, links, images, or any other element displayed. Tooltips can be very useful, and I've already published a post about them.

While the mentioned article is explaining a jQuery solution, in the following example we are going to use just plain HTML and some CSS rules.

It will be a simple and straightforward solution, but an effective and efficient one as well.

Let's see how we can do it.

jQuery: image zoom plug-ins

Tweet

As one of the web thought visitors has commented a few days ago, there are many jQuery plug-ins that help us in creating zoom effects on images. Here's a list of the best.

Zoom
"A small (1.4kb) jQuery plugin to enlarge images on mouseover or mousedown."

jQuery Image Magnify
"jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script."

Cloud Zoom
"Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers."

Zoomimage - jQuery plugin
"Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border."

JQZoom
"JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want."

ImageLens – A jQuery plug-in for Lens Effect Image Zooming
"Use this jQuery plug-in to add lens style zooming effect to an image"

Easy Image Zoom
"I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!"

Fonts: the browser doesn't display fonts properly

Tweet

Is your preferred browser suddenly displaying all the basic fonts in an unclear and garbled way? Before starting to pull your hair off, it might be that something got in the way and some Windows preference has been changed.
What happened to me once, is that Firefox, Chrome and Safari started displaying system fonts strangely, while Internet Explorer was rendering the text in the correct way.
I remember that I started searching for a solution, and, at first I thought it was something related to my system font files that got corrupted. But it wasn't that.
I noticed that other programs and applications were displaying the menus and text in a strange way.
I decided to rebuild the font system folder. Nothing changed...
Well, to make a long story short, it was the Clear Type option.

In Windows 7, there's a control panel section that's taking care of Clear Type fonts: ClearType tuning.
In Windows XP and Vista, we need to download ClearType Tuner from Microsoft.
If for some reason, the clear type option has been turned off, the result will be that all the fonts in your applications will be in some way less clear (sorry for the pun). And even your browser will display system fonts in that way.
Just turn ClearType on again and everything will be fine.

More info here.

jQuery: fadeIn and fadeOut for IE8

Tweet

If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.

I don't think I have to explain much about it, so I will get into it very quickly and shortly.

If we have an element to which we applied a fade effect using jQuery, we should have something like:

<div id="fading" style="display:none;">Some content</div>

in the body of our page.

CSS & HTML: solution for border radius not working on IE8

Tweet

Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.

A little bit of background

How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.

Web Development: optimise JavaScript and CSS

Tweet

Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.

I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).

Web Design: free images deposits

Tweet

When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:

• Flickr: Creative Commons
• MorgueFile: free photos
• FreePhotosBank
• FreeMediaGoo (audio, images, textures and flash)
• FreeDigitalPhotos
• InterfaceLift Icons

I hope the above list might be of some use for you.
In the meantime, happy coding!

JavaScript: live character count

Tweet

In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.

SQL: the alter table statement

Tweet

In SQL we usually create tables, pre-deciding the columns and their characteristics, like default values and data types. It is possible to insert new columns and eventually alter them afterwards, using the alter table statement.
In the following post we are going to see what we can do with it.

With alter table, we can add, change the data type or delete a column inside a table.

ASP: convert a string into a link

Tweet

If you often visit social networks or, generally speaking, discussion web sites, you surely have noticed that sometimes when you insert a message or a post, every possible link is automatically recognised and "transformed" into a clickable link. How is it done?

With ASP we can manipulate a given string, find a possible link and change it.

CSS: 3d text!

Tweet

Can you see anything special in the following text?

3D Text

If you see it just as a big text, your browser is not compatible. Try to use the latest version of Firefox, Chrome, Safari, Opera or IE10.
How can it be achieved?

Let me explain it to you.

CSS: image preloader

Tweet

Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:

which will be displayed while the main image is being loaded.
Let's see how we can do it.

CSS: image zoom effect

Tweet

Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.

HTML & CSS: text overlay with shadows and round corners

Tweet

Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:

It will be an easy solution with full browser compatibility... please follow me...

CSS: Ultimate CSS Gradient Generator

Tweet

Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.

If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.

Blog ranking... just for fun

Tweet

Just a quick note, out of the ordinary flow of posts...

I've read a short article a few minutes ago and I can't stop laughing. In the article it is said that if you want to increase the traffic to your blog, you should place at the beginning of every post a photo of a beautiful girl... possibly with a small dress... if any...
I won't put the link of the aforementioned article, so don't ask...

I am just still laughing out loud (and my boss looks at me suspiciously...)

ASP & CSS: highlight selected menu item

Tweet

When creating menus for a web site, it is a good practise to use an inclusion, so that we write the menu only once. When the menu is included on every page, we might need to highlight the selected option in the menu itself.
For example, we can have a menu like:

• Home Page
• Option 1
• Option 2
• Option 3

When the user selects "Option 2" and load the related page, the menu should look like:

• Home Page
• Option 1
• Option 2
• Option 3

How can we do it? It's quite easy: we will use some ASP and CSS.

ASP: is the client still connected?

Tweet

I recently wrote a short post about things not to forget when creating ASP document. One of the general tips I mentioned was about checking if the client is still connected, before starting long procedures like complicated server requests (i.e. SQL queries).
In this article we are going to see how to do it with the response object (IsClientConnected).

CSS: fixed header and footer

Tweet

Today we are going to create a header and a footer with fixed position. Our page will have a center part which will naturally overflow when needed, while the header and the footer will stay where they are (top and bottom). The content in the central part will eventually go under the header (when scrolled down) and under the footer (if longer than the viewport).
Nothing complicated, but we will need some little CSS tricks.

Let's start.

HTML5: is div dead? Not, really...

Tweet

I must admit I am not a great fan of HTML5. First I've tried to understand the new tags and then I've started using them on new projects, sometimes ago. I even contacted the Doctors on HTML5 Doctor to submit some questions and prepare an interview to be published on the web thought. They were obviously too busy and, even if they initially agreed on the interview, they've never got back to me with the answers.
Anyway, in this short post I will try to explain where the new content formatting tags should be used and how they can replace the div tag... if ever.

SQL: the IN operator

Tweet

The IN operator can be very useful when we need to perform SQL queries where we need to filter the results with more than one possible value.
Just to understand the power of the IN operator,  we need to go back a few steps and see how we usually filter data from a table with the OR operator.

Web Development: handheld device emulators

Tweet

In the past months I've made some researches about web development and design for handheld devices. The main problem, as we all know, is that we should have most of the devices sold, just to test how our web sites or applications are displayed on them. Does our newly created web site look just right on an iPad or a Galaxy Tab?

To be sure we are doing things properly, we need to test the web creation, and emulators can be of some help. In this post I gathered all the relevant tools, as a repository for future reference.

HTML: what is a DOM tree?

Tweet

If you are a regular visitor of web sites related to coding and web development, you have surely encountered the term "DOM" or, more often, the concept of DOM tree. In this short post we will explore the meaning of DOM and of DOM tree. I will try to put it in the simplest way possible, so that whenever we will encounter the term again in other documents or reference web sites, we will know what they are talking about.

What is DOM?

When we create an HTML page, we know that the document is meant to be understood and processed by a dedicated software. The latter is called "User agent" and usually it is a web browser. When our beloved user agent starts to parse the HTML document, it basically transforms the HTML markup into a DOM tree. DOM is an acronym and it stands for Document Object Model.

The DOM tree

The DOM tree is actually - guess what - a tree. It has a root and branches that are called nodes. Inside nodes there are elements or other nodes. We can visualise a DOM tree exactly like a tree and nodes like branches that can have other branches and so on.