Andy Burns’ SharePoint Blog

Something I keep forgetting – the locale code for the UK (en-gb) is 2057. I shouldn’t have to remember that as much as I do, but SharePoint Designer’s Dataview Web Part seems to assume you’re American…

Tags: Dates, Locale

Yeah, not exciting, but a reminder to myself of the W3C accessibility guidelines at WAI (Web Accessibility Initiative).

Also, the Cabinet office guidelines.

Tags: Accessibility

Heatmaps are apparently the next thing in web site statistics – and what a clever idea. For a while I worked on a JS file that would report the mouse moving over, out, and clicking on DOM elements in a page, but to be honest, that was a bit excessive – and much harder to visualise.

As used in SharePoint 2007 – putting a red wavy line below text in a text box. Neat.

Just in case I ever need this (and the page goes missing):

<style>
.squiggle
{
background-image:url("squiggle.gif");
background-repeat:repeat-x;
background-position:left bottom;
padding-bottom:2px;
vertical-align:text-top;
font-style:italic;
}
.container
{
border:1px solid #a5a5a5;
overflow-x: hidden;
width: 100%;
color: windowtext;
height: 18px;
background-color: window
}
</style>
<div class="container" contenteditable="true" tabindex="0">
<span class="squiggle" contenteditable="false" tabindex="-1">
<div style="DISPLAY: none" displaytext="here"></div>
<span contenteditable="true" tabindex="-1">unresolved!</span>
</span>
</div>


Tags: CSS

I never knew you could do this – although quite when it’d be useful escapes me – XML and HTML being merged on the browser

So, I’ve been working with ‘Frozen’ panes in tables in HTML. The problem is, some of these tables are, well, a little big. Like maybe 100 cells square. I found that the technique mentioned earlier in my blog didn’t work very well, as the scrolling on the DIV tag became slow and jerky.

This makes sense really – each cell is having it’s CSS rerun each time. Then it struck me – the styles were defined as:

td.frozen {
padding: 3px;
position:relative;
top: expression(document.getElementById('pane').scrollTop-2); /*IE5+ only*/
z-index: 5;
}

This mean that ‘getElementById’ was being run repeatedly. However, the style’s JavaScript was being run before ‘onload’. I just couldn’t run the ‘getElementById’ to populate a global variable after the element had been created, but before the style expressions were run. Instead, in a moment of clarity, I changed the style to:

td.frozen {
padding: 3px;
position:relative;
top: expression(getPane().scrollTop-2); /*IE5+ only*/
z-index: 5;
}

And added a script:

var pane;

function getPane() {
if( pane == null ) {
pane = document.getElementById(“pane”);
}
return pane;
}

Thus, we only run getElementByID once – the first time a CSS style’s javascript expression is run. This worked – the DIV tag now scrolls much more quickly, certainly not so as users will notice any lag.

This is quite clever – locking or freeze panes in HTML tables. This is something I’ve been asked to do a couple of times, and it’s hard. Fundamentally, web pages are not Excel.

Well, that solution works, although I guess it’s only useful in an intranet environment – it only works on IE. And it mystifies me why someone would want to or be allowed to run javascript from inside a CSS declaration. Still, we’ve checked it – works on IE 5.5 to 7.

Strictly, not a coding thing, but it’s about font style. How to Spot Arial and The Scourge of Arial are interesting reads.

For years now I’ve been interested in typography. It seems to me that it’s one of those overlooked things – that web page looks okay, until someone who knows about type works on it, and then it looks great.

I agree with the article, I don’t like Arial – the weight of the top of the ‘a’ seems wrong. Not sure what to use instead – at the moment I use Tahoma and Trebuchet a lot, but I’m not entirely happy with either. And yes, I’m sticking with the free fonts – I’m not a specialist, I ain’t paying for fonts (blimey but some of them cost…)

You can’t control the space between a bullet point on a list-item, and the text that follows it. That’s a real pain – I was trying to put bullets into a narrow column. Controlling the indent was, well, tricky too.

Why is CSS unable to style obvious things like this? I mean, radio buttons? Checkboxes? Grrr…

Comments from my old blog:

Workaround = ditch the standard bullet, create an image, place it left top, use some left padding.

By Rew at 02:18:37 Thursday 4th May 2006

Hey Rew,

Yeah, considered that, but it was too complicated – I was driving this through Microsoft Content Management Server – the users have access to ‘unordered lists’, but asking them to just use images would have been a bit too much.

Plus, it would make site-wide changes impossible.

By Andy at 13:43:27 Friday 5th May 2006

Tags: CSS

I hadn’t realised that there were so many HTML character codes. Very useful, as I was looking for some arrows… ↑ ↓ ⇑ ⇓