Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘jQuery’

jQuery plugins are life savers, specially when they help you on the task of adding cool functionality to your website. Thanks to the super engaged jQuery developer community, who is always creating new and amazing stuff, there are tons of great jQuery plugins out there, plugins that cover all sorts of functionalities.

From scrolling effects to improved website navigation, from better forms to UI enhancers and much more, there is certainly a plugin for what you need to do. To show you the power of jQuery we gathered 17 plugins that will make your life easier, so make sure to take some time to check them out. We will show here plugins that will help you on creating full screen scrolling sites; name breakpoints in one place and automatically sync them across your javascript and markup; defining custom scroll paths; organize webpage content in an efficient, dynamic and responsive layout, and much more. Also, make sure to check a few interesting links about jQuery at the end of our list. Enjoy.

fullPage.js

A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

17 jQuery Plugins that will Make your Life Easier
Read the rest of this entry »

  • Tags:
  • Filed under: Plugin
  • 0 Comments
  • jQuery UI Multiselect is a widget that converts html multiple select inputs into slicker interfaces.

    It makes searching within the options possible which is very functional for large lists & selected items can be re-ordered by drag’n drops.

    jQuery UI Multi Select

    It can display the number of selected items & for an easier selection, there are select all/deselect all links provided.

    The widget is unobtrusive & and be styled with ThemeRoller.

    IxEdit is an easy-to-use & free tool which aims to simplify the implementation of interactions on a web page, specially for anyone who is not experienced in JavaScript.

    This interaction design tool is built with JavaScript & needs to be embedded into the webpage being edited. With the help of a modal-box-like interface, interactions created will be applied instantly.

    Interaction Design Tool

    Rather than totally new scripts, IxEdit generates jQuery & jQuery UI code using the parameters specified.

    Interactions are stored in a local database (Google Gears), so, anything created won’t be lost even if the page is refreshed or closed.

    WRD will be running the first of the "thematic week" series (that will be published once in a few months) next week which is "E-Commerce Week".

    E-Commerce Week

    5 posts will be published which will be handy for anyone building their own e-commerce system or prefers a ready-to-use one (& for jQuery fans). Here they are:

    jsTree is a cross-browser, free & flexible JavaScript tree component with various features.

    It can create the tree from the following data sources:

    • predefined HTML
    • JSON
    • XML

    Different types of nodes (open, close, rename, create, delete) can be created & supports various callbacks (onchange, oncreate, ondelete, onload, etc …).

    JavaScript Tree

    A great feature is async loading for creating dynamic trees by simply mentioning an URL for requesting data when needed.

    Other features of jsTree:

    • drag & drop of nodes
    • multiple node selection
    • multilingual – same tree in as many languages as you like
    • ability to customize the look & feel
    • animated open/close of nodes
    • optional keyboard navigation
    • ability to move nodes between multiple trees

    The component can also work as a jQuery plugin.

    Slideshow JS is a free JavaScript library which helps creating an image slideshow with ease.

    It is totally configurable via markup & does not require any scripting. Although the download package comes with various styles, the look & feel of the slideshow can be completely customized.

    Slideshow JS

    The library is built with jQuery & it is unobtrusive. It offers several options like:

    • number of seconds each image will be displayed
    • if the images will be displayed automatically or manually
    • image counter & controls activation
    • if the images will be displayed randomly or in an order
    • & more..

    P.S. Don't let the blury images in the demo fool you. With quality images, the script offers a nice presentation.

    When sharing codes on a website, even they are wrapped with code tags or styled differently, it is always a challenge to read them without syntax highlighting.

    There are various syntax highlighters which can format the codes & color them appropriately according to the languages used. Whether it is a HTML page or runs on PHP, Ruby, Python, ASP, there is a suitable syntax highlighter.

    And, here is a collection of 11 Syntax Highlighters To Beautify Code Presentation:

     

    GeSHi (Generic Syntax Highlighter – With PHP)

    Geshi Syntax Highlighter

    GeSHi is a powerful syntax highlighter script that supports almost every language.

    It is first created for phpBB forum system but became a project itself. It requires PHP to run (there is also a hack to make it work under ASP).

    SyntaxHighlighter (With JS)

    SyntaxHighlighter

    This is a flexible & extensible syntax highlighter built with JavaScript. It supports a wide range of languages from CSS to PHP or C++ to SQL.

    SyntaxHighlighter offers ready-to-use themes an new ones can be created easily for a custom presentation.

    It has support for 3rd party applications like Blogger, WordPress, Joomla & many others.

    Read the rest of this entry »

    KeyTable is a lighweight (~5kb) JS library for adding keyboard navigation support to tables.

    The library provides an Excel-like navigation that can be bundled with features like on-click editing.

    Keyboard Table And JavaScript

    The inline row editing feature is accomplished with the jQuery jEditable plug-in. And,  KeyTable integrates easily with DataTables (see WRD post).

    The library works in all major browsers.

    Marcofolio.net is presenting a nice tutorial (with source files) for creating the famous iPhone unlock interface with XHTML-CSS & the slide effect via jQuery.

    Although there are missing features from the standard effect like "the slider not going back", it is still inspiring & can be used to create a form control (like captcha) or present a content in an iPhone like interface.

    (See also: iPhone Application And Website Development: All Tools And Tutorials You Need)

    iPhone Unlock Interface

    For the slider, jQuery UI’s slider component is used.

    For a demo of this interface, click here.

    Few weeks ago a post at WebResourcesDepot had announced the new version of Flowplayer -an amazing Flash video player- and a chance to win free licenses of this player.

    To Remind:

    Flowplayer LogoThe player has a JavaScript API (with jQuery support) that enables you to control almost every aspect of the player.

    It is totally skinnable & every part (component) of the player can be removed or re-positioned.

     

    They have picked the winners: "3 most creative use of Flowplayer".

    Here they are:

    Flowplayer WordPress PluginA WordPress plugin for Flowplayer

    The player is now much easier to integrate with WordPress.

     

     

     

     

    Flowplayer ScriptingAn advertising solution with the powerful Flowplayer API

    The advertisement is placed under the canvas coupled with a pre-roll video ad. The content plugin is used to tell the user when the featured fighting video starts. A good example of Flowplayer scripting). 

     

     

    Flowplayer SkinningEye candy

    Nice controlbar skinning together with fiercy red overlays. The Expose tool is used to further enhance the experience. You can see that having a custom image on the overlay is a very powerful way to visualize your pages.

     

     

    Click here to go the Flowplayer‘s homepage.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com