Woork

10 Interesting lightweight jQuery plugins for web developers

2009-07-14T12:54:00.000-07:00

In this post I want to suggest you ten interesting lightweight jQuery plugins for web developers. This list includes a lightbox, an HTML markup editor, some plugins to work with images, a tooltips creator and a PHP interface for jQuery.

1. ColorBox
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3 (only 9KB). It supports photos, photo groups, slideshow, ajax, inline, and iframed content; appearance is completely controlled through CSS so users can restyle the box; behavior settings can be over-written without altering the ColorBox javascript file. ColorBox is completely unobtrusive, requires no changes to existing HTML, preloads background images to avoid flash of unstyled content on first use. It can preload upcoming images in a photo group.

2. markItUp!
markItUp! is is a JavaScript plugin built on the jQuery library (just 6.5 KB). It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

3. jFlow
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2KB minified.

4. JPolite
JPolite - jQuery POrtal Lite - is a lightweight front-end web portal framework based on jQuery (5 KB). The focus is easy content integration at the front-end, through an intuitive naming system and conventions plus simple and easy configuration. Developers can make use of various server side technologies and frameworks to generate content for the portal. Features: Flexible layout configurations, Module drag-drop (thanks to jQuery UI Simple UI controls (Tabs, accordion, ...), Sample RSS Reader. Take a look at the demo here.

5. vTip
vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

6. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned.

7. Wilq32.RotateImage
Wilq32.RotateImage is a lightweight and very simple to use plugin to rotate images.

8. jqModal
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.

9. jQPie
The idea of jQPie is to provide a lightweight PHP interface to jQuery. The lightweight interface allows multiple ways to interact. jQPie is lightweight, supports XML, HTML and JSON, handlers
API is simple, while the handlers engine is PHP based the javascript library is usable by any language and includes a powerful autocomplete plugin, plans to provide other plugins for use and as examples.

10. jContext
jContext is an ultra-lightweight right click context menu for jQuery. How lightweight is jContext? It’s approximately 0.6kB when minified.

Do you have any suggestion? Please leave a comment. Thanks!

Freelance Web Designers List

2009-07-13T12:57:00.000-07:00

I often receive several requests from my readers that ask to me to collaborate to their web projects but because I'm totally busy with my "real" work, this blog and the book I'm writing, I can't accept their offers. Then, every time, they ask to me to suggest them a friend of mine that can work on their project. So I think could be useful to start on this blog a list of web designers interested to collaborate in freelance projects.

If you are a freelance web designer, please leave a comment with your main information (name, short introduction about you, link to your website/portfolio). Please NO SPAM. Thanks!

Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery

2009-07-12T02:37:00.000-07:00

This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:

You can download the full code here and reuse it for free on your projects.

I suggest you to take also a look at these posts:

- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API

1. A little introduction

This package contains the following files:

- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework

How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).

I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.

2. index.php: HTML code

HTML code is very simple. Copy the following code in the tag <body>:

<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>

...and add into the tag <head> of the page a link to jQuery:

The result is a simple search form:

3. search.php
Now copy and paste the following code into search.php:

<?php
include('search.php');
if($_POST['twitterq']){

$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){

echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';

}

}
?>

$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

... and to get a specific attribute of the array I used this simple code:

$result->name_of_element

Take a look at this post for info about the search on Twitter.

4. index.php: JavaScript Code

Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:

function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){

window.setTimeout(function () {
clearInterval(myInterval);
});

}
},2000);
}

$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({

type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}

});
return false;
});

});
</script>

This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.

That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.

- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API

10 Fresh tools and resources for web developers

2009-07-10T08:44:00.000-07:00

In this post I want to suggest you some interesting tools and resources for web developers. This list includes a CSS framework to design sitemaps using HTML lists, some interesting JavaScript frameworks, some interesting jQuery plug-in, a PHP face detection script, a tutorial to work with the Twitter API and a tutorial about how to retrieve your Gmail emails using PHP.

1. SlickMap CSS, A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

2. WaveMaker 5
WaveMaker gives you an easy and productive way to build Web 2.0 applications. Typical applications include a rapid prototyping and development, a form-driven database apps, a front end "face" for SOA architecture.

3. QuickFlip jQuery Plugin
QuickFlip is a jQuery plugin that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

4. Face detection in pure PHP
Maurice Svay released this interesting face detection script to detect automatically faces in photos with PHP.

5. PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

6. jQuery Blend
Blend is a jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds (just 1.4KBs).

7. Twitter API: Simple Twitter Search using PHP
This post illustrates how to implement a simple Twitter search and display search results in a web page with a custom format.

8. Flapjax
Flapjax is a new JavaScript framework designed around the demands of modern, client-based Web applications. Its principal features include: Event-driven, reactive evaluation; An event-stream abstraction for communicating with web services; Interfaces to external web services.

9 Glow
Glow is a JavaScript library which aims to make working with JavaScript and the DOM easier. It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

10. Retrieve Your Gmail Emails Using PHP and IMAP
Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Take a look at this interesting post of David Walsh.

How to implement a launching soon page with PHP and jQuery

2009-06-29T10:24:00.000-07:00

In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:

Take a look at the live preview here.

This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!

A little introduction
How I said this package is ready to use and contains these files:

- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script

1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.

The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:

The only thing you have to do is to add this line of code in the <head> tag of the page:

Then, in the tag <body> add the following lines of code to display the countdown:

<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>

To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):

new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")

...if your target date is 25 December the previous line becomes:

new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")

If you want to change the style of the countdown you have to modify the following CSS classes:

.count_down{...}
.count_down sup{...}

In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".

jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:

Now, in the tag <body> add a simple form with an input field:

<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>

...and add this layer to display a custom message when an user submit the form:

<div id="update_success">E-mail added!>/div>

...the result after the submission is here:

The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:

$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});

</script>

2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:

<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);

$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>