May18
Too bad wp-codebox contains two divs namely wp_codebox_msgheader and wp_codebox, we cannot simply give the box-shadow to one single div. After playing with this a bit, here is my parameters. The css file is located at /your-wp-root/wp-content/plugins/wp-codebox/css/codebox.css.
1
2
3
4
5
6
| .wp_codebox_msgheader {
box-shadow: 6px 14px 11px #808083;
}
.wp_codebox {
box-shadow: 7px 10px 10px #888;
} |
The overlapped area seems smooth with this setting.
I also added bottom margin to the codebox, see if you like it.
1
2
3
| .wp_codebox {
margin-bottom: 20px;
} |
May16
When dealing with dynamic creation of DOM objects, sometimes you need to check if a certain element exists. Below is how you check:
1
2
3
| if ($('#my_element').length > 0){
// it exists!
} |
If you need to check whether a dropdown has any options, here is how
1
2
3
| if ($('#my_dropdown option').length > 0){
// contains options
} |
Apr13
One incentive of converting a text column to a varchar column is that, you can index that column for quicker query.
Before converting, you want to make sure you won’t be truncating anything. Run the following to make sure
1
2
| SELECT MAX( LENGTH( target_column ) )
FROM target_table |
As long as the returned length is less than your varchar length, you are good to go.
Mar26
Just let PHPExcel figure out the file type by using PHPExcel_IOFactory::identify()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $filename = 'your_file.xls';
require_once 'PHPExcel/Classes/PHPExcel.php';
// Create new PHPExcel object
$filetype = PHPExcel_IOFactory::identify($filename);
$objReader = PHPExcel_IOFactory::createReader($filetype);
$objReader->setReadDataOnly(true); // set this if you don't need to write
$objPHPExcel = $objReader->load($filename);
// go through each sheet
foreach ($objPHPExcel->getWorksheetIterator() as $worksheet) {
...
} |
Mar22
Sometimes I don’t really want to pass form elements one by one in my ajax call, I just want to pack them all in one giant obj and send it over to the backend script. After looking for a while, I found the solution. See sample code below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| json_str = JSON.stringify($('#my_form').serializeArray());
$.ajax({
url: 'do_something.php',
type: 'POST',
dataType: 'json',
data: {
form_data: json_str
},
success: function(data) {
// do something with data
},
error: function(request, error) {
alert('error: '+error+'\nreadyState: '+request.readyState+'\nstatus: '+request.status);
alert('responseText: '+request.responseText);
}
}); |
Yea, serializeArray() will convert a form object to a javascript array. Notice this method can only apply to form objects. Then the stringify method will convert the array to a json string.
Once the json string gets sent over, here is what happens on the php side. I like associated arrays.
1
2
3
4
5
6
7
8
9
10
| $form_data_encoded = $_POST['form_data'];
$form_data_decoded = json_decode($form_data_encoded);
// building an associated array
$form_data = array();
foreach ($form_data_decoded as $obj){
$name = $obj->{"name"};
$value = $obj->{"value"};
$form_data[$name] = $value;
} |
In case you are a pure javascript dude, here is some code to build an associated array in javascript out of that json_str from above.
1
2
3
4
5
6
| var arr = jQuery.parseJSON(json_str);
var dict = new Array();
for (k in arr){
arr2 = arr[k];
dict[arr2.name] = arr2.value;
} |
Mar22
PHPExcel is a PHP library to handle both read/write from/to an excel file. Below is a short tutorial to cover reading data from an excel file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| $filename = 'your_file.xls';
require_once 'PHPExcel/Classes/PHPExcel.php';
// Create new PHPExcel object
$objReader = PHPExcel_IOFactory::createReader('Excel2007');
$objPHPExcel = $objReader->load($filename);
foreach ($objPHPExcel->getWorksheetIterator() as $worksheet) {
$sheet_name = $worksheet->getTitle();
foreach ($worksheet->getRowIterator() as $row) {
$cellIterator = $row->getCellIterator();
$cellIterator->setIterateOnlyExistingCells(false); // Loop all cells, even if empty
foreach ($cellIterator as $cell) {
if (!is_null($cell)) {
$cell_coord = $cell->getCoordinate();
$cell_val = $cell->getCalculatedValue();
if (preg_match('/^([a-zA-Z]+)([0-9]+)$/', $cell_coord, $matches)){
$col = $matches[1];
$row = (int) $matches[2];
do_something_with_this_cell($sheet_name, $col, $row, $cell_val);
}
}
}
}
} |
For do_something_with_this_cell($sheet_name, $col, $row, $cell_val), you can either store the value into DB for later analysis, or look up a mapping array and determine what that cell carries.
Sometimes you may need to deal with cells that carry dates. If you simply make the getCalculatedValue() call you will get some strange integer back but not the actual date string. The reason for that is, the date object in excel is actually masked by a date formatter. In order to get the desired date string, do the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| foreach ($cellIterator as $cell) {
if (!is_null($cell)) {
$cell_coord = $cell->getCoordinate();
$cell_val = $cell->getCalculatedValue();
if (preg_match('/^([a-zA-Z]+)([0-9]+)$/', $cell_coord, $matches)){
$col = $matches[1];
$row = (int) $matches[2];
// check for date object
if(PHPExcel_Shared_Date::isDateTime($cell)){
$cell_val = PHPExcel_Style_NumberFormat::toFormattedString($cell_val, "YYYY-MM-DD");
}
do_something_with_this_cell($sheet_name, $col, $row, $cell_val);
}
}
} |
Feb29
Yea, sometimes it’s acceptable and you will need to do this.
1
2
| $s = "Don't you love this ☂?";
$s = preg_replace('/[^(\x20-\x7F)]*/','', $s); |
The string becomes
Thanks Ryan for figuring this out!
Feb29
Say in implementation the jeditable textile you don’t want any OK nor Cancel buttons, kinda like making your textarea an Excel cell, how to do that?
The key is to use onblur, then comment out submit and cancel. Now when you press ESC, it’s a cancel. Clicking somewhere else is an OK, or submit.
1
2
3
4
5
6
7
8
9
10
11
12
| $('.editable_textile').editable('save.php', {
indicator : '<img src=\"images/indicator.gif\">',
loadurl : 'load.php',
type : 'textarea',
onblur : 'submit',
//submit : 'OK',
//cancel : 'Cancel',
callback: function(value, settings) {
var retval = value.replace(/\\n/gi, \"<br>\\n\");
$(this).html(retval);
},
}); |
See more examples at http://unrealideas.net/examples/05_onblur.php
Feb28
This took me a while to debug, one div and one fieldset both are set to 100%, but in close examination they are off by a few pixels. Below is a stripped down example.
1
2
3
4
5
6
7
| <div style='width: 100%;'>
This is the menu bar, with some buttons
</div>
<fieldset class='section-field-set ui-corner-all' style='width: 100%;'>
Some text
</fieldset> |
So, I was like, perhaps some of these jquery-ui classes gave margin values, so I manually set the margins to all zeros. I also then set all the border sizes to zeroes.
However, still off by two pixels…
I then went through all the css attributes in the chrome debugging tool, it turns out the following unheard of attributes are set by fieldset by default.
1
2
3
4
5
6
| -webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em; |
Apparently -webkit-margin-start and -webkit-margin-end will override the margin values… See more info here: http://css-infos.net/property/-webkit-margin-start
And in fact, I was off by 2 pixels on each side, haha.
So I explicitly set these two to zeroes, then yup, I got both the div and the fieldset aligned. I am happy! 
Feb28
CSS really made adding shadow easy and fun!
hello
All you are adding is the following style code. Then assign the my_shadow class to your box.
1
2
3
4
5
6
7
| <style>
.my_shadow {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
</style> |
I remember back in the days it was painful to use images surrounding the box… haha, we have come a long way…
For more info, visit http://www.css3.info/preview/box-shadow/