|
|
|
title : Unobtrusive javascript for applying expand/shrink behaviour
story : This is JS script for applying expand/shrink behaviour
to blocks of html. It works unobtrusivelly, which means
that the HTML document is clean from JS. Everything is
applied dynamicly. Load the script on your head using
<script type='text/javascript' src='collapse.js'></script>
and it will generate buttons and apply behaviour on them.
It will do the job for divs which have a class name
called 'collapsable'. This is customizable of course.
If the client does not have javascript he will see the
whole document expanded on it's original state.
Live demo @ http://temp.cherouvim.com/forums/collapse/
author : Ioannis Cherouvim
web : http://cherouvim.com
date : 2005-12-03
collapse.js
| var COLLAPSABLE_PARENT_NAME = "collapsable";
var COLLAPSABLE_PARENT_TYPE = "div";
var COLLAPSABLE_CHILD_TYPE = "p";
var COLLAPSABLE_EXPAND = "[expand]";
var COLLAPSABLE_SHRINK = "[shrink]";
init = function() {
if(document.getElementById && document.createTextNode) {
var entries = document.getElementsByTagName(COLLAPSABLE_PARENT_TYPE);
for(i=0;i<entries.length;i++)
if (entries[i].className==COLLAPSABLE_PARENT_NAME)
assignCollapse(entries[i]);
}
}
assignCollapse = function (div) {
var button = document.createElement('a');
button.style.cursor='pointer';
button.setAttribute('expand', COLLAPSABLE_EXPAND);
button.setAttribute('shrink', COLLAPSABLE_SHRINK);
button.setAttribute('state', -1);
button.innerHTML='dsds';
div.insertBefore(button, div.getElementsByTagName(COLLAPSABLE_CHILD_TYPE)[0]);
button.onclick=function(){
var state = -(1*this.getAttribute('state'));
this.setAttribute('state', state);
this.parentNode.getElementsByTagName(COLLAPSABLE_CHILD_TYPE)[0].style.display=state==1?'none':'block';
this.innerHTML = this.getAttribute(state==1?'expand':'shrink');
};
button.onclick();
}
window.onload=init; | |
demo HTML
| <html>
<head>
<style type='text/css'>
<!--
body {
font: 10px Georgia, Arial;
width: 450px;
margin: 3px auto;
border: 3px double gray;
}
h1, h2 {
padding: 0;
margin: 0;
display: inline;
}
.collapsable {
margin: 1em;
padding: 1em;
border: 1px solid black;
background: #eee;
}
-->
</style>
<script type='text/javascript' src='collapse.js'></script>
</head>
<body>
<h1>expand-shrink</h1>
<div class='collapsable'>
<h2>title1</h2>
<p>foo bar example foo bar example foo bar example foo bar example foo bar example foo bar example </p>
</div>
<div class='collapsable'>
<h2>title2</h2>
<p>example.com foo bar example.com foo bar example.com foo bar example.com foo bar </p>
</div>
<div class='collapsable'>
<h2>title3</h2>
<p>example.comfoo barexample.comfoo bar example.com foo bar example.com foo bar example.comfoo barexample.com foo bar example.com foo bar example.com foo bar example.comfoo barexample.comfoo bar example.com foo bar example.com foo bar example.comfoo barexample.com foo bar example.com foo bar example.com foo bar </p>
</div>
</body>
</html> | |
|
|
| Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | KuPro1.0 - This application is for Libraries, To see their books and to maintain users books. This version is in Turkish, future vers may have English Support.
Categories : PHP, Java Script, DHTML | | | AutoComplete in HTML forms
Categories : DHTML, HTML, Web Browsers | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | Menu in sliding bar or tree style. Handles frames by using small amount of javascript. Handles external and internal pages. Allows custom code to replace a menu item.
Categories : PHP Classes, PHP, Java Script, DHTML | |
|
|
|
