By clicking on this link you and I will get BONUS SPACE free!
This scroller/viewer is similar to one using MooTools. It scrolls both the semi-transparent content divs to designated targets AND the optional background image, using smooth scrolling. The javascript source for this is lightweight, about 125 lines of code (5.73 kb) compared with about 10,000 lines in the MooTools-core and MooTools-more libraries (237 kb).
Feel free to use it. Please retain the copyleft GPL license notice intact.
Unless otherwise noted, all content on the netsperience 2.x site is copyright © 2008 - 2012 by Randall Goya you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version, see <http://www.gnu.org/licenses/>
Comments
How to add new squares?
Sun, 09/12/2010 - 11:16am — asteriskThat's an amazing script!! And it works very smoothly and it is stable...moreover it's code is lightweight and this is very good as mootools library takes too lonk to load on a page.
I was experimenting with the script and I thought that it could be useful to add more squares, so I tried and I added in the html file two new divs with each their id's content5 and content6.
I wanted a grid of 6 squares like this:
1 | 2
3 | 4
5 | 6
So in the fob.js file I added 8 rows in the setup function: 4 in the position and 4 in the dimension:
//position document.getElementById('content5').style.left= "0px";
document.getElementById('content5').style.top= sheight + sheight +"px";
document.getElementById('content6').style.left= swidth +"px";
document.getElementById('content6').style.top= sheight + sheight +"px";
//
document.getElementById('content5').style.width=swidth +"px";
document.getElementById('content5').style.height=sheight + "px";
document.getElementById('content6').style.width=swidth +"px";
document.getElementById('content6').style.height=sheight + "px";
Then I tested the new grid, and everything gone well for squares 1,2 and 5,6 but for the middle ones 3,4 the scroll function gave a bad orizontal distance while scrolling. I imagine that this is due to the scroll function that was thought for a 2x2 grid. Isn't it?
Can you suggest how to edit the script to add more squares, 6 in this example or more?
Thank you very much!
Jos
nift code
Thu, 05/20/2010 - 8:26am — imageappealthanks for making this open src