Random Tech Tips From a Jobbing Developer: 2006

Friday, August 25, 2006

3 Column CSS Layout with a Fixed Centre Column Width

A little while ago, I had to write an intranet-based interface to allow some of our accoutning users to kick off some of our cube building processes. That in itself was an interesting exercise, but more interesting was the problem of layout. We have a strict corporate style (like most large companies nowadays) which covers the width of the page at the top, but the actual content, well, where do you put that?

There were a number of considerations here. Firstly, the header has a very symmetrical look about it so it made sense to have the content in the middle of the screen. The problem then is "How wide do I make it?" Well, I have a 17" LCD monitor at a resolution of 1280x1024 (anything less looks awful on these cheapo monitors), but there are a lot of people in our organisation who, for some reason, run 800x600 even on 17" CRTs. So, taking into account that the interface itself is deliberately spartan, I plumped for an 800 pixel wide content area in the middle of the screen.

Naturally, I wanted to do this using divs rather than tables but the problem I found was that every 3 column layout I found used two fixed width outer containers and a fluid center column which was exactly the opposite of what I wanted. I also wanted a technique that was cross browser compatible. Eventually, after a lot of searching, I came accross a blog post by a chap called Alessandro who had done just what I wanted. As a result, I tried it out and sure enough it worked a treat in both IE and FireFox. I'm sure I'll be lambasted for it but I couldn't be bothered to check Opera et al, mainly because no one in the company uses it nor will they as access is through thin client and Citrix for most users, precluding the possibility of choosing their own browser. So, I thought I'd provide a practical example to go along side Alessandro's original concept code.

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Style-Type" content="text/css">
        <link href="common800.css" type="text/css" rel="stylesheet">

    </head>
    <body>
        <div id="container">

        

        <div id="leftContainer">
            <div id="padLeft"> </div>
        </div>

        <div id="leftText800">
            

        </div>

        <div id="rightContainer">
            <div id="padRight"> </div>
        </div>

        </div>
    </body>
</html>

And here's the css:

div#leftContainer
{
    float:left;
    margin-left:-400px;
    width:50%;
}

div#padLeft
{
    margin-left:400px;
}

div#leftText800
{
    float:left;
    width:800px;
}

div#rightContainer
{
    float:right;
    margin-left:-415px;
    width:49.9%;
}

div#padRight
{
    margin-left:415px;
}

Tuesday, August 01, 2006

Unique ID's in ASP

Having recently re-vamped the style of our pitiful corporate intranet without altering the content beyond trying to make the code conform to W3C standards a little better, I got an email from one of our (less than useful, it must be said) project managers. She complained that when a user opened an 'e-form' (built using an utterly crap product called EIM), it launched in a new window, which was all well and good, but if they tried to open the guide on how to use this overly-complicated form at the same time, it opened in the same window as the form thus preventing you from seeing and using the form (or vice versa depending upon which order you clicked the links). I must admit that being from this particular PM, I was about to ignore the complaint completely when I suddenly realised it was a perfectly valid point, so I looked into it.

It seemed that the original author had written all the links (or written scripts to generate the links from document names in some cases) using the target property in the anchor tag and had set the value to _new, thus:

However, when you opened a new window by clicking on a link, _new is the assigned ID of the window, so the next link with a target of _new would end up being opened in that same window thus nobbling whatever you were viewing. The solution is to have a unique target reference for each link. But how do you guarantee a totally unique ID for each link with minimum effort, especially when many of the links are created dynamically? Step forward the GUID (Globally Unique IDentifier). I found a snippet which allows you to generate a system GUID very simply in ASP as follows:

<%
    Function CreateGUID
        Dim objGuid
        Dim sGUID
        Set objGuid = Server.CreateObject("scriptlet.typelib")
        sGUID = objGuid.guid
        Set objGuid = Nothing
    End Function
>%

Great. Except there was a problem. Every time I used my returned value, when the page rendered, chunks of HTML which should have been written out by the VBS code after the link were missing. Eventually, I happened into a solution, but I had no idea why it worked. After much searching, I discovered that everyone else was using the same solution as me but with no explanation.

Eventually I found an answer on webmaster-talk.com from a chap called Tommy Hanks who had had the same problem and asked the same question. He discovered that the .guid method adds an ASCII 0 to the end of the string which is interpreted as a string terminator. This completely nerfs anything after it. Quite why the hell it's there, I don't know but the solution is as follows:

<%
    Function CreateGUID
        Dim objGuid
        Dim sGUID
        Set objGuid = Server.CreateObject("scriptlet.typelib")
        sGUID = Left(objGuid.guid, 38)
        Set objGuid = Nothing
    End Function
>%

Notice the addition of the Left function to the objGuid.guid call which gives you the GUID itself and leaves off the annoying string terminator. Now, the links look like this in the source code:

Which, when rendered, gives you:

Thereby guaranteeing that each link will open in it's own window. Et voila - unique ID's in ASP.

Thursday, July 06, 2006

Column Widths When Attaching Data in xp_sendmail

A colleague asked me for some help with a problem she was having whilst using the extended procedure xp_sendmail. She wanted to use xp_sendmail to mail the results of the system stored procedure sp_helpindex so that certain people could be aware of what indices were present on a table. The problem was that the data coming out had enormous amounts of white space after it no matter how many LTRIMS or RTRIM's you used which meant that it wouldn't present very well in an email. Now, although I use xp_sendmail a fair bit, I rarely use it for executing queries and sending back data. In the end, I came up with a dodgy looking hack that more or less sorted us out for the time being but is distinctly inelegant.

Basically, I created a wrapper SP for sp_helpindex like so:

CREATE PROC dbo.MyProc

AS

    SET NOCOUNT ON

    CREATE TABLE ##idx_temp (
        [index_name] SYSNAME,
        [index_description] VARCHAR(210),
        [index_keys] NVARCHAR(2078)
    )

    INSERT INTO ##idx_temp

    EXEC sp_helpindex 'tablename'

    SELECT CONVERT(VARCHAR(100), index_name), CONVERT(VARCHAR(100), index_description), CONVERT(VARCHAR(100), index_keys)

    FROM ##idx_temp

    DROP TABLE ##idx_temp

    SET NOCOUNT OFF

GO

It's not pretty: is simply limits the column widths to 100 characters (orwhatever your VARCHAR width is set to) but it was an improvement. If anyone knows of a better way of doing this (and I refuse to believe that there isn't) then please, let me know!

Geeky Developer Tips You Might Find Useful

Or you might not. I'm not bothered either way, but in the course of my daily grind as a developer working with SQL Server, VB6, VB.Net, ASP and the like, I often come accross oddities and sometimes a frustrating lack of any information on problems I'm having writing a piece of code or installing something. It occurred to me that I ought to document them, mainly to help myself, but also, in the spirit of fraternal brotherhood, to help all those other poor buggers who are having the same or a similar problem.

We're going to start with two nice little beauties, one of which didn't get entirely solved to my xsatisfaction (but was close enough that I couldn't justify any more time on it) and another which took me 2 days of buggering about to sort out because I couldn't find any clear explanataions of what I was trying to do.

If this helps only one person then at least it has done something useful. If you have any tips you want to submit then leave a comment and I'll see what I can do.

Cheers

Monkey Boy