Well, after 2 years I’ve decided to stop writing this blog. It’ll still stay available for some undefined period of time, but eventually it’ll be deleted anyhow.
I’ve started programming in Python these days, because I have some new needs and some new restrictions at my new work.
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.
Mootools can be succesfully used to access non-existing properties and tags in your HTML document.
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!
I had to made a mootools class for popups, because I deal with this sort of “disturbing features” almost every day at work. I don’t know why all customers want to have popup windows on their websites. But they do.
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&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&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.
Custom selectbox has now two new things:
Both thanks only to Andraž, you are great!
See demo here.
Custom designed checkboxes and radio buttons are very common subject on the web, but that didn’t stop me from writing this post about my approach to that problem. I like to keep things simple and that is certainly one of them.
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.
A very simple way to toggle a tinyint field in your mysql table.
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.
I’ve made a little improvement on my custom select box mootools class.
Custom selectbox now:
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.
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.
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.
I’ve created a mootools class for stars rating and voting. All you have to do:
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.