Thursday, January 31, 2013

Apach2 2.4 load php.ini bug

I installed Apache2.4 and PHP 5.4. When attempting to connect to Mysql a fatal error message is returned:
Call to undefined function mysqliconnect()
Calling phpinfo(); shows that :
Configuration File (php.ini) Path = C:\Windows
Loaded Configuration File = (none)
I do have php.ini.  In Windows command prompt, typed "php -i |more" and I do see
"Loaded Configuration File =C:\php\php.ini"
I finally find the bug. In Apache httpd.conf, change
PHPIniDir "C:\php\"
LoadModule php5_module "C:\php\php5apache2_4.dll"

PHPIniDir "C:/php/"
LoadModule php5_module "C:/php/php5apache2_4.dll"

"\" for file and directory are OK for Apache 2.2, but not OK for Apache 2.4. We have to use "/" for file and directory in Apache 2.4. Also modify php.ini
php.ini, line 880 change
line 810 add (assume php is install in C:\php\):
extension_dir = "C:\php\ext"

Tuesday, January 29, 2013

jQuery Mobile Application

jQuery mobile  is a unified, HTML5-based user interface system for all popular mobile device platforms, which can be downloaded from:
You can use cool drag-and-drop jQuery mobile UI builder to design mobile friendly websites and download the zip files. jQUERY mobile defines header, content, page, theme, footer and much more:
Example code:
<!DOCTYPE html>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>

<div data-role="page">

    <div data-role="header" data-theme="b">
        <h1>Welcome to jQuery mobile DEMO</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>       
    </div><!-- /content -->

  <div data-theme="b" data-role="footer" data-position="fixed">
                    This is footer@jiansen lu
  </div><!-- /page -->

Monday, January 28, 2013

JavaScript function object and prototype

In JavaScript, function is also an object. Example:
function myfun(price){
    this.price = price;

We can access the  function  methods and properties when we create new myfunc function object.
var myfunc1 =new myfunc(200);
myfunc1.price will be equal to 200.

One of the property of the JavaScript function object is prototype. Prototype is also an object.
Example 1: use the prototype  to add a property to the function object;;

myfunc has a  new property tax and new object equal to 24.

Example 2: use the prototype  to add a method to the function object
 myfunc.prototype.totalprice = function(){

myfunc1.totalprice will be equal to 124.

Saturday, January 26, 2013

A Simple jQuery Slideshow Demo

In this example, we use previous and next buttons to control jQuery slideshow.
1) Create a div and list to define images:
     <div id="slideshow" >
        <li ><img src="1.jpg"  /></li>
        <li ><img src="2.jpg" /></li>
        <li ><img src="3.jpg"  /></li>    
2) Define CSS to remove list style
    #slideshow ul, #slideshow li {
make image in fixed position, not float
    #slideshow li {
Three images have different size, maximum height 320px, define image layout
      #slideshow {
        height: 320px;
4) Create two buttons
<button id="next">Next</button>
<button id="prev">Prev</button>
5) jQuery script:
   <script src=""></script>
/* home slide show */
var slideUL = $('div#slideshow').children('ul');
var $slides =slideUL.find('img');
var slide_pos = 0;
var slide_len = $slides.length;
$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(2000);
    $slides.eq(++slide_pos % slide_len).fadeIn(2000);
$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(2000);
    //less than 0 OK
    $slides.eq(--slide_pos % slide_len).fadeIn(2000);
6) Demo:

Video for this demo

Thursday, January 24, 2013

Prevent default behaviour in HTML event

Javascript preventDefault() method  can be used to stop the default action of a HTML element.
Example code:
<a href=""> My Blog URL </a>
<script src=""></script>
var obj={
    clickMe: function(e){
$('a').on('click', obj.clickMe);

The default  behavior to click a link is to go to  a new link. In this example, we use preventDefault() method to prevent going to a new link. We can only see a message in console log when users click the link in this example.

Tuesday, January 22, 2013

Google hosted JavaScript libraries

If you use some open source JavaScript libraries, such as JQuery and SWFobject, you can directly use Google hosted JavaScript library to make it faster.

The link is HERE:

The hosted libraries provides access to a growing list of the most popular, open-source JavaScript libraries, including:

Friday, January 18, 2013

A simple HTML5 layout demo

In HTML5, we have header, footer, article, address and nav tags. Below is a demo using nav for menu, also using header and footer tags. We also need CSS to define the layout further. This demo can be used as a HTML5 layout template.
<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>Jiansen html5 header</title>
        <meta name="description" content="" />
        <meta name="author" content="jiansen" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of
            your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
            header,  article, footer, address, #content {
              display: block;
               background: lightblue;
               margin: 0 auto;
               border-radius: 10px;
             -moz-border-radius: 10px;
             -webkit-border-radius: 10px;
             margin: 0 auto;
            padding: 0.5em 0 0.5em 0;
             text-align: center;
             width: 800px;
             background: #000305;
            font-size: 1.143em;
            height: 40px;
             line-height: 30px;
            margin: 0 auto 2em auto;
            padding: 0;
            text-align: center;
            width: 800px;
            border-radius: 5px;
           -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
     nav ul {list-style: none; margin: 0 auto; width: 800px;}
     nav li {float: left; display: inline; margin: 0;}
     nav a:link,  nav a:visited {
           color: white;
           display: inline-block;
           height: 30px;
          padding: 5px 1.5em;
         text-decoration: none;
    nav a:hover {
            color: red;

  #content {
    background: lightblue;
    margin-bottom: 2em;
    overflow: hidden;
    padding: 20px 20px;
    width: 760px;
    min-height: 500px;
             margin: 0 auto;
             text-align: center;
             padding: 0.1em 0 0.1em 0;
             width: 800px;

                <h1>Jiansen HTML5 Layout Template</h1>
        <li><a href="#">HOME</a></li>
        <li><a href="#">MY PROFILE</a></li>

        <li><a href="#">MY BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
            <div id="content">
             This is a simple HTML5 layout template using HTML5 header, nav and footer tag.

                    &copy; Copyright  by Jiansen Lu


Wednesday, January 16, 2013

HTML select object in form

HTML select object in form represents a list. Example:
The user Javascript function searchstudent() to get search text from search box and compare
to each option text, if matched part of the string (case sensitive), move it to the top of option.
"For case insensitive,   /blue/i is used
var str="Mr. Blue has a blue house";
document.write(; // return -1 if not matched, return the matched position (number)" "
<select  name="users-out" id="students-out"  multiple="multiple" size="10">
                <option value="4" title="Mr. Student Account">Mr. Student Account</option>
                 <option value="28" title="Mr JJ DD">Mr JJ DD</option>
                 <option value="32" title="Dr Jack Doe">Dr Jack Doe</option>
                  <option value="26" title="Dr Jack Doe1">Dr Jack Doe1</option>
                  <option value="30" title="Dr Jane Doe2">Dr Jane Doe2</option> 
 <br />
 Input<input type="text"  id="search" onkeyup="searchstudent()"/>
 <script type="text/javascript">
          function searchstudent(){
             var searchvalue= document.getElementById('search').value;
             var from_s = document.getElementById('students-out');
             for (var i=0;i<from_s.options.length-1;i++) {
                var st=from_s.options[i].text;
                  if(>-1) {
                  var temp  = from_s.options[i];
                 from_s.add(temp, from_s.options[0]);

Here  using from_s =  document.getElementById('students-out'); to get select object by id,
 from_s.options.length to get total number of options,
from_s.options[i].text; to get text for each option,  using slect object method add
i.e.  from_s.add(temp, from_s.options[0]) to add options i in front of option 0.


onkeypress and onkeydown, prevent enter key to submit a form in input

In JavaScript, the keypress event fires after the key is pressed and released, while keydown fires after the press but before the release.
     <script type="text/javascript">
      function handleKeyPress(e,form){
         var key=e.keyCode || e.which;
           if (key==13){
     <button  type='button' id="filter"  onclick="searchstudent()"> Serach </button>
    <input type="text"     id="search"  maxlength="80" onkeypress="handleKeyPress(event,this.form)" onkeyup="searchstudent()" >

In this example, when any key is pressed, Javascript function searchstudent() is called. We do not have to wait all the text  typed to start search. Somehow it is similar to Ajax.

 To prevent enter key or return key (key code 13) submit the form, we defined a user function handleKeyPress in onkeypress, which called e.preventDefault();   to prevent form submission.

HTML button: submit or not submit a form?

 In a lot of cases, we only want buttons to play JavaScript function, but not submit a form.
For example (button submitting  form):
<form name="enrollment_manager_listed" method="post" action="submit.php" >
  <button   id="filter"  onclick="test()"> Click me </button>
 <input type="submit" name="submit_em" value="Submit" /> 
 <select  name="users-out" id="students-out"  multiple="multiple" size="10">
                <option value="4" title="Mr. Student Account">Mr. Student Account</option>
                 <option value="28" title="Mr JJ DD">Mr JJ DD</option>
                 <option value="32" title="Dr Jack Doe">Dr Jack Doe</option>
                  <option value="26" title="Dr Jack Doe1">Dr Jack Doe1</option>
                  <option value="30" title="Dr Jane Doe2">Dr Jane Doe2</option> 
 <script type="text/javascript">
   function test(){
   from_s = document.getElementById('students-out');
   var temp  = from_s.options[from_s.options.length-1];
   from_s.add(temp, from_s.options[0]);
In this script, when the "Click me" button is clicked, the bottom of  option is moved to the top and the form is submitted. But I only want to  keep moving the items in options  using  button "Click me" without submitting the form. The form  submission is only controlled by "submit" button.
 To do this, add type="button"  in button in order to not submit a form. i.e change
 <button   id="filter"  onclick="test()"> Click me </button>
<button  type='button' id="filter"  onclick="test()"> Click me </button>

Sunday, January 13, 2013

Disable Java in Google Chrome

We know there is some security issue in Java recently. Below is how to disable Java in Google Chrome.
1) Click top right button (mouse over: customize and control Google Chrome)
2) Click Tools->Extensions
3) Click Settings, at the bottom, click  "Show Advanced Settings"
4) Click "Content settings" under Privacy
5) Click "Disable individual settings" under  Plug-ins
6) Find Java and click disable.

Video: Disable Java in Google Chrome

Disable Java in Firefox

We know there is some security issue in Java recently. Below is how to disable Java in Firefox.
1)  Go to tools at the top menu of Firefox.
2) Tools->Add-ons
3) Click plugins
 4) Find Java and click disable button.

Video: Disable Java in Firefox

Remove claro search in Google chrome

You may not like claro search in your browsers. Below is how to remove claro search in Google chrome.

1) Click top right button (mouse over: customize and control Google Chrome)
2) Click Tools->Extensions
3)  Find  claro search, un-check enable button or move it to trash.

Video: Disable Mcafee siteadvisor or claro search  in Google Chrome

Saturday, January 12, 2013

Using proxy to watch video outside the country

Sometimes when we watch online videos, we can see the message "the video is not allowed in your country" and the videos will not play. But we can still use proxy to watch the videos. Sometimes even less buffer time for videos when using proxies.

For example,  the videos are only allowed to be watched in China. We can find proxies in China:

We pick up the fasted one, for example:  port 80

In Firefox to watch videos:
Tools->options->Advanced->Network->Settings, select manually proxy configuration, enter the proxy IP address in HTTP proxy, also the input the port.

 In Internet Explorer  to watch videos:
Tools->Internet options->Advanced->Connections->LAN settings, select use your proxy setting for your LAN, enter the proxy IP address in address, also the input the port.

Refresh the video webpages and you are able to watch videos which are not allowed before.

Friday, January 11, 2013

Delete rows in one table from join two tables in MySQL

In MYSQL, we can only select one table from multi tables:
 SELECT tableA.*  FROM tableA A,  tableB B   WHERE AND R.member_id AND;

If we use
 DELETE   FROM tableA A,  tableB B   WHERE AND R.member_id AND;

This will delete the rows  both in tableA and tableB which satisfy the conditions.

So if we only want to delete  the rows in tableA, not in tableB?
We can use the following MySQl query

Show the labels of posts in your blog sidebar

In blogger, the default archive is in time order in right side bar, such as 2010, 2011, 2012. It is better to label all your posts,and show all the labels of posts in your blog sidebar, so readers can easily find the contents according to label index.

1) To add labels in each  post, click label under post setting when you are creating or editing your posts, the labels are separated by comma ,

2) To the labels of posts in your blog sidebar, you only add labels gadget once.
Design->layout->Add a gadget, and choose Labels. You can choose all your labels or pick up some labels.

Wednesday, January 9, 2013

Margin, border and padding in CSS

For above CSS layout, the text (669X172) within box with border width 1px, CSS
border: 1px
the text to the top of the  box (padding) 4px,  right 24px, bottom 8px, left 18px, CSS
padding: 4px 24px 8px  18px;
margin 4px, the area around the border CSS
margin 4px;
The order of padding and margin in CSS  is  top, right, bottom, and left in padding and margin properties.

Monday, January 7, 2013

Difference between em, px, pt and percent in font size

1em = 12pt (point) = 16px (pixel) = 100% (percent).
1 point =1/12 inch
"percent %" is recommended for fully scalable of mobile devices and for accessibility.
such as
 html { font-size: 150%; )
body { font-size: 150%; )

Friday, January 4, 2013

Tell Google not to index your webpage

If you do not want Google index your web-page, you can simple add the following in your web-page HTML:
<META NAME="robots" CONTENT="noarchive, nofollow">
If you just want part of your webpage is not indexed by Google, you can use
<!--googleoff: all-->
The text after that will be be indexed by Google
To return to Google index, add
 <!--googleon: all-->

More about Google crawl :

Build mobile friendly websites

Build mobile friendly websites

The difference between mobiles and desktop is the size of the screens. ipad width 768px, iphone 480 px.  Just simply resize the browser to the ipad or iphone size  to see how websites look.

We can use responsive web design, i.e.  the same HTML codes to all devices but  using different CSS for iphone or ipads using media queries.

Google official website for Building Smartphone-Optimized Websites:

If you have a website  on blogger, you just need to simple select mobile template in design mode while you old template will be kept the same in desktop. For Wordpress, plugins  DudaMobile Website Builder can do a quick conversion.

Demo of responsive web design:

To convert your websites to mobile friendly, example add in HTML or PHP:
<link rel="stylesheet" type="text/css" 
media="only screen and (min-device-width:50px) and (max-device-width:550px)"  href="screen_small.css">
 <link rel="stylesheet" type="text/css" 
media="only screen and (min-device-width:551px) and (max-device-width:800px)" href="screen_medium.css">

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
It is also possible to  directly add in CSS using @media, example
   height: 235px;
   padding: 5px;
 @media (min-device-width:50px) and (max-device-width:550px){
   height: 580px;
   padding: 5px;
 Setup screen_small.css for iphones, screen_medium.css for ipads.
To more precise test the responsive web design, you can test it on mobiles or in emulators. such as
using MobiOne studio, 15 days free trial 
Free online
Opera mobile emulator (free)

Tuesday, January 1, 2013

Actionscript 3.0 demo - create a flying bird in flash

Below is the example to create a flying bird in Flash CS6 using ActionScript 3.0.
1) Open Adobe Flash CS6 File->New->ActionScript 3.0
2) Stage width 550, height 400, File-> import to stage with background image (550*400) in layer bg (rename layer1 as bg)
3) Create layer 1. Using  oval tool and brush tool to create   a bird without wings.
convert the whole bird to Movie Clip "bird" registration point at center. check the box "export to actionscript".
4)double click the bird, convert it to  movieclip with name birdbody
5) In timeline 10, insert keyframe for wing and body,create motion tween between timeline 1 and 10
6) Go back to scene , create layer action. Press F9 to input the following actionscript

addEventListener (Event.ENTER_FRAME,birdMV);
function birdMV (event:Event):void {
    var reduce:Number=Math.random()*100;
    if(reduce>0 &&reduce<5){
    var scale:Number=Math.random()*.3;
    var _sf:bird=new bird();
    var speed:Number=Math.random()*10;
    var RA:Array=new Array(-1,1);
    var lf:int=RA[Math.round(Math.random())];
    stage.addChild (_sf);
    _sf.addEventListener (Event.ENTER_FRAME,birdflying);
    function birdflying (event:Event):void {  
        if(_sf.x>580) _sf.x = 0;

6) Export or test flash, done.

flash output