Archive for the ‘jQuery’ Category

SQL Fiddle – Online SQL Database Testing Tool

Many of you might have heard the name of JSFiddle for testing JavaScript code and using different JavaScript libraries like jQuery, MooTools, Protoype, YUI, ExtJS, KnockoutJS, AngularJS, Dojo etc.

It basically gives one an editor each for writing HTML, JavaScript and CSS code. One can also view the output right there in a separate section. One may even choose to validate the JavaScript code using JSHint to check JavaScript code quality with JSLint validation.

Now there is also a SQL counterpart named SQL Fiddle. It is basically a tool for easy online testing and sharing of database problems and their solutions.

Using the tool one can build database schema and run SQL within the tool to check the output. Isn’t it wonderful to have such tools in a developer’s arsenal? Enjoy!

Advertisements

Fixing the back button for Ajax apps to enable bookmarking into history – jQuery, ASP.NET Ajax, YUI & other ways

Most of you might already be aware of the paradigm shift problem in ajax apps in terms of the browser back button not working out of the box.

The problem and some of the generic solutions to it is described in more detail in the following articles. Suffice is to say that by integrating ergonomic display features such as back and forward navigation, we can make it simpler and more intuitive for the end user to immerse into the richer internet applications (RIA) that we can now create:

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

AJAX: How to Handle Bookmarks and Back Buttons, Advanced Example

Fixing the back button that AJAX broke

AJAX: How to Handle Bookmarks and Back Buttons

How to build a cross-browser history management system

Now here’s Microsoft’s effort in solving the problem with the help of ASP.NET AJAX library:

Enable Back button support in ASP.NET AJAX web sites – This is a server-centric solution that gets translated into client side history management code.

Managing browser history from client script

ASP.NET AJAX History Part 2: Client-Side

AJAX History and ASP.NET AJAX Preview 3

Client History Points in ASP.NET 3.5 Extensions

The link below is a Yahoo Developer Network effort in attending the issue:

YUI 2: Browser History Manager

Now onto the implementations by my most favorite JavaScript library (I would love to call it a Framework someday soon!) jQuery. There are tons of jQuery plugins that do this. All but one of them below uses address mangling technique in the form of page.aspx#5 to solve the problem. There are pros and cons for both the techniques as explicitly assigning mangled address like that helps in bookmarking. Whereas, if you don’t want to show the values you want to store in the history to the user, then hidden iframe technique below comes in handy:

jQuery BBQ: Back Button & Query Library

History/Remote – jQuery plugin solution for hijaxing links and enabling history

Restoring conventional page navigation to your javascript application with jQuery history plugin

jQuery History Plugin – Uses hidden iframe technique so that the address is not mangled with hash.

jQuery Address – Deep linking plugin – Supports Deep linking

History plugin

jHistory plugin

 

 

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

I have been looking for the ultimate collection of the most useful and common jQuery code snippets for JavaScript over the web for quite some time now. But the world’s not a perfect place and I haven’t come across ‘the’ place where one would get all the information regarding jQuery be it for DOM manipulation and traversal functions, selectors, cheat sheets or performance improvement for JavaScript code which are written through jQuery. Hence this is my small endeavor to put together the most popular and talked about jQuery link collections across the web.

Here you would find links which are related to improve web site performance for your jQuery driven sites as well as helpful guides & tutorials with jQuery code snippets in them which you can basically copy-paste onto your web applications. The main goal was to focus on links which provide enough examples with jQuery code for the most common web development cases.

While this is not the ultimate collection for the most popular jQuery plugins, I have included the most re-tweeted ones through my twitter account search section. Please feel free to add links related to this particular category as well in the comments. I am sure it would be useful to the readers.

Here goes the compilation in no particular order:

Improve your jQuery – 25 excellent tips

jQuery Tips and Tricks– Stack Overflow

jQuery Tips and Tricks

jQuery Useful and Handy Tips and Tricks

jQuery Tips and Tricks Part 2

20 Top jQuery tips & tricks for jQuery programmers

jQuery Tips and Tricks

Tutorials:5 Quick jQuery Tips

5 easy tips on how to improve code performance with huge data sets in jQuery

50+ Amazing Jquery Examples- Part1

8 Fantastic jQuery Tutorials for Designers

jQuery Tutorials for Designers

Top 3 jQuery Tips for Beginners

7 Really Useful Tips For Better jQuery Code

jQuery Tips, Tricks, and Miscellaneous

A Couple of Quick jQuery Tips: Alternating Gray Rows in a Table, Highlight Table Row Mouseover

10 Tips for Writing Better jQuery Code

6 fast jQuery Tips: More basic Snippets

6 more jQuery Tips: Text Searching, Page Load Time and Others

6 quick jQuery tips: Text manipulation, timers and elements

8 awesome JQuery tips and tricks

Useful and Handy jQuery Tips and Tricks

jQuery Tips and Tricks II

10 Advance jQuery Scripts to take Your Website to the Next Level

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

20 jQuery Tutorials And Plugins To Impress Your Friends

25+ jQuery Plugins that enhance and beautify HTML form elements

6 jQuery snippets you can use to manipulate select inputs

40 Exceptional jQuery Interface Techniques and Tutorials

Clever jQuery Selectors

95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

10 Really Helpful Traversing Functions in jQuery

jQuery CSS3 Selectors Sandbox

jQuery Selectors Cheet Sheet

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

38 jQuery And CSS Drop Down Multi Level Menu Solutions

51 Form Element Resources and Tutorials Using CSS And Javascript

37 More Shocking jQuery Plugins

10 incredible JQuery navigation menus

jQuery Visual Cheat Sheet


Updated on October 12, 2009:


Starting With jQuery – Validation Plug-in

bassistance.de » jQuery plugin: Validation

A jQuery inline form validation, because validation is a mess

Regex Selector for jQuery

Parsing Strings With jQuery

jQuery plugin to style scrollbars (cross-browser compatible)

jScrollPane: cross-browser jQuery plugin to replace browsers default vertical scrollbars

Jquery Vertical Slide (Dropdown) Navigation

Animated Scrolling with jQuery 1.2

jQuery Patch: Animate CSS Rotation and Scale

Special Events

Scrolling with jQuery

jQuery – Loading Partial Content

jQuery – Using Slider as a Scrollbar

Animated Page Scroll with jQuery

jQuery’s Passes Itself As An Argument To The “Ready” Event Callback

Viewing jQuery DOM Event Bindings With FireBug

jQuery’s Filter() Method Can Take A Callback Function For Advanced Filtering

A Graphical Explanation Of Javascript Closures In A jQuery Context

jquery-aop: Aspect Oriented Extensions for jQuery to add advices (Before, After, Around & Introdcution)

Load Content While Scrolling With jQuery

Implementing infinite scrolling with jQuery

jQuery Smooth Div Scroll by Thomas Kahn

Up and Down slider using JQuery

10 best jQuery gallery and slider plugins

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

jQuery Looped Slider Tutorial

Making a Content Slider with jQuery UI

Accessible News Slider

Learning jQuery: Revealing Photo Slider

Create Featured Content Slider Using jQuery UI

Update: jQuery UI 1.7 Slider from a Select Element

Build a Content Slider with jQuery

Easy Slider Plugin from jQuery UI

Coda Slider Effect

13 Super Useful jQuery Content Slider Scripts and Tutorials

Making A Slick Content Slider

Master CheckBox in GridView header

jQuery TOOLS / Scrollable – Scroll your HTML with eye candy

CSS/JS Hack – Vertical Scrollbars. On the… left.

jqPrint: jQuery Plugin to print only contents of a specified element using jPrintArea plugin

Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery

45+ Fresh Out of the oven jQuery Plugins

List of Useful jQuery Plugins


Updated on December 01, 2009:

jQuery based Modal Popups / Windows / Dialogs:

jqModal- Minimalist Modaling with jQuery

SimpleModal Plugin by Eric Martin

jQuery UI Dialog Plugin

NyroModal :: jQuery Plugin

boxy – Facebook-like dialog/overlay, with frills

jQuery Impromptu

jQuery AJAX Validation Contact Form with Modal + Slide-in Transition | The Blog of Joren Rapini

jQuery Plugin: choose component

Facebox v1.2

jQuery – Modal Dialog

jQuery SuperBox!

More =>

15+ jQuery Popup Modal Dialog Plugins and Tutorials

jQuery Popup Dialog And Gallery Plugin Reviews

Simple jQuery Modal Window Tutorial

Modal Scripts | Modal Window | Modal Dialog | Modal Popup – DownloadJavascripts.com

jQuery modal box round up

Top 5 jQuery Modal Plugins

19 jQuery Modal Boxes to improve your UI

How to create a stunning and smooth popup using jQuery

Building modal panels with jQuery

JQuery: Die 22 besten Modal – Fenster Plugins [German site but still has useful links]

 

Please do keep in mind that this can’t, in no way, be the perfect and most complete collection for all things related to jQuery. Despite the title of the article, it simply can’t be without your efforts. Hence, I would most sincerely urge my valued readers to feel free to post their favorite ones through the comment section. With a little bit of help from you mates, I am sure we can build ‘the ultimate collection’ which we have set forth on achieving. After all, in order to achieve big we need to dream big as well, no? So, please do contribute even if that means posting a single link which adds value to this collection of jQuery links. Only then will this post no longer be a misnomer. Keep this growing to infinity folks!

Weekly Link Roundup – 2

Links published on May 04, 2009:

Math world, simple mental calculations or what’s going on with education?

Most interesting math blog post I have read for a long time. Have a read guys and tell me how you find it.

Programmer Competency Matrix:

http://www.indiangeek.net/programmer-competency-matrix/

Panoramic Image & Viewer related resources:

http://krolik.net/PIV/
http://flashpanoramas.com/player/
http://www.mojavelinux.com/cooker/demos/panojs/
http://www.eurofresh.se/test/shockwpanos.htm
http://www.michielpost.nl/panorama/

File conversion utility for panoramic photos:

http://www.outerspace-software.com/bixorama.html

Automatic image stitching:

http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html

Panoramic Image App (Commercial):

http://www.autopano.net/

Panorama Gallery:

http://www.cs.ubc.ca/~mbrown/panogallery/panogallery.html

Panoramic Viewer:

http://s3.envato.com/files/4810/index.html

TDD Links:

http://codebetter.com/blogs/darrell.norton/articles/50337.aspx
A Conversation with Martin Fowler
Mocks Aren’t Stubs
Learn about .NET Unit Testing with Typemock

Old Version Downloads:

http://www.oldapps.com/

10 Youtube URL Tricks You Should Know About

http://www.makeuseof.com/tag/10-youtube-url-tricks-you-should-know-about/

100 Best JavaScript Resources

http://www.spoonfeddesign.com/100-best-javascript-resources

Performance killer: Disk I/O

http://nathanaeljones.com/11061_Performance_killer_Disk_I_O

Top 20 Best Agile Development Books, Ever

http://www.noop.nl/2008/06/top-20-best-agile-development-books-ever.html

Top 100 Best Software Engineering Books, Ever

http://www.noop.nl/2008/06/top-100-best-software-engineering-books-ever.html

Top 20 Programming Books

http://yaneshtyagi.blogspot.com/2008/04/top-20-programming-books.html

Top 10 Concepts That Every Software Engineer Should Know

http://blog.csdn.net/andylin02/archive/2008/07/26/2716304.aspx

Securing ASP.NET Applications

http://www.novologies.com/post/2009/04/08/Securing-ASPNET-Applications.aspx

The ADO.NET Entity Framework must read:

Introducing the Entity Framework [MSDN]
The ADO.NET Entity Framework Overview
ADO.NET Tech Preview: Entity Data Model

Introduction to the Entity Framework [Code Project]

Windows Communication Foundation must read:

Fundamental Windows Communication Foundation Concepts
What Is Windows Communication Foundation?

A Guide to Designing and Building RESTful Web Services with WCF 3.5

Howto Dynamically Insert Javascript And CSS:

This is a short and sweet little tutorial to show you how to dynamically insert a new Javascript (or style sheet) into your web pages, and explores how you can exploit cross-domain includes in your applications.

As JSON and DHTML start to get pushed more and more to the forefront of web-based applications, the web designer is faced with a new problem: how to dynamically insert a script element into an existing web page. It won’t take long to figure out that ajax loads and innerHTML injections won’t work.

http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Yahoo! Pipes and JQuery : Goodbye Same Origin Policy

http://www.badlydrawntoy.com/2008/07/08/yahoo-pipes-and-jquery-same-origin-policy/

URL Shorteners:

http://is.gd/
http://tr.im/
http://ow.ly/url/shorten-url
http://bit.ly
http://tinyurl.com

Interview Tips:

http://interviewtips.org/

LINQ to Entities:

http://www.linqdev.com/PublicPortal/publicportal/linq-to-entities.aspx

LINQ Learning Guide: LINQ to Entities

http://searchwindevelopment.techtarget.com/generic/0,295582,sid8_gci1299600,00.html

The ADO.NET Entity Framework Overview:

http://msdn.microsoft.com/en-us/library/aa697427(VS.80).aspx

Parallelism Videos Galore

http://blogs.msdn.com/pfxteam/

Writing LINQ Queries with the Entity Framework:

http://www.informit.com/articles/article.aspx?p=1237071

ASP.NET Dynamic Data Overview

http://msdn.microsoft.com/en-us/library/cc488546.aspx

Inheritance and Associations with Entity Framework Part 1

http://mosesofegypt.net/post/Inheritance-and-Associations-with-Entity-Framework-Part-1.aspx

Model Domain Objects with the Entity Framework

http://visualstudiomagazine.com/features/article.aspx?editorialsid=2425

Lambda the Ultimate : Programming Languages Weblog

http://lambda-the-ultimate.org/

Introduction to Domain Specific Languages

http://www.infoq.com/presentations/domain-specific-languages

Good blog site on Patterns:

http://blogs.msdn.com/erwinvandervalk/default.aspx

Pattern site on Hexagonal architecture

http://alistair.cockburn.us/Hexagonal+architecture

JSINQ – LINQ to Objects for JavaScript

http://www.codeplex.com/jsinq

JSINQ: LINQ style access for JavaScript objects

http://ajaxian.com/archives/jsinq-linq-for-javascript

LINQ to SQL: SQL-CLR Type Mismatches (LINQ to SQL)

http://msdn.microsoft.com/en-us/library/bb386909.aspx

LINQ to SQL : Object Identity (LINQ to SQL)

http://msdn.microsoft.com/en-us/library/bb399376.aspx

Most interesting math blog post I have read for a long time. Have a read guys and tell me how you find it.

Weekly Link Roundup – 1

Links published on April 13, 2009:

101 Essential Resources For Freelancers

This article contains:

  • Must Read Articles For Freelancers
  • Blogs Freelancers Should Subscribe To
  • Forums For Freelancers
  • Where To Find Freelancing Gigs
  • Useful Tools For Freelancers
  • Freelancer Survey Results

Interesting Web Development Related Resources

This article contains resources on JavaScript, jQuery, CSS, ASP.NET AJAX etc.

10 Creative & Rich UI & How to Create Them

10 creative & rich UI in modern day websites and how you can create similar interfaces using the techniques mentioned in this post.

jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design. All plugins are tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.

CSS Dock Menu ala KDE

See it to believe it. It has quite amazing resemblance to the KDE environment or Apple Macintosh like UI.

Simple Round CSS Links ( Wii Buttons ): Quite a nice way to embellish your buttons or links through CSS. Give it a try.

Nice Bubble Tooltips written with JavaScript. The balloon like feature is attractive.

Programmer Competency Matrix: Very interesting way to calculate capability index for your fellow developers or yourself as a matter of writing!

20 Things Programmers Say When Something Is Not Working

This is a very funny yet a true representation of events during software development life-cycle.