Numbers on the left are minutes
Numbers on the left are amount of stairs
Wednesday, June 24, 2009
Activity Meters
So I've decided that I'm going to log a bit of the activities I usually do or want to do. So here it is...
Numbers on the left are minutes
Numbers on the left are amount of stairs
Numbers on the left are minutes
Numbers on the left are amount of stairs
Sunday, June 21, 2009
You never forget how to...
...ride a bike is what they say. Amazingly, it's true! I bought a power-assisted hybrid cruiser yesterday. Walked it home because the seat was too high (had to lug it up a huge-ass hill!) Took it out last night (without the battery which is an extra 8 to 10 lbs.) and hey, I didn't fall off! The seat is as low as I can get it. It has suspension so it compresses when you get on it but I feel like I'm trying to climb a horse!
Saturday, June 6, 2009
2009 Cappies - A Special Nominee
The big day for the Cappies is tommorrow night and I'm sure there's one little girl who's got her fingers, toes, and eyes crossed right now. Tess McManus is up for Featured Actress in a Musical for her work in Thoroughly Modern Millie. Her time and dedication to multiple productions have earned her the recognition she deserves. We're rootin' for ya Tess!Tess McManus in Thoroughly Modern Millie (2009)
Pictures courtesy of Ottawa Citizen.
Pictures courtesy of Ottawa Citizen.
Tess McManus in Pride and Prejudice (2008)
Pictures courtesy of Ottawa Citizen.
Pictures courtesy of Ottawa Citizen.
 |  |
Wednesday, June 3, 2009
Teddy's Missing
Teddy, my sister's cat, went missing on Friday, May 29. Since then we've went in search of around the neighbourhood, posted Missing posters, and scoured the net. There's been many cases of cats leaving for a couple of weeks and coming back however, in light of losing Markie last August, it's unnerving.As seen on kijiji.ca:
Wanted: Lost: cat in Hull sector (Manoir des trembles area) - Reward $100
Address: Gatineau, QC, J9A 2J8
Date Listed: 01-Jun-09
Lost - 8 month old solid grey and white domestic short haired cat. He's not yet neutered, is generally afraid of strangers and cars, but might get along well with other cats or dogs since he was raised with both. Responds to the name Teddy. Most of the pads on his toes are pink but there is a little bit of grey on some of them and he has a small patch of white hairs in between his shoulder blades. He has a sleek build and isn't very big. Lost in the Hull sector of Gatineau May 29th on des Jonquilles near St. Raymond (Manoir des Trembles area). If you find him or if you've even seen him, please contact me as soon as possible so I can try to find him where he was last seen. It will also relieve my stress some to know that he's alive and well. Hoping for the best...$100 reward for his return.
Keeping toes, fingers, and paws crossed...
How to Localize a Browse Button
Yes, I have seen more complaints about this than you can image but the good news is not only can you 'localize' it but make it pretty. Wanna see what I'm talking about?
In case you're not familiar with the problem, a form input type of "file" connects to the client's operating system via an Application Programming Interface (API). That familiar window that allows us to select our file is displayed depending on your operating system (*nix, Windows, Mac). Because of this, it was deemed as a security risk to allow a developer to interfere in any way with this functionality.
First and foremost, this will work in IE 6 and 7, FF 2 and 3, and Safari on MAC.
1) 2 Images: One to display English one to display French. (Or whatever languages you choose.)
Admittedly, these aren't pretty but they'll do. The file name you give your images plays a roll (well at least for this example). The English one I've called browseen_US and browsefr_FR. Why? Because when we swap (by pressing the French or English link) the buttons will swap based on locale. In addition, the image dimensions should stay the same. In this case they're not quite the same so you can see the difference.
2) The Code (Read the comments throughout)
<html>
<head>
<script type="text/javascript">
//Set your default language
var myLang="fr_FR";
//The 'switchTo...' functions will be triggered when we select the
//English or French link.
//The call to initFileUploads updates the UI.
function switchToEnglish() {
myLang="en_US";
initFileUploads();
}
function switchToFrench() {
myLang="fr_FR";
initFileUploads();
}
//This function will update the UI. Note this is where the magic happens.
//We will be using a regular file input type but we use a combination
//of CSS and JavaScript to overlay the English and French buttons.
function initFileUploads() {
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='browse'+myLang+'.jpg';
image.id="uploadImgId";
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
//This function is called just as a test to see what will be submitted.
//The output will be different depending on the browser you're using.
function viewSubmit() {
for(i=0; i<document.browseTest.elements.length; i++) {
if(document.browseTest.elements[i].name == "") {
document.write("This is the dynamically generated input. ---- ");
}
document.write("The field name is: " + document.browseTest.elements[i].name + " and it’s value is: " + document.browseTest.elements[i].value + ".<br />");
}
}
</script>
<!--These styles are needed for the magic to work. You may have to adapt these depending on what browser you need this to work in. -- >
<style type="text/css">
div.fileinputs {
position: relative;
/*ie7 and ff2 are colliding*/
width: auto;
}
div.fileinputs .file {
/*For ie7 only*/
width: 235px;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
/*Required for ff2 ONLY*/
width: 145px;
z-index: 2;
}
#uploadImgId {
position: absolute;
/*ie 7 needs this*/
width: 90px;
}
</style>
</head>
<!--The initFileUploads is called to update the UI upon entering the page. -->
<body onload="initFileUploads();">
<fieldset><legend>Browse Button Localization</legend>
Select Language: <a href="#" onclick="switchToEnglish()">English</a>
<a href="javascript:switchToFrench()">French</a><p>
<form name="browseTest" class="example">
<div class="fileinputs">
<input type="file" class="file" name="originalFileInput"/>
</div>
<br />
<input type="button" name="submit" value="View the Submission Value" onclick="viewSubmit()">
</form>
</fieldset>
</body>
</html>
Feel free to swipe!
In case you're not familiar with the problem, a form input type of "file" connects to the client's operating system via an Application Programming Interface (API). That familiar window that allows us to select our file is displayed depending on your operating system (*nix, Windows, Mac). Because of this, it was deemed as a security risk to allow a developer to interfere in any way with this functionality.
What browser will this work on?
First and foremost, this will work in IE 6 and 7, FF 2 and 3, and Safari on MAC.
What you need
1) 2 Images: One to display English one to display French. (Or whatever languages you choose.)
Admittedly, these aren't pretty but they'll do. The file name you give your images plays a roll (well at least for this example). The English one I've called browseen_US and browsefr_FR. Why? Because when we swap (by pressing the French or English link) the buttons will swap based on locale. In addition, the image dimensions should stay the same. In this case they're not quite the same so you can see the difference.
2) The Code (Read the comments throughout)
<html>
<head>
<script type="text/javascript">
//Set your default language
var myLang="fr_FR";
//The 'switchTo...' functions will be triggered when we select the
//English or French link.
//The call to initFileUploads updates the UI.
function switchToEnglish() {
myLang="en_US";
initFileUploads();
}
function switchToFrench() {
myLang="fr_FR";
initFileUploads();
}
//This function will update the UI. Note this is where the magic happens.
//We will be using a regular file input type but we use a combination
//of CSS and JavaScript to overlay the English and French buttons.
function initFileUploads() {
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='browse'+myLang+'.jpg';
image.id="uploadImgId";
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
//This function is called just as a test to see what will be submitted.
//The output will be different depending on the browser you're using.
function viewSubmit() {
for(i=0; i<document.browseTest.elements.length; i++) {
if(document.browseTest.elements[i].name == "") {
document.write("This is the dynamically generated input. ---- ");
}
document.write("The field name is: " + document.browseTest.elements[i].name + " and it’s value is: " + document.browseTest.elements[i].value + ".<br />");
}
}
</script>
<!--These styles are needed for the magic to work. You may have to adapt these depending on what browser you need this to work in. -- >
<style type="text/css">
div.fileinputs {
position: relative;
/*ie7 and ff2 are colliding*/
width: auto;
}
div.fileinputs .file {
/*For ie7 only*/
width: 235px;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
/*Required for ff2 ONLY*/
width: 145px;
z-index: 2;
}
#uploadImgId {
position: absolute;
/*ie 7 needs this*/
width: 90px;
}
</style>
</head>
<!--The initFileUploads is called to update the UI upon entering the page. -->
<body onload="initFileUploads();">
<fieldset><legend>Browse Button Localization</legend>
Select Language: <a href="#" onclick="switchToEnglish()">English</a>
<a href="javascript:switchToFrench()">French</a><p>
<form name="browseTest" class="example">
<div class="fileinputs">
<input type="file" class="file" name="originalFileInput"/>
</div>
<br />
<input type="button" name="submit" value="View the Submission Value" onclick="viewSubmit()">
</form>
</fieldset>
</body>
</html>
Feel free to swipe!
Subscribe to:
Posts (Atom)
