aciTree is a customizable cross-browser treeview control with jQuery

aciTree is a customizable cross-browser treeview control written as a jQuery plugin (requires at least v1.7.1). It offers a API for controlling things down to the element level and it has built-in functionality to load the entire tree with AJAX.

Features

• supports an unlimited number of 'file' items (items that have no childrens) and 'folder' items (items that can have one or more childrens);
• unlimited number of levels, those can be easily loaded with AJAX (the archive contains a small PHP implementation as an example);
• supports selecting an item, checkbox and radio-button elements, keyboard navigation (the arrow keys, pageup/pagedown, home/end, enter, escape and space can be used), in-place item editing (using f2 key or the mouse and enter/escape keys to save/cancel editing);
• is possible to change the form in which the tree is displayed with CSS, the items allows HTML formatting, the odd/even rows can be styled differently;
• supports displaying multiple columns without using tables, with RTL support;
• you can specify an ICON image for each item (background-position-x and background-position-y can be included so that you can use a single image containing all the icons);
• aciTree provides an easy to use API for handling the tree structure: initialization data read with AJAX or init from a JavaScript variable, adding, removing items, changing ICON images etc;
• by the use of a callback function you can customize the content of each item before it's even inserted in the DOM.

Read More
Demo
 

Play Notification Sound using Jquery.

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.
Read More

How to Make Pagination in PHP

I am trying to solve problem of pagination in PHP. I have decided to give you a very easy pagination code
You can make pagination of static records and database records.

<?php

/**

*$num_rows =  First make a query to get the number of the results

*/

$num_rows = 50;

include('paginator.class.php');

$pages = new Paginator;

 

echo'<pre/>';print_r( $pages->getPaginateData($_GET['page'],$num_rows) );

echo $pages->displayHtmlPages($_GET['page'],$num_rows);

?>

 Read More

How to Callback Cross Domain Data with Jquery & JSON

callback cross domain data with jQuery and JSON(JavaScript Object Notation) is a lightweight data-interchange format.

Just copy and paste this following code between tag. You can display phpgang data.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="http://demo.phpgang.com/JSON/phpgang.json.js"></script> <link href="http://demo.phpgang.com/JSON/phpgang_json.css" rel="stylesheet" type="text/css"> <ol id="phpgang" class="jsonbox"></ol>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="http://demo.phpgang.com/JSON/phpgang.json.js"></script> <link href="http://demo.phpgang.com/JSON/phpgang_json.css" rel="stylesheet" type="text/css"> <ol id="phpgang" class="jsonbox"></ol>

phpgang.json.js
Javascript code read the JSON file.

$(document).ready(function() { $.getJSON("http://demo.phpgang.com/JSON/phpgang_json.php?count=5&jsoncall=?",function(data) { $.each(data.posts, function(i,data) { var jsondata =" <li>"+data.message+"</li> "; $(jsondata).appendTo("ol#phpgang"); }); } ); return false; });

$(document).ready(function() { $.getJSON("http://demo.phpgang.com/JSON/phpgang_json.php?count=5&jsoncall=?",function(data) { $.each(data.posts, function(i,data) { var jsondata ="<li>"+data.message+"</li>"; $(jsondata).appendTo("ol#phpgang"); }); } ); return false; });

phpgang_json.php
Contains PHP code displaying results from Messages table in JSON format.

<?php include('config.php'); if($_GET['count']) { $count=$_GET['count']; $count=mysql_real_escape_string($count); $sql=mysql_query("select msg from messages order by msg_id desc limit $count"); echo $_GET["jsoncall"].'({"posts": ['; while($row=mysql_fetch_array($sql)) { $message=$row['message']; echo ' { "message":"'.$message.'", },'; } echo ']})'; } ?>

<?php include('config.php'); if($_GET['count']) { $count=$_GET['count']; $count=mysql_real_escape_string($count); $sql=mysql_query("select msg from messages order by msg_id desc limit $count"); echo $_GET["jsoncall"].'({"posts": [';   while($row=mysql_fetch_array($sql)) { $message=$row['message']; echo ' { "message":"'.$message.'", },'; }   echo ']})'; } ?>

 phpgang_json.css

*{margin:0px; padding:0px;} ol.jsonbox { font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color:#FFFFFF; list-style:none; width:300px; padding:10px 10px 25px 10px; background:url(http://www.phpgang.com/wp-content/uploads/gang.jpg) bottom right no-repeat; background-color:#333333; text-align:left } ol.jsonbox li { padding-bottom:4px} ol.jsonbox li a{color:#80c8e5; text-decoration:none} ol.jsonbox li a:hover{color:#80c8e5; text-decoration:underline}

*{margin:0px; padding:0px;} ol.jsonbox { font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color:#FFFFFF; list-style:none; width:300px; padding:10px 10px 25px 10px; background:url(http://www.phpgang.com/wp-content/uploads/gang.jpg) bottom right no-repeat; background-color:#333333; text-align:left } ol.jsonbox li { padding-bottom:4px} ol.jsonbox li a{color:#80c8e5; text-decoration:none} ol.jsonbox li a:hover{color:#80c8e5; text-decoration:underline}

MiniTwitter - the Widget JQuery which puts Twitter and your tweets on your Website or your WordPress blog

Features

• Put Twitter on your website and even more: the tweets from the folks you like, the lists and yourself.
• Show up to 100 tweets within 7 days (limit set by Twitter's Search API).
• Use the color of your link profile on Twitter.
• Display tweets from your feed or from the Twitter Search.
• Display tweets from a list or from your favorite users.
• Stylize your feed with your Cascading Style Sheet or with other jquery plugins.
• Compatible with the last jquery version: 1.7.

Usage (Only for the Jquery plugin)

1. Download JQuery or use Google's AJAX Libraries API.
2. Include the JQuery library, jquery.minitwitter.js and the styling sheet: jquery.minitwitter.css in the head of your html file. You can modify the .css file as you like.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/minitwitter/jquery.minitwitter.js" type="text/javascript"></script>
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>

3. In the <body> tag, include this small piece of code where you want to place the plugin and don't forget to change the username (in red) without the @.

<div class="tweets"> <div class="tweets_header">Mini <a href="http://minitwitter.webdevdesigner.com">Tweets</a></div> <div class="content_tweets"> </div> <div class="tweets_footer"> <a href="http://consumimus.fr"><span id="bird"></span></a> </div> </div>
<script type='text/javascript'>
jQuery(".content_tweets").miniTwitter("YOUR_USERNAME");
</script>

Notice: If all your javascript is called in the end of your page just before </body>, just cut and paste:

<script type='text/javascript'>
jQuery(".content_tweets").miniTwitter("YOUR_USERNAME");
</script>

in the end just before the </body>

Read More