HTML & Web

Disable Output Escaping in XSL

Andy Burns, , Leave a comment

Really, just a reminder for myself, but if you work with SharePoint long enough you’re bound to end up using something like the Content Query Web Part or a Data View Web Part to aggregate and output a rich text source – but all your HTML gets escaped, so it appears content on the page.

The command you want is DisableOutputEscaping:

<xsl:value-of select="somevalue" disable-output-escaping="yes" />

This will cause the HTML to be output unescaped – i.e. as HTML.

Side note: Sometimes people want things like the CQWP to show the first part of the content as a ‘summary’. This trucating content to display in the CQWP or DVWP is difficult; either a) you risk having unfinished tags in the HTML you do emit, or b) you have to strip out all HTML, which can ruin your formatting. a) is a particular problem, as unfinished <table> tags can cause all sorts of weirdness on page.

My preferred option is to have a additional ‘summary text’ box that accepts plain text, and have the author generate the summary manually. That way we avoid outputting HTML like that entirely.

Advertisement
Disable Output Escaping in XSL

More about frozen panes…

Andy Burns, Leave a comment

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.

More about frozen panes…

Styling Checkboxes with JavaScript

Andy Burns, , , , Leave a comment

I’ve been reading recently about how to do Styled Checkboxes. Well, this was something I was working on too – and naturally, I like my way more.

How it works
When the page loads, the JavaScript in checkbox.js checks all of the INPUT tags on the page. If they are a checkbox, and have BOTH and imgOn and an imgOff, then the INPUT tag has its style set to hidden, and the appropriate images are added to the DOM. They’re floating, though, and so are positioned where the checkbox was on the page.

When you click on one, it changes the state of the underlying checkbox (it’s still there, just hidden), and displays the image appropriate for that state.

When the form is submitted, the checkbox is submitted as normal.

As a user leaves the page, on unload the code in checkbox.js tries to tidy up after itself, although I’m a little concerned about memory leaks after some interesting articles I read recently.

Known Issues

  • These controls are not part of the tabindex. My friend Bruce Sandeman has been working on a version of this where the images are ‘tabable’, but is struggling to turn the border of the images off. I’ve included the code anyway – see checkbox2.js. I’ve not reviewed it yet, so user beware!
  • It’d be nice to hand all events on to the original checkbox for handling.
  • At the least, some sort of mouseover/mouseout? It’s not so obvious that these are checkboxes, at least with the demo images I’ve chosen.
  • I’m a little concerned about memory leaks given some things I’ve read recently and my use of closures. If anyone knows how to prove/prevent any leaks, let me know, that would be cool

How to Use

Real tricky this – include the checkbox.js file in your HTML page.
<script src="checkbox.js"></script>
Then, in the HTML for each of your checkboxes, add two new attributes – ‘imgOn’ and ‘imgOff’. The value of these attributes should be the path to the images you want to use for the checked (‘on’) and unchecked (‘off’) states.

<input type="checkbox" value='2' imgOn='tick.gif' imgOff='cross.gif' />

and with luck, that should be you done.

See the code below: Continue reading “Styling Checkboxes with JavaScript” →

Styling Checkboxes with JavaScript