Search

Rss Posts

Rss Comments

Login

 

Posts from February, 2009

Rewrite Document Titles and Fix Orphans with Javascript

Feb 04

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.

codin'     0 Comments

Replace Images with Links with Javascipt

Feb 03

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);
}

codin'     0 Comments