Friday, November 14th, 2008
Category: JavaScript
, Library, Tip
Our own Michael Mahemoff is at it again, creating a simple little GUID generator called Guid0:
Guid0 is a GUID library for Javascript. Okay, it doesn't yet do official, bona fide, 128-bit, GUIDs yet, mainly for API design reasons. But this is a library you might find useful if you want to generate a unique ID in your Ajax app.
JAVASCRIPT:
-
-
// simple
-
guid = new Guid();
-
var newguid = guid.generate();
-
-
// options
-
guid = new Guid(
-
{
-
chars: Guid.constants.base85, // or you could say "abc" if you only wanted those chars to appear
-
epoch: "June 1, 2003",
-
counterSequenceLength: 2, // a counter field appended to the end
-
randomSequenceLength: 2 // a random field appended to the end
-
}
-
);
-
He is working on 128-bit support.
Wednesday, October 1st, 2008
Category: Tip, Utility
Dan Fabulich got bitten by the "trailing comma" issue one too many times, so he created a script to solve his problem:
“How many thousands of developer hours have been lost to random IE bugs like this?” I asked myself. I decided that there had to be a good way to detect this problem in an automated way, without firing up a copy of IE and running a full test suite.
It turns out that these and other syntax errors can be detected automatically from the Windows command line, using the Windows Scripting Host (WSH). On Windows XP and higher, the command-line tool “cscript.exe” can be used to run JavaScript (ahem, JScript) headlessly (outside of any browser).
Just create a file called “wsh-parser.js” like this:
JAVASCRIPT:
-
-
var fso = new ActiveXObject( "Scripting.FileSystemObject" );
-
-
function parse(fname) {
-
var file = fso.OpenTextFile( fname, 1 );
-
ret = file.ReadAll();
-
file.Close();
-
try {
-
eval("(function(){\n"+ret+"\n});");
-
} catch (e) {
-
WScript.Echo("Syntax error parsing " + fname);
-
WScript.Echo(" " + e.message);
-
}
-
}
-
-
function findJavaScript(folder) {
-
for (var fc = new Enumerator(folder.files); !fc.atEnd(); fc.moveNext()) {
-
var file=fc.item();
-
if (/.js$/.test(file.Name)) {
-
parse(file);
-
}
-
}
-
for (var fc = new Enumerator(folder.subfolders); !fc.atEnd(); fc.moveNext()) {
-
var subfolder = fc.item();
-
if (subfolder.Name == ".svn") continue; // ignore .svn folders
-
findJavaScript(subfolder);
-
}
-
}
-
-
var rootPath = "src/main/javascript";
-
var rootFolder = fso.GetFolder(rootPath);
-
-
findJavaScript(rootFolder);
-
Other tools will help you hunt this down too, and I am sure some of you have Perl/Ruby/Python one liners to do the same ;)
Friday, September 26th, 2008
Category: CSS, Tip
Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors:
We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the
).
HTML:
-
-
-
<!--[if IE 7]><div id="body1" class="IE IE7 IE67"><![endif]-->
-
<!--[if IE 6]><div id="body1" class="IE IE6 IE56 IE67"><![endif]-->
-
<!--[if IE 5]><div id="body1" class="IE IE5 IE56"><![endif]-->
-
<!--[if !IE]>-->
-
<div id="body1" class="W3C">
-
<!--<![endif]-->
-
/* THE REST OF YOUR HTML GOES HERE */
-
</div>
-
</div></div></div></body>
-
Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.
With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:
CSS:
-
-
#header { overflow: hidden; }
-
.IE #header { zoom: 1; }
-
Monday, September 15th, 2008
Category: CSS, Tip
Pascal Opitz answered the question "Can you set an image background on an image element?" in simple fashion.
All you have to do is make sure that the image is display: block and has a padding.
He put up a simple demo that uses a div with an image, and he applies backgrounds to both:
CSS:
-
-
div {
-
background: url('blur.jpg') no-repeat top left;
-
width: 232px;
-
height: 200px;
-
}
-
-
img {
-
display: block;
-
background: url('parallax.gif') no-repeat bottom left;
-
padding: 93px 100px 75px 100px;
-
}
-
You have the little chap running as the actual src of the image, the animated background as the img background, and then the sky background applied to the div.
Tuesday, September 2nd, 2008
Category: JavaScript, Tip, jQuery
Nathalie Downe has taken Simon Willison's json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link.
Once in place, you simple do your usual link, and asynchronously the Web page will be updated to look like "your pdf link (pdf 2.8 MB)".
JAVASCRIPT:
-
-
jQuery(function($){
-
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
-
// looking at the href of the link, if it contains .pdf or .doc or .mp3
-
var link = $(this);
-
var bits = this.href.split('.');
-
var type = bits[bits.length -1];
-
-
-
var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
-
-
// then call the json thing and insert the size back into the link text
-
$.getJSON(url, function(json){
-
if(json.ok && json.headers['Content-Length']) {
-
var length = parseInt(json.headers['Content-Length'], 10);
-
-
// divide the length into its largest unit
-
var units = [
-
[1024 * 1024 * 1024, 'GB'],
-
[1024 * 1024, 'MB'],
-
[1024, 'KB'],
-
[1, 'bytes']
-
];
-
-
for(var i = 0; i <units.length; i++){
-
-
var unitSize = units[i][0];
-
var unitText = units[i][1];
-
-
if (length>= unitSize) {
-
length = length / unitSize;
-
// 1 decimal place
-
length = Math.ceil(length * 10) / 10;
-
var lengthUnits = unitText;
-
break;
-
}
-
}
-
-
// insert the text directly after the link and add a class to the link
-
link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
-
link.addClass(type);
-
}
-
});
-
});
-
});
-
Wednesday, August 27th, 2008
Category: CSS, Tip
Andy Pemberton has put together a simple solution to get the watermark technique to work nicely with print CSS.
Check out the sample and pull up a print preview. He details the good, bad, and ugly:
The Good
The first step to getting a printable watermark is to use an inline ![]()
From here, we need to place the watermark image so that it is repeated on each page. It looks like the W3C thought of this ahead of time in the positioning module. The position property’s fixed value should ensure that a watermark is printed on each page. Some browsers, like FireFox and Internet Explorer 7, apply this rule correctly.
The Bad
Not all browsers play nicely with position:fixed and we haven’t yet considered using z-indexing to ensure the watermark displays behind all the regular page content. For IE and FireFox 3+, simply applying z-index:-1 to the watermark will do the trick.
Though, it turns out that earlier versions of FireFox (and other Gecko-based browsers) don’t play nicely with negative z-indexing. So, my current approach uses a few Gecko-specific hacks to degrade the watermark approach for FireFox 2. For FireFox 2, the watermark will display over the content, but still display on every page. Unfortunately, this means the CSS for my approach doesn’t validate.
The Ugly
But of course, position:fixed isn’t supported at all in IE6; it appears to ignore the rule altogether and display the image inline. So, I use conditional comments to filter just a *few* IE6-specific hacks:
Absolute positioning and an additional 100% height on the watermark and printable content are the keys to getting this working for IE6:
div.watermark{
position:absolute;
overflow:hidden;
}
div.content{
height:100%;
}
Monday, August 18th, 2008
Category: Examples, JavaScript, Tip, jQuery
Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a "select-to-input toggle" that shows and hides a text field when you select "Other". It overloads the same form name, so the server side gets just one value, and doesn't know or care if it was in the drop down or typed in. You can try it live here.
This is a simple little solution to the issue that there isn't a native control to really do the job. What you really probably want here is the ability to drop down and select items, or just type into the select box field itself. This is one reason why people implement auto-complete text fields instead of using select boxes for this case, but wouldn't it be nice to be able to tag your <select> and be done?
Category: JavaScript, Tip
Eric Wendelin has posted on getting a JavaScript stack trace no matter that the browser.
With Firebug you can call console.trace() but what about the rest?
Luke Smith took Eric's work and added to it, ending up with:
JAVASCRIPT:
-
-
(function () {
-
YOUR_NAMESPACE.getStackTrace = (function () {
-
-
var mode;
-
try {(0)()} catch (e) {
-
mode = e.stack ? 'Firefox' : window.opera ? 'Opera' : 'Other';
-
}
-
-
switch (mode) {
-
case 'Firefox' : return function () {
-
try {(0)()} catch (e) {
-
return e.stack.replace(/^.*?\n/,'').
-
replace(/(?:\n@:0)?\s+$/m,'').
-
replace(/^\(/gm,'{anonymous}(').
-
split("\n");
-
}
-
};
-
-
case 'Opera' : return function () {
-
try {(0)()} catch (e) {
-
var lines = e.message.split("\n"),
-
ANON =
