Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

CSS3 Isoworld

Isoworld class provides a way to create an illusion of isometric view for a website, by transforming provided HTML elements. It can create ground and infinite amount of isometric cubes.

This class is best viewed by Chrome, other browsers might have slower animations and displacement of elements

Package contains isoworld.js, isoworld.packed.js (packed javascript), and three example files: example.html, multicube.html and callback_example.html to demonstrate class functionality.

Contents

Download

Example codes

<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
#ground
{
    border: 2px solid black;
    background-color: #fff;
}
#top
{
    border: 2px solid black;
    background-color: #fff;
}
#left
{
    border: 2px solid black;
    background-color: #fff;
}
#right
{
    border: 2px solid black;
    background-color: #fff;
}
#shadow
{
    background-color: grey;
    border: 2px solid black;
    color: white;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#ground">Ground</a></li>
<li><a href="#top">Top</a></li>
<li><a href="#left">Left</a></li>
<li><a href="#right">Right</a></li>
<li><a href="#shadow">Shadow</a></li>
</ul>
</div>
<div id="ground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque elit, 
porta et dignissim sed, consectetur in metus. Quisque nec eros quam. Vivamus semper 
nisi a nibh rutrum eu scelerisque felis imperdiet. Sed viverra ullamcorper quam 
eget cursus. Mauris ultrices nunc et felis viverra vestibulum. Quisque faucibus 
placerat justo, id ultricies massa gravida quis. Cras id odio ligula. Nunc semper 
urna sed nisl viverra congue. 

 Nunc mauris leo, ullamcorper a viverra ac, posuere ac enim. In rutrum ligula 
 nec quam posuere eget lacinia sapien accumsan. Etiam pellentesque turpis id 
 odio facilisis eu suscipit mauris volutpat. Cras leo mi, bibendum ac tincidunt 
 vitae, faucibus vel ante. Integer molestie elit ut mi vehicula in gravida sem 
 volutpat. Mauris sed pretium mauris. Nulla dapibus laoreet mi sed gravida. Nam 
 libero nunc, hendrerit ac ornare eget, sagittis vel est. Suspendisse potenti. 
 Suspendisse egestas, neque sit amet ullamcorper commodo, felis eros placerat 
 odio, vel pulvinar leo nulla ac purus. Quisque iaculis mi in nisl luctus ultrices. 

 Sed turpis diam, egestas vitae dictum ac, aliquam et quam. Donec dapibus 
 convallis quam, sit amet dictum odio bibendum eget. Donec varius dolor suscipit 
 est laoreet consectetur. Nunc iaculis vehicula diam, ut ultricies sem mollis nec. 
 Ut suscipit luctus dapibus. Duis sollicitudin ultricies hendrerit. Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. Aenean sodales, sapien id faucibus 
 bibendum, ipsum est congue nulla, eu hendrerit enim tellus quis arcu. Donec sit 
 amet augue nisi, id feugiat est. Vestibulum ac ante sit amet elit euismod porta 
 sed sed augue. Nam eu purus nibh, a suscipit magna. 

 Nam malesuada, est dictum egestas congue, mauris mauris porta est, commodo 
 hendrerit erat lectus sit amet nisi. Integer a ligula vitae orci condimentum 
 scelerisque quis in leo. Suspendisse potenti. Pellentesque habitant morbi 
 tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non 
 felis ut turpis rutrum consectetur. Aenean ut ipsum lectus, quis volutpat 
 sapien. Sed mollis malesuada vulputate. Nullam dapibus scelerisque convallis. 
 Mauris pellentesque porta velit, vitae placerat mi vulputate sed. 

 Nam non nulla quis magna pulvinar suscipit. Quisque egestas nisl eget quam 
 tempus facilisis. Etiam in ligula in erat commodo lacinia ut vitae nulla. 
 Nulla accumsan auctor risus eu accumsan. Ut hendrerit augue sed tortor fringilla 
 non commodo enim gravida. Nunc non odio magna. In hac habitasse platea dictumst. 
 Praesent malesuada elit eu dui consectetur at sollicitudin purus ullamcorper. 
 Sed mattis tempor mi placerat tincidunt. Phasellus quis nunc nisi, ut condimentum 
 nibh.
</div>

<div id="top">
    One
</div>
<div id="left">
    One
</div>
<div id="right">
    One
</div>
<div id="shadow">
    One
</div>

<script src="isoworld.packed.js"></script>
<script>
var c = new isoworld({
    ground: "ground"
});
c.createCube({
    top: "top",
    left: "left",
    right: "right",
    shadow: "shadow",
    size: 150,
    x: 400,
    y: 50
});
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew isoworld(config);
DescriptionCreate isoworld instance with ground element
Input parameters

json config - Json structure with configuration properties

  • string or HTML element ground - HTML element which will be transformed to the ground
  • int size - width and height in pixels for transformed object (default:500)
  • int maxSize - maximal expanding size in pixels (default: 1000)
  • int x - position of ground on x axis in pixels (default:400)
  • int y - position of ground on y axis in pixels (default: 50)
  • int offsetTop - offset from top when expanded in pixels (default: 50)
  • int animationSteps - steps in transforming animation (default: 10)
  • int animationInterval - interval in miliseconds between animation steps (default: 10)
  • bool toggleOnClick - expand and close elements on click (default: true)
  • function onToggle - callback function on toggle, receives one bool argument (true is expanding and false if shrinking)
  • function onExpandStart - callback to start phase of expanding
  • function onExpandEnd - callback to end phase of expanding
  • function onShrinkStart - callback to start phase of shrinking
  • function onShrinkEnd - callback to end phase of shrinking
Example input
var c = new isoworld({
	ground: "ground"
});

Create cube

Back to method list

Method namecreateCube(config)
DescriptionCreate isometric cube from three panes
Input parameters

json config - Json structure with configuration properties

  • string or HTML element top - HTML element which will be transformed to the top pane of the cube
  • string or HTML element left - HTML element which will be transformed to the left pane of the cube
  • string or HTML element right - HTML element which will be transformed to the right pane of the cube
  • string or HTML element shadow - HTML element which will be transformed to the shadow pane of the cube
  • int size - width and height in pixels for transformed object (default:200)
  • int maxSize - maximal expanding size in pixels (default: 1000)
  • int x - position of ground on x axis in pixels (default:400)
  • int y - position of ground on y axis in pixels (default: 100)
  • int offsetTop - offset from top when expanded in pixels (default: 50)
  • int animationSteps - steps in transforming animation (default: 10)
  • int animationInterval - interval in miliseconds between animation steps (default: 10)
  • bool toggleOnClick - expand and close elements on click (default: true)
  • function onToggle - callback function on toggle, receives one bool argument (true is expanding and false if shrinking)
  • function onExpandStart - callback to start phase of expanding
  • function onExpandEnd - callback to end phase of expanding
  • function onShrinkStart - callback to start phase of shrinking
  • function onShrinkEnd - callback to end phase of shrinking
Example
c.createCube({
	top: "top1",
	left: "left1",
	right: "right1",
	shadow: "shadow1",
	size: 150,
	x: 400,
	y: 50
});

Toggle elements expansion

Back to method list

Method nameanimate(id)
DescriptionToggle provided element (expand or close it)
Input parameters

string or HTML element animate - element to expand or close

Example

c.animate("ground")

Latest changes

  • 02. January, 2012 -
    • Fixed bug with ground jumping in some browsers
    • Fixed bug with contents not fitting in expanded div height
    • Added 5 callbacks for controling contents based on states of panes

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus