Tag Archives: CSS

Front End, Programming

TABULATOR JS TABLE LIBRARY

Leave a comment

#28 TABULATOR JS TABLE LIBRARY

Tabulator Example

Tabulator is an easy to use, fully featured, interactive table JavaScript library.

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.

Simply include the library in your project and you’re ready to roll.

Tabulator has an enormous number of features to help customize your table experience to your needs.

With new features released every month, there is bound to be something to get your interactive table juices flowing.

A detailed breakdown of all of the available features can be found in the Documentation.

The easy to use, fully featured, interactive table JavaScript library.
Tabulator_ExampleDownload
Front End, Programming

GOOGLE CHARTS

Leave a comment

#22 GOOGLE CHARTS

A Simple Google Charts Example

Google Charts allows us to display big data in a visually appealing way. Google offers animation and lots of other options to modify google charts. The charts are rendered using HTML5/SVG technology and the charts themselves are exposed as JavaScript classes In this example five different charts are drawn and are refreshed every time the page is resized using a simple line in JavaScript:

The Charts Are embedded in iFrames.

window.onresize = function(){ location.reload();}

On page resize the page is refreshed. Since we are using the charts inside HTML iFrames this works quite well.

google_chartsDownload
Front End, Programming

CIRCLE COLORS IN JAVASCRIPT

Leave a comment

#14 CIRCLE COLORS IN JAVASCRIPT

Circle Color Example

Beautiful circles are formed while the mouse is moving inside your browser. This short bit of code uses the D3.js library also known as the Data Driven Documents JavaScript library.

D3 examples

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 examples

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

In this case D3 was used to display colorful circular animations behind the mouse while it moves over the browser window.

Take a look at the EXAMPLE GALLERY for more examples.

circlecolorsDownload
Front End, Programming

SIMPLE ANIMATIONS IN CSS

Leave a comment

#12 SIMPLE ANIMATIONS IN CSS

CSS animations

The following is a few examples of web loading animations made entirely in HTML and CSS. jQuery is used to add and remove the CSS animations. For example once the document has loaded a jQuery click event can be triggered like so:

jQuery used to call animations
1
<strong>&nbsp;jQuery(document).ready(function&nbsp;(${ $('#pulse').click(function({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      $('.placeholder').removeClass('wave').addClass('pulse');&nbsp;})                                                     });</strong>

index.php shows a variety of different shapes combined. The following 3 small scripts show their respective shapes. anim.css holds all the animations.

HTML: Hyper Text Markup Language

CSS: Cascading Style Sheets

jQuery: lightweight JavaScript library

Folder structure.
animateDownload