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"
to
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
;extension=php_mysql.dll
to
extension=php_mysql.dll
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:
http://jquerymobile.com/
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>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<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">
<h3>
This is footer@jiansen lu
</h3>
</div>
</div><!-- /page -->
</body>
</html>
Demo:
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.prototype.tax=null;
myfunc1.tax=24;
myfunc has a new property tax and new object myfunc1.tax equal to 24.
Example 2: use the prototype to add a method to the function object
myfunc.prototype.totalprice = function(){
return this.price+this.tax;
}
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" >
<ul>
<li ><img src="1.jpg" /></li>
<li ><img src="2.jpg" /></li>
<li ><img src="3.jpg" /></li>
</ul>
</div>
2) Define CSS to remove list style
#slideshow ul, #slideshow li {
margin:0;
padding:0;
list-style-type:none;
}
make image in fixed position, not float
#slideshow li {
position:absolute;
}
Three images have different size, maximum height 320px, define image layout
#slideshow {
height: 320px;
top:0;
left:0;
}
4) Create two buttons
<button id="next">Next</button>
<button id="prev">Prev</button>
5) jQuery script:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/* home slide show */
var slideUL = $('div#slideshow').children('ul');
var $slides =slideUL.find('img');
var slide_pos = 0;
var slide_len = $slides.length;
$slides.filter(':gt(0)').hide();
$('#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);
});
</script>
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="http://jiansenlu.blogspot.com/"> My Blog URL </a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var obj={
clickMe: function(e){
console.log(this);
e.preventDefault();
}
}
$('a').on('click', obj.clickMe);
</script>
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:
https://developers.google.com/speed/libraries/
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.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
<style>
header, article, footer, address, #content {
display: block;
background: lightblue;
margin: 0 auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
header{
margin: 0 auto;
padding: 0.5em 0 0.5em 0;
text-align: center;
color:red;
width: 800px;
}
nav{
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;
}
footer{
margin: 0 auto;
text-align: center;
padding: 0.1em 0 0.1em 0;
color:black;
width: 800px;
}
</style>
</head>
<body>
<div>
<header>
<h1>Jiansen HTML5 Layout Template</h1>
</header>
<nav><ul>
<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>
</ul></nav>
<div id="content">
This is a simple HTML5 layout template using HTML5 header, nav and footer tag.
</div>
<footer>
<p>
© Copyright by Jiansen Lu
</p>
</footer>
</div>
</body>
</html>
Reference:
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
Result:
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(str.search(/blue/i)); // return -1 if not matched, return the matched position (number)" "
Code:
<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>
</select>
<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(st.search(searchvalue)>-1) {
var temp = from_s.options[i];
from_s.add(temp, from_s.options[0]);
}
}
}
</script>
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.
Example:
<script type="text/javascript">
function handleKeyPress(e,form){
var key=e.keyCode || e.which;
if (key==13){
e.preventDefault();
}
}
</script>
<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>
</select>
</form>
<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]);
}
</script>
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>
to
<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:
http://www.proxynova.com/proxy-server-list/country-cn/
We pick up the fasted one, for example: 125.39.66.147 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 A.id=B.id AND R.member_id AND B.id=1;
If we use
DELETE FROM tableA A, tableB B WHERE A.id=B.id AND R.member_id AND B.id=1;
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
DELETE FROM tableA USING tableA, tableB WHERE tableA.id=tableB.id AND tableB.id=1;
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
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%; )
or
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-->To return to Google index, add
<!--googleon: all-->
More about Google crawl :
https://developers.google.com/search-appliance/documentation/46/admin_crawl/Preparing
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:
https://developers.google.com/webmasters/smartphone-sites/details
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:
http://download.macromedia.com/pub/developer/html5/template_13_Publish/index.html
reference:
http://www.adobe.com/devnet/dreamweaver/articles/dw-template-responsive-jquery-marquee.html
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">
under<link rel="stylesheet" type="text/css" href="stylesheet.css" />
It is also possible to directly add in CSS using @media, example
.login-text{
height: 235px;
padding: 5px;
}
@media (min-device-width:50px) and (max-device-width:550px){
.login-text{
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 http://www.genuitec.com/mobile/
Free online
http://www.mobilephoneemulator.com/
http://www.howtogomo.com/en/d/test-your-site/#gomo-meter
Opera mobile emulator (free)
http://www.opera.com/developer/tools/mobile/
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();
_sf.y=Math.random()*400;
_sf.scaleX=scale;
_sf.scaleY=scale;
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 {
_sf.x+=speed;
if(_sf.x>580) _sf.x = 0;
_sf.y+=(Math.random()*3)*lf;
}
6) Export or test flash, done.
flash output
video:
Subscribe to:
Posts (Atom)