jQuery, the write less do more code, now lets you to write less and draw more. These plugins and tutorials provide you with an insight on how jQuery can be used for drawing lines and a wide array of shapes.
Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. A while back, we wrote an article describing a technique we came up with to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The jQuery Visualize plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of way
Drawing functionality is not supported in most of popular browsers except Firefox and Safari with Canvas object. Using little trick we can draw line and circle using JavaScript. This is not best practice because need lot of execution time but it can be alternative way to draw simple and little objects. Basically this trick is drawing many DIV elements with 1×1 pixel size inside the document. Basically we can t draw 1×1 pixel size DIV elements in IE. To resolve this issue, you can add IMG element inside the DIV with 1×1 pixel image. Here s the complete code to draw line and circle into HTML document.
A video tutorial that explains how to draw lines with jQuery.
Continue reading about Drawing Lines With jQuery – Video Tutorial
Recently, I was working on a website redesign project for a client. They wanted to keep some of their product catalog, shopping cart and back-end pages, but redesign their homepage while keeping the catalog borders and styles. The existing design had a drop shadow around the main content along with several borders. I designed a new CSS-based layout for the page, and instead of trying to modify all of the existing drop shadow and border graphics to fit, I decided to use jQuery and the LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.
Continue reading about Using jQuery and LiquidCanvas to Add Drop Shadows
