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!"