Labs
Currently Viewing: Web Development
Camel Case Spaces
Web development is all about having fun, so let’s have some fun with camel case strings.
function camelCaseSpaces($s){
return trim(preg_replace("/[A-Z]/",' ${0}',$s));
}
Using this custom function you can now convert strings such as “iAmSuperCamelCaseString” to “i Am Super Camel Case String”. One day while working on a CodeIgniter project, I needed a quick access to list links to all available methods in one specific controller where most of the methods where in a camelCase format. To achieve my goal I came up with the above function and the following sneaky code within the “index” method of a controller named “Buildout”:
//Get all method names:
$m=get_class_methods($this);
//Unset the ones I do not need:
unset(
$m[array_search('index',$m)],
$m[array_search('__construct',$m)],
$m[array_search('get_instance',$m)]
);
//Print all links to my methods:
foreach($m as $n)
print '<href="/buildout/'.$n.'">'.ucwords(camelCaseSpaces($n)).'</a><br />';
Thanks for reading and feel free to re-use this neat trick.
BattleBlasters for the iPhone
Instead of writing an in-depth review, let me just say that along with Zenonia and Inotia this is my new favorite iPhone game. Super addictive, and super fun. Here’s a video preview.
Get it on iTunes, http://itunes.apple.com/us/app/battle-blasters/id344610797?mt=8
Mootools wrapInner
Today I worked on a project which was using jQuery and have encountered a nifty little function called wrapInnner. What it does is wraps the html contents of the element calling it with the element that is being passed to the function. Here’s a very simple jQuery example:
<div id="user">My name is Pedro</div>
$('user').wrapInner($("<span class='red'></span>"));
will produce:
<div id="user"><span class="red">My name is Pedro</span></div>
I’ve tried doing the same in mootools using Element.wraps but it doesn’t accept html, it only accepts the id of an element or an element itself. There was no other Element method that could accomplish this task so I decided to write one. And here goes the implementation of wrapInner for Mootools:
Element.implement({
wrapInner:function(e){
this.clone(false,true).adopt(
$(e).set('html',this.get('html'))
).replaces(this);
}
});
and the same example using mootools wrapInner:
<div id="user">My name is Pedro</div>
$('t').wrapInner(new Element('span',{'class':'red'}));
will produce:
<div id="user"><span class="red">My name is Pedro</span></div>
The above implementation is very simple, it does not accept function as a parameter but it does accept an id or element.
6 compositing and retouching video tutorials from Fantasy Interactive
We don’t usually post or link to tutorials from other websites or companies, as there are more than enough resources out there that already do that, however, this is our one and only exception. We’ve followed FI, originally Fantasy Interfaces, now Fantasy Interactive from their original days, years back, and this has always been one of those companies that provides inspiration, innovation and simply amazing work. Here are 6 compositing and retouching video tutorials from FI.
Mackie Group soft launch
We just soft launched a brand new website for Mackie Group, based off Wordpress as a CMS. Mackie is a premier single-source logistics solutions provider in Canada. Check out their new website at http://www.mackiegroup.com and let us know what you think.
NorthStarMortage.ca launches
We’re happy to announce that we’ve just launched a brand new website for NorthStarMortgage (www.northstarmortgage.ca), Canadian mortgage brokers offering the best mortgage rates from over 75 Canadian mortgage lenders.
Updated Flash Intro for BmwClient.com
We’ve just updated the flash intro on http://www.bmwclient.com with some pretty cool effects, and the brand new bmw m3.
Simple Javascript Confirm Message using Mootools
As most of you know there are many ways to implement “confirm” messages for your websites, and we have come up with yet another. Confirm messages are important because without them important data could be deleted or changed by accident.
In the window event “domready” you have to add the following code:
$$('.confirm').addEvent('click',function(e){
var msg=this.title?'Are you sure you would like to: '+this.title+'?':'Are you sure?';
if(!confirm(msg)) e.stop();
});
After the initial code is implemented all that has to be done is to add a “confirm” class to a link and title to describe the action:
<a href="/product/delete/43" class="confirm" title="Delete item number 43">delete</a>
<a href="/product/save" class="confirm" title="Save current product">save</a>
When you click on the “delete” link you will be prompted with a confirm message “Are you sure you would like to: Delete item number 43?” and “save” link with “Are you sure you wouldl ike to: Save current product?”.
How to disable the submit button upon form submission
From time to time some of you may notice that you receive multiple requests from your form submissions. Be it an email or database record, the problem is not with your programming but with the actual form. Just see it for yourself, start clicking on your form’s submit button repeatedly and you will receive numerous submissions within seconds.
The following example will show you how to disable the submit button on form submission using mootools and it will work in most of the browsers.
window.addEvent('domready',function(){
$$('input[type=submit]').addEvent('click',function(e){
this.clone().inject(this,'after').set('disabled',true).set('value','Processing...');
this.setStyle('display','none');
});
});
What this code does is that it simply duplicates the submit button, injecting it after the original one, changing its text to “Processing…” and hides the original one. So it essentially looks like only the text is being changed. The reason why we are cloning the original submit button is because ie6 does not let you submit the form when you disable the submit button.
Enjoy