Change your scrollbars with jQuery NiceScroll

// For some time changing the look of #scrollbars has been quite tricky but the last couple of years this has become easier. Probably one of the best is a #jQuery  plugin call NiceScroll. Now in version 3 it features:

- simple installation with just a line of code for any div or the whole page 
- support for cursor/mouse wheel/keyboard
- support for all browsers (even IE6) and touch devices
- zoom feature that showcases just a specific div 

Get NiceScroll here http://bit.ly/11zztgv

Photobox: CSS3/jQuery image gallery

// There are probably thousands of #lightbox  solutions but here is fancy one, straight from the refreshed #jQuery   #plugins  site (http://bit.ly/YBFQye):

Photobox promises to be a lightweight image gallery modal window script which uses only #CSS3 for silky-smooth animations and transitions. The goal was to create an image #gallery script that uses GPU rendering to move things around, instead of the old fashioned #javascript way (e.g. most other scripts in existence).

The visual result is what you see in the screenshot, check out the demo and download it here http://bit.ly/114QgYz 
Official support includes Firefox, Chrome and IE8+, although Safari had no issues with it as well. 

Going Fullscreen with HTML5

// Up until recently, having a web page running in full screen was not possible, left only for #Flash -based sites. The best you could do was remove the menu/location bars but still the window frame remained.

This has changed with the #HTML5 #Fullscreen API which allows handling full-screen capability of the browser via #javascript . Support for this exists in modern browsers http://bit.ly/10IhvXN, with the exception of Internet Explorer of course. The feature is actually in use on Google+ (press space when you view a photo to enter full screen) as well as Facebook (through an "Options" menu choice).

For more details on adding this to your site, see this analysis of the related functions http://bit.ly/XXunVA by John Dyer, including a jQuery code example. There is also another #jQuery plugin implementing the spec, screenfull.js, here http://bit.ly/Yn2c6s
(Screenshot from the Mozilla demo page http://bit.ly/TldSoH)

Gantt charts with Javascript II

// I've previously (http://bit.ly/ZTPsnX) wrote about some #javascript based #gantt solutions, here are a couple more:

Teamwork Gantt by Open Lab is based on #jQuery and provides features such as: in-place editing, drag&drop, zooming, do/undo, multiple dependencies, full editing, dates shortcuts, css skin, multiple browser, resources editing, multiple assignment, milestones, export data in JSON format, resize & scroll, etc.
Get it here http://bit.ly/VTH0zI 

Ext Gantt is commercial solution by Bryntum based on #ExtJS, offering features such as: dependencies, resources assignments, PDF export, MS Project import, printing support, baseline tracking, easy theming and more. 
Find more about it here: http://bit.ly/ZTPR9O

Do you use something else for gantt charts?

No-Flash Maps with jQuery

// There are tons of Flash-based map solutions and there is always Google maps integration, but what if you want a more visually simplified, tablet-ready solution that will not depend on external sources? 

JQVMap is a #jQuery plugin that renders #Vector #Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML. It comes with ready maps for Europe, Germany, Russia, USA as well as a world map. And of course you can build your own custom #map following the thorough documentation.

Get it here http://bit.ly/11ocXG4

Organization Chart with jQuery? Done!

// One of the things I love about #jQuery  is that amazing community that has produced a plethora of solutions. This means that if you have a problem, it's quite possible that someone else has dealt with it before. 

If you're looking for a #javascript  solution to displaying an organization chart, Wes Nolte's jOrgChart comes to the rescue:
- Very easy to use given a nested unordered list element
- Drag-and-drop reorganisation of elements
- Showing/hiding a particular branch of the tree by clicking on the respective node
- Nodes can contain any amount of HTML except <li> and <ul>
- Easy to style

Get it here: http://bit.ly/WuBYIG
For other jQuery #chart solutions see here: http://bit.ly/VBCdoy

Follow-me hover effect

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+

Javascript solutions for your chart needs

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+

Adding context in photos

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+

How to fit a large table of data in a small screen?

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+

Advanced text-around-image wrapping

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+

Gantt charts with Javascript

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+

Right-click menus in HTML5

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+

Lovely #jQuery work!

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

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+

#jquery tip: How to send the user a dynamically-created file via AJAX

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+