phpDevelopment | Blog » Jquery

Most interesting links of February 2010

Andrei Gabreanu — Mon, 01 Mar 2010 10:20:24 +0000

Here is my collection of best link references of February 2010:

Implement a Rest API with the Zend Framework

Implement a Rest API with the Zend Framework is a great article posted on the “Realm of Zod” blog by Brandon, which shows you how to build your own Rest Server and Rest Client with Zend Framework. It gives you all the details required to get you started on the RESTful path of WebServices.

Font type tester (includes font-face tests for CSS3)

Typetester – Compare fonts for the screen is a very very useful site for both designers and developers who want to give a nice artistic touch to their website without having to research countless hours for an appropriate font that might work or not for their needs.

960 Grid System – CSS Framework

960.gs is the leading CSS framework on the market. Even if you don’t like to use CSS Frameworks or didn’t know they existed, 960gs will provide you with core elements that will help you speed up your design2html process. For all of you who didn’t try it yet, you should definitely give it a shot. You won’t regret it.

High Resolution Bokeh Texture

High Resolution Bokeh Texture is part of the freebies category. It includes a pack of bokeh textures to share & use in your design projects. The package contains 5 textures with high resolution (240 dpi) 3456 x 2304.

Out of focus 30 free bokeh textures

Out of focus 30 free bokeh textures is part of the freebies category again, this time with more textures for your design needs. The package contains 30 textures for your free use.

Getting Started with XSL(T)

Getting Started with XSL(T) is the final interesting link of the month. It is an article written by Chad Hietala for Net Tuts Plus where he explains how to get started with the XLS(T) which is an alternative to the HTML design we all have used so far. If you are curios why even bother looking this up, you might need to know that Blizzard World of Warcraft armory is purely made on XLS(T)

Smarter Twitter like pagination (SmartScrollingPagination jQuery plugin)

Andrei Gabreanu — Mon, 04 Jan 2010 01:52:59 +0000

What do we we want to achieve?

One thing i always though would improve the User Experience on Twitter and Facebook was the pagination.

Basically, i always thought about that button that says “Load more…” because, the user needs to wait when he pressed it. So i thought, since the user cannot jump 9 pages forward, why not preload the next page? So when the user clicks load more, the application would instantly display the next page content, and while the user browses through it, the application loads the next page and so on. Since websites like Facebook and Twitter load not too much data per request via the “Load more” button, i assume its pretty safe to preload content.

Smart Scrolling Pagination – A jQuery plugin

So after searching on google for something like this, i thought to myself that i might as well learn how to create a jQuery plugin. And here it is: a very very (really!) simple to use plugin that will help you achieve what Twitter and Facebook should do (in my opinion). The plugin is not perfect, it can be enhanced with more cool stuff, but i believe it is good for a basic usage (until next versions).

How to use

Simply include the jQuery library and the plugin into your page and call it like this:

$(".content").smartPagination({
    url: "result.html",
    button: "load_more_content"
});

where the url is the path to your script that will generate the content to be loaded and button is the id of the element that will trigger the loader when clicked.

Advanced usage (no really)

If you want a list of all the options, here it is:

$(".content_extended").smartPagination({
    url: "result.html",
    parameters : { "isAjax": false },
    method : "get",
    debug : false,
    button : "load_more_content_extended"
});

where parameters is a Json object containing all your parameters to be sent to the url, the method can be either get or post and debug can be either true or false.

If debug is set to true then you will get alerts with each step the plugin does so you can see what happens at any time.

Conclusion

Here is what i plan to do in the near future for this script:

Add options for effects (currently only fadeIn() is supported)
Add options for receiving from the “url” only a Json element and to allow the developer to parse it as he considers
Add options for automatically adding content (at the top or the button) based on the “url” – something like jQuery Spy

If you want more features added to the TODO list then please share them below!

And in the end, if you liked the plugin please share it so everyone can benefit of of it !

8 Usefull and Highly customizable jQuery Plugins

Andrei Gabreanu — Thu, 06 Aug 2009 07:12:30 +0000

jQuery is one of the best lightweight javascript frameworks that emphasizes interaction between HTML and JavaScript. In the following article, you will find 8 plugins that will help both developers and designers bring more interactivity to their applications.

1. Nyromodal

With the avalanche of the lightboxes around the internet, it was very hard to find one plugin that would do them all:

To be very easy to change its appearance
To be very easy to use it for any type of element (iframe,div,flash,image etc)
To be very easy to use callbacks
To be very easy to integrate

Lucky for us, there is one: Nyromodal. After you download it, its a matter of minutes before you have it running. You can very much use it for anything you like (display a whole new page, a flash player or images). I customized it so i can display a Facebook style modal box that would do ajax actions behind the scenes. Once the user clicks on a button, the modal box will be closed triggering a callback in the main page.

Official site | Download | Demo

2. Table Drag and Drop

This plugin is very good for those of you who wish to add some drag & drop capabilities to your tables (rearranging items as an example). It supports ajax requests and is bundled with all kinds of cool stuff. It’s also very easy to integrate and can be extended very easily with very small parts of code written.

Official site | Download | Demo

3. Seek Attention

A plugin that is very simple to use yet very powerful if you have elements on your page that you want the user to pay special attention to. Works on all major browsers and gives a nice interaction to your webpage.

Official site | Download | Demo

4. Default Text

This plugin will help you whenever you want to have that default value with a different class on your form inputs (on focus/ on blur change).

Official site | Demo

5. qTip

This one is my favorite: the best plugin for tooltips in jQuery on the whole web. Its so easy to implement it, style it and it has so many features that you will use it all the time. Check it out for yourself.

Official site | Download | Demo

6. Tabbed

This is one is preety interesting. Its a plugin designed to help both designers and developers to have their web application content the same on all resolutions. It automatically changes the columns of your website to fit on any resolution

Official site | Demo

7. Interactive Date Range

If you ever wanted to use a date selector in your website then this plugin is just for you. Very simple to implement and its also very great. Has a nice transition and it has some nice callbacks.

Official site | Demo

8. Flot

One of the best plugins for creating nice graphs (stock graphs even) as bars, lines or pie. Its very intuitive, has alot of options to display the graphs and allows interactivity with the data from the graph in a very simple way.

Official site | Demo