...

View Full Version : draw layers depending on resolution??



usban
08-07-2002, 10:33 AM
Well i've drawn some layers in a webpage, the layers are hidden and appear depending on the value of a Select object, i've got the target of getting them appear or disappear depending on this value. The problem is that i'm working over a table with a determinate background color the fills a percentage of the page, so its size it is not the same for different resolutions.

When i adjust the layer for a specific resolution (Ex: 800x600) it is not centered for 1024x768, and the same happens with 800 when i adjust the layers for 1024.

I would like to know if there is a way to change the top, left property of the <div> tag in order to make them appear in one position if i use 800x600 or in another if i use 1024x768.

I don't know if it is using the position:[absolute/relative] property or doing any other thing. Thank You :(

Gordo
08-07-2002, 11:39 AM
I know some others here can just whip this off the top of their head, but I need some sample code with which to work. I'd give it a crack, but I need to see your source code. Have a link handy?

usban
08-07-2002, 11:56 AM
Sorry if it is a bit long



<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--

function muestra()
{
switch (form1.elige.value)
{
case "todos":
ltodos.style.visibility = "visible";
ladmin.style.visibility = "hidden";
lprofes.style.visibility = "hidden";
lalumnos.style.visibility = "hidden";
break;
case "admin":
ltodos.style.visibility = "hidden";
ladmin.style.visibility = "visible";
lprofes.style.visibility = "hidden";
lalumnos.style.visibility = "hidden";
break;
case "profes":
ltodos.style.visibility = "hidden";
ladmin.style.visibility = "hidden";
lprofes.style.visibility = "visible";
lalumnos.style.visibility = "hidden";
break;
case "alumnos":
ltodos.style.visibility = "hidden";
ladmin.style.visibility = "hidden";
lprofes.style.visibility = "hidden";
lalumnos.style.visibility = "visible";
break;
}
}
//-->
</script>
</head>

<body>

<form name="form1" method="post" action="">
<table width="85%" border="0" align="center">
<tr>
<td class="claro"> <div align="center">Dirigido a
<select name="elige" onChange="muestra()">
<option value="todos">Todos...</option>
<option value="admin">Administradores</option>
<option value="profes">Profesores</option>
<option value="alumnos">Alumnos</option>
<option value="pcurso">Profesores de un curso</option>
<option value="acurso">Alumnos de un curso</option>
</select>
</div></td>
</tr>
<tr>
<td class="claro"> <div id="ltodos" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: visible; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
<div align="center">
<p>&nbsp;</p>
<p>
<select name="select" size="10">
<option value="todos"> Todos los usarios del sistema</option>
<option value="admin"> Todos los administradores </option>
<option value="profes"> Todos los profesores </option>
<option value="alumnos"> Todos los alumnos </option>
</select>
</p>
</div>
</div>
<div id="ladmin" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
<div align="center">
<p>&nbsp;</p>
<p>
<select name="select" size="10" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</div>
</div>

<div id="lprofes" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
<div align="center">
<p>&nbsp;</p>
<p>
<select name="select" size="10" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</div>
</div>
<div id="lalumnos" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
<div align="center">
<p>&nbsp;</p>
<p>
<select name="select[]" size="10" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center">
<table width="75%" height="40" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td height="40" class="oscuro">
<div align="left"><font color="#FFFFFF" size="+1"><u>T&iacute;tulo
del mensaje </u></font></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">
<table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td class="claro">
<div align="center">
<input name="titulo" type="text" id="titulo" size="50" maxlength="255">
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">
<table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td height="40" class="oscuro">
<div align="left"><font color="#FFFFFF" size="+1"><u>Cuerpo del mensaje</u></font></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">
<table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td class="claro">
<div align="center"><br>
<textarea name="mensaje" cols="50" rows="15" id="mensaje"></textarea>
<br>
<br>
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
<div align="center">
<p><input type="submit" name="Submit" value=" Escribir Mensaje ">
</p></div>
</form>
</body>
</html>

:)

Gordo
08-08-2002, 01:12 AM
Well, this may be a crude way of doing it -- or not -- but I think it'll work.

See newmate's reply on THIS (http://codingforums.com/showthread.php?threadid=590&highlight=resolution+1024) thread.

I've attached a TXT file where I added the script code and changed some of the positioning values, etc. Play around with it and I think you'll get your desired result.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum