For two months , i have not updated my blog for some reasons,if you are my reader,and i will apologize to you for disappointed you so much,i promise to you that i will keep write my blog in the coming future.
If you have options for me , and i will be very pleasure to accept them.
Your new friend Wison.
Author Archives: admin
html 5 local storage usage
html 5 has spreaded widely in web design tody.Today i will show you about ‘html 5 local storage’.
With this function we can storage data in client side, that is it is a client-side database,the data you storaged are in the client’s browser,like session, the local storage is per browser not per computer.
The huge problem is browser support,many will focus on this,big browsers like Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+ have made their effort to support it,leave Opera, so it is not a big problem of widely using of local storage.
if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
try {
localStorage.setItem('name', 'Hello World!'); //saves to the database, 'key', 'value'
} catch (e) {
if (e) {
alert('Quota exceeded!'); //data wasn’t successfully saved due to quota exceed so throw an error
}
}
}
document.write(localStorage.getItem(“name”)); //Hello World!
ocalStorage.removeItem(“name”); //deletes the matching item from the database
In the code snippet,you can set,get and remove a localStorage value.Before you set a localStorage value the first step is to check if your browser support localStorage,then to set it.
In my opinion, i think html 5 local storage is just like the php session,cookie or even more simple.
Wish this quick tip will help you!
Wonderful web site with html5 ‘doctype’!
As everyone knows that html5 must be future of basic fashion webdesign language,but for some reasons we still can’t use html5 to finished out site,especially in China.
Because IE6 is still one of the most used web browser in China,so we must performance our work to meet the ie6′ need,Widely use of Html is still a dream of our designers.
Last time, i had known the fact that,as one basic HTML5 character we can use right now.
Had you know what it is?
Mmm..let me tell you!It is the ‘doctype’!
As we do in the past the doctype would like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
With HTML5 ,it can be more simple:
<!DOCTYPE html>
Someone may be puzzled that, is that all current browsers (IE, FF, Opera, Safari) will support it?
I will say to you,it’s right! It will switch the content into standards mode – even though they don’t implement HTML5!
You can do intrduce HTML5 element into your page step by step!And at first,you can do this!
Is it awesome?
(tricks and tips) 4 Jquery awesome features
As everyone knows,Jquery is a awesome javascript framework,here i will show you some awesome features i find in jquery.
1.Before intruducing this feature,everyone think about your “a” link in html,do you use “target=’_blank’” in your website? And do you know it is not allowed in XHTML 1.0 Strict,here is solution to it.
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
Usage:
lepinskidesign.com.br
*/
2.This tips is not very covert,many may had use it.To get the total num of one element,you can use:
$('element').size();
3.When your page include many images,the best way to show it ,you can preload your images.As it means,your image will be loaded before you show it the right time.
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");
4.Many times you shoule detect browsers for your project,with jquery you can do it easily.Also you can do it in css,here is the jquery way.
//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );
//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );
Some of these tips ,i had found it before,and some are found from featured jquery aritlces,wished you will learn it!
(Jquery Plugin)lightbox for jquery
Today,i would like to introduct to you about lightBox for jquery,I had tried to made such a effect,but it was not so perfect,or i did not find the suitable plugin,but i will record one that adapted to me here now.
I find the plugin by searching ‘lightbox for jquery‘,i it is really good.Just one jquery file,one simple css file and the required images.
You can use it by this way:
$(function() {
$(‘#gallery a’).lightBox();
});
There are a few options to set to customize your own favourite style,include
"overlayBgColor": Background color to overlay; "overlayOpacity":Opacity value to overlay; "fixedNavigation":Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface; "imageLoading":Path and the name of the loading icon; "imageBtnPrev":Path and the name of the prev button image; "imageBtnNext":Path and the name of the next button image; "imageBtnClose":Path and the name of the close btn; "imageBlank":Path and the name of a blank image;
There are alse shortcut for you to use this plugin,for example:to close the interface with letter “c”,to show the previous image with letter “p”,to show the next image with letter “n”.
See a demo ,click here.This plugin lightbox for jquery is really simple,i wish you would like it.
jquery lazy load image plugin
You may heard about this technique,it appears about in 2007,with it your page can load images when it’s it’s turn to appear.That means when your page is very huge and long enough,you need to reduce the server load,just load the images in your viewport and load the others when you scroll the window.
It’s very easy to use it,just one file and jquery library are necessary.Include them in your page with this form:
The basic method to use it:
$("img").lazyload();
With this short code you make all images of your page below the fold to be lazy loaded.
There are also serival options to set to control the jquery lazy load plugin.You can control when to trriger your lazy load,set a placeholder image and an event to trriger it,make different effect of your lazy load,or just lazy load images in one container,delay loading the images or load the image not by it’s order in your page.All of these can be realized.
Most of the options i will place you here:
Option One(the basic):
$("img").lazyload();
Option Two(setting sensitivity):
$("img").lazyload({ threshold : 200 });
Option Three(placeholder image):
$("img").lazyload({ placeholder : "img/grey.gif" });
Option Four(event to trriger loading):
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
Option Five(changing effect):
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
Option Six(images in container):
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});
Option Seven:
$("img").lazyload({
failurelimit : 10
});
Option Eight:
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});
I shall let you know:by now,the jquery lazy load image plugin is not always available in all browsers,don’t be suprise when you meet it,and if you find the resolution let me know.
QuickTip:jquery ajax php tutorial
This tutorial is about the usage of jquery’s ajax method and php to develop a rich website.You can get your result without doing a submit,it reduces the http requests to the web server,makes it comes true that just refresh local part of the page.
I have use it for several projects.Here i will show you how to do it.
First,you should get the page link to the jquery labrary.
Second,to realize your goal.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Above is the basic usage,to make use of the returned HTML, we can implement a success handler,All element of the test.html will be returned.In this case,you can give the returned html to an element or do check.
The sample is so simple,and you needn’t use $.ajax,which make the ajax process seems to more complex,you can use $.load or $.get instead it.
Here are a serial of examples to make you know more about interactive of jquery ajax php:
Example 1: Load and execute a JavaScript file.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
Example 2: Save some data to the server and notify the user once it’s complete.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Example 3: Retrieve the latest version of an HTML page.
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
Example 4: Loads data synchronously. Blocks the browser while the requests is active. It is better to block user interaction by other means when synchronization is necessary.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
Example 5: Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
Example 6: Sends an id as data to the server, save some data to the server and notify the user once it’s complete. Note that this usage – returning the result of the call into a variable – requires a synchronous (blocking) request! (async:false)
bodyContent = $.ajax({
url: "script.php",
global: false,
type: "POST",
data: ({id : this.getAttribute('id')}),
dataType: "html",
async:false,
success: function(msg){
alert(msg);
}
}
).responseText;
I want to show you what the php code like,if you just want php code to check or get some request data,for short ,what will display in your php page,what will be returned to the request not the return function.For example the echo station or just htm element.
In my past works ,i find it will be messy code when you get data from a php file,in this case you can code the page to utf-8.
For more data about messy code from jquery ajax php,you can refferr refer to http://dev-tricks.com/quicktipjquery-ajax-php-tutorial/.
And many other params you will find them in detail from http://api.jquery.com/jQuery.ajax/.
(Quick Tip)basic tutorial of setcookie (php and javascript)
As a developer,you may have heard about cookie,but what excatly are they,when we can use them?I’ll tell you about that.After reading this toturial you will actually learn how to set cookie safely in your applacation.
At the begining,you might would like to know what you can do with cookies.
Nowadays,cookie is used widely,such as saving user setting like name,language,location or screen size ,you may want to sace the client’s preferred language to a cookie ,with these cookie you can know the user’s favrite choose for your site and do it when the action appear again.The widely use of cookie is the shopping cart,thanks to cookies people are able to keep items in their cart even they disconnecting from the shop.For a word,you can use cookies do what ever you would like them to do.
chapter one:cookies in PHP
There are seven params for this function when you try to set one.
$name:each cookie must has an unique name for browser keeping them apart
$value:the data you want the cookie to hold
$expire:the time signs when the cookie is available
$path:in which path the cookie can be use for the domain
$domain:excatly for this domain,you can use the domain,but if you set cookie for “www.test.com”,the cookie is also active for the subdomain of it,include the parent main domain “www.test.com”
$secure:you can make it “true” or “false”,it means whether you make the cookie available only for the https connection is established
$httponly:the same value “true” or “false”,to make the cookie available only for the http protocol(not for javascript)
Blow is an example of usage of cookie for PHP:
<?php setcookie( 'clientname', 'Peter Griffin', time()+60*30, '/example/', 'test.test.com', false,true); ?>
The code make a cookie named clientname and the value is Peter Gfiffin,it will not be available after 60*30 seconds(30 minutes),the cookie is attach to domain “test.test.com”,you can use the cookie if a http protocol is established and it is just for http protocol,not javascript.
Awesome!
With my tutorial,you have learn how to make a cookie,next i will show you something important of cookie and then how to get the value of your cookie.
To prevent cookie hogging huge hardspace of the client,your cookie can’t be lager than 4096 bytes(4kb) and the number of each domain is also limited,that is twenty cookies.Another thing is you must avoid set the private features to the server automatically,for cookies are usually sent through a non-secure connection,so the content could easily be seen by any potential attackers.
How to get my cookie and to decide whether i have logined or not?
There is a evronment variable $_COOKIE[],it is an array,your total cookies will been put in it, so you can get any cookie like this:$_COOKIE['username'].
All you have seen above,is the basic use of cookie in php,next i will show you how to do with id in javascript.
Javascript doesn’t offer a nice solution of cookie like php,but it is still widely used in client-sides.As the snippet below:
//get current date var expiredate = new Date(); //increase date by 5 hours expiredate.setHours( expiredate.getHours() + 5); document.cookie = 'cookiename=cookievalue; expires=' + expiredate.toUTCString() + 'path=/example/; domain=test.envato.com';
Have you noticed it a similar usage with php?
Yes,the syntax is quite similar with php.
var cookieName = 'testcookiename';
var textArray = document.cookie.split(';'); //put all the parts of the string in an array
for(var i = 0; i < textArray.length; i++){ // loop though all string pieces
var textPiece = textArray[i]; //contains 1 string piece
//filter beginning spaces
while(textPiece(0)==' ') textPiece = textPiece.substring(1,textPiece.length);
//if the textpiece contains our cookies name
if (textPiece.indexOf(cookieName)== 0){
//return whats after the cookies name
return textPiece.substring(cookieName.length,c.length);
}
}
O,no,it makes me headache to read cookie set by javascript!It is a bad experience!
Luckily guys,i have find two function to do it.
function writeCookie(cookieName, cookieValue, expireHours, path, domain){
var date = new Date();
date.setHours(date.getHours + expireHours);
document.cookie = cookieName + '=' + cookieValue + '; expires=' + date + '; path=' + path + '; domain=' + domain;
}
function readCookie(cookieName){
var textArray = document.cookie.split(';');
for(var i = 0; i < textArray.length; i++){
var textPiece = textArray[i];
while(textPiece(0)==' ') textPiece = textPiece.substring(1,textPiece.length);
if (textPiece.indexOf(cookieName)== 0) return textPiece.substring(cookieName.length,c.length);
}
}
Please do bear in mind that these snippets don’t contain any error checking.
Best practices
1.you should never leave sensitive data in cookie like the user’s personal infomation.
2.Always fileter strings and numbers from cookies.An attacker could write malicious data to cookie in order to do something you don’t want your service to do.
3.Try to estimate how long the cookie should be valid,and set the expiration date accordingly.
4.Always set the secure and httponly to meet your application demands. If your application doesn’t edit the cookies with JavaScript, enable httponly. If you always have an HTTPS connection, enable secure. This improves the data’s integrity and confidentiality.
This toturial is mostly modified form nettut,which i offen find news toturial to study,i like nettut,it is very useful.
I hope this toturial will meet your need for a chance.