Tuesday, January 12, 2010

Background Image Animation With jQuery: jAni

Background Image Animation With jQuery: jAni:

Animated GIFs can have up to 256 colors & they are not interactive.

jAni is a lightweight jQuery plugin for animating background images which can be an alternative to animated GIFs (in some cases).

It simply changes the position of a long background image in given distances & speed.

jQuery Background Animation Plugin

The plugin has few options for controlling it:

  • start, stop, pause
  • speed
  • loop on/off
  • dimensions of the frames

As it will require JavaScript to be enabled, using jAni combined with other JavaScript events (like animating a better-quality Ajax loader) would be very functional.

Special Downloads:

Related posts

Posted by Dinkman at 11:57 PM

Mobile Web Application Framework: WebApp.Net

Mobile Web Application Framework: WebApp.Net:

WebApp.Net is a feature-rich JavaScript framework for building mobile web applications.

It provides a complete set of components (switch buttons, radio groups, etc.) that will help your website look & behave like a native mobile application.

WebApp.Net

The framework has full support for Ajax & every action from clicks to form submissions can be Ajaxed with tiny declarations.

Other features of WebApp.Net:

  • native fullscreen for iPhone & iPod Touch
  • custom events
  • advanced styling for components
  • progressive loading (objects will be loaded only when they are needed)
  • animated PNGs
  • & more..

The framework is still in beta but it is promising. A detailed documentation helps understanding it better & the demo shows its capabilities.

Special Downloads:

Posted by Dinkman at 11:55 PM

How to Create Facebook Style Footer Admin Panel

How to Create Facebook Style Footer Admin Panel:

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things is the footer admin panel, where it neatly organizes frequently used links and applications.

SohTanaka has created a tutorial about how to recreate the Facebook Style Footer Admin Panel with CSS and jQuery Part I and Part II. The footer panel can be useful for admin driven applications and much more. There are many useful techniques like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.

facebook-admin

Requirements: jQuery Framework Demo: http://www.sohtanaka.com/web-design/examples/footer-panel/ License: License Free

Posted by Dinkman at 11:54 PM

Coda Bubble jQuery Plugin

Coda Bubble jQuery Plugin:

This jQuery plugin allows you to add popup tooltips as seen on Panic’s Coda software page. Coda Bubble jQuery Plugin requires both jQuery and jQuery UI libraries and works on all major browsers including Internet Explorer 6.0.

Coda Bubble jQuery Plugin is simple to implement but highly configurable. It provides several configuration options including: ability to specify distance and position of tooltip from the button; duration of tooltip; tooltip width; ability to specify path to images loaded in the tooltip; and Internet Explorer related options.

Developed by Carlo Tasca; Coda Bubble jQuery Plugin is available for download under GPL License. You can find further information, demo & download on Coda Bubble jQuery Plugin Website.

Similar Posts:

Posted by Dinkman at 11:53 PM

Group Long List of Hyperlinks With Hypermenu

Group Long List of Hyperlinks With Hypermenu:

Hypermenu is jQuery plugin that you can use to create horizontal menu similar to Google Chrome bookmarks menu bar. If you want your menu to be made draggable, then you will also need to load jQuery UI library. Hypermenu jQuery Plugin is cross browser and works on all major browsers including Internet Explorer 6.0.

Hypermenu jQuery Plugin requires very simple markup and is fairly easy to implement. You can easily customize the look and feel of your menu via CSS. The plugin offers several configuration option enabling you to easily customize its behavior and functionality.

Features

  • Specify whether menu needs to be draggable or not
  • Specify number of visible menu items
  • Specify maximum length of menu item label
  • Specify position and direction of the reader (tooltip – containing full label of the menu items)
  • Specify position and direction of the basket (containing additional links)
  • Specify various icons
  • Specify animation speed

Developed by Carlo Tasca; Hypermenu jQuery Plugin is available for download under GPL License. You can find further information, demo & download on Hypermenu jQuery Plugin Website.

Similar Posts:

Posted by Dinkman at 11:52 PM

Saturday, January 9, 2010

JavaScript Frameworks Playground: jsFiddle

JavaScript Frameworks Playground: jsFiddle: "

jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

It presents an interface which is divided into 4 pieces:

  • HTML editor
  • CSS editor
  • JavaScript editor
  • and the output

You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla). Also, if there is, you can add a complimentary framework like jQuery UI or MooTools More.

jsFiddle

A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too.

It is an almost perfect platform for trying & sharing your JavaScript code without the need of a website.

What would be better is the ability to select multiple JS frameworks at the same time (also having a server-side file & an editable database would make it a complete playground).

Special Downloads:

Tags:

Related posts

Posted by Dinkman at 4:34 AM

Friday, January 8, 2010

jQuery Dropdown Check List

jQuery Dropdown Check List:

Dropdown Check List is a jQuery plugin that allows you to transforms a regular select html element into a dropdown checkbox list. It is a cross browser plugin and has been tested with Internet Explorer, Firefox, Opera, Safari and Chrome browsers.

Dropdown Check List plugin dynamically builds a container with checkboxes and labels to replace the select element. You can customize the look and feel of your dropdown check list by simply updating CSS file.

Features

  • Support selected by default
  • Set a fixed width on the control even if the dropdown list is wider
  • Set a fixed height of the dropdown list with scrolling
  • Option to let the first item in list check all items
  • Select with groups
  • Single select with radio buttons instead of checkboxes

Developed by Adrian Tosca; Dropdown Check List jQuery Plugin is available for download under Dual MIT and GPL License. You can find further information, demos & download on Dropdown Check List Project Website.

Similar Posts:

Posted by Dinkman at 5:28 AM

Tuesday, January 5, 2010

Easy and Slick Way to Do Auto-Complete & Auto-Suggest

Easy and Slick Way to Do Auto-Complete & Auto-Suggest:

AutoSuggest jQuery Plugin makes auto-completing extremely easy. AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.

Also, AutoSuggest jQuery Plugin uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file. And also, AutoSuggest jQuery plugin is dramatically smaller in size with just 7kb minified.

autosuggest-jquery

Requirements: jQuery Framework Demo: http://code.drewwilson.com/entry/autosuggest-jquery-plugin License: MIT, GPL License

Posted by Dinkman at 10:08 AM

List of Free Web Based HTML Editors For Your CMS Project

List of Free Web Based HTML Editors For Your CMS Project:

If you are developing a customized content management system for a website, blog, wiki, social network or any other web based application, your choice of HTML editor is going to have a major impact on success of your project.

Even if you are already comfortable with an HTML editor, you should be aware of alternatives that may be more suitable for a specific project or audience. Following is a list of free web based editors to help you choose best solution for your next CMS project.

WYSIWYG Editors

  • CKEditor One of the strongest features in CKEditor is its almost unlimited compatibility. It’s a JavaScript application, so it simply works with all server technologies, just like a simple textarea. In the browser side instead, it has been developed to be compatible with the browsers that dominate the market, namely Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera. Even the old Internet Explorer 6 is compatible with.
  • TinyMCE TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor that converts HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
  • WYMeditor WYMeditor is a web-based WYSIWYM editor, created to generate perfectly structured XHTML strict code that conforms to the W3C XHTML specifications. WYMeditor is dual licensed under the Open Source MIT and GPL licenses.
  • jWYSIWYG This jQuery plugin is an inline content editor to allow editing rich HTML content on the fly. It’s an alternative to WYMeditor with much less features. The main concept is to keep it simple, not all users need font coloring or create tables, just the basic.
  • NicEdit NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit JavaScript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.
  • jHtmlArea A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.
  • MooEditable A simple web-based WYSIWYG editor, written in MooTools.
  • MooRTE The Mootools Rich Text Editor.
  • YUI Rich Text Editor YUI Rich Text Editor is highly customizable editor that works great with YUI library. The Rich Text Editor’s toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.
  • Xinha Xinha is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurability and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD license makes it an ideal candidate for integration into any kind of project.
  • openWYSIWYG openWYSIWYG is a free cross-browser WYSIWYG editor that’s packed with rich-text editing feature you need to make your content management system.
  • Free Rich Text Editor Free Rich Text Editor is an easy to use FREE JavaScript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or JavaScript. Only 3 lines of code required to set up the editor.
  • Wyzz Wyzz is an ultra-small, very light WYSIWYG editor for use in your web applications. It’s written in JavaScript, and is free for you to use in your web applications and/or alter to your needs.
  • widgEditor widgEditor is a browser-based JavaScript WYSIWYG editor for HTML content. It is designed to be simple to use, have a small code footprint, and produce valid, semantic code.

Markup / Markdown Editors

  • markItUp markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
  • WMD: The WYSIWYM Markdown Editor WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is completely free to use.
  • SmartMarkUP SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs.

Similar Posts:

Posted by Dinkman at 10:06 AM

Sunday, January 3, 2010

2010 Free Vector Calendar

2010_free_vector_calendar-300-220_small

Posted by Dinkman at 1:16 AM

Sliding Content Aside to Reveal Secondary Content Pane

Sliding Content Aside to Reveal Secondary Content Pane:

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.

By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

content-slider

Requirements: jQuery Framework Demo: http://srobbin.com/blog/jquery-pageslide/ License: GPL License

Posted by Dinkman at 1:13 AM
Subscribe to: Posts (Atom)