Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Browsing’ Category

Page Peel effects can be very useful as they create new areas -which are mostly used for banners- on websites.

In general, they are created with the help of Flash but Soh Tanaka is featuring a a very nice tutorial on creating a page peel effect with jQuery & CSS.

jQuery Page Peel Effect

The logic of the effect is simple & smart. It is created by animating the size & position of a peel image which is originally positioned over the content to be shown.

To see a demo for this nice tutorial, click here.

MochaUI is an user interface library built on the Mootools JavaScript framework.

The library does not use any images but canvas tags for gradients, rounded-corners or shadows.

MochaUI

It is very easy to create horizontally and vertically fluid layout modules with columns and panels. Columns and panels (panels can be tabbed) can be collapsed, expanded, and resized.

New windows can be created instantly and they can be:

  • focused, dragged, resized
  • collapsed/expanded
  • maximized/restored
  • minimized/restored and closed.

For an example with most of the features, click here.

tabSwitch is a jQuery plugin for creating tabs & sliders very easily.

It is possible to choose from 7 different effects (fade, show, toggle..) with 2 view styles. Any type of HTML can be used & tabs can be switched as previous-next or directly into a specified one.

tabSwitch - jQuery Tab Plugin

The look of the viewport can be customized via CSS & every single tab can have its own class.

To see the simplicity of usage, here is how it is called & customized:

 $('.SlideTab').tabSwitch('create', {type: 'toggle', height: 300, width: 440}); 

And, tabSwitch can auto-display each tab/slide. More examples for the plugin can be found here.

imgAreaSelect is a jQuery plugin that enables you to create selectable areas on images which is a widely used technique for cropping images.

Once an area is selected, you can get the x-y coordinates & apply any actions on that part of the image like cropping or implementing effects.

jQuery Image Select Plugin

The plugin is very flexible & offers options like:

  • aspect ratio
  • max height, max width
  • opacity
  • whether it can be resize or not
  • keyboard support & more..

There is also an image crop tutorial using imgAreaSelect & PHP that can be found here.

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

jQuery Drag'n DropjQuery Drag'n Drop DemoDownload

The Database:

We create a simple database as below:

jQuery Drag'n Drop Database

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.

The HTML:

We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

Here it is:

<div id="contentLeft">
	<ul>
		<li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
	</ul>
</div>
<p>

 

The JavaScript:

We will be using jQuery UI's sortable plugin.

 <script type="text/javascript">
$(document).ready(function(){ 

	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
			$.post("updateDB.php", order, function(theResponse){
				$("#contentRight").html(theResponse);
			});
		}
		});
	});

});
</script>

We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

<?php
require("db.php");

$action 				= mysql_real_escape_string($_POST['action']);
$updateRecordsArray 	= $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {

		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
		mysql_query($query) or die('Error, insert query failed');
		$listingCounter = $listingCounter + 1;
	}

	echo '<pre>';
	print_r($updateRecordsArray);
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>

You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

OmniGrid is a free grid component for MooTools that has advanced features.

Having inspired from Flexigrid (for jQuery) & sortableTable, OmniGrid offers a similar functionality.

MooTools Datagrid

Besides client-side sorting, with a serverside script (a PHP one is mentioned), it connects to the data & can easily sort/paginate an unlimited number of records.

Columns can be resized, multiple records can be selected (data inside is shown with an accordion), the look can be customized & more.

qTip is an unobtrusive jQuery tooltip plugin with a list of nice features.

It has:

  • rounded corner support without use of any PNGs
  • very flexible tooltip pointers are as they can be positioned in several locations
  • 5 ready to use stylish themes & you can create your own easily
  • support for not-overlacking. How close the tooltips are, they will preserve their stacking order
  • ready to use effects: fade, slide, glow & custom ones can be created

qTip jQuery Tooltip Plugin

The plugin is cross-browser & tested in all major bowsers. It is also very well-documented.

qTip has with a scripting API that allows you to easily extend the functionality through a variety of optional callback methods & attributes. So, you can even extend qTip by writing plugins for it.

KeyTable is a lighweight (~5kb) JS library for adding keyboard navigation support to tables.

The library provides an Excel-like navigation that can be bundled with features like on-click editing.

Keyboard Table And JavaScript

The inline row editing feature is accomplished with the jQuery jEditable plug-in. And,  KeyTable integrates easily with DataTables (see WRD post).

The library works in all major browsers.

This is a lightweight (2.5kb) JavaScript table sorter for getting more out of a standard table.

It has great features like:

  • column & alternate row highlighting
  • pagination (optional)
  • support for links
  • date/link parsing
  • header class toggling
  • auto data type recognition
  • selective column sorting

JavaScript Table Sorter

Any column can be excluded from the sorting functionality with ease.

The script is an updated version of this one (see WRD post) & works in all major browsers.

DataTables is a jQuery plugin for adding advanced interaction controls to HTML tables.

It can add pagination, filtering and multi-column sorting functions to tables with ease.

DataTables jQuery Plugin

The plugin has multilanguage support & many features that make it flexible:

  • Smart handling of column widths
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Alternative pagination types
  • Sorting column(s) highlighting

DataTables can also be extended with the plug-in support it provides & its look can be totally customized via CSS.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com