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