|
|
|
|
|
|
| |
| **************************************************************
* title : Unobtrusive javascript for maintaining scrollable layer state
*
* story : Sometimes when you develop webapplications which contain
* tables with many rows you have those in layers,
* which have a css property overflow: auto in order to
* make them scrollabe.
* When the user clicks on any http link and the page
* refreshes, the scrollable area is scrolled on top again
* and this might confuse users which expect their view
* not to change.
*
* With this javascript the scrollTop property of scrollable
* layers is preserved. A parameter is added on the url dynamically
* on the moment of clicking. This parameter contains the scrollTop
* property of the scrollable. When the page reloads the script
* reads that parameter, and will scroll the specified scrollable
* to the previous location.
*
* This script works unobtrusively, so if the client does not
* have javascript enabled nothing wrong will happen. The HTML
* document does not change at all.
*
*
* Live demo @ LINK1http://temp.cherouvim.com/forums/overflow/LINK1
* Notice how the url changes depending on the scrollbar position.
* Some links contain other random parameters for demo purposes.
*
* author : Ioannis Cherouvim
* web : http://cherouvim.com
* date : 2005-12-03
**************************************************************
//////////////////////////////////////////////////////////////
//overflow.js
function init() {
if(document.getElementById && document.createTextNode) {
var overflow = document.getElementById('overflow');
overflow.scrollTop = getLastUrlParam();
var as = overflow.getElementsByTagName('a');
for(var i=0, length=as.length;i<length;i++) {
as[i].onclick= function() {
this.href = addUrlParam(this.href, '_s', overflow.scrollTop);
}
}
}
}
addUrlParam = function(href, key, value) {
return href+(href.split('?').length==1?'?':'&') + key + '=' + value;
}
getLastUrlParam = function() {
var parts = location.href.split('=');
return parts[parts.length-1];
}
window.onload=init;
//////////////////////////////////////////////////////////////
//demo HTML
<html>
<head>
<script type='text/javascript' src='overflow.js'></script></head>
<style type='text/css'>
<!--
body{
color: #000;
font-family: verdana, arial;
font-size: 10px;
text-align: center;
background: url('bg.gif') repeat top;
}
table {
font-size: 10px;
}
div#overflow {
margin: 0 auto;
width: 760px;
text-align: center;
height: 200px;
border: 1px dotted red;
overflow: auto;
}
div#overflow table {
width: 95%;
}
-->
</style>
</head>
<body>
<div id='overflow'>
<table>
<tr><td>q</td><td>1ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html?w=3'>FOO</a></td></tr>
<tr><td>q</td><td>2ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>BAR</a></td></tr>
<tr><td>q</td><td>3ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html?x=2'>FOO</a></td></tr>
<tr><td>q</td><td>4ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO1</a></td></tr>
<tr><td>q</td><td>5ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO2</a></td></tr>
<tr><td>q</td><td>6ddwqd qw dqw</td><td>wq21 q</td><td>213321321s1 q</td><td><a href='index.html'>3FOO</a></td></tr>
<tr><td>q</td><td>7ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO BAR</a></td></tr>
<tr><td>q</td><td>8ddwqd qw dqw</td><td>231312wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>9ddwqd qw dqw</td><td>wq21 q</td><td>213321312s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>0ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html?ads=wqe&eqw=321'>EXAMPLE.COM</a></td></tr>
<tr><td>q</td><td>1ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>2ddwqd 32qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>3ddwqd qw dqw</td><td>wq21 q</td><td>213s3211 q</td><td><a href='index.html'>BARFOO</a></td></tr>
<tr><td>q</td><td>4ddwqd123 qw dqw</td><td>wq21 q</td><td>23123123s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>6ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>7ddwqd321 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>8ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>9ddwqd qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html?c=3'>1FOO</a></td></tr>
<tr><td>q</td><td>0ddwqd123 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>1ddwqd3223312123 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>2ddwqd23 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>3ddwqd132123 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>4ddwqd23312 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>5ddwqd123 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>6ddwqd123321321 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>qddwqd123321321321 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>7ddwqd123321321321321 qw dqw</td><td>wq21 q</td><td>213s1 q</td><td><a href='index.html'>FOO</a></td></tr>
<tr><td>q</td><td>8ddwqd321321321321 qw dqw</td><td>wq21233211231 q</td><td>213s1 231312 q</td><td><a href='index.html'>FOO</a></td></tr>
</table>
</div>
</body>
</html> | |
|
|
| Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time | | | 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 | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | 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 | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password.
improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Cool tool tip
Categories : Java Script, HTML, Web Design | |
|
|
|
