Catch me if you can!
Here is a very nice tutorial that +Codrops calls Direction-Aware Hover Effect. Using #CSS3 and #jQuery you can have animated effects when hovering over an element that takes into account the cursor movement. This creates a unique effect on each move a user makes.
Check it out here http://bit.ly/Ip24dH
Google+: Reshared 1 times
Google+: View post on Google+
Die Flash, Die!
If you hate using Flash for your chart needs or just want a modern solution that will work on all devices, here are some alternatives:
1) Morris.js, based on #jQuery and #Raphaël , will give you beautiful looking line charts http://bit.ly/IqRdA9
2) From the maker of Highslide, Highcharts provides a range of chart options and works with either jQuery, #MooTools or #Prototype frameworks http://bit.ly/IeyibA
3) jqPlot is also based on jQuery and provides several types of charts http://bit.ly/IFBNml
4) Flot is another jQuery solution with support for lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series. http://bit.ly/HwGGEk
If you have any other suggestions, drop them in the comments 
Morris.js
Google+: Reshared 3 times
Google+: View post on Google+
Here is a nice #jQuery plugin to enhance the photos on your website with more information. iPicture allows you to add tooltips over any photo. You can set exactly where tooltip will show up and the text that will be shown. Check it out here http://bit.ly/Hsfw0l
Google+: Reshared 1 times
Google+: View post on Google+
You don't
So you decided to join the mobile world and create a unicorn/droid-ready version of your site. If you happen to use big tables of data on one of your pages you find out they don't really fit in a small screen.
The good guys of the filament group have come up with a #jQuery / #CSS3 / #responsivedesign solution that comes down to this:
- select what is important for a small screen
- show it and hide the rest
- adjust the presentation according to the device so that you don't have to have 3 versions of the same thing
- give the user the option in any case.
Read on how to do it: A Responsive Design Approach for Complex, Multicolumn Data Tables at http://bit.ly/xtiPo0
Google+: View post on Google+
Not magic, JavaScript
Here's a small gem of #jQuery coding: jQSlickWrap is a #plugin which allows for easily wrapping your text around images, respecting the image's content, as you would do in a DTP program.
The specs:
- Client-side, Sliced and Diced Sandbags using HTML 5's new <canvas /> element
- CSS-based padding
- Sandbag "resolution" is configurable
- Written with Progressive Enhancement in mind
- Optional "bloom" mode provides ultra-precise padding
Works in Firefox 3.5+, Chrome, Safari 4+, Opera 11+, but not in Internet Explorer (degrades to "regular" wrapping). See the image below for a demonstration and get it here http://bit.ly/wSG1ou
Google+: View post on Google+
I've been using an old #jQuery plugin called "jquery.gantt" with limited features and it was time for an upgrade. My search ended with JSGantt, an open source #javascript solution that covers everything you would want:
- Task, (collapsible) task groups & milestones
- Multiple dependencies
- Multiple formats (day, week, month, etc)
- Data loading through XML
Get JSGantt here http://bit.ly/wxeDbO
For an alternative, see dhtmlxGantt http://bit.ly/AEvOr8 (doesn't do multiple periods though, it's only on an daily format)
Google+: View post on Google+
The image below is from the future. 
It shows a context-related right-click menu implemented with just a few lines of #HTML5 code. This is already part of the official HTML 5 spec but is only supported by Firefox at the moment. The spec describes menus that are related to a section, can have sub-menus and even support icons.
Check out how to do it in the example by +David Walsh at http://bit.ly/zmMKJ6 (via +Chris Coyier)
If you can't wait for the future, here's a #jQuery solution http://bit.ly/Aii4rq
Google+: Reshared 9 times
Google+: View post on Google+
See the end-result live here http://360langstrasse.sf.tv/
Embedded Link
Create an interactive street view with jQuery | Tutorial | .net magazine
Severin Klaus explains how Hinderling Volkart created an innovative method of scrolling through video for its 360° Langstrasse website, and how you can use it on your site
Google+: Reshared 1 times
Google+: View post on Google+
but… it's not #jquery
Reshared post from +Elijah Manor
List.js – Add search, sort and flexibility to plain HTML lists with #JavaScript
Embedded Link
List.js – Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve
You do want a 7 KB native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yes?
Google+: View post on Google+
Scenario: you are building a web-based report mechanism with options, filters, etc. You display the results via an AJAX call and then you want to have an "Export to Excel" button. What do you do? The good fellows from the filament group have an elegant solution.
Embedded Link
jQuery Plugin for Requesting Ajax-like File Downloads | Filament Group, Inc., Boston, MA
Google+: View post on Google+
This is the blog of Markos Giannopoulos, devoted to web development, technology, the internets, etc. I've been working on, in and around the web for the last 16 years. You can find me on Google+ and Facebook.
