Jquery drop down menu

After the Mega Drop down menu comes the sroll drop down menu, a solution for long choices display dilemna : Make menu scroll up and down as you mouse through it. http://css-tricks.com/examples/LongDropdowns//

ixedit : Jquery development without coding

IxEdit is a JavaScript-based interaction design tool for the web taht gives designers and developers a few ready to use jquery tools, such as animation, form enhancements (date picker), and DOM manipulation, all designed within a web based interface. It uses GEARS, a tool developed by google that interfaces browsers with desktop, and the only requirement to start working on a web page is to include the ixedit javascript, plus the jquery libraries.

http://www.ixedit.com/

Jquery drop down menu, named mega

I usually take superfish for granted when working on a jquery based drop down menu : based on regular ul / li tags, it uses CSS layout directives to position menu items, which I have tried up to 3 levels of navigation. I have just found another good example of submenu implementation that demonstrates the ability to write paragraphs inside the sub layer, as  shown in the illustration below. The tutorial written by Jon Philipps on The Web Squeeze explains how CSS3 manages to implement rounded corners while jquery deals with the drop down effect. Nothing really new, just another way of working with Jquery and layers, but nice.

jquery-dropdown

Jquery table to graph

jquery-visualize1

The new jQuery plugin  “visualize” demonstrates usage of a specific technique that renders visual graphs (pie charts, bars, area, lines) from HTML table data. The process uses JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. It  is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology. Also the port to Jquery is particularly simple as it is accessible to HTML generated tables, which is most common. The only drawback for this method would be the CPU power required to render large sets of data. But there is a workaround in the form of data aggregation if the origin is SQL based.

jQuery Parallax

diagram_parallax

Another example of useless feature that could become very useful when a critical mass of web geeks start using ti for specific image display : the jquery parallax plugin order images or elements to respond to mouse effects with a 3D effect. Stunning effect for the display of 3d Landscapes, such as displayed on the plugin homepage, or letter 3D movement, as illustrated in this example. The stephband.info author’s website demonstrates a powerful implmeentation of this plugin.

Jquery modal prompt

If you’ve tried the impromptu jquery plugin, you’re probably left with some frustrating feeling, finding that  such an easy solution for javascript alert, confirm and prompt replacement, could be enhanced by a nicer graphic design. Replacing the “X’” letter by a now standard close button, just like can be found on facebox, could do the job. But then why not benefit default facebook style layout and use the whole facebox plugin, or go for another stylish modal jquery plugin, such as jModal… A few lines of javascript code will easily replace the prompt function, just like the lines of code from the example below.
Read the rest of this entry »

Jquery popeye : galleries, differently

The popularity of javascript lightboxes has spread over the internet and no serious webmaster could think of displaying images without a specific thumbnailer and / or a dynamic slider of popup. The author of jQuery.popeye had  seen enough lightboxes and decided to implement his own box that features the advantage of being integrated like an image, with comments written below and navigation buttons.

Images in select box (2) : easier now with Jquery

remember our quest for the ideal select box plugin ? seems that Jquery can be proud to deliver one of the best select dropwon box on the opensource market. Select Box Factory covers an impressive list of options : fully skinnable, options images, list filter, first letter selection… Good work.

Monday’s web applications

Javascript libraries

While EXTJS 3.0 is on the way with a roadmap setting deadlines for early 2009, Jquery continues its path on the way to serious lightweight alternative to the massive EXT : JX extension for Jquery includes the viewport paradigm on which relies every EXT JS application.

Web based interfaces

In spite of huge progress and impressive use of ease, Jquery is not there yet : for the development of applications many developers have chosen the exhaustivity of EXT JS. Have a look at google code hosted project in development : ecartcommerce, CMS jimw, both ext js and zend framework based. In the world of content management systems, mysource is making the news with a new video that demonstrates inline editing, and other exciting Rich Application features.

Instant image effects from Javascript

We have collected 2 javascript image addons that perform nice enhancements or animations on simple images

  • Instant js is a  javascript library that adds visual effect to any image, just via a style sheet attribute. Wonderful and simple light javascript effect that saves you either photoshop or server processing time. link : http://www.netzgesta.de/instant/. 
  • For Jquery addicts, here comes another nice effect : we call it  SlideText Gallery and it features a nice  image rollover that displays the alt text. Implemented for Silverstripe CMS experts (download zip for HasManyFileManager module),  inspiration : Kyanmedia.