Wednesday 30 May 2012

JavaScript: select all checkboxes in a form

   


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...

Monday 28 May 2012

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

   


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!

Friday 25 May 2012

Happy...

   


...Towel Day!

and don't panic! 



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

JavaScript: avoid double submit in forms

   


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...

Wednesday 23 May 2012

The future of The Web Thought

   


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.

Monday 21 May 2012

ASP & jQuery: linked list boxes with AJAX

   


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!

Friday 18 May 2012

Just for fun: the restart page

   


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...

Wednesday 16 May 2012

Web Design: a collection of progress bars

   


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?)

Monday 14 May 2012

JavaScript: set image height according to viewport

   


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.

Friday 11 May 2012

Blogger: prevent new country-specific URLs

   


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.

Wednesday 9 May 2012

CSS: create boxes with arrows

   


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.

Monday 7 May 2012

CSS: clip your image or a container

   


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?

Friday 4 May 2012

ASP: avoid SQL injections

   


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.

Wednesday 2 May 2012

JavaScript: asynchronous loading

   


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.