Buenas tengo un pequeño problema, tengo un formulario donde tengo una serie de campos, en uno de ellos tengo una imagen donde al pinchar el ella se abre un popup con un calendario justo debajo de la imagen, el problema me viene cuando le pongo debajo otro campo, sea un select o un campo input, que me abre la ventana popup en la esquina superior izquierda, no se a que puede ser.
El codigo java (el del calendario es)donde pone algo del posicionamiento es:
Código:
function getAnchorPosition(anchorname) {
// This function will return an Object with x and y properties
var useWindow=false;
var coordinates=new Object();
var x=0,y=0;
// Browser capability sniffing
var use_gebi=false, use_css=false, use_layers=false;
if (document.getElementById) { use_gebi=true; }
else if (document.all) { use_css=true; }
else if (document.layers) { use_layers=true; }
// Logic to find position
if (use_gebi && document.all) {
x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
}
else if (use_gebi) {
var o=document.getElementById(anchorname);
x=AnchorPosition_getPageOffsetLeft(o);
y=AnchorPosition_getPageOffsetTop(o);
}
else if (use_css) {
x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
}
else if (use_layers) {
var found=0;
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name==anchorname) { found=1; break; }
}
if (found==0) {
coordinates.x=0; coordinates.y=0; return coordinates;
}
x=document.anchors[i].x;
y=document.anchors[i].y;
}
else {
coordinates.x=0; coordinates.y=0; return coordinates;
}
coordinates.x=x;
coordinates.y=y;
return coordinates;
}
// getAnchorWindowPosition(anchorname)
// This function returns an object having .x and .y properties which are the coordinates
// of the named anchor, relative to the window
function getAnchorWindowPosition(anchorname) {
var coordinates=getAnchorPosition(anchorname);
var x=0;
var y=0;
if (document.getElementById) {
if (isNaN(window.screenX)) {
x=coordinates.x-document.body.scrollLeft+window.screenLeft;
y=coordinates.y-document.body.scrollTop+window.screenTop;
}
else {
x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
}
}
else if (document.all) {
x=coordinates.x-document.body.scrollLeft+window.screenLeft;
y=coordinates.y-document.body.scrollTop+window.screenTop;
}
else if (document.layers) {
x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
}
coordinates.x=x;
coordinates.y=y;
return coordinates;
}
// Functions for IE to get position of an object
function AnchorPosition_getPageOffsetLeft (el) {
var ol=el.offsetLeft;
while ((el=el.offsetParent) != null) { ol += el.offsetLeft; }
return ol;
}
function AnchorPosition_getWindowOffsetLeft (el) {
return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
}
function AnchorPosition_getPageOffsetTop (el) {
var ot=el.offsetTop;
while((el=el.offsetParent) != null) { ot += el.offsetTop; }
return ot;
}
function AnchorPosition_getWindowOffsetTop (el) {
return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
}
el codigo html donde llamo al calendario es:
Código:
<form name="FormListventas" method="post" action="/Rediseño/1.asp">
<label for="Data">Data Inicial:</label>
<input name="textdata1" id="textdata1" type="text">
<A HREF="#"
onClick="cal.select(document.forms['FormListventas'].textdata1,'anchor1','dd/MM/yyyy'); return false;"
NAME="anchor1" ID="anchor1"><img src="imagenes/icono_calendario_noticias.gif" border="0" alt="Seleccione data"></A>
<label for="Data">Data Final:</label>
<input name="textdata2" id="textdata2" type="text">
<A HREF="#"
onClick="cal.select(document.forms['FormListventas'].textdata2,'anchor1','dd/MM/yyyy'); return false;"
NAME="anchor1" ID="anchor1"><img src="imagenes/icono_calendario_noticias.gif" border="0" alt="Seleccione data"></A><br>
<label for="Confraria">Confraría:</label>
<select name="cboConf" class="Combo">
</select>
</form>
por si sirve de algo en el diseño uso css
un salduo