Posts

Jquery wysiwyg editing

image.axd

Out of smart combination of powerful jquery plugins and functions comes the Minibar, contextual editing menu that pops up in windows Office 2007 fashion. The demo provided works with standard textarea editor but we'd like to see it implemented within tinymce or fckeditor, for instance : no doubt this is coming in the next few hours !!

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 more

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.

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.

Jquery picasa album scroller

Is it necessary to build an alternative picasa viewer when picasa itself provides nice flash gallery viewers ? for webmasters it turns out that sometimes it can be necessary to hide picasa details, and thanks to picasa itself providing various remote server access, you can use your albums within any kind of rss or json enabled application. We provide here an example of a JSON - jquery powered slideshow that takes input from any picasa album. The advantage of using picasa over hosted or specific applications such as famous menalto's gallery of coppermine is that picasa does resizing jobs for you, and offers up to 1 GB of free online image storage which largely enough for any small website presentation.

Read more

Digitalus CMS : for ZEND framework and Jquery addicts

It's always hard to choose when having to develop CMS based websites : there are litteraly thousands of solutions out there, and even when you think you've found the ultimate software (have a look at silvertripe), a new one comes in that changes the whole story. That might be the case for Digitalus CMS, whose objective is not to be the best out there, but to provide a foundation for solid web site  development. As such it is a good start to rely on popular technologies, such as Zend Framework and Jquery. We'll never be able  to decide which is best, because the final solution is the one that you're the most happy to work with : as such Digitalus is good bet if you have experience with Zend framework and wish to start with basic features such as suearch engine, page and menu builders, privileges management. And in the end, software keeps evolving, but if one can judge from other features described on  Digitalus website, this one has good reason to convince you to try it out !

Jquery / DHTML enhanced multiple selects

The alternative to checkboxes (nice but space consuming) and multiple select (space efficient but not very intuitive for multiple selections) is there : a combination of single select and DHTML code is the point that Michal Wojciechowski's article develops on the subject. it's worth the read if you plan to change your multiple select, explains various Javascript methods to process interactivity, you have the choice between DOM and Jquery and Michal goes further to a detailed explanation of PHP processing of form input.

Online Image editing : jquery’s way

My last article on Silvesrtripe CMS online image editing feature led me to investigate alternative solution for websites and software developers that wish to implement this kind of component for their backoffice.. Surfing on CAKEPHP framework homepage turned out to illustrate perfectly the kind of component that should be standard on all CMS : resizing is now pretty common, and what we want now is cropping. There is actually a plugin for jquery that does the interface job, ImgAreaSelect. ImgAreaSelect come with loads of configuration options that make it a perfect tool for cropping images : the selection area is responsive, draggable, and can be adjusted to work only within specified limits or predefined aspect ratio. What's missing in Jquery is the server side of things, and you'll find that either on webmotionUK for pure PHP or on CAKEPHP's site for Cake integration.

Flexigrid : inside the next data browser

Advanced DHTML / javascript grid layouts have been around for a while : OpenRico's livegrid  has been available for years, and last february a new version of EXTJS' grid came out (UPDATE : EXTJS is about to relaease a new version of its editable GRID) . Well it's good news that Jquery javascript library should now be able to provide its own implentation of a data grid, with many features that any good data master should expect...

Read more