birghtyoursite

html5 audio and video

admin — Fri, 04 Jun 2010 18:46:25 +0000

Html5 is coming, are you ready? Let’s start learning html5,you may heard of the some new tags of html5:canvas, audio , video .those is the stars of the html5,I already saw some wordpress theme use canvas now,also apple already use video on his site.so today let’s start by a simple audio example .

To be continued

use php to get google page rank

admin — Tue, 01 Jun 2010 17:37:47 +0000

Since the google not give a API or interface to get the google page rank, we have to use google toolbar to get the PR. In order to use php to query toolbarqueries.google.com to the get PR, I did a search ,but most of the codes are too old and can’t use or not work well, at last i got following script works well.

use php to get google page rank

there is all the codes :


function StrToNum($Str, $Check, $Magic)
{
    $Int32Unit = 4294967296;  // 2^32
 
    $length = strlen($Str);
    for ($i = 0; $i < $length; $i++) {
        $Check *= $Magic;
        //If the float is beyond the boundaries of integer (usually +/- 2.15e+9 = 2^31),
        //  the result of converting to integer is undefined
        //  refer to http://www.php.net/manual/en/language.types.integer.php
        if ($Check >= $Int32Unit) {
            $Check = ($Check - $Int32Unit * (int) ($Check / $Int32Unit));
            //if the check less than -2^31
            $Check = ($Check < -2147483648) ? ($Check + $Int32Unit) : $Check;
        }
        $Check += ord($Str{$i});
    }
    return $Check;
}
 
//--> for google pagerank
/*
* Genearate a hash for a url
*/
function HashURL($String)
{
    $Check1 = StrToNum($String, 0x1505, 0x21);
    $Check2 = StrToNum($String, 0, 0x1003F);
 
    $Check1 >>= 2;
    $Check1 = (($Check1 >> 4) & 0x3FFFFC0 ) | ($Check1 & 0x3F);
    $Check1 = (($Check1 >> 4) & 0x3FFC00 ) | ($Check1 & 0x3FF);
    $Check1 = (($Check1 >> 4) & 0x3C000 ) | ($Check1 & 0x3FFF);
 
    $T1 = (((($Check1 & 0x3C0) << 4) | ($Check1 & 0x3C)) <<2 ) | ($Check2 & 0xF0F );
    $T2 = (((($Check1 & 0xFFFFC000) << 4) | ($Check1 & 0x3C00)) << 0xA) | ($Check2 & 0xF0F0000 );
 
    return ($T1 | $T2);
}
   //--> for google pagerank
/*
* genearate a checksum for the hash string
*/
function CheckHash($Hashnum)
{
    $CheckByte = 0;
    $Flag = 0;
 
    $HashStr = sprintf('%u', $Hashnum) ;
    $length = strlen($HashStr);
 
    for ($i = $length - 1;  $i >= 0;  $i --) {
        $Re = $HashStr{$i};
        if (1 === ($Flag % 2)) {
            $Re += $Re;
            $Re = (int)($Re / 10) + ($Re % 10);
        }
        $CheckByte += $Re;
        $Flag ++;
    }
 
    $CheckByte %= 10;
    if (0 !== $CheckByte) {
        $CheckByte = 10 - $CheckByte;
        if (1 === ($Flag % 2) ) {
            if (1 === ($CheckByte % 2)) {
                $CheckByte += 9;
            }
            $CheckByte >>= 1;
        }
    }
 
    return '7'.$CheckByte.$HashStr;
}
        //get google pagerank
function getpagerank($url) {
    $query="http://toolbarqueries.google.com/search?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";
    $data=file_get_contents_curl($query);
    //print_r($data);
    $pos = strpos($data, "Rank_");
    if($pos === false){} else{
        $pagerank = substr($data, $pos + 9);
        return $pagerank;
    }
}
function file_get_contents_curl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_URL, $url);
    $data = curl_exec($ch);
    curl_close($ch);
 
    return $data;
}
?>

How to use it

Save the previous codes to a pr.php , the test.php


include "pr.php";
$url='http://www.brightyoursite.com';
echo "$url  PR is ". getPagerank($url) ;
?>

Source File

php get google page rank

live demo

Update

Google have updated the pr search url,please change

  $query="http://toolbarqueries.google.com/search?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";

 $query="http://toolbarqueries.google.com/tbr?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";

nice web font with google font api

admin — Fri, 28 May 2010 11:25:01 +0000

Are you still use flash and images for the art font in your web? if so you should know the magic of Google Font Directory and Google Font API , you can use all the font in the Google Font Directory , also it’s very easy to install.

What’s google font api

Google Font API helps you add Google Font Directory web fonts to any web page.It provide high quality open source fonts,works in most browsers,also as other gooles services it’s very easy to use.

Add google font api to your site

First,you need add the google font css,for instance:

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

this import the Tangerine font style,but if you want to use multiple fonts,for example you need add 1 more font Inconsolata,the css link should be

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata">

then you need apply the css style to the element you want

CSS selector {
  font-family: 'Font Name', serif;
}

or use a inline css

 style="font-family: 'Font Name', serif;">Your text>

let’s see a live sample

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
  style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!>
/* add this in the body */

result is:

Making the Web font looks nice!

this sentence is ordinary text, so it will not effect the other style (like color,text-shadow….) you add for this sentence .

Complex sample

I think you may love it now,let’s see what’s more the google font api can do?The google font api provide more options for the font style, like italic or bold,here is the rules
"
To request multiple font families, separate the names with a pipe character (|).
the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,)
"
also for weights, you can alternatively specify a numerical weight; for example

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

this means load Cantarell italic font ,Droid+Serif blod font and Tangerine font with font weight 700.
the live sample

 style=" font-size:30px ">Enjoyed it,Happy reading!>
 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!>

Enjoyed it,Happy reading!

php check string is contains a substring

admin — Sun, 23 May 2010 17:17:21 +0000

Use php to check a string contains substring there maybe many ways, the strpos maybe the most used way, but it’s strange, it not work for me why? That’s what i want to say: the thing you need take care while use strpos .

what’s strpos

Check the php Manual: " strpos — Find position of first occurrence of a string "

int strpos  (  string $haystack  ,  mixed $needle  [,  int $offset = 0  ] )

and for the return value:
"Returns the position as an integer. If needle is not found, strpos() will return boolean FALSE. "

Here is how i use this:

$str = 'google.com';
$find= 'gle.';
if(strpos($str, $find))
{
  echo "find ";
}
else
{
  echo "not find";
}

Run it,it seems works correctly.Do you find the problem? For this sample,It work but let’s try this one:

$str = 'google.com';
$find= 'google.';
if(strpos($str, $find))
{
  echo "find ";
}
else
{
  echo "not find";
}

It’s show "not find", why? the strpos return 0, not 1 . so even the substring found , it’s still show "not find"

the right way for strpos

Since we know strpos will give a numeric value if found else it is null or false,so let’s see the right way:

$str = 'google.com';
$find= 'google.';
if(is_numeric(strpos($str, $find)))
{
  echo "find ";
}
else
{
  echo "not find";
}

$str = 'google.com';
$find= 'google.';
$isfound=strpos($str, $find);
if($isfound!== false)
{
  echo "find ";
}
else
{
  echo "not find";
}

So you know more about strpos now,Happy reading!

delete specific column duplicate data in mysql

admin — Sun, 23 May 2010 17:09:29 +0000

I have a mysql table site_visitor with vid(auto_increment),IP,page,visit_time… columns, the problem is many duplicate IP data in the table, only the IP column data is duplicated while the others like isp,visit_time… are not, i did much test and finally find a very simple way.

delete specific column duplicate data in mysql

DELETE duplicate_rows.*
FROM site_visitor AS single_rows
   INNER JOIN site_visitor  AS duplicate_rows ON duplicate_rows.IP= single_rows.IP
      AND duplicate_rows.vid> single_rows.vid;

just run those mysql codes via phpmyadmin or via php query, you will see it’s a magic.

Make IE8 Display in IE7 Compatibility Mode

admin — Tue, 04 May 2010 09:19:43 +0000

Browser compatibility is realy pain for css coders,this is a quickly to fix the the pages have problems IE8 while looks good in IE7,just following line in the tag on the page,

but some one failed while others success,why?

the key of use

The key of use this is add this tag before all the css so the IE8 browser can know h, i need display this page in IE7 Compatibility Mode.

wordpress cs-cart e-commerce solutions

admin — Mon, 26 Apr 2010 14:50:39 +0000

wordpress is a very popular cms and easy to use, i saw most of the people use wp-ecomence for the wordpress e-commerce solutions.so this article will told u how to add cs-cart cart to the wordpress pages

How the cs-cart cart work

Install cs-cart on your server, when you add a product it will use ajax to post the data to the server then get back the new cart information and update the cart, so as we know this, we can easy to use same ajax function to add the cs-cart cart in the wordpress pages by ajax call.

First, we need rip the css of the cart (under the main navigation) to the wordpress , you may need adjust the css so it can looks well in your wordpress blog, then you need add the understand the cs-cart ajax function and write your own ajax function in the wordpress blog,at last test it, all ok , that’s it!!!

see a live sample there :http://www.ebusinesshosting.ca/ , and this is the cs-cart store http://www.ebusinesshosting.ca/store/I will try to make it work as plugin.
To be continued

windows2003 apache .htaccess Server error fix

admin — Sat, 17 Apr 2010 06:20:11 +0000

This problem happen when i change IIS to apache on windows server 2003.
Server error!
The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there was an error in a CGI script.
let me share the way how i fixed this,hope this can help you.

Introduce

I have a php which work with win2k3 and IIS, but this not steady and aways have problems happen, sometimes load very slow, so i decide to use apache,and then i use XAMPP to install apache php on my server, at last all works ok except the url rewrite with .htaccess.For iis i use IIRF to do the url rewrite, it’s similar to .htaccess, so i copy the rewrite rules to the .htaccess directly.Once i enabled the .htaccess rules ,the site got the error:

Server error!
The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there was an error in a CGI script.

The way fix

At begining, i google this error, and get following suggestions:

1. make sure you enabled the rewrite modle in apache httpd.conf
2. all following to your .htaccess
AddType application/x-httpd-fastphp5 .php
Action application/x-httpd-fastphp5 /fcgi-bin/php5fcgi
AddType application/x-httpd-php5 .php
Action application/x-httpd-php5 /fcgi-bin/php5fcgi
3. add Options Indexes FollowSymLinks to the .htaccess
4. ….

I see, some are works for others ,but none of those worked for me. XAMPP enabled the rewrite module by default .
here is my .htaccess file

RewriteRule  ^myMB.html  myMB.php [I,L]

it’s a simple line, but make the site down.Add finally, i find the problem.Go to the

xampplite\apache\logs

and open error.log , at the bottom of the log i see something

.....htdocs/.htaccess: RewriteRule: unknown flag 'I'

I find the problem easy, It’s the unknown flag ‘I’, that’s only for IIRF not apache .htaccess. After remove this flag ,the site work again.

Summary

I post this article, just want to say: when we got similar type of errors,we should look at the log files first, that can make we know the error more clearly. maybe just a small fault it can caused big problem, check the log file will save your time and help you fix the problem. Let’s all keep the good habits of check log file.Enjoy Reading!!

awesome jquery slide menu

admin — Sat, 17 Apr 2010 03:37:09 +0000

Add some lines of javascript codes to your page, you will see it’s magic: It make your normal menu looks more elegant. Have a try , you will see the fascination of animate menu .let’s go…

Online demo

Nothing better than a demo:awesome jquery slide menu

Add to your site

First,download the source file and upload to js ,css , images to your site root folder , and then add following codes between and

    type="text/javascript" src="jquery-latest.pack.js">>
     type="text/javascript" src="slide.js">>  
     href="style.css" rel="stylesheet" type="text/css" />

HTML codes

  id="menu" class="menu">
	 >
	 > href="javascript:;">Home>>
	 > href="javascript:;">HTML/CSS>>
	 > href="javascript:;">JavaScript>>
        > href="javascript:;">Resources>>
	> href="javascript:;">Tutorials>>
	> href="javascript:;">About>>
	 >
 >

You can see it’s no difference with your normal menu.So the only thing you need to do is adjust your css file, add extra style to the slide menu .

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}

You can Reference the style.css in the download files to adjust your own css.so if you understand css well, it’s easy to create one of yours.Good luck!!

Download

awesome jquery slide menu & source codes
Enjoy it !!!

Reference :http://www.cnblogs.com/wiky/archive/2010/04/15/animated-menu-0415.html

superslider – another great jquery slider plugin

admin — Mon, 12 Apr 2010 10:14:12 +0000

This is great content slider with tabs which can be used on your home page , it’s can be images slider also can used for text content.Just have a look of the demo , sure you will love it!

Online demo

Let’s have glance at the slider: super jquery slider

Options

defaults = {
		contentlist:'.contentlist',
		textlist:'.textlist',
		btnlist:'.btnlist', 
		timeout:2000
	   };

the html structure ：

 class="ifocus">
   class="ifocus_pic">
	  class="contentlist">
		 >
			 >slider content>
			 >slider content>
			 >slider content>
			 >slider content>
		 >
	 >
	  class="ifocus_opdiv">>
	  class="textlist">
		 >
			  class="current">slide up text>
			 >slide up text>
			 >slide up text>
			 >slide up text>
		 >
	 >
   >
    class="btnlist">
		 >
			  class="current" > src="images/b1.gif" alt="control button 1" />>
			 > src="images/b2.gif" alt="control button 2" />>
			 > src="images/b3.gif" alt="control button 3" />>
			 > src="images/b4.gif" alt="control button 4" />>
		 >
  >
>

With the html structure , it’s easy to understand the options:
contentlist : the class name of the wrapper of the slide contents
textlist : the class name of the wrapper of the slide up texts
btnlist : the class name of the wrapper of the control buttons images
timeout : the auto slide change interval

how to use?

Insert those JAVASCRIPT Codes between and :

    <link href="superslider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" language="javascript" src="jquery-latest.pack.js" >script>
    <script type="text/javascript" language="javascript" src="jquery.superslider.js" >script>
    <script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
          $('.ifocus').superSlider();
     });
   script>

The html codes to show the slider:

 class="ifocus">
	 class="ifocus_pic">
		 class="contentlist">
			>
				> href="http://www.brightyoursite.com/" target="_blank"> src="images/a1.jpg" alt="" />>>
				> href="http://www.brightyoursite.com/" target="_blank"> src="images/a2.jpg" alt="" />>>
				> href="http://www.brightyoursite.com/" target="_blank"> src="images/a3.jpg" alt="" />>>
				> href="http://www.brightyoursite.com/" target="_blank"> src="images/a4.jpg" alt="" />>>
			>
		>
		 class="ifocus_opdiv">>
		 class="textlist">
			>
				 class="current">fire  href=''>link>>
				 class="normal">design idea  href="http://www.brightyoursite.com/blog/" target="_blank">Elegant design>>
				 class="normal">Beautiful city >
				 class="normal">word of the day>
			>
		>
	>
	  class="btnlist">
		>
			 class="current" id="p0"> src="images/b1.gif" alt="" />>
			 id="p1"> src="images/b2.gif" alt="" />>
			 id="p2"> src="images/b3.gif" alt="" />>
			 id="p3"> src="images/b4.gif" alt="" />>
		>
	>
>

This plugin support muti-slider one page. You also can use id to choose the slider and modify the default options, for instance :

  $('#slider1,#slider2').superSlider(
     contentlist:'.contentlist',
     textlist:'.textlist',
     btnlist:'.btnlist', 
     timeout:3000
  );

That’s all, enjoy it !!!

Download Soure Codes & Example

jquery super slider plugin

Need customize it?

If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .

Donate

if you find it useful for you and like it very much , please make a

thanks for your support!