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

Archive for the ‘Browsing’ Category

jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily.

The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them.

jQuery Bubble Popup

They can be attached to any side of an element and it is possible to get the status of a tooltip (on/off, creation, last-modified or last-display date & time) to act accordingly.

A tooltip's design can easily be customized with the help of a template system and the plugin is very well-documented.

SpryMap is a JavaScript widget for creating drag 'n' drop windows similar to Google Maps for easily navigating around big images.

It is a standalone script that doesn't require any JS frameworks and still lightweight (2.8kb).

SpryMag Dragn' Drop Widget

The widget has the options to give you the full control including "the starting coordinates", "dragging to be stopped or not when an edge is reached" and more.

There is also an animation once the image is dropped that positions the image softly (optional as well).

Easy Accordion is a highly flexible jQuery plugin for creating horizontal accordions quickly.

It generates the accordion from definition lists (dts, so it is SEO friendly) and has support for multiple instances to be ran on the same web page.

jQuery Easy Accordion Plugin

The plugin can slide any content like images, lists, Flash, etc. and its look can be totally customized via CSS.

There are multiple options offered like setting the slide to be displayed on initial load, auto-display to be on/off and including the slide number or not.

jQuery Ajaxy is a plugin which enables us to convert a standard website into an Ajaxed one with no hassles.

It has built-in support for URL hash changes, AJAX form submits or AJAX links.

jQuery Ajaxy

The usage of the plugin is so easy: the ordinary links and forms are upgraded into Ajax requests by just adding a CSS classname.

As the URL addresses change on every request, users can browse with browser back-forward buttons and URLs will stay SEO-friendly.

The plugin also gives the ability to control your web applications state manually through your code for advanced circumstances.

Personally, I'm a Firefox user as the web developer toolbar and Firebug is a must-have for a web designer/developer and, also, appreciate what Mozilla does for web.

Right, these tools or similar ones also exist on other browsers like Chrome (which can be my next browser with the performance offered).

There are also other great ones like Opera or Safari and it is very normal not to consider IE at all as every version used to come with its own issues.

Internet Explorer 9 Beta

Maybe, this can be changing as Internet Explorer 9 Beta is out with serious improvements like:

  • new and faster JavaScript engine
  • support for HTML5, CSS3 and SVG
  • simpler UI
  • and multiple features for faster browsing

It is not hard to guess that IE9 is still not a strong option for web designers/developers with the lack of dev-tools and reputation it has.

However, it is a big step forward and hopefully a good-enough product to motivate IE fans to upgrade and end up increasing the "modern browser usage ratio".

Also, considering the activity on the "web-dev products side of Microsoft", seeing new IE-compatible designer/developer tools in the near future won't be a surprise.

P.S. Internet Explorer 9 Beta only works with Windows Vista and Windows 7.

EditableGrid is a JavaScript library which can make standard HTML tables editable and sortable.

It can feed from a XML file or attached to an existing HTML table.

The library automatically enables users to edit cells with a suitable editor like textfields, checkbox, etc. and comes with built-in validators (integer, double, URL, e-mail and date).

EditableGrid

Once a column header is clicked, the rows are sorted according to their types and up/down arrows show whether the sort is ascending or descending.

There is a PHP binding provided for building the grid and generating the XML.

And, another nice feature is the optional integration with Open Flash Chart for rendering charts from the grid data automatically.

In order to improve + customize EditableGrid, there are callbacks provided on every event.

Within time, links on our websites can become invalid as the URLs they point may not be existing any more.

Catch404 is a jQuery plugin which adds a layer between the web page and the link to detect this issue with the process:

  • when a link is clicked, it sends a request to the page
  • if a 404 message is returned, displays a modal box mentioning that the page does not exist. Else, redirects to the URL.

Catch404 jQuery Plugin

It has pros and cons like adding an extra request to links which ends up in a slower browsing experience but prevents redirecting readers to non-existing pages.

The plugin does not require any scripting language as the query is sent via Ajax to the Yahoo YQL (which is mostly the reason of the slower experience).

Dragdealer JS is a free JavaScript component for easily creating interfaces that support dragging (like a slider).

It is a standalone script that also works in touch-enabled mobile devices.

Dragdealer JS

The script is pretty flexible with options like:

  • working horizontally or vertically
  • defining the initial positions of the slider (x/y)
  • setting the number of steps for the slider
  • snapping to the steps
  • and much more.

Dragdelaer JS has callbacks on both release and move events which makes any type of interactions possible.

Compass Datagrid is a jQuery plugin for displaying data within an Ajaxed datagrid.

It simply takes an empty table and sends requests to a server-side script via Ajax. The script provides JSON encoded data for the plugin to update the table.

Compass Datagrid

The datagrid supports pagination with prev-next + first-last buttons and a listbox to select a specific page where the number of items per page can be set.

It is also possible to sort columns, hide any of them and refresh the data with a click.

The plugin can work with any scripting language (a PHP one comes with the download).

AeroWindow is a jQuery plugin for creating Windows 7-like aero style pop-ups.

The pop-ups not only look like a native Windows element but also behave similarly as well with the minimize, zoom, maximize and close functions.

There can be multiple pop-ups in one page where the active one is highlighted visually.

AeroWindow jQuery Plugin

All can be resized, drag'n dropped or maximized with double-clicks, all like Windows.

AeroWindow has various options like defining:

  • window titles
  • start positions (x-y or centered)
  • standard and minimum sizes
  • getting the status of an open window
  • applying animations on windows

The plugin is pretty awesome specially for anyone who wants to build an OS-like web interface.

Uptime Robot
feed-holder
FeedBurner
  • ManageWP
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • PSD to HTML
    PSD to HTML