[Chameleon] Chameleon has page a fixed size?
Pusat SDAL
pssdal at gmail.com
Mon Aug 22 05:20:41 EDT 2005
Dear Experts,
I have modified some samples of chameleon files, when I try to
modified a " top position of ReferenceLayer" on samples.css in order
to make more lower, this ReferenceLayer still on his previous
position. What the matter with that? Please give an advise.
Hereis my coding on sample css :
---------------------------------------------------------------------------------------------------------------
#TitleLayer {
position:absolute;
left:10px;
top:10px;
width:100%;
height:50px;
z-index:1;
/* visibility:hidden; */
}
#TopTabsLayer {
position:absolute;
left:200px;
top:78px;
width:420;
height:12px;
z-index:1;
padding:0px;
margin:0px;
border-bottom: 1px solid #cccccc;
}
#NavToolsLayer {
position:absolute;
background-color:#ffffff;
left:200px;
top:91px;
width:420;
height:30px;
padding:0px;
margin:0px;
z-index:2;
}
#ROIToolsLayer {
position:absolute;
background-color:#ffffff;
left:200px;
top:91px;
width:420;
height:30px;
padding:0px;
margin:0px;
z-index:1;
}
#LanguageLayer {
position:absolute;
left:10px;
top:52px;
width:180;
height:24px;
z-index:1;
padding:0px;
margin:0px;
}
#SideTabsLayer {
position:absolute;
left:10px;
top:78px;
width:180;
height:12px;
z-index:1;
padding:0px;
margin:0px;
border-bottom: 1px solid #cccccc;
}
#LegendLayer {
position:absolute;
background-color:#ffffff;
left:10px;
top:91px;
width:180;
height:348px;
padding:0px;
margin:0px;
z-index:2;
}
#OtherToolsLayer {
position:absolute;
background-color:#ffffff;
left:10px;
top:91px;
width:180;
height:375px;
padding:0px;
margin:0px;
z-index:1;
}
#ReferenceLayer {
padding:0px;
margin:0px;
position:absolute;
left:200px;
top:460px;
width:420px;
height:150px;
z-index:1;
background-color:#ffffff;
}
#MapTipsLayer {
padding:0px;
margin:0px;
position:absolute;
left:10px;
top:520px;
width:180px;
height:150px;
z-index:1;
}
#ScaleZoomLayer {
padding:0px;
margin:0px;
position:absolute;
left:10px;
top:460px;
width:180px;
height:50px;
z-index:1;
}
#MainMapLayer {
padding:0px;
margin:0px;
position:absolute;
left:209px;
top:139px;
width:402;
height:302px;
z-index:1;
border: 0px none #000000;
}
#PanArrowsLayer {
padding:0px;
margin:0px;
position:absolute;
left:200;
top:130;
width:420;
height:320;
z-index:0;
background-color: cccccc;
layer-background-color: cccccc;
border: 0px none #000000;
}
.grey_border {
border: 1px solid #cccccc;
}
.label
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}
.title
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #333333;
}
.inputBox
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
border-width: 0px;
background-color: #ffffff;
}
-----------------------------------------------------------------------------
this sample.css correspondence with this template called indonesia.html
----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chameleon Sample - XML Theme Legend</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<cwc2 type="SharedResource" name="projection">
<projection name="NAD 83 / Geographic" srs="epsg:4269"/>
<projection name="WGS 84 / Geographic" srs="epsg:4326"/>
<projection name="WGS 84 / Auto UTM" srs="AUTO:42001"/>
<projection name="WGS 84 / Auto Tr. Mercator" srs="AUTO:42002"/>
<projection name="WGS 84 / Auto Orthographic" srs="AUTO:42003"/>
<projection name="WGS 84 / Auto Equirectangular" srs="AUTO:42004"/>
<projection name="WGS 84 / LCC Canada" srs="epsg:42101"/>
<projection name="NAD 83 / NRCan LCC Canada" srs="epsg:42304"
default="true"/>
</cwc2>
<!-- Button Resource for Pan Arrows -->
<cwc2 type="SharedResource" name="PanArrows">
<imagewidth value="50"/>
<imageheight value="50"/>
<labelfont value="fonts/Vera.ttf"/>
<usetextbuttoncache value="false"/>
<state value="normal">
<textbuttoncolor value="f0f0f0"/>
</state>
<state value="hover">
<textbuttoncolor value="cccccc"/>
</state>
<state value="selected">
<textbuttoncolor value="cccccc"/>
</state>
</cwc2>
<!-- Button Resource for Tabs -->
<cwc2 type="SharedResource" name="Tabs">
<imagewidth value="60"/>
<imageheight value="10"/>
<textbuttonpadding value="0"/>
<textbuttonnudge value="0"/>
<labelfont value="fonts/Vera.ttf"/>
<usetextbuttoncache value="false"/>
<state value="normal">
<textbuttoncolor value="f0f0f0"/>
<textbuttonborder_topleft_image value="borders/border_tl_1.png"/>
<textbuttonborder_top_image value="borders/border_t_1.png"/>
<textbuttonborder_topright_image value="borders/border_tr_1.png"/>
<textbuttonborder_right_image value="borders/border_r_1.png"/>
<textbuttonborder_left_image value="borders/border_l_1.png"/>
</state>
<state value="hover">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_2.png"/>
<textbuttonborder_top_image value="borders/border_t_2.png"/>
<textbuttonborder_topright_image value="borders/border_tr_2.png"/>
<textbuttonborder_right_image value="borders/border_r_2.png"/>
<textbuttonborder_left_image value="borders/border_l_2.png"/>
</state>
<state value="selected">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_3.png"/>
<textbuttonborder_top_image value="borders/border_t_3.png"/>
<textbuttonborder_topright_image value="borders/border_tr_3.png"/>
<textbuttonborder_right_image value="borders/border_r_3.png"/>
<textbuttonborder_left_image value="borders/border_l_3.png"/>
</state>
</cwc2>
<!-- defaults for NavButton -->
<cwc2 type="SharedResource" name="NavButtons">
<textbuttonbackgroundimage value=""/>
<imagewidth value="24"/>
<imageheight value="24"/>
<textbuttonpadding value="0"/>
<textbuttonnudge value="0"/>
<labelcolor value="111111"/>
<labelfont value="fonts/Vera.ttf"/>
<labelalign value="left"/>
<labelfontsize value="8"/>
<labelantialias value="true"/>
<usetextbuttoncache value="false"/>
<state value="normal">
<textbuttoncolor value="f0f0f0"/>
<textbuttonborder_topleft_image value="borders/border_tl_1.png"/>
<textbuttonborder_top_image value="borders/border_t_1.png"/>
<textbuttonborder_topright_image value="borders/border_tr_1.png"/>
<textbuttonborder_right_image value="borders/border_r_1.png"/>
<textbuttonborder_left_image value="borders/border_l_1.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_1.png"/>
<textbuttonborder_bottom_image value="borders/border_b_1.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_1.png"/>
</state>
<state value="hover">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_2.png"/>
<textbuttonborder_top_image value="borders/border_t_2.png"/>
<textbuttonborder_topright_image value="borders/border_tr_2.png"/>
<textbuttonborder_right_image value="borders/border_r_2.png"/>
<textbuttonborder_left_image value="borders/border_l_2.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_2.png"/>
<textbuttonborder_bottom_image value="borders/border_b_2.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_2.png"/>
</state>
<state value="selected">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_3.png"/>
<textbuttonborder_top_image value="borders/border_t_3.png"/>
<textbuttonborder_topright_image value="borders/border_tr_3.png"/>
<textbuttonborder_right_image value="borders/border_r_3.png"/>
<textbuttonborder_left_image value="borders/border_l_3.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_3.png"/>
<textbuttonborder_bottom_image value="borders/border_b_3.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_3.png"/>
</state>
</cwc2>
<!-- defaults for Text Buttons -->
<cwc2 type="SharedResource" name="TextButtons">
<textbuttonbackgroundimage value=""/>
<imagewidth value="120"/>
<imageheight value="24"/>
<textbuttonpadding value="0"/>
<textbuttonnudge value="0"/>
<labelcolor value="111111"/>
<labelfont value="fonts/Vera.ttf"/>
<labelalign value="left"/>
<labelfontsize value="8"/>
<labelantialias value="true"/>
<usetextbuttoncache value="false"/>
<state value="normal">
<textbuttoncolor value="f0f0f0"/>
<textbuttonborder_topleft_image value="borders/border_tl_1.png"/>
<textbuttonborder_top_image value="borders/border_t_1.png"/>
<textbuttonborder_topright_image value="borders/border_tr_1.png"/>
<textbuttonborder_right_image value="borders/border_r_1.png"/>
<textbuttonborder_left_image value="borders/border_l_1.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_1.png"/>
<textbuttonborder_bottom_image value="borders/border_b_1.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_1.png"/>
</state>
<state value="hover">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_2.png"/>
<textbuttonborder_top_image value="borders/border_t_2.png"/>
<textbuttonborder_topright_image value="borders/border_tr_2.png"/>
<textbuttonborder_right_image value="borders/border_r_2.png"/>
<textbuttonborder_left_image value="borders/border_l_2.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_2.png"/>
<textbuttonborder_bottom_image value="borders/border_b_2.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_2.png"/>
</state>
<state value="selected">
<textbuttoncolor value="cccccc"/>
<textbuttonborder_topleft_image value="borders/border_tl_3.png"/>
<textbuttonborder_top_image value="borders/border_t_3.png"/>
<textbuttonborder_topright_image value="borders/border_tr_3.png"/>
<textbuttonborder_right_image value="borders/border_r_3.png"/>
<textbuttonborder_left_image value="borders/border_l_3.png"/>
<textbuttonborder_bottomright_image value="borders/border_br_3.png"/>
<textbuttonborder_bottom_image value="borders/border_b_3.png"/>
<textbuttonborder_bottomleft_image value="borders/border_bl_3.png"/>
</state>
</cwc2>
<cwc2 type="SharedResource" name="WaitImage">
<waitimage language="en-CA" waitimage="images/spinner.gif"
waitimagewidth="216" waitimageheight="50"/>
<waitimage language="fr-CA" waitimage="images/spinner_f.gif"
waitimagewidth="264" waitimageheight="50"/>
</cwc2>
<cwc2 type="SelectLayers" />
<script language="JavaScript" type="text/javascript">
function myOnLoad()
{
CWC2OnLoadFunction()
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="sample.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="myOnLoad()">
<form method="post">
<input type="hidden" name="TopTabsLayerActive" value="[$TopTabsLayerActive$]">
<input type="hidden" name="SideTabsLayerActive" value="[$SideTabsLayerActive$]">
<div id="header" name="header">
<table border="0" cellspacing="4" cellpadding="0">
<tr>
[#nav_header.html#]
</tr>
</table>
</div>
<div id="TitleLayer" name="TitleLayer">
<!-- TITLE -->
<cwc2 type="Title" label="Peta Administratif Wilayah Indonesia"
labelclass="title">
</cwc2>
<!-- SESSIONEXPIRED -->
<cwc2 type="SessionExpired" text="Your session has expired.">
</cwc2>
</div>
<div id="TopTabsLayer" name="TopTabsLayer">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td><cwc2 type="Link" linktype="javascript"
jsfunction="ShowNavToolsLayer" styleresource="Tabs"
Image="icons/icon_tab_nav.png" ImageTip="Navigation Tools"
toolset="TopTabs" default="true">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<td><cwc2 type="Link" linktype="javascript"
jsfunction="ShowROIToolsLayer" styleresource="Tabs"
Image="icons/icon_tab_roi.png" ImageTip="Region of Interest Tools"
toolset="TopTabs">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
</tr>
</table>
</div>
<div id="NavToolsLayer" name="NavToolsLayer">
<table border="0" cellspacing="4" cellpadding="0">
<tr>
[#nav_basic.html#]
</tr>
</table>
</div>
<div id="ROIToolsLayer" name="ROIToolsLayer">
<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td><span class="label">These are part of the ROI widgets pack</span></td>
</tr>
</table>
</div>
<div id="SideTabsLayer" name="SideTabsLayer">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td><cwc2 type="Link" linktype="javascript"
jsfunction="ShowLegendLayer" styleresource="Tabs"
Image="icons/icon_tab_legend.png" ImageTip="Legend" toolset="SideTabs"
default="true">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<td><cwc2 type="Link" linktype="javascript"
jsfunction="ShowOtherToolsLayer" styleresource="Tabs"
Image="icons/icon_tab_tools.png" ImageTip="Other Tools"
toolset="SideTabs">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
</tr>
</table>
</div>
<div id="LegendLayer" name="LegendLayer">
<table cellspacing="0" cellpadding="2">
<cwc2 type="XMLThemeLegend" popupwidth="400" popupheight="400">
<selection name="SampleLegend" template="indonesia.html"
themefile="indo_themes.xml" contextfile="indonesia.map"
rendererfile="indonesia_renderer.html"/>
</cwc2>
<tr>
<td colspan="4"><cwc2 type="UpdateMap" styleresource="TextButtons"
visible="true" image="icons/icon_update.png" imagetip="update map"
label="Update">
<image state="normal"/>
<image state="selected"/>
<image state="hover"/>
</cwc2>
</table>
</div>
<div id="OtherToolsLayer" name="OtherToolsLayer">
<table width="100%" border="0" cellspacing="4" cellpadding="0">
[#tools_basic.html#]
[#tools_enhanced_themelegend.html#]
</table>
</div>
<div id="PanArrowsLayer" name="PanArrowsLayer">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0" bgcolor="f0f0f0" class="grey_border">
<tr valign="top">
<!-- COMPASSPOINT - NORTHWEST -->
<td align="left"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="northwest"
image="icons/icon_pan_nw.png" PanPercent="80" imagetip="Pan
NorthWest">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<!-- COMPASSPOINT - NORTH -->
<td align="center"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="north"
image="icons/icon_pan_n.png" PanPercent="80" imagetip="Pan North">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<!-- COMPASSPOINT - NORTHEAST -->
<td align="right"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="northeast"
image="icons/icon_pan_ne.png" PanPercent="80" imagetip="Pan
NorthEast">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
</tr>
<tr valign="middle">
<!-- COMPASSPOINT - WEST -->
<td align="left"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="west"
image="icons/icon_pan_w.png" PanPercent="80" imagetip="Pan West">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<td align="center"> </td>
<!-- COMPASSPOINT - EAST -->
<td align="right"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="east"
image="icons/icon_pan_e.png" PanPercent="80" imagetip="Pan East">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
</tr>
<tr valign="bottom">
<!-- COMPASSPOINT - SOUTHWEST -->
<td align="left"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="southwest"
image="icons/icon_pan_sw.png" PanPercent="80" imagetip="Pan
SouthWest">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<!-- COMPASSPOINT - SOUTH -->
<td align="center"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="south"
image="icons/icon_pan_s.png" PanPercent="80" imagetip="Pan South">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
<!-- COMPASSPOINT - SOUTHEAST -->
<td align="right"><cwc2 type="CompassPoint" Visible="true"
styleresource="PanArrows" Direction="southeast"
image="icons/icon_pan_se.png" PanPercent="80" imagetip="Pan
SouthEast">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2></td>
</tr>
</table>
</div>
<div id="MainMapLayer" name="MainMapLayer">
<!-- MAPDHTMLWIDGET -->
<cwc2 type="MapDHTML" visible="true" width="400" height="300"
allowresize="true" marqueecolor="FF3333" marqueewidth="2"
minscale="1"/>
</div>
<div id="ReferenceLayer" name="ReferenceLayer">
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<!-- SCALEBAR -->
<td colspan="3" align="center"><cwc2 type="Scalebar"
units="KILOMETERS" visible="true" width="250" height="3"></cwc2></td>
</tr>
<tr>
<!-- KEYMAP -->
<td rowspan="5"><cwc2 type="KeyMap"
image="../htdocs/images/keymap.png" width="100" height="75" color="-1
-1 -1" outlinecolor="255 0 0" minx="-2594561" miny=" -712631"
maxx="3467361" maxy="3840000" srs="epsg:42304"/></td>
<!-- PROJECTIONLABEL -->
<td colspan="2"><cwc2 type="ProjectionLabel" label="Projection:"
labelclass="label" widgetclass="inputBox"/></td>
</tr>
<tr>
<!-- MINX EXTENT-->
<td><cwc2 type="Extent" label="Left: " visible="true"
extent="minx" labelposition="8" labelvalign="middle"
labelclass="label" widgetclass="inputBox"/></td>
<!-- MAPUNITS -->
<td><cwc2 type="MapUnits" label="Map Units: "labelposition="8"
labelvalign="middle" labelclass="label" widgetclass="inputBox"/></td>
</tr>
<tr>
<!-- MAXX EXTENT -->
<td><cwc2 type="Extent" label="Right: " visible="true"
extent="maxx" labelposition="8" labelvalign="middle"
labelclass="label" widgetclass="inputBox"/></td>
<td><p class="label"><cwc2 type="RulerResult" visible="true"
label="Dist:" labelposition="8" labelvalign="middle"
labelclass="label" widgetclass="inputBox"/></p></td>
</tr>
<tr>
<!-- MINY EXTENT -->
<td><cwc2 type="Extent" label="Bottom: " visible="true"
extent="miny" labelposition="8" labelvalign="middle"
labelclass="label" widgetclass="inputBox"/></td>
<!-- CURSOR X POSITION -->
<td><cwc2 type="Cursorpos" axis="X" label="Mouse X: "
labelposition="8" labelvalign="middle" labelclass="label"
widgetclass="inputBox"></cwc2></td>
</tr>
<tr>
<!-- MAXY EXTENT -->
<td><cwc2 type="Extent" label="Top: " visible="true" extent="maxy"
labelposition="8" labelvalign="middle" labelclass="label"
widgetclass="inputBox"/></td>
<!-- CURSOR Y POSITION -->
<td><cwc2 type="Cursorpos" axis="Y" label="Mouse Y: "
labelposition="8" labelvalign="middle" labelclass="label"
widgetclass="inputBox"></cwc2></td>
</tr>
</table>
</div>
<!-- include the javascript code that manages the DHTML layers -->
<script language="JavaScript" src="sample.js" type="text/javascript"></script>
</form>
</body>
</html>
-----------------------------------------------------------------------------
Thank you.
Rgds,
pssdal
More information about the Chameleon
mailing list