6Flex

Check out Whitney’s blog/podcast haven, DirtyLeaves.com— the link is to his blog, but there are some even more awesome podcasts including 2009 BEST OF THE FIRST ½ (PART 1 • PART 2). The man knows how to lay down the grooves, I tell ya.

This is the logo I developed for CyberhuntLIVE, an online game website launching soon. What do you think?

If you’ve got some content organized on your page, but you want it to be in a different order, here’s a quick fix:

//grab elements (in this case, all elements with class="bl"
var tasksC = $$('.bl');
//reorder on page in alpha
tasksC.sort(sortByTitleText);
//add back in new order
$$(tasksC).each(function(el){
el.inject($('catList'));
});

function sortByTitleText(a, b) {
/*
the value you're sorting can also be innerHTML. Mine had special formatting, so just using the text itself.
*/
var x = a.textContent;
var y = b.textContent;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

One more doozy… let’s say your LMS was built without attaching id’s to anything.  How about one class for every piece of text on-screen? Enormous tables? Check. Please.

I wrote some classes I put around titles, which were nice enough to be duplicated from ‘display’ to ‘navigation’, cool! But now my title bar looks like this: <span class=”noShow”>Totally Uncool</span>

Which is weak. I had three classes I was using to further differentiate items on the naviation bar.  Here’s how I repaired it.

fix = document.title;
if (fix.indexOf(‘<span class=”noShow”>’) != -1){
fixMe = fix.split(‘<span class=”noShow”>’);
good = fixMe[1].substr(0, fixMe[1].indexOf(‘</span>’));
document.title = good;
}else if(fix.indexOf(‘<span class=”tC”>’) != -1){
fixMe = fix.split(‘<span class=”tC”>’);
good = fixMe[1].substr(0, fixMe[1].indexOf(‘</span>’));
document.title = good;
}else if(fix.indexOf(‘<span class=”stC”>’) != -1){
fixMe = fix.split(‘<span class=”stC”>’);
good = fixMe[1].substr(0, fixMe[1].indexOf(‘</span>’));
document.title = good;
}

Also, if you’ve worked with Print Layout People (you know who I am talking about… Kerning Snobs, etc.) or have some layout experience yourself, you’re familar with orphans.  Oh, woe unto them as they stand alone in a cold (line) world by their lonesome. I was just concerned with fixing them in titles, where they really attract unwanted attention.

(this does require Mootools)

//fix orphaned words in titles
var ti = $(document.body).getElement(‘h3.ti’);
if($(ti)){

//make sure we have something, otherwise IE freaks right out
var tiSize = $(ti).getSize();
var output;

//if it’s larger than two lines, attach a nbsp between last two words

/* In this case, my h3 is 18px. I am sure there is a clever way to get the info out of the style sheet, but I don’t know of it (yet). 28 accounts for padding and the fact that IE has different sized pixels than everybody else.*/
if (tiSize.y>28){
var tiText = $(ti).get(‘html’).split(‘ ‘);
if (tiText.length > 2){
for (r=2; r<=tiText.length-1; r++){
if(tiText[r].length > 0){
output += tiText[r];
if(r==tiText.length-2){
output += ‘ ’;
}else{
output += ‘ ‘;
}

}

}
he = tiText[0]+’ ‘+tiText[1]+’ ‘;
po = output.split(‘undefined’).join(”);

//just in case!!!
$(ti).set(‘html’, he+”+po);
}
}
}

So yeah, Mootools pretty much saved my bacon all over the place on this project.

So, in this project I am working on, I’ve had to code around a fairly annoying LMS (Learning Management System). Most recently, in our user testing we discovered that the images were too small to be useful. To remedy that, I painstakingly remade all the images from PDF’s. Problem now is they’re too big to fit in the layout.  No problem, right? We just whip up some Mootools usage and replace the image with a link that launches a popup window.

window.addEvent(‘domready’, function() {
//replace images with pop-up style links

//content2 is the div where the images are
var images = $$($(‘content2′).getElementsByTagName(‘img’));
for (i=0; i<=images.length-1; i++){
linkto = images[i].src;
var thelink  = new Element(‘a’,
{‘id’: ‘image’+i,
‘events’: {
‘mouseover’: function(){
opnwinImage(‘”‘+linkto+’”‘);
}
},
‘class’:'popup’,
‘html’:'view image’,
‘href’:'#’
}
);
$(thelink).replaces(images[i]);
}
}

/* here’s the popup window: it sizes itself to the image, with a little extra for the close and print buttons. */

function opnwinImage(url){
url = url.split(‘”‘).join(”);
sz = getImgSize(url).split(‘,’);
newwindow2=window.open(”,’name’,'height=’+(Number(sz[1])+120)+’,width=’+(Number(sz[0])+20)+’,scrollbars=1,resizable=1′);
var tmp = newwindow2.document;
tmp.write(‘<html><head><title>Image PopUp</title>’);
tmp.write(‘<link href=”/css/style.css” rel=”stylesheet” type=”text/css” />’);
tmp.write(‘</head><body>’);
tmp.write(‘<div class=”popUpControls”><span><a href=”javascript:window.print()”>print</a></span>’);
tmp.write(‘<span><a href=”javascript:self.close()”>close</a></span>’);
tmp.write(‘</div>’);
tmp.write(‘<div class=”popUpContent”>’);
tmp.write(‘<img src=”‘+url+’” alt=”" align=”center” />’);
tmp.write(‘</div>’);
tmp.write(‘<div class=”popUpControls”><span><a href=”javascript:window.print()”>print</a></span>’);
tmp.write(‘<span><a href=”javascript:self.close()”>close</a></span>’);
tmp.write(‘</div>’);

tmp.write(‘</body></html>’);
if (window.focus) {newwindow2.focus()}

tmp.close();

}

//and of course, we need to know how big the image is…

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
return (width+’,'+height);
}