0

Create Alphabetical Navigation Bar With SliderNav

Posted by W3Avenue Team on May 17, 2010 in - Javascript, - Silver Light  | View Original Article
 

SliderNav is a jQuery plugin that lets you create sliding vertical navigation bar. Although it is primarily meant for alphabetical listing, you can easily use it for other types of list as well. It will automatically add the navigation and sets the height for the container. The plugin has been tested and works in all modern browsers: Firefox, Chrome, Safari, Opera, and IE 7+.

Implementation is fairly easy with very simple markup (uses nested unordered lists) and call to the jQuery function. You can customize the look and feel of your navigation bar using CSS. By default, it will generate an alphabetical navigation that uses all 26 letters; however you can specify your own custom items using configuration option.

Developed by Monjurul Dolon; jQuery SliderNav Plugin is available for download under BSD, GPL and MIT Licenses.  You can find further information, demos & download on SliderNav Website.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , , , , ,

 
0

EZ-CSS: Lightweight CSS Framework

Posted by W3Avenue Team on Feb 21, 2010 in - Javascript, - Silver Light  | View Original Article
 

EZ-CSS is a lightweight, browser-friendly and easy to use CSS framework for creating CSS layouts for your website. When using EZ-CSS framework you are not bound to a grid; and it lets you create multiple columns of any width, with or without gutters of any width.

EZZ-CSS promotes “Cut & Paste” methodology by providing several code snippets for your layout. You can select a code snippet for your layout and paste it in your code; and since EZZ-CSS facilitates deep nesting, you can nest another block of code inside existing blocks of code to achieve the layout you want.

Developed by Thierry Koblentz; EZ-CSS is available for download under MIT and BSD licenses.  You can find further information, demos & download on EZ-CSS Website.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , , , ,

 
0

Firebug Demystified

Posted by Saud Khan on Jan 21, 2010 in - CSS, - Javascript  | View Original Article
 

Firebug is one of the most popular tool used by web developers – It is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. When you are not using Firefox you can use Firebug Lite – a JavaScript file that you can insert into your pages to simulate some Firebug features in IE, Opera, and Safari.

Firebug is an exceptional tool that can increase your productivity many fold, specially if you are new to web development. However it is amazing to see a large number of web developers working without it. This article covers essential overview, useful tips and links to some really awesome resources that will help you master this wonderful tool.

Let’s Start

I am assuming you have already figured out that you need Firefox in order to use Firebug. But the important thing to understand is that in order to master Firebug you will need to adopt Firefox as your primary browser for web development.

Now download and install Firebug, which is free open source tool available under BSD license.

To Open or Close Firebug: Use F12 or click Firebug icon in your browser’s status bar (along the bottom of the window).

Default Tabs

Frankly best way to learn Firebug is by using it. However, before you can do that, you may need some motivation. Following is brief overview of some of the important features you will find under the default tabs; giving you an idea of how useful it is:

  • Console Tab
    This tab is your best friend when things go wrong. Enabling this tab will allow you to find detailed and useful information about the errors in JavaScript, CSS, and XML. Here you can dump all type of information using a set of powerful logging functions that you can call from your own web pages. Additionally this tab also contains  JavaScript command line tool enabling you to execute JavaScript on the fly. (Official Details: Quickly Find Errors, Execute JavaScript on the fly, Logging for JavaScript)
  • HTML Tab
    HTML is very simple, but when the markup gets too large and nested it is difficult to pin point exact location of where need to make changes. This tab allows you to do all that with extraordinary simplicity. You can find the location by simply digging through your HTML document tree, clicking the element on the page (inspect button should be enabled) or by simply searching for a specific text. Another important feature located under this tab is CSS layout, visually illustrating all the offsets, margins, borders, padding, and sizes for you. (Official Details: Inspect and edit HTML, Visualize CSS metrics)
  • CSS Tab
    This tab provides you the ability to inspect and edit CSS live. You can load any CSS file called from the current page and make live changes. Here you have very simple but powerful CSS editor that supports preview of colors and images; has complete dictionary of standard CSS keywords in memory enabling you to easily cycle between various properties while you edit; and most importantly every thing is happening live in your browser. (Official Details: Tweak CSS to perfection)
  • Script Tab
    Script tab contains a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, you can use the JavaScript profiler to measure performance and find bottlenecks fast. You can work on any JavaScript file loaded or generated in the current page. (Official Details: Debug and profile JavaScript)
  • DOM Tab
    The Document Object Model is a big hierarchy of all objects and functions that you can manipulate with JavaScript. Firebug helps you quickly find DOM objects under this tab and then edit them on the fly. Since you can create your own objects using JavaScript, Firebug will show them in bold so you can easily differentiate them from standard DOM objects. The DOM explorer is also a great way to find JavaScript functions that you wish to debug. If you click on a function in the DOM explorer, Firebug will take you right to the Script tab and highlight the function.(Official Details: Explore the DOM)
  • Net Tab
    This tab shows you useful information about resource requests and responses on the current page. The information is broken down under several sub-tabs enabling you to analyze performance for different file types. You will also be able to examine HTTP header information and monitor XMLHttpRequest vital for Ajax development. (Official Details: Monitor network activity)

Extensions

Firebug API allows developer to add more features using extensions (typically come in the form of Firefox add-ons). Although Firebug provides powerful features on its own, some really useful extensions have been developed. Some popular extensions include:

  • Firecookie
    You can use this extension to create a new cookie, delete existing cookies, see list of cookies for current site, manage cookies permissions and a lot more.
  • FirePHP
    FirePHP enables you to log to your Firebug Console using a simple PHP method call. All data is sent via response headers and will not interfere with the content on your page. FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.
  • FireQuery
    FireQuery enhance Firebug for jQuery development. It intelligently presents jQuery expressions in Firebug Console and DOM inspector; tracks embedded jQuery data on FireBug’s HTML tab; adds jQuerify Bookmarklet that can inject jQuery into any page enabling you experiment with pages that may not have jQuery.
  • Page Speed
    Page Speed performs several tests on a site’s web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance.
  • Pixel Perfect
    Allows web developers and designers to easily overlay a web composition over top of HTML. By toggling the composition on and off, developer can visually see how many pixels they are off. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.
  • YSlow
    YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It grades web page based on one of three predefined rule set or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it and JSLint.

There are several more useful extensions for front-end, Python, Cold Fusion and ASP.NET developers. For more comprehensive list of Firebug Extensions visit the official extensions page.

Tips & Tutorials

Here is a list of some really useful tips and tutorials related to Firebug. All these resources have been sorted by date, starting with latest tutorial on top.

Please feel free to suggest any addition to the list in your comments. You may also want to look following roundups containing awesome resources for web designers and developers:

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , , , , , , ,

 
0

jQuery Roundabout & Roundabout Shapes Plugins

Posted by W3Avenue Team on Dec 20, 2009 in - Javascript  | View Original Article
 

Roundabout is a fantastic jQuery plugin that allows you to convert set of HTML elements into highly interactive carousel like group. In its simplest configuration, Roundabout works with ordered and unordered lists, however after some quick configuration, Roundabout can work with any set of nested elements.

When used with Roundabout Shapes, you have the ability to move elements in nine additional styles. Roundabout plugin is highly customizable; you can fully customize the look and feel using CSS. It offers many advance configuration options, enabling you to control animation and style just the way you want.

Both plugins are developed by Fred LeBlanc; and both Roundabout & Roundabout Shapes jQuery Plugins are available for download under BSD License.  You can find further information, demos & download on Roundabout Website.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , , , ,

 
0

SoundManager 2: JavaScript API Supporting MP3 / MPEG4

Posted by W3Avenue Team on Nov 20, 2009 in - Javascript  | View Original Article
 

SoundManager 2 is a JavaScript library that wraps and extends the Flash Sound API, and exposes it to JavaScript – The flash portion is hidden, transparent to both developers and end users. It allows you to load, stop, play, pause, mute, seek, pan and volume control of sounds from JavaScript.

JavaScript to flash communication is done through Flash 8’s ExternalInterface feature, which means SoundManager 2 will work on most web browsers without any issues.

Features

  • Load, stop, play, pause, mute, seek, pan and volume control of sounds from JavaScript
  • Events: onload, whileloading, whileplaying, onfinish and more
  • ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)
  • Full-screen MPEG-4 video (HE-AAC/H.264) and audio support
  • “MultiShot” play (layered/chorusing effects)
  • Waveform/frequency spectrum data
  • Peak (L/R channel volume) data
  • Audio buffering state/event handling

Developed by Scott Schiller; SoundManager 2 is available for download under BSD License.  You can find further information, documentation, demos & download on SoundManager 2 Website.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , , , , , , , ,

 
0

Validatious: Form Validation With Unobtrusive JavaScript

Posted by W3Avenue Team on Nov 3, 2009 in - Javascript  | View Original Article
 

Validatious is an unobtrusive JavaScript that allows you to easily add form validation. Validatious does not requires any JavaScript library; however if you’re using one, it can easily work with it. It is cross browser and has been tested to work on IE6+, Firefox 2.0+, Opera 9.5+, Safari 3.0+, Chrome.

You can use it to validate forms with semantic HTML and/or a simple JavaScript DSL. Validatious has multilingual support and easily extensible (i.e., adding custom validators) with only a couple of lines of JavaScript. Several settings allow you to control how and when Validatious does validation, how it displays errors and more. If configuring isn’t enough, callbacks and easy overriding gives you complete control.

Validatious is written by Christian Johansen. The standalone version gratefully uses Dean Edwards’  addEvent  and Base as well as addDOMLoadEvent, created by Jesse Skinner, Dean Edwards, Matthias Miller and John Resig.

Validatious is offered with a BSD License, which means you can use it for whatever you want to, however you want to. You can find further information, demo, documentation & download on Validatious Website.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Tags: , ,

 
0

Twig: Flexible, Fast, and Secure Template Language For PHP

Posted by W3Avenue Team on Oct 8, 2009 in - Javascript, - PHP  | View Original Article
 

Twig is a modern template language for PHP 5.2+ that is flexible, fast, and secure. It supports everything you need to build powerful templates with ease: multiple inheritance, blocks, automatic output-escaping, and much more.

The syntax is easy to learn and has been optimized to allow web designers to get their job done fast without getting in their way. If you have any exposure to other text-based template languages, such as Smarty, Django, or Jinja, you should feel right at home with Twig. It’s both designer and developer friendly by sticking to PHP’s principles and adding functionality useful for templating environments.

Key Features

  • Fast: Twig compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code was reduced to the very minimum.
  • Secure: Twig has a sandbox mode to evaluate untrusted template code. This allows Twig to be used as a templating language for applications where users may modify the template design.
  • Flexible: Twig is powered by a flexible lexer and parser. This allows the developer to define its own custom tags and filters, and create its own DSL.

Twig is brought to you by Fabien Potencier, the creator of the symfony framework. Twig is released under the new BSD license.. You can find further information, documentation & download on Twig’s Website.

Similar Posts:

Tags: , , ,

 
0

DooPHP – High Performance Open Source PHP Framework

Posted by W3Avenue Team on Sep 9, 2009 in - Javascript  | View Original Article
 

DooPHP is a rapid development framework for PHP using commonly known design patterns like MVC and ORM. It has a small source code footprint, but still provides essential features and focuses on 7 main cores: MVC, REST, URI routing, ORM, Template engine, ease of use and performance.

DooPHP works without problem in various PHP mode: mod_php, CGI & FastCGI. DooPHP also works on modern web server such as Apache, Lighttpd and Cherokee. Your apps can be deployed on a domain root directory, sub folder, sub domain, sub folder on sub domain, etc. It doesn’t require anything extra other than the PHP’s SPL which exist in every PHP installation.

Developed by Leng Sheng Hong; DooPHP uses the new BSD license, and it also ensures that the third-party work it integrates with use BSD-compatible licenses. This means it is both financially and lawfully free for you to use Doo to develop either open source or proprietary applications. You can find further information, demoa, documentation & download on DooPHP’s Website.

Similar Posts:

Tags: , , ,

 
0

Open Atrium – Open Source Intranet Package Powered by Drupal

Posted by W3Avenue Team on Jul 16, 2009 in - Javascript, - PHP  | View Original Article
 

Open Atrium is an open source intranet package powered by Drupal that is easy to install and use, and since it is open source you can customize it to meet your exact needs. Open Atrium’s built in communication and collaboration features include a blog, a wiki, a calendar, a to do list, a shoutbox, and a dashboard to manage it all.

Open Atrium is completely customizable. If you want a feature that’s not on that list, you can add it yourself. Open Atriums allows new features to be added easily as a plugin to the basic package, enabling entire community to share and extend it.

Atrium has been tested with the following software successfully. Your mileage may vary on other configurations:

  • PHP 5.2+
  • PHP GD extension
  • 64MB memory limit
  • MySQL 5
  • Apache with mod_rewrite

Developed by Development Seed; Most of Open Atrium’s source code falls under GPL v. 2 b, since it’s built on Drupal framework. All the code that’s not under GPL has a BSD license. You can find further information, demo & download on Open Atrium Website.

Tags: , , , , ,

 
-

JavaScript Image Cropper UI

Posted by W3Avenue Team on Jun 18, 2009 in - Javascript  | View Original Article
 The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and Scriptaculous.

Tags: , , , ,

Copyright © 2010 Answer My Query All rights reserved. Maintained by Orange Brains .