Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
iBook-o-Meter
Have a look at the sidebar. Right under the search form, you should notice there’s something new… Yes, it’s the spankin’ iBook-o-Meter!
The story behind this thing is that even though I’ve been wanting an iBook for a serious while now, I never managed to save enough money. I hope the iBook-o-Meter will prevent me from doing nasty stuff like buying useless gadgets I don’t even need, and will encourage me to save my money ’til I’ve got enough to buy this beauty.
As you can see, the iBook-o-Meter displays a graph (well, at least two bars) of how much money I’ve already put in my “iBook piggy bank”, and how much I’ll still have to steal if I want one of these.
The PHP
I wrote the iBook-o-Meter as a PHP function. This way, it gets easy to make changes to the amounts used. If suddenly the iBook price drops, all I have to change is one argument of the ibookometer(); function.
<?php
function ibookometer(
$cur = 15, // the current amount of money in the piggy bank
$tot = 1500, // the price of the iBook you intend to buy
$unit = '$', // dollar, euro, whatever
$totalwidth = 500, // the total width (px) of the iBook-o-Meter div
$display_amounts = false // self-explanatory
) {
$left = $tot - $cur;
$proc = $cur / $tot;
$done = floor($proc * $totalwidth);
$todo = ceil($totalwidth - $done);
$output = '<div class="ibookometer" style="width: ' . $totalwidth . 'px;"><span class="got" style="width: ' . $done . 'px;" title="So far, I’ve collected ' . $unit . $cur . '">';
if (true == $display_amounts) {
$output .= $unit . $cur . '</span><span class="hide"> is what I’ve got, </span>';
} else {
$output .= ' </span>';
}
$output .= '<span class="get" style="width: ' . $todo . 'px;" title="I’ll still need ' . $unit . $left . ' if I want to get a ' . $unit . $tot . ' iBook">';
if (true == $display_amounts) {
$output .= $unit . $left . '</span><span class="hide"> is what I’ll still need if I want to get a ' . $unit . $tot . ' iBook.';
} else {
$output .= ' </span><span class="hide">So far, I’ve collected ' . $unit . $cur . '. I’ll still need ' . $unit . $left . ' if I want to get a ' . $unit . $tot . ' iBook.';
}
$output .= '</span></div>';
return $output;
}
?>The CSS
Combined with some real simple CSS, you get a pretty nice result.
.ibookometer {
border: 1px solid #9ebcea;
font-size: 8pt;
margin-left: 10px;
font-weight: bold;
}
.ibookometer:hover {
border: 1px solid #3775d3;
}
.ibookometer .hide {
display: none;
}
.ibookometer .got {
background-color: #9ebcea;
color: #e5eefb;
display: block;
text-align: center;
}
.ibookometer .get {
background-color: #e5eefb;
display: block;
text-align: center;
float: right;
margin-top: -15pt;
color: #9ebcea;
}The examples
Like I said, example #1 is on your right. But hey, I’ve written this whole function thing, so why not play with it a bit? Just to demonstrate how an iBook-o-Meter would look when used in a page footer (nice and wide), here’s what <?php echo ibookometer(250, 1500, '$', 500, true); ?> would result in:
When the script is embedded in the content area of a page, we can make the div quite a bit wider, compared to when it’s placed in a sidebar. We then have more room in the two spans, so why not display the amounts we calculated?
Note: Even if $display_amounts is set to false, the amounts can still be viewed by hovering over the spans.
That’s all, folks! I hope you learned something from this post, other than just the facts that a) I’m an idiot and b) I was bored when I wrote this. It’s not my intention to make other people use this thing on their site — although it’s easy to make a Louis-Vuitton-Purse–o–Meter out of this script, it might be a wee bit too precise for massive use. How many people save their money anyway?
Update: As of December 11th, 2004, the iBook-o-Meter has been revised. The script should now output XHTML code that is readable for any user, under all circumstances. (Before, people without a CSS-enabled browser only got to see two spaces, or two amounts, depending on the value stored in $display_amounts.)
Comments (12)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (7)
Listed below are resources on the web that mention this article.
-
- Dailylife @ turtelina.net: iBook-o-Meter:
iBook-o-Meter
If you are saving for an iBook G4 from Apple, you should try this.- Pingback made on November 14th, 2004 @ 10:59 pm
-
- Zooiblog: Handy meter!:
Handy meter!
Mathias made a funky iBook-o-Meter which calculates the amount of money still needed for an iBook. I played around with it, and it’s cool. […]- Trackback made on November 14th, 2004 @ 11:48 pm
-
- Jina Bolton: .Mac-o-meter!:
.Mac-o-meter!
I took the iBook-o-meter and turned it into the .Mac-o-meter. :)- Trackback made on November 16th, 2004 @ 1:37 pm
-
- Troidus: Textdrive:
Textdrive
I have fallen in love with TextDrive and want to be hosted there. But, I’m almost broke. So, I took Mathias’s iBook-o-Meter and implemented it, with a little tweak to the values, thus making it a TextDrive-o-Meter.- Trackback made on November 18th, 2004 @ 10:58 pm
-
- David Hay: iLife:
iLife
[…] l Tiger have been released, but OS XV will be out… but I may end up stealing adapting Mathias’ iBook-o-Meter. I must say though, I’m generally loy […]- Pingback made on December 9th, 2004 @ 10:18 pm
-
- A Sprig of Basil » TODO: Buy a Mac Mini:
TODO: Buy a Mac Mini
[…] Following Mathias Bynens’s lead, I’ve set up a Mac Mini-o-Meter on the sidebar of my site to help remind me of my goal and prevent me from wasting my money on useless gadgets. […]- Trackback made on January 22nd, 2005 @ 7:24 pm
-
- Matt is Busy: Working with PHP & CSS: iBook-o-Meter:
Working with PHP & CSS: iBook-o-Meter
I found an interesting concept for using PHP and CSS together in order to help motivate you to save up your money for something cool. It’s really just a little PHP function that takes a few arguments and then outputs a nice little bar graph, using CSS. […]- Trackback made on June 4th, 2005 @ 4:11 pm
Well, I do save money, so this would be excellent. I’ll give it a go soon enough.
Now I hope people will see it and think “aww, poor boy” and donate a couple of bucks :P
Oh, I noticed a mistake. Where you say
<span class="get" style="width: ' . $todo . 'px;" title="I’ll still need ' . $unit . $cur . ' if I want to get a ' . $unit . $tot . ' iBook">, it should say<span class="get" style="width: ' . $todo . 'px;" title="I’ll still need ' . $unit . $left . ' if I want to get a ' . $unit . $tot . ' iBook">. Just a little typo, I guess.I use it too now.
Nice piece of coding. I might use this on my site as well. I wanted to use something like this for a loooooong time. Thanks.
Rob, you’re right about the error. I noticed it too yesterday, but I didn’t have the time to fix it then. And now you did it — thanks :)
I’d love to check your iBook-o-Meter out, but I can’t access your site at the moment… (Help!)
Mathias, it’s up again. I’ve played around a bit, should be worn by eleven ;)
And I created a PowerBook-o-Meter, as I want tha big motha! :P
Of course, I’d rather have a Powerbook, but I think I won’t be able to control myself once I get enough money to buy an iBook. Moreover, an decent iBook is expensive enough for a poor student like me.
Mathibus, you did it again!
Nice script… will soon adapt it to a Powerbook-o-Meter too… ;)
Aaah! That means even more saving to do… :-s
This would make a great widget for Konfabulator or even Tiger. Any thoughts?
Awesome. Have you thought about adapting this into a WordPress plug-in? All you’d have to do is make it all generic and allow for an Options page hook. In the meantime, I think I’m going to borrow it for a more practical purpose… it’ll fill as my debt gets smaller. :)
I hope you get your iBook, I had mine one short month then I lost my job and had to return it. Time to save again, or do I wait for the Intel conversion? Hrmmmm…
No no no, get a Powerbook!
maybe i’m silly, or maybe i’m just new at this (probably both), but i have no idea what to do with the script once i’ve changed the different things to say what i want them to say.
i’m trying to save up for something nonexistent on a particular website, that uses its own currency to purchase its own items, and i am trying to track how much i have. how would i use this script there?