early in the morning

Friday, March 15, 2013

jQuery mobile v1.3.0 simple facebook-like/ slide panel example

css:

.ui-responsive-panel {
z-index: 1;
border-right: none;
width:180px;
}

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
left: 0;
right: 0;
margin-left:-100px;
}

html:
<div data-role="page" >
<div data-role="panel" id="left-panel" data-theme="a" data-position="left" data-position-fixed="false" data-display="push" class="ui-responsive-panel">
</div>

<div data-role="header" data-theme="b" data-position="fixed">

<h1>my header</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>

</div>

<div data-role="content" ></div>
<div data-role="footer" data-theme="b" data-position="fixed"></div>
</div>

jQuery mobile v1.3.0, quick custom icon solution

css:

.ui-icon-mycustom //ui-icon- is a prefix
{
background: url(images/download.ico); //your url of the image e.g ico/png
background-repeat: no-repeat;
background-size: 18px 18px;
}

html:
data-icon="mycustom" //which is the name in css file without the prefix, ui-icon-

jQuery mobile 1.3.0 - date input problem/bug on Android (quick fix)

I found that the date will be append to the end of the input (an input on Panel). When you pick a date 2nd time from the calendar, the old date will not be replaced and appended the new date at the end. This does not occur in Chrome.

The adhoc solution is clear the input manually before the user pick a new date.
e.g.

$('#date-input') .on('click',function(){
$(this).val('');
});

Tuesday, March 5, 2013

PHP - export uf-8 Chinese string to excel/csv encoding

A conversion is required before exporting it to output.

<?php

header('Content-type: application/vnd.ms-excel');
header("Content-Disposition: attachment; filename=file.xls");
header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

echo chr(255) . chr(254) . mb_convert_encoding($buffer, 'UTF-16LE', 'UTF-8');

?>

here is the reference, http://php.net/manual/en/ref.mbstring.php

Saturday, February 23, 2013

jQuery UI tab v1.9 Dynamic add/ remove tab with close icon at corner Simple Example

<html>
<body>
<button id="b_add1">Add Tab</button>
<div id='myTab' style="display:block">
<ul><li><a href='#tabpg0'>tabpg-0</a></li>
</ul>
<div id="tabpg0">content</div>
</div>
</body>
</html>

<javascript>

l_tabpgIndex=0;

function addTab() {
l_tabpgIndex++;

var href='#tabpg'+l_tabpgIndex;
var title = 'Tabpg-'+l_tabpgIndex;

var $tabs = $('#myTab').tabs();
$tabs.append('<div id="tabpg'+l_tabpgIndex+'"></div>');

//In order to make the closeicon works easiler, I gave an Id to the element <li>, which is different to the example the jQuery's document given.
$('<li id="li-'+l_tabpgIndex+'"><span id="closeicon-'+l_tabpgIndex+'" class="ui-icon ui-icon-close" style="float:right; cursor: pointer;"></span><a href="'+href+'">'+title+'</a></li>').appendTo( "#myTab .ui-tabs-nav" );

$tabs.tabs( "refresh" );

var newSelected = $('#myTab >ul >li').size() - 1;
$tabs.tabs("option", "active", newSelected); //switch to the NEW tab-page which is just created.

init_closeIcon(l_tabpgIndex); //passing an argument that is able to point to the Id.
}

function init_closeIcon(value) {
$('#myTab ul li').on('click','#closeicon-'+value,function(){
removeTab(value);
});
}

function removeTab(value){
var $tabs = $('#myTab').tabs();

$('#li-'+value).remove(); //this removes the tab; which is different to the example you found on jQuery's document. http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

var panelId = tab.attr( "aria-controls" );
$('#'+panelId ).remove(); //this remove the panel
$tabs.tabs( "refresh" );
}

$('#b_add1').click(function(){ addTab(); });

</javascript>

Monday, February 18, 2013

jQuery UI 1.10.x : button - custom icon NOT show?

I upgraded jQueryUI from 1.9.x to 1.10.x and found that my buttons' custom icon did NOT show.

However, it didn't work after I upgraded to 1.10.x

After I spend a few hours, I found the solution only be found on the jQuery bug report page, http://bugs.jqueryui.com/ticket/5659; I think this should be mentioned on the Upgrade Guide as the last contributor said. All credit goes to the contributor who posted the solution there as below.

Just want the ppl, who were facing the same problem, can save up some time when google this solution.

Monday, April 9, 2012

SQL Server - Restore Database to different instance/DB name

Before executing the restore command, an empty DB with the new DB name, db_bbb in this example, have to be created under the SQL Server instance you like to move to.

Restore Database db_bbb -- the New DB Name
from disk = 'D:\backup\db_aaa.bak' -- Original DB Backup with the logical name db_aaa
with replace,
move 'db_aaa' to 'D:\data\db_bbb.mdf', -- Move the logical DB to the physical path with the new DB name
move 'db_aaa_log' to 'D:\data\db_bbb_log.ldf' -- Move the Logical Log to the physical path with the new "DB name_log"

--Set Single user Mode before restore:
ALTER DATABASE [db_bbb] SET SINGLE_USER

--Set Multi user Mode after restore:
ALTER DATABASE [db_bbb] SET MULTI_USER

--Show Logical name of DB
RESTORE FILELISTONLY
FROM DISK = 'D:\backup\db_aaa.bak'

use db_bbb
select FILE_ID, name as [logical_file_name], physical_name

from sys.database_files

Alter database [db_bbb] modify file ( name = db_aaa, newname = db_bbb )
Alter database [db_bbb] modify file ( name = db_aaa_log, newname = ab_bbb_log )