InterActive Static is a javascript library that makes it easy to give users an interactive experience on an HTML web page.
InterActive Static allows full customizable control over how a user's clicks hide and reveal many different layers inside of what could be otherwise a completely static HTML web page.
InterActive Static is an optional experience which does not require users to have javascript enabled, it does not use AJAX, and when used on a well formed HTML web page it does not take away from the user experience if the user has javascript disabled.
InterActive Static is designed to be easy to use if you have some experience working with HTML but do not know javascript.
That's good for me, but are there any requirements to use InterActive Static?
Yes, only one. InterActive Static uses the very popular javascript library jQuery.
Of course you can! But only if you don't modify the code, especially the attribute to me, the original author, Virgohippy.
You're welcome to use my library, but not if you modify my code or neglect to attribute me, Virgohippy, as the original author. Violate these terms and I'll think bad thoughts of you!
If you want more functionality, or something doesn't work right, tell me.
I'm sorry, I'll be nice. So how do I use InterActive Static?
To use InterActive Static download jQuery and the InterActive Static javascript library.
If you get stuck somewhere, click here to read other comments or ask a question.
Include the following lines of code, which point to the two libraries, in the head of your HTML web page:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="interactivestatic-1-2-min.js"></script>
Define the parameters for your page, with more code in your head.
First, let me show you how this page is configured for InterActive Static, then I'll explain the details:
<script type="text/javascript">
IAS = new interActiveStatic(); // create a new IAS object
IAS.setMap({ // define relationships between classes and interactive layers
'all intro':'#intro #jump',
'all intro what req free':'#intro',
'all what req free':'#what',
'all req free':'#req',
'all free':'#free #selfish',
'all bad':'#bad',
'all use':'#use',
'all best':'#best',
'all comments':'#comments',
'all':'.spacer'
});
IAS.setBase('intro'); // the first class new users will see
IAS.setSpeed('fast'); // 'fast' or 'slow' or integer for milliseconds
IAS.setEmpties('.spacer'); // these will be hidden on page load
</script>
The first line creates a new instance of an InterActive Static object, which we are calling 'IAS'.
Once we have an IAS object, we can map the relationships between classes and the interactive layers with the 'setMap' method. Classes are used as keys, and classes or IDs, are used as values.
Multiple keys can be assigned to multiple values. Separate classes and IDs with a spaces.
When a user clicks on a link with a class defined in our mapping, Active Static will open all HTML elements with a class or ID corresponding to the mapped class, and will close all other values mentioned in our mapping.
For example, this simple demonstration code allows interaction between three separate layers:
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="interactivestatic-1-2-min.js"></script>
<script type="text/javascript">
IAS = new interActiveStatic(); // create a new IAS object
IAS.setMap({ // define class_click:layer relationships
'intro':'#intro',
'page1':'#page1',
'page2':'#page2'
});
IAS.setBase('intro'); // first class new users sees
IAS.setSpeed('slow'); // 'fast', 'slow' or integar milliseconds
IAS.setEmpties('.spacer'); // these will be hidden on page load
</script>
</head>
<body>
<div>
<a class="intro">Intro</a> |
<a class="page1">Page 1</a> |
<a class="page2">Page 2</a>
</div>
<div class="spacer"></div>
<div id="intro">
<a name="intro"></a>
This is a simple demonstration of
<a href="index.htm">Interactive Static</a>.
</div>
<div class="spacer"></div>
<div id="page1">
<a name="page1"></a>
Only on page 1 can you see what is on page 1.
</div>
<div class="spacer"></div>
<div id="page2">
<a name="page2"></a>
Did you know there is a page 2?
</div>
<script type="text/javascript">IAS.activate();</script>
</body>
</html>
We can also build our mapping within the document, and use the 'setMap' method at the end, like this demonstration:
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="interactivestatic-1-2-min.js"></script>
<script type="text/javascript">
IAS = new interActiveStatic(); // create a new IAS object
iasmap = {}; // to define class_click:layer relationships
IAS.setBase('intro'); // the first class new users will see
IAS.setSpeed('slow'); // 'fast', 'slow' or integar milliseconds
IAS.setEmpties('.spacer'); // these will be hidden on page load
</script>
</head>
<body>
<div>
<a class="intro">Intro</a> |
<a class="page1">Page 1</a> |
<a class="page2">Page 2</a>
</div>
<div class="spacer"></div>
<div id="intro">
<a name="intro"></a>
This is a less simple demonstration of
<a href="index.htm">Interactive Static</a>.
</div>
<script type="text/javascript">iasmap['intro'] = '#intro';</script>
<div class="spacer"></div>
<div id="page1">
<a name="page1"></a>
Only on page 1 can you see what is on page 1.
</div>
<script type="text/javascript">iasmap['page1'] = '#page1';</script>
<div class="spacer"></div>
<div id="page2">
<a name="page2"></a>
Did you know there is a page 2?
</div>
<script type="text/javascript">iasmap['page2'] = '#page2';</script>
<script type="text/javascript">IAS.setMap(iasmap);IAS.activate();</script>
</body>
</html>
The method 'setBase' is our starting position, when a user first lands on our interactive page InterActive Static will pretend as if they clicked on a link with this class.
To control the speed at which the interactive layers are shown or hidden, use the 'setSpeed' method. The values 'fast' or 'slow' can be used, or any integer value for milliseconds. Zero is set by default.
The method 'setEmpties' is where we put classes or IDs that should be hidden when the page is loaded. See the InterActive Static Best Practices Guide for why this is useful.
Activate InterActive Static by including the following line of code at the bottom of your page below all classes and IDs which might be affected by InterActive Static:
<script type="text/javascript">IAS.activate();</script>
Read our Best Practices Guide for suggestions on building your page if you have not done so already.
Leave a comment with a link to your website and let me know what you think of InterActive Static.
When using InterActive Static, it is important to remember that not all surfers have javascript enabled. For this reason, you should build your pages so they look good without the use of InterActive Static.
Click Here to see what this page looks like if javascript has been disabled.
If you get stuck somewhere, click here to read other comments or ask a question.
To make interactive links on your page you must give them a class defined in your mapping, like so:
<a class="layer1">See Layer 1</a>
Notice there is no 'href' attribute. While an 'href' is not necessary if javascript is enabled, it is a good idea to use one in conjuction with named anchors, in case javascript is disabled, like this:
<a href="#layer1" class="layer1">See Layer 1</a>
Place the following named anchor where you want to re-focus the user's screen when they click on the link:
<a name="layer1"></a>
By using named anchors in your 'href' attributes, InterActive Static will also know what to do when the user clicks on their browser 'back' button. Without 'href' attributes pointing to named anchors, the user might have to start at your base layer if the user clicks their 'back' button.
The following code is all you need to create an interactive layer:
<div id="layer1">Layer 1 contents</div>
Include a named anchor in this layer and the user's browser will focus on 'layer1' when the user clicks on a link with the 'href' attribute set to '#layer1', like so:
<div id="layer1"><a name="layer1"></a>Layer 1 contents</div>
On this page I use a empty div tags with the class 'spacer' between layers on the page. This 'spacer' class puts space between the interactive layers. If javascript is enabled, InterActive Static will hide these layers. If javascript is disabled, these 'spacer' classed div tags create a nice visual separation between the non-interactive layers on the page.
Leave a comment with a link to your website and let me know what you think of InterActive Static.
Questions & Comments
If you use InterActive Static, or are trying to but it's not working properly, please leave a comment here and let me know!