I’d like to continue programming with php and mysql, but I have some real difficulties accessing DB through LAN. The best solution I’ve found, is Python in combination with SQLite3.

At that point I have to mention SQLite Manager addon for Firefox (https://addons.mozilla.org/en-US/firefox/addon/sqlite-manager/), which allows easy and quick access to sqlite3 database file.

Sometimes there is not enough regular properties or attributes for some HTML tag, but you need to place your data into it. So you can made it up for yourself, like for example:

<option url="gmail.com" replace="google.com"></option>,

even if option tag doesn’t suport properties url and replace. Mootools access is allways the same,

option.getProperty('url').

You can also use some non existing HTML tag, like

<nothing else="matters"/>.

The mootools has no problem with it, for example:

alert($$('nothing')[0].getProperty('else')); 

works like magic.

You can also create non-existing tags, like:

var n = new Element('nothing');
document.body.grab(n);
$$('nothing').setProperty('else','matters');

Have fun!

The concept is very similar to lightbox behaviour. There’s a black div that covers the whole screen and smaller white div in the center of the screen. The white div holds inner container and close button. You can put anything into inner div, for example HTML code, JPEG image, swf file or YouTube object.

The divs are created in the class’s constructor. The content is filled every time by calling the open function. You need MooTools and then you can create the object like this:

window.addEvent('domready',function(){
	new popIt({
		bgColor: 'black',
		bgOpacity: 0.5,
		width: 640,
		height: 385,
		fgColor: '#EBF6F8',
		fgLoader: 'loading.gif',
		trigger: 'pop_up_trigger',
		closing: 'close.png',
		insert: '<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/hOLAGYmUQV0?fs=1&amp;hl=sl_SI"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/hOLAGYmUQV0?fs=1&amp;hl=sl_SI" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed></object>'
	});
})

You can set the color of background div and its opacity, then you can set the color of smaller div in the middle and the loader image if you have one. You can also add a closing image, but it’s not necessary. By using the insert property you can insert into inner div any HTML you want. You can also use property inject, where you just define the ID of some HTML element, which is coppied into the inner div.

See the example here.

1. a bugfix for keypress events and
2. a new option zIndex for more control.

Both thanks only to Andraž, you are great!

See demo here.

Javascript uses MooTools to apply some classes and events to labels around inputs. If javascript is disabled nothing happens; all checkboxes and radios remain unstyled.

You need to put label tags around you input tags. That’s because of:
1.) easy CSS styling
2.) clickability (label click automatically affects the input child)

CSS:

label.check {
	background: url(check_off.gif) no-repeat left center;
	padding-left: 15px;
}
 
label.check.on {
	background: url(check_on.gif) no-repeat left center;
}
 
label.radio {
	background: url(radio_off.gif) no-repeat left center;
	padding-left: 15px;
}
 
label.radio.on {
	background: url(radio_on.gif) no-repeat left center;
}

You just have to style those labels a little bit to behave as custom checkbox or radio buttons.

XHTML:

<form method="get" action="#">
	<fieldset>
		<label><input type="checkbox" value="1" name="check[]" class="custom"/> Checkbox 1</label>
		<label><input type="checkbox" value="2" name="check[]" class="custom"/> Checkbox 2</label>
		<label><input type="checkbox" value="3" name="check[]" class="custom"/> Checkbox 3</label>
		<br/><br/>
		<label><input type="checkbox" value="1" name="test[]" class="custom"/> Test 1</label>
		<label><input type="checkbox" value="2" name="test[]" class="custom"/> Test 2</label>
		<label><input type="checkbox" value="3" name="test[]" class="custom"/> Test 3</label>
		<br/><br/>
		<label><input type="radio" name="radio" value="1" class="custom"/> Radio 1</label>
		<label><input type="radio" name="radio" value="2" class="custom"/> Radio 2</label>
		<label><input type="radio" name="radio" value="3" class="custom"/> Radio 3</label>
		<br/><br/>
		<label><input type="radio" name="tv" value="1" class="custom"/> TV 1</label>
		<label><input type="radio" name="tv" value="2" class="custom"/> TV 2</label>
		<label><input type="radio" name="tv" value="3" class="custom"/> TV 3</label>
		<br/><br/>
		<input type="submit" value="Send"/>
	</fieldset>
</form>

It is absolutely necessary to put labels around inputs. The label becomes active only if the input has class=”custom”.

Javascript (be sure to have MooTools):

<script type="text/javascript">
	$$('input[type=checkbox].custom').each(function(el){
		el.getParent('label').addClass('check').addEvent('click',function(){
			if(el.checked) this.addClass('on'); else this.removeClass('on');
		}); 
		el.setStyle('display','none');
	});
	$$('input[type=radio].custom').each(function(el){
		el.getParent('label').addClass('radio').addEvent('click',function(){
			$$('input[name='+el.name+']').each(function(rad){
				rad.getParent('label').removeClass('on');
			})
			this.addClass('on');
		}); 
		el.setStyle('display','none');
	});
</script>

And this is everything. Of course you should style your labels much more as I did. My effort for this example was as easy as it could be. Demo here.

The mysql table example:

CREATE TABLE `products` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  `visible` tinyint(1) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

$sql = mysql_query(" UPDATE products SET visible = visible <> 1 WHERE id = '$id' ");

If you want to toggle the visible field of a specific product, just execute this query. If the field visible has value 0, it will be updated to 1. If it is already 1, it will be updated to 0.

Extra tip: I put the $id variable inside the ‘…’ quotes to avoid broken query, if the $id is empty or not an integer.

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.

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.

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.