Tagged with "javascript"

Good-Looking Tooltips

Dave Child — Thu, 28 Sep 2006 14:21:13 +0100

I have implemented Good-Looking Tooltips, using the excellent technique by Robert Nyman.

There were a couple of small issues along the way - a bit of code

I have implemented Good-Looking Tooltips, using the excellent technique by Robert Nyman.

There were a couple of small issues along the way - a bit of code I added to the site's JavaScript when I was experimenting with XHTML was causing some trouble, and < and > were being treated as HTML rather than as characters. Robert kindly helped me work out the kinks though, and now it's all up and running. For an example, hover over this text.

"Select All" JavaScript for Forms Posting to an Array

Dave Child — Thu, 28 Jul 2005 10:05:00 +0100

The problem that led to this snippet of code was that when posting from a form to a PHP script, you may sometimes want to have several fields with the same name and different values. For example, you might want people to be able to tick boxes to indicate which cities they have been to from a list.

 London
 Paris
 Berlin
 Madrid
 Rome

When the form is received by PHP, whichever items are ticked in the cities list above are accessible in the array $_POST['cities']. This is very handy.

Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function - which allows you to check all boxes at once by clicking a single one. This script works around that using regular expressions.




Checkbox Fun


 

 

 
  Check All Fruit | Uncheck All 
Fruit


 
  Apples

  Bananas

  Chickens

  Stoats
 
  

Check All Locations | Uncheck All Locations


 
  Brighton

  Hove

VBScript Date Format Functions

Dave Child — Mon, 15 Mar 2004 14:07:00 +0000

Date formatting in VBScript is not quite as powerful as PHP. This function gives you plenty more ways to format dates and times in VBScript with the minimum of effort.

VBScript's date formatting doesn't offer a huge number of options compared to PHP's date() function. While it's relatively easy to just write small snippets of code every time you need to format a date a specific way, life would be much easier if there was a function you could call on time and again to do the work for you.

Below, you will find three date format functions, all of which make some use of Unix timestamps, a concept most ASP developers will not be familiar with. Unix timestamps are defined as the number of seconds since the epoch, 00:00:00 01/01/1970, and are a very sensible way to store dates and times in a database, in my opinion. They are very easy to work with, especially when selecting data from a database, and once you are used to them, they can make life much much simpler.

NOTE: These functions were updated on the 15th March 2004 to fix a couple of known bugs. In addition, any scripts using these functions may need to be tweaked to take account of your locale. Each locale will use a slightly different date and time format, so please check yours before using these functions, or simply set your locale to UK. To set your locale to UK, you can use the code below:

<%@LANGUAGE=VBSCRIPT" LCID=2057%>

There is also a [url=http://www.microsoft.com/globaldev/reference/lcid-all.mspx]complete list of valid locales[/url] on the Microsoft website, with the values in the right hand column being the ones you will want.

Finally, the "monthname" function is VBScript is not present in every version, so may need to be defined manually. Please see comments on this article for an example.

The first function, UDate(), will convert a normal date into a Unix timestamp. The second function, unUDate(), simply does the reverse, converting any timestamp into a readable date. The last function takes a date and a format string, and returns a formatted date according to what you put into the formatting string.

UDate()

function UDate(oldDate)
    UDate = DateDiff("s", "01/01/1970 00:00:00", oldDate)
end function

In practice, UDate is very easy to use. For example, if you want to know the current Unix time (the number of seconds since the epoch), you would use something like the following, which would give intCurrent_Unix_Time a value of 1069916571 at the time of writing.

intCurrent_Unix_Time = UDate(Now())

unUDate()

function unUDate(intTimeStamp)
    unUDate = DateAdd("s", intTimeStamp, "01/01/1970 00:00:00")
end function

unUDate is as easy to use as UDate. Simply feed in an integer, and it will return a matching date. It will treat the integer as the number of seconds between the epoch and the desired date, and will return a properly formatted date for normal use in VBScript accordingly.

formatDate()

Now here's where it starts to get tricky. formatDate is also quite easy to use, but only once you get the hang of how it works. As you can see from the below, formatDate requires two values to be passed to it. The first, format, is a string telling the function how you would like the date formatted, and the second, intTimeStamp, can be either a Unix timestamp (preferred) or a normal VBScript date.

The format of the string is what we want to make use of to lay out our dates exactly as we would like, and perhaps this is best shown with an example. I would like a date displayed on my site in the following format: "7:11am, Thursday 27th November, 2003". In normal VBScript that would be a pain to format - I'd probably just end up giving up and using the normal VBLongTime and VBLongDate to display something similar. I would prefer complete control though...

The format string for formatDate can include a whole selection of characters to represent certain date or time entities. There's a table of the ones included in this function just below here. The format string needs to include these entities where it wants them to be replaced by the correct time or date value. To get the above formatted date and time, then, I could use the following:

strDateTime = formatDate("%g:%i%a, %l %j%O %F, %Y", UDate(Now()))

That looks a lot harder than it actually is. To tell the function we are aiming to replace a specific entity in the string with a time or date element, we use a symbol made up of a percent sign (%) and a letter. It is a case sensitive function, so be careful you form your format strings correctly. Without further ado, here's a list of the entities you can include in the format string (anything in the string that is not an entity from the list below will still be in the string when it has been processed).

%A - AM or PM
%a - am or pm
%m - Month with leading zeroes (01 - 12)
%n - Month without leading zeroes (1 - 12)
%F - Month name (January - December)
%M - Three letter month name (Jan - Dec)
$d - Day with leading zeroes (01 - 31)
%j - Day without leading zeroes (1 - 31)
%H - Hour with leading zeroes (12 hour)
%h - Hour with leading zeroes (24 hour)
%G - Hour without leading zeroes (12 hour)
%g - Hour without leading zeroes (24 hour)
%i - Minute with leading zeroes (01 to 60)
%I - Minute without leading zeroes (1 to 60)
%s - Second with leading zeroes (01 to 60)
%S - Second without leading zeroes (1 to 60)
%L - Number of day of week (1 to 7)
%l - Name of day of week (Sunday to Saturday)
%D - Three letter name of day of week (Sun to Sat)
%O - Ordinal suffix (st, nd rd, th)
%U - UNIX Timestamp
%Y - Four digit year (2003)
%y - Two digit year (03)

You can include any of the above in the format string at any point. I would recommend not using a percentage sign if you can help it (except obviously as part of one of the elements above), and in the same vein, using ordinals anywhere except after a number is slightly foolish.

If you would like to see anything else added to the list, above, please email me and I will see what I can do.

The below is the formatDate function itself. To use, simply copy and paste it into a script or include file and call it as above, with whichever format string you require.

function formatDate(format, intTimeStamp)
    dim unUDate, A

    ' Test to see if intTimeStamp looks valid. If not, they have passed a normal date
    if not (isnumeric(intTimeStamp)) then
        if isdate(intTimeStamp) then
            intTimeStamp = DateDiff("S", "01/01/1970 00:00:00", intTimeStamp)
        else
            response.write "Date Invalid"
            exit function
        end if
    end if
    
    if (intTimeStamp=0) then 
        unUDate = now()
    else
        unUDate = DateAdd("s", intTimeStamp, "01/01/1970 00:00:00")
    end if

    unUDate = trim(unUDate)

    dim startM : startM = InStr(1, unUDate, "/", vbTextCompare) + 1
    dim startY : startY = InStr(startM, unUDate, "/", vbTextCompare) + 1
    dim startHour : startHour = InStr(startY, unUDate, " ", vbTextCompare) + 1
    dim startMin : startMin = InStr(startHour, unUDate, ":", vbTextCompare) + 1

    dim dateDay : dateDay = mid(unUDate, 1, 2)
    dim dateMonth : dateMonth = mid(unUDate, startM, 2)
    dim dateYear : dateYear = mid(unUDate, startY, 4)
    dim dateHour : dateHour = mid(unUDate, startHour, 2)
    dim dateMinute : dateMinute = mid(unUDate, startMin, 2)
    dim dateSecond : dateSecond = mid(unUDate, InStr(startMin, unUDate, ":", vbTextCompare) + 1, 2)

    format = replace(format, "%Y", right(dateYear, 4))
    format = replace(format, "%y", right(dateYear, 2))
    format = replace(format, "%m", dateMonth)
    format = replace(format, "%n", cint(dateMonth))
    format = replace(format, "%F", monthname(cint(dateMonth)))
    format = replace(format, "%M", left(monthname(cint(dateMonth)), 3))
    format = replace(format, "%d", dateDay)
    format = replace(format, "%j", cint(dateDay))
    format = replace(format, "%h", mid(unUDate, startHour, 2))
    format = replace(format, "%g", cint(mid(unUDate, startHour, 2)))

    if (cint(dateHour) > 12) then
        A = "PM"
    else
        A = "AM"
    end if
    format = replace(format, "%A", A)
    format = replace(format, "%a", lcase(A))

    if (A = "PM") then format = replace(format, "%H", left("0" & dateHour - 12, 2))
    format = replace(format, "%H", dateHour)
    if (A = "PM") then format = replace(format, "%G", left("0" & cint(dateHour) - 12, 2))
    format = replace(format, "%G", cint(dateHour))

    format = replace(format, "%i", dateMinute)
    format = replace(format, "%I", cint(dateMinute))
    format = replace(format, "%s", dateSecond)
    format = replace(format, "%S", cint(dateSecond))
    format = replace(format, "%L", WeekDay(unUDate))
    format = replace(format, "%D", left(WeekDayName(WeekDay(unUDate)), 3))
    format = replace(format, "%l", WeekDayName(WeekDay(unUDate)))
    format = replace(format, "%U", intTimeStamp)
    format = replace(format, "11%O", "11th")
    format = replace(format, "1%O", "1st")
    format = replace(format, "12%O", "12th")
    format = replace(format, "2%O", "2nd")
    format = replace(format, "13%O", "13th")
    format = replace(format, "3%O", "3rd")
    format = replace(format, "%O", "th")

    formatDate = format

end function

Minimum Font Size

Dave Child — Sun, 02 Nov 2003 19:17:34 +0000

Using relative font sizes is a must for an accessible website, but you run the risk of having incredibly small text. This JavaScript workaround will ensure that the majority of your visitors do not need a microscope to read your content.

I think it's entirely fair to say that I ~~don't~~ didn't like JavaScript. Too many sites seem to be impossible to use without it, and with an ever growing number of users not JavaScript-enabled, creating a site that needs JavaScript to work is shooting yourself in the foot. What's the point of creating a site if before you start you prevent a quarter of your visitors buying your stock or reading your content?

That said, it does have its uses, and this is one of them. This is a simple, short script that will ensure that if you are using relative font sizes on your site, users with their default font size set very low will have their text resized to something more appropriate.

Of course, this won't work for everybody. It isn't an integral part of the site though - users without JavaScript will not even know that they have missed out on anything.

The way this works is relatively simple. The first stage is to grab the font size being used by the user. It's relative to their browser default font size, whatever fonts you have set, and which actual font they are using.

We achieve this by adding a small div to every page. This can be set to be invisible, and on this site I use the invisible div containing the site's "Skip Navigation" link and a link to the Accessibility Statement.

Skip Navigation · Accessibility statement

This div is set to be invisible to graphical browsers, which have little use for it's content.

Next, we set up our JavaScript code. The following function can be included as an external .js file, or within your header file, if you use one.

function MinimumFontSize() {
    var XDivElement = document.getElementById('xdiv');
    if (XDivElement.offsetHeight < "16") {
        tags = new Array ('body', 'div', 'a', 'td', 'th', 'p', 'span', 'h1', 'h2', 'h3');
        for (j = 0; j < tags.length; j ++) { 
            var getbody = document.getElementsByTagName(tags[j]).item(0); 
            if (getbody) {
                getbody.style.fontSize = '10pt';
            }
        }
    }
}

In order to customise the function above, you might like to check your numbers. The '16' at the beginning of the script is for this site, and is the value it is because I decided that that should be the minimum height for that div, with it's padding, and font settings. Your 'xdiv' will be different, and you may want to set a different minimum font as well. Fortunately it's a very simple script to modify. If you want to experiment, you can add a line into the code like so (this will give you a popup with the height of your 'xdiv' when you load the page:

function MinimumFontSize() {
    var XDivElement = document.getElementById('xdiv');
    alert(XDivElement.offsetHeight);
    if (XDivElement.offsetHeight < "16") {

If it sees that the current font size is too small, it will then resize the fonts to 10pt, a small size but an improvement nonetheless, and of course you can change this if you think it too small. You may also need to add elements to the array of tags. The script cycles through the elements I use on this site for text, but you may use entirely different tags around your data, so may need to add to that list.

And finally, we need to add this last bit of code to our tag, in order to execute the function every time a page is viewed. You can include this any number of other places, but I would recommend having it early in the page, or your users may see the small text before it is resized, rather than the script running invisibly.

onload="MinimumFontSize();"

And there you go, a simple way to set a minimum font size for a site, while keeping your site accessible to both those who wish to resize fonts and those without JavaScript.