Mega Code Archive

 
Categories / JavaScript DHTML / Ajax Layer
 

RelativeLayers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- // RelativeLayers 0.9.7 //  // $Id: example4.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $ //  // Library for creating dynamic designs that adapt themselves to the user's // browser environment. //  // Copyright (C) 1998-2004, Geert Bevin // Distributed under the terms of the GNU Lesser General Public, v2.1 or later //  // gbevin[remove] at uwyn dot com // http://www.uwyn.com/projects/relativelayers --> <HTML> <HEAD> <TITLE>RelativeLayers : Move and resize example</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- layer1 = new RelativeLayer( "layer1Div", "", "", "80%","60%",LEFT,"50%",TOP,"10%","0","-50%", "100%","100%",LEFT,"50%",TOP,"50%","0","0", "#dddddd"); layer1.setVisible(true); layer2 = new RelativeLayer( "layer2Div", "", "", "80%","AUTO",LEFT,"50%",BOTTOM,"-10%","0","50%", "100%","100%",LEFT,"50%",TOP,"50%","0","0", "#ffffff"); layer2.setVisible(true); //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078"> <DIV ID="layer1Div"> Demo of the interactive move functions.<BR> </DIV> <DIV ID="layer2Div">     <A HREF="javascript:layer1.visibleMoveBy(-10,0)">Left</A>     <A HREF="javascript:layer1.visibleMoveBy(10,0)">Right</A>     <A HREF="javascript:layer1.visibleMoveBy(0,-10)">Up</A>     <A HREF="javascript:layer1.visibleMoveBy(0,10)">Down</A><BR>     <A HREF="javascript:layer1.visibleMoveTo('50%',0)">Top edge</A>     <A HREF="javascript:layer1.visibleMoveTo('50%','100%-'+layer1.calculateVisibleHeight())">Bottom edge</A>     <A HREF="javascript:layer1.visibleMoveTo('50%', Math.floor((layer2.getAbsoluteY()-layer1.calculateVisibleHeight())/2))">Center</A>     <A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2); layer1.visibleMoveTo(center_offset_x,'10%')">Left edge</A>     <A HREF="javascript:center_offset_x = Math.ceil(layer1.calculateVisibleWidth()/2); layer1.visibleMoveTo('100%-'+center_offset_x,'10%')">Right edge</A><BR>     <A HREF="javascript:layer1.visibleResizeTo('10%','60%')">Narrow</A>     <A HREF="javascript:layer1.visibleResizeTo('100%','60%')">Wide</A>     <A HREF="javascript:layer1.visibleResizeTo('80%','60%')">Normal</A>     <A HREF="javascript:layer1.visibleResizeTo('80%','10%')">Short</A>     <A HREF="javascript:layer1.visibleResizeTo('80%','90%')">Long</A><BR>     <A HREF="javascript:layer1.visibleResizeBy('-10%',0)">Narrower</A>     <A HREF="javascript:layer1.visibleResizeBy('10%',0)">Wider</A>     <A HREF="javascript:layer1.visibleResizeBy(0,'-10%')">Shorter</A>     <A HREF="javascript:layer1.visibleResizeBy(0,'10%')">Longer</A><BR> </DIV> </BODY> </HTML>                     relativelayers-0.9.7.zip( 74 k)