jQuery tablersorter is a jQuery plugin that allows sorting columns in a table by their header.
(more…)
Tutorials
Table Sorting with jQuery tablesorter
Thursday, June 24th, 2010jQuery iTunes-like Content Slider
Wednesday, June 23rd, 2010Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.
NetTuts has a great iTunes-like Content Slider tutorial that explains how to make a content slider in jQuery.
We’ve made a few modifications to their example:
- Thumbnails are made by showing a smaller version of the same image using CSS, so an additional thumbnail graphic does not need to be created and so the user only has to load the graphic once.
- Rounded corners were added using a PNG graphic overlay on top of the content slider.
- We made a second version of the jQuery code to reverse the order of the content in the slider.
First we added the rounded corners and left the order in which it displays the content alone:
View The Demo
Then we created another version with the order in which it displays the content reversed:
View The Demo
Both examples use the following HTML markup & CSS:
<div id="gallery"> <img src="images/slider/1.jpg" alt="" /> <img src="images/slider/2.jpg" alt="" /> <img src="images/slider/3.jpg" alt="" /> <img src="images/slider/4.jpg" alt="" /> <img src="images/slider/5.jpg" alt="" /> <img src="images/slider/6.jpg" alt="" /></div> <div id="thumbs"> <img src="images/slider/1.jpg" alt="" /> <img src="images/slider/2.jpg" alt="" /> <img src="images/slider/3.jpg" alt="" /> <img src="images/slider/4.jpg" alt="" /> <img src="images/slider/5.jpg" alt="" /> <img src="images/slider/6.jpg" alt="" /></div>
#gallery, #thumbs { float: left; } #gallery-overlay { background: transparent url('../images/home-slider-overlay.png'); position: absolute; display: block; width: 800px; height: 300px; z-index: 200; } #gallery { width: 600px; height: 300px; overflow: hidden; } #gallery img { position: absolute; display: block; } #thumbs { width: 200px; height: 300px; overflow: hidden; } #thumbs img { width: 200px; height: 100px; } .clear { clear: both; }
The upwards moving thumbnails example uses the following jQuery script:
$(document).ready(function() { var index = 0; var images = $("#gallery img"); var thumbs = $("#thumbs img"); var thumbsHeight = 100; thumbs.slice(0,3).clone().appendTo("#thumbs"); for (i=0; i <(thumbs.length-1)){index+=1 ; } else {index=0} show (index); } function show(num) { images.fadeOut(400); $(".image-"+num).stop().fadeIn(400); var scrollPos = (num+1)*thumbsHeight; $("#thumbs").stop().animate({scrollTop: scrollPos}, 400); } });
The downwards moving thumbnails example uses the following jQuery script:
$(document).ready(function() { var images = $("#gallery img"); var thumbs = $("#thumbs img"); var index = thumbs.length-1; var thumbsHeight = 100; thumbs.slice(thumbs.length-3,thumbs.length).clone().prependTo("#thumbs"); for (i=0; i < thumbs.length && index > 0) {index -= 1 ; } else { index = thumbs.length-1 } show ( index ); } function show(num) { images.fadeOut(400); $(".image-"+num).stop().fadeIn(400); var scrollPos = ( (num-1) * thumbsHeight ) + 100; $("#thumbs").stop().animate({scrollTop: scrollPos}, 400); } });
HTML E-mail Signatures in Thunderbird
Saturday, April 24th, 2010In this tutorial we explore creating an HTML signature for your e-mail account. This tutorial explains creating and using a signature in Mozilla Thunderbird, but other e-mail clients should have similar functionality.
(more…)
Read-Only Exchange Tasks to ICS Calendar in PHP
Monday, April 12th, 2010Using examples from Troy Wolf’s website, I’ve created a PHP script that will get Tasks for a user in Microsoft Exchange and create an ICS format calendar which can then be loaded (read only) into Mozilla Thunderbird.
<?php require_once("class_http.php"); require_once("class_xml.php"); $exchange_server = "http://exchange.yourwebsite.com"; // no trailing slash $exchange_username = ""; $exchange_password = ""; $h = new http(); $h->headers["Content-Type"] = 'text/xml; charset="UTF-8"'; $h->headers["Depth"] = "0"; $h->headers["Translate"] = "f"; $h->xmlrequest = '<?xml version="1.0"?>'; $h->xmlrequest .= <<<end <g:searchrequest xmlns:g="DAV:"> <g:sql> SELECT "DAV:id" AS uid, "DAV:href" AS url, "DAV:creationdate" AS created, "urn:schemas:httpmail:subject", "urn:schemas:httpmail:textdescription", "urn:schemas:calendar:location" AS location, "http://schemas.microsoft.com/mapi/id/{00062003-0000-0000-C000-000000000046}/0x811c" AS completed, "http://schemas.microsoft.com/mapi/id/{00062003-0000-0000-C000-000000000046}/0x00008105" AS duedate, "http://schemas.microsoft.com/mapi/id/{00062003-0000-0000-C000-000000000046}/0x00008104" AS start FROM Scope('SHALLOW TRAVERSAL OF "/exchange/$exchange_username/Tasks"') WHERE "DAV:contentclass" = 'urn:content-classes:task' AND CAST("http://schemas.microsoft.com/mapi/id/{00062003-0000-0000-C000-000000000046}/0x811c" AS "boolean") = CAST(false AS "boolean") ORDER BY "DAV:creationdate" DESC </g:sql> </g:searchrequest> END; if (!$h->fetch($exchange_server."/exchange/$exchange_username/Tasks", 0, null, $exchange_username, $exchange_password, "SEARCH")) { exit(); } $x = new xml(); if (!$x->fetch($h->body)) { exit(); } function format_time($date_string) { $date = str_replace("-", "", $date_string); $date = str_replace(":", "", $date); $date = substr($date, 0, -5); return $date; } function format_time_z($date_string) { $date = str_replace("-", "", $date_string); //$date = str_replace(".000Z", "Z", $date); $date = str_replace(":", "", $date); $date = substr($date, 0, -5); return $date."Z"; } header("Content-Type: text/x-vCalendar"); header("Content-Disposition: inline; filename=tasks.ics"); echo "BEGIN:VCALENDAR\n"; echo "VERSION:2.0\n"; echo "PRODID:-//Mozilla.org/NONSGML Mozilla Calendar V1.1//EN\n"; echo "METHOD:PUBLISH\n"; echo "BEGIN:VTIMEZONE\n"; echo "TZID:America/New_York\n"; echo "X-LIC-LOCATION:America/New_York\n"; echo "BEGIN:DAYLIGHT\n"; echo "TZOFFSETFROM:-0500\n"; echo "TZOFFSETTO:-0400\n"; echo "TZNAME:EDT\n"; echo "DTSTART:19700308T020000\n"; echo "RRULE:FREQ=YEARLY;INTERVAL=1;BYDAY=2SU;BYMONTH=3\n"; echo "END:DAYLIGHT\n"; echo "BEGIN:STANDARD\n"; echo "TZOFFSETFROM:-0400\n"; echo "TZOFFSETTO:-0500\n"; echo "TZNAME:EST\n"; echo "DTSTART:19701101T020000\n"; echo "RRULE:FREQ=YEARLY;INTERVAL=1;BYDAY=1SU;BYMONTH=11\n"; echo "END:STANDARD\n"; echo "END:VTIMEZONE\n"; foreach($x->data->A_MULTISTATUS[0]->A_RESPONSE as $num => $event) { $UID = $event->A_PROPSTAT[0]->A_PROP[0]->UID[0]->_text; $SUMMARY = $event->A_PROPSTAT[0]->A_PROP[0]->D_SUBJECT[0]->_text; $DESCRIPTION = $event->A_PROPSTAT[0]->A_PROP[0]->D_TEXTDESCRIPTION[0]->_text; $CREATED = format_time_z($event->A_PROPSTAT[0]->A_PROP[0]->CREATED[0]->_text); $STAMP = format_time_z($event->A_PROPSTAT[0]->A_PROP[0]->START[0]->_text); $START = format_time($event->A_PROPSTAT[0]->A_PROP[0]->START[0]->_text); $DUE = format_time($event->A_PROPSTAT[0]->A_PROP[0]->DUEDATE[0]->_text); $COMPLETED = $event->A_PROPSTAT[0]->A_PROP[0]->COMPLETED[0]->_text; echo "BEGIN:VTODO\n"; echo "CREATED:$CREATED\n"; echo "LAST-MODIFIED:$START\n"; echo "SUMMARY:$SUMMARY\n"; echo "DTSTAMP:$START\n"; echo "UID:$UID\n"; echo "SUMMARY:$SUMMARY\n"; echo "DTSTART;TZID=America/New_York:$START\n"; echo "DUE;TZID=America/New_York:$DUE\n"; # echo "X-MOZ-GENERATION:2\n"; # echo "DESCRIPTION:$DESCRIPTION\n"; echo "END:VTODO\n"; #var_dump($x); break; die(); } echo "END:VCALENDAR"; // You can print out the response to help troubleshoot. ?>
Microsoft Outlook: Add A New E-mail Account
Wednesday, September 2nd, 2009Microsoft Outlook is an e-mail client that comes with the Microsoft Office application suite. Microsoft Outlook Express is a light-weight version of Outlook which comes with most versions of Windows. This HOWTO will explain how to add a new e-mail account in both Microsoft Outlook and Microsoft Outlook Express.
Monitor A Remote Linux System From Windows with GKrellM
Wednesday, September 2nd, 2009GkrellM is a single process stack of system monitors which supports applying themes to match its appearance to your window manager, Gtk, or any other theme. This HOWTO will explain how to install the gkrellmd (GKrellM Daemon) under Linux and how to install the gkrellm client under Windows using Bill Nalens‘ Win32 port of GKrellM.
Generate A Random Password in PHP
Tuesday, May 12th, 2009The following function will generate a random password or alphanumeric string…


