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.
There is a lot of articles about storing images to mysql database, but they are mostly related to uploaded images. What about images that are available on the internet? I must say: very simple.
First you have to get the contents of image file:
$url = 'http://www.editor.si/template/images/logo.gif'; $image = file_get_contents($url);
That’s it. To store the $image to mysql database you should also put the addslashes() around it to avoid broken query.
You may also need to save the image’s size (length) and type to successfully retrieve it and show it from your database later.
Thanks to Uroš (http://blog.likar.si) I managed to install the WP-Syntax plugin for WordPress. It helps to write programming code in different languages through very simple <pre lang=”php”> customization. Let’s try it right now!
PHP
1 2 | $a = 0; $b = 1; |
Javascript
1 2 | var a = 0; var b = 1; |
CSS
1 2 | a {border: 0;} b {background: none;} |
Yeah, that’s it! Let’s go crazy!
Sometimes it still happens that you have to parse the entire HTML tables from other websites and many times that is the only way to do it. Here is a little tip how to make it simple with php’s simpleXML.
First you have to get the website with file_get_contents($url) and extract the table out (with preg_match or substr).
When you have the entire table in the $table variable, just put the <?xml version=”1.0″?> in front of it. That is necessary to call the simplexml_load_string($table) function. The table must be xhtml compliant otherwise the simplexml would raise errors.
The last step is the foreach($xml->children() as $tr){} loop, where you can access any cell row by row and get the data out of it. Thanks to the simplexml the data is already parsed out of the HTML tags and ready for use.
Example:
//get page
$url = 'http://www.apache.org/server-status'; $content = file_get_contents($url);
//get table
$start = strpos($content, '<table'); $end = strpos($content, '</table>') + 8; //length of </table> $table = substr($content, $start, $end - $start);
//make it usable
$table = '<?xml version="1.0"?>' . str_replace('nowrap', '', $table); $xml = simplexml_load_string($table);
//go through data, I need just 13. cell
foreach($xml->children() as $tr){ if(isset($tr->td[12])) echo $tr->td[12].'<br/>'; }
While creating a webshop I had to generate some unique IDs for market orders. The autoincrement numeric ID is simply not good enough, because someone (for example your competition) could track the number of your orders. So I had to create a simple system to apply some unique ID number to every order that would not reveal how many orders we had so far.
I quickly realised that the md5 hash is too long, because the order code should be much shorter to use it on documents.
The only unique value, I could imagine, is time. If I write a php time() value it is already unique and will never repeat again. Of course you could have two or more orders in the same second of time, so it has to be more specific.
Here is my function:
function uniqueID(){
$time = microtime(1);
$parts = explode(‘.’, (string)$time);
return strtoupper(strrev(dechex($parts[0]) . dechex($parts[1]))) . dechex(rand());
}
//Returns for example 75020CB2C417f
I tested it with this loop:
for($i = 0; $i < 100; $i++){
$array[] = uniqueID();
}
and the $array was always unique! Of course all 100 unique IDs were generated in the same milisecond, but the rand() function ensures that you have no duplicates. I used the dechex() to get shorter results and strrev() to ensure that the result is not so obvious.
The rest is up to you. You should also try to insert some dashes to get more “document look” number, for example 75-020CB2C4-17f. And even if somebody could crack this unique ID, the only result would be the exact time of the order and nothing more!