Tag-Archive for ◊ classes ◊

Custom select box upgrade
Thursday, September 30th, 2010 | Author:

I’ve made a little improvement on my custom select box mootools class.

Custom selectbox now:

  1. applies the selected element as active and
  2. fires the change event of it’s select tag.

Use the selected property on the option tag:

<option value="40" selected="selected">fourty</option>

Define onchange event through property:

<select onchange="alert('Ninja!');">

Or add event change through mootools:

$('sel2').addEvent('change', function(){
	if(this.value == 70) alert('You hit 70!');
});

See demo here.

Category: Web development  | Tags: , , , ,  | Leave a Comment
Mootools method definition outside of a class (with example)
Sunday, September 26th, 2010 | Author:

I’ve been exploring these days how to create a definition of some method outside of it’s class. Usually there is no need to do that, but I had to write a class which works as a calculator with different input fields. Each input field has it’s own custom formula and I really wanted to avoid the eval() function.

The idea is simple: to create a class with some extra empty function (method), which can be defined from the outside, more specificly through it’s object in it’s custom way.

class Test {
    initialize: function(){
        ...
        this.my_extra();
    },
    function_1: function(){...},
    function_2: function(){...},
    my_extra: function(){ return 0; }
}

var A1 = new Test();
A1.my_extra = function(a){
    return a * a;
}

I tested this functionality in many different ways and I must say it works fine in almost any way you want. Outside methods can use arguments, call other class’s methods, call $(el) objects, and so on… You don’t even have to define an empty method inside the class, but it is convenient because you don’t know if it will be defined by object or not.

The numberConverter class

And here is my calculator with three input fields: tax, price, full price. By changing any of those fields the other two fields must re-calculate. Each field has it’s own calculation formula, it’s own event and affects a different field.

HTML:

<div id="page">
        <select id="tax">
		<option value="0">0</option>
		<option value="20">20</option>
	</select>
	<input id="price" type="text" />
	<input id="full_price" type="text" />
</div>

JS:

var p = new numberConverter('price',{
	onEvent: 'keyup',
	affects: 'full_price'
});
p.formula = function(){
	return p.val() * (1 + p.val('tax') / 100);
}
 
var t = new numberConverter('tax',{
	onEvent: 'change',
	affects: 'full_price'
});
t.formula = function(){
	return t.val('price') * (1 + t.val() / 100);
}
 
var f = new numberConverter('full_price',{
	onEvent: 'keyup',
	affects: 'price'
});
f.formula = function(){
	return f.val('full_price') / (1 + f.val('tax') / 100);
}

You can see that every new object defines it’s own calculation formula, which uses the val method from class to adjust decimal points and decimal places.

The numberConverter demo is here.

Category: Web development  | Tags: , , , ,  | Leave a Comment
Rating and voting with stars
Tuesday, September 21st, 2010 | Author:

I’ve created a mootools class for stars rating and voting. All you have to do:

  1. include mootools
  2. include starsrating.js
  3. create an empty div to place stars
  4. create two images star_on and star_off
  5. class creates everything else (shows rating, enables voting, voting process is ajax based)
  6. php processing is up to you (my demo doesn’t work for real)

HTML:

<div id="rating"></div>

JS:

window.addEvent('domready',function(){
  new starsRating('rating',{
    starOn: 'star_on.jpg',
    starOff: 'star_off.jpg',
    starWidth: 16,
    starHeight: 16,
    starCount: 5,
    rating: 2.33,
    voteUrl: 'vote.php',
    canVote: true
  });
 });

Check out the demo here.

Category: Web development  | Tags: , ,  | One Comment
Get IMDB ID (tt number) from movie title
Sunday, March 07th, 2010 | Author:

I searched on the internet if there is a way to get the IMDB movie ID from movie’s title. As you know the Internet Movie Database has data about every movie on the Earth ever made. Every movie has it’s own ID number which begins with letters tt followed by 7 numbers. The exact URL of a movie looks something like http://www.imdb.com/title/tt2345678/.

The IMDB has some RSS channels but nothing about that. Of course, you can use their search, but what if you need this function in your php script? Imagine parsing some TV guide RSS channel… wouldn’t it be nice to create the IMDB link on every movie you could watch that day?

Here is my class:

class IMDBtt{

	function tt($title){
		$t = urlencode($title);
		$content = $this->getSite('http://www.imdb.com/find?s=tt&q=' . $t);
		$content = substr($content, strpos($content, 'div id="main"'));
		preg_match('/tt[0-9]{7}/',$content,$matches);
		return reset($matches);
	}

	private function getSite($url){
		$ch = curl_init($url);

		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
		curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
		curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);
		curl_setopt($ch,CURLOPT_MAXREDIRS,1);

		$data = curl_exec($ch);
		curl_close($ch);
		return $data;
	}

}

Usage:

$IMDB = new IMDBtt();
$tt = $IMDB->tt('Avatar');
//returns tt0499549

You can create your <a> link like this:

<a href="http://www.imdb.com/title/<?=$tt;?>">Avatar</a>

There is not much more to say about that. Maybe just a little note: if IMDB finds only one match for a movie title, it immediately redirects to it’s site. Therefore I had to use options:

curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);
curl_setopt($ch,CURLOPT_MAXREDIRS,1);

to follow redirect (only once).

If you are working on your localhost you could get error: Call to undefined function curl_init()…

  1. Open C:\xampp\apache\bin\php.ini
  2. Remove the semi-colon in front of this line: extension=php_curl.dll
  3. Restart Apache

Demo here.

Category: Web development  | Tags: ,  | 7 Comments