como hacer para que un ancla no sea leida desde la parte mas superior

erfrancis · #1 (**permalink**) 08/01/2011, 11:38

Siempre que haces un ancla de algun elemente, cuando el navegador busca el elemento que has anclado tras pulsar en el enlace que lleva el <name="#">lo situa en la parte de mas arriba en la parte superior de la pagina que se muestra en la pantalla del pc, es decir hablariamos de un top de 0px;. Pues mi duda viene referente con eso, es decir si justo cuando busque el elementeo anclado lo puede situar mas abajo.

pues esa es la duda, si alguien sabría hacer algo para que cuando ancles un elemento y lo invoques (en mi caso es por javascript, no por un enlace común con el <name>) pues no situe el ancla que ha buscado en la parte superior de la pagina sino que pueda hacerlo en otra posición o con mover el scroll ademas de invocar el ancla para que la situe en otra parte de la pagina.

Sería algo como ancla+scroll aunque no se realizarlo.

Tengo este script:

Código Javascript:

Ver original<script type="text/javascript">
function buscar() {
    var tag = document.getElementById('buscar').value;
    document.location.href = '#'+tag
}
</script>

Como le añadiríais a ese script además un movimiento del scroll???

Con scrollTop, offsetTop, no se alguna ayuda por favor...

_cronos2 · #2 (**permalink**) 08/01/2011, 13:28

Si he entendido bien, ese script no te funciona, cambia href por hash. Si no es ese tu problema tendrás que volver a explicármelo xD

erfrancis · #3 (**permalink**) 08/01/2011, 14:02

No si el script me funciona fenomenal, a lo que voy es a que cuando mediante con ese script me encuentra cualquier elemento que tengo anclado en mi página, el navegador me lo situa en la parte superior y lo que sucede en que en esa parte tengo un cabecero puesto con fixed, el problema esta que este cabecero me tapa el elemento anclado, entonces de ahí viene mi problema, hacer algo para que cuando busque el ancla lo situe algo mas abajo del cabecero moviendo el scroll por ejemplo y añadiendoselo a ese script. ¿me entendiste?? sino avisa y te explico mejor.

El problema es ese, que busca bien las anclas pero las situa en top 0 y claro el cabecero tapa ese elemento anclado (en este caso una imagen) y no se ve en la pantalla. gracias de antemano.

_cronos2 · #4 (**permalink**) 08/01/2011, 14:14

Vale, ya te entendí. Tienes scrollBy() para mover la barra, sólo te queda saber cómo averiguar dónde está el scroll.
Saludos (:

erfrancis · #5 (**permalink**) 08/01/2011, 14:20

jej ahora el que no te entendi fui yo... XD a lo que te refieres de como averigurar donde esta el scroll??? no llego a entender del todo eso..

El scrollBy() como se usa? poniendo scrollBy( 0,100)??? o como?? y como ponerlo en ese script dentro de la variable "tag" para que lo ejecute tras buscar el ancla????

saludos ;)

IsaBelM · #6 (**permalink**) 08/01/2011, 14:30

ya te lo expliqué en el foro de css o de html, ahora no recuerdo. la solución es usar saltos de líneas o colocar el ancla unos pixles ante. esta cantidad de pixles son el height del header

erfrancis · #7 (**permalink**) 08/01/2011, 14:41

He usado css, de todas las maneras posibles, incluso he metido todas las anclas dentro de otro div y a ese le he añadido los pixeles del header, y nada de nada, cuando el script busca el ancla determinada la posiciona con top 0, asi que con css ya he probado todas las cosas y no funciona nada, por lo tanto el problema debe estar en el script aunque bueno si estas tan seguro de que funciona como decis, explicamelo y pruebo porque he intentado hacer de todo,te lo agradecería muchisimo.
Los navegadores cuando encuentran un ancla la ponen siempre en la parte mas superior del documento o eso tengo entendido.

Cronos o colaborador, como podría integrar el scrollBy en ese script, algo así;

Código Javascript:

Ver original<script type="text/javascript">
function buscar() {
    var tag = document.getElementById('buscar').value.scrollBy(0,0);
    document.location.href = '#'+tag
}
</script>

Algo así??? o como???

Saludos.. ;)

_cronos2 · #8 (**permalink**) 08/01/2011, 14:55

scrollBy() te lleva a una parte determinada de la página. Osea, scrollBy(40,75) te lleva 40px a la derecha y 75px abajo las barras de scroll. Por tanto, tienes que averiguar en qué punto está el scroll vertical, para ponerte un poco por encima, osea scrollBy(0, x-10) donde x es el scroll actual.
Saludos (:

erfrancis · #9 (**permalink**) 08/01/2011, 14:59

perfecto cronos ya iremos probando a ver si funciona el buscar el punto, pero lo más importante es que no se como integrar ese scrollBy() a mi script para que lo ejecute despues de buscar el ancla. Como te he puesto antes estaría bien? o como lo integrarías dentro de la variable "tag" para que busque el ancla+posicion de scroll????

saludos ;)

_cronos2 · #10 (**permalink**) 08/01/2011, 15:18

No, scrollBy() es un método de window. Sería así:

Código Javascript:

Ver originalvar algo = ...;
location.href = ...;
scrollBy(...);

Saludos (:

IsaBelM · #11 (**permalink**) 08/01/2011, 15:35

si te obcecas en que sea con javascript, usa scrollTo y la propiedad pageYOffset o scrollTop (ie), pero no comprendo el problema en colocar el ancla un poco antes. aparte de que si el usuario tiene desactivado js, todo esto no vale para nada

erfrancis · #12 (**permalink**) 08/01/2011, 15:35

cronos asi de esa forma el problema es que no situa el ancla en sí, sino que situa el documento entero, es decir, lo he probado pero así se anula la función de buscar el ancla y solo funciona el scrollby y lo que interesa es que busque el ancla y seguidamente a ese ancla (no a la pagina entera) le haga un scroll por eso te decía de hacer una variable que primero busque el ancla y luego le de un scroll vertical, me entendiste? si las pones las dos independientes primero busca el ancla, y luego mueve el scroll pero de la pagina entera por lo tanto ya se pierde de vista el ancla que ha buscado.

debería ser algo así como poner los dos sucesos para que los ejecute uno detrás de otro, sabes???

saludos ;)

IsaBelM · #13 (**permalink**) 08/01/2011, 15:40

como hemos publicado a la vez, quizás no lo has visto http://www.forosdelweb.com/f13/como-...7/#post3698744

erfrancis · #14 (**permalink**) 08/01/2011, 15:40

isabelM el problema está en que hago como me dices pero no se si entiendo realmente lo que me llegas a decir o tu a mi. imagina que el header tiene 50px de height, pues por ejemplo tengo un ancla que esta situada en 2000px de top, el problema viene cuando la busco con javascript que me la situa en vez de a 50px de altura en el 0px de altura me entendiste? y asi con todas las demas anclas que tengo, incluso tengo una en el pixel 51 y al invocarla con el script tambien me la situa en el 0px. probe en meterlas todas en un div grande que tuviera 51 de top, pero aun asi al invocar cualquier ancla (tenga la posicion que tenga) siempre me la coloca con top 0px, sabes que te digo???

saludos ;)

IsaBelM · #15 (**permalink**) 08/01/2011, 15:50

a ver, prueba esto

Cita:

<html>
<head>
<script type="text/javascript">
function buscar() {
var obj = window.location;

var tag = document.getElementById('buscar').value;
document.location.href = obj + '#' + tag;

window.scrollTo(0, parseInt(window.pageYOffset-20));

}
</script>
</head>
<body>
<input type="text" value="a1" id="buscar" onclick="buscar();" />

 
 
 
 
<a name="a1"></a>
asffsd
 
 
 
 
 
</body>
</html>

erfrancis · #16 (**permalink**) 08/01/2011, 16:17

isabelM tienes toda la razón del mundo me encantaría no tener que usar javascript, pero tengo muchas anclas las cuales son fotos ancladas y claro imagina que para buscar estas anclas hubiera que hacer 200 enlaces para 200 fotos diferentes. De ahí que use javascript como una especie de buscador de anclas y cuando pones en la caja de busqueda por ejemplo foto100 pues te lleva a la foto 100 y así con todas. Digamos que ese buscador genera el enlace al ancla en ese momento determinado.
No sabía como desarrollarlo de otra forma pero al final así quedo bien.

He probado lo de los saltos de ancla y no funciona.
con el script que me has pasado,luego le he quitado la variable obj porque así si funcionaba pero solo podías buscar un ancla luego ya no funcionaba el buscador, se quedaba pillado, entonces lo que he hecho para que vaya correcto es esto:

Código Javascript:

Ver original<script type="text/javascript">
function buscar() {
    var tag = document.getElementById('buscar').value.scrollBy(0,0);
    document.location.href = '#'+tag
    window.scrollTo(100, parseInt(window.pageYOffset-99));
}
</script>

Así se consigue resolver el problema y tras buscar el ancla me mueve a 99 px el scroll vertical así que perfecto. Pero el problema viene ahora a que el efecto va bien con mozilla y chrome y demás, pero en donde no funciona es en Internet Explorer, cual es la sintaxis para que Explorer lo haga bien tambien????

saludos ;)

PD: también me encantaría prescindir de javascript pero no se como hacerlo de otro modo...

PD:¿sabrías como hacer lo mismo para las anclas con scroll horizontal para que me las fije también con un left determinado????

IsaBelM · #17 (**permalink**) 08/01/2011, 17:15

aquí sobra el método scrollBy()

Cita:

var tag = document.getElementById('buscar').value.scrollBy(0 ,0);

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
function buscar() {
var tag = document.getElementById('buscar').value;
document.location.href = '#' + tag;

if (window.pageYOffset === undefined) {
var scrollLeft = document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop;
}else {
var scrollLeft = window.pageXOffset;
var scrollTop = window.pageYOffset;
}

window.scrollTo(0, parseInt(scrollTop-20));

}
</script>
</head>
<body>
<input type="text" value="a1" id="buscar" onclick="buscar();" />

 
 
 
 
<a name="a1"></a>
asffsd
 
 
 
 
 
</body>
</html>

y si que puedes hacerlo sin javascript. te explico un poco que tengo prisa, la idea es crear un vinculo y una capa oculta con todos los vínculos. el vinculo muestra la capa con todos vínculos. para crear esos vínculos, si realmente el orden es numérico. solo has de usar un ciclo for del lado del servidor

erfrancis · #18 (**permalink**) 08/01/2011, 17:48

Muchas gracias isabelM, ya también rula en Explorer, si la forma con css que me comentas la pense, el problema va a ser que tengo muchas anclas y sería hacer muchísimo trabajo, de todas maneras tengo más scripts de todas formas sería lo mismo.
Por cierto lo que no situa es el scroll horizontal, he visto que has puesto variables para el scroll left pero no la situa en un left determinado, por todo lo demas quedo muy bien.

Ah por cierto sabrías poner un mensajito que diga buscando antes de encontrar el ancla durante unos dos segundos y luego ya que salga el ancla????
te lo comento para que no sea un salto de ancla tan brusco..

thanks... ;)

erfrancis · #19 (**permalink**) 09/01/2011, 10:26

isabelM el scroll horizontal no rula, el left no va..

otra cosilla, sabrias como añadir un mensaje en ese script que fuese de alerta o algo que salga un cargando justo antes de encontrar el ancla? es para que el salto de ancla no sea tan brusco...

gracias ;)

IsaBelM · #20 (**permalink**) 09/01/2011, 14:35

no seas tan impaciente. hay vida aparte de esto.

el scroll horizontal no funciona si de entrada no hay scroll horizontal.
con respecto al aviso, se me ocurre que dentro del header ponga un div, p o span con la propiedad display:none. por otro lado, para que la redirección se produzca a los x segundos, en vez de invocar a buscar(), invocas a otra función, el proceso de esta otra función será; mostrar el mensaje, esto lo haces con style.display='block', y invocar a la función que ya tienes, bucar(). esta invocación la haces usando un temporizador, algo como esto setTimeout(function() {buscar();}, 2000);

erfrancis · #21 (**permalink**) 09/01/2011, 16:33

Perdon isabelM, volvi a poner la pregunta porque la primera vez que te lo pregunte no me salia en el foro, y luego la volvi a hacer y ya salio dos veces, perdona por eso, entiendo que hay que tener paciencia ;)

Pues no te entendi con lo de que no hay scroll horizontal, yo si le he puesto a la web un scroll horizontal, pero no se mueve con el script.

Código Javascript:

Ver originalwindow.scrollTo(0, parseInt(scrollTop-99));

Si en el 0 le pongo un numero, por ejemplo 50 si que se mueve el scroll horizontal 50px pero sin situar el ancla, es decir, es como si hicieras un scrollBy tal cual, me entiendes? el parse scrolltop-99 si me posiciona 99px el scroll despues de encontrar el ancla, por lo tanto con el scroll vertical funciona a la perfección pero con el horizontal no. Probe a ponerle (parseInt(scrollLeft-50),parseInt(scrollTop-99)); así no funciona nada.

¿Sabrías ponerlo también para que el horizontal se moviera tras buscar el ancla?

Con respecto a lo del mensaje, sinceramente no soy ningún experto en js, no podrías echarme un cable escribiendolo mas o menos como quedaría??

muchas gracias....!!! ;)

IsaBelM · #22 (**permalink**) 09/01/2011, 16:50

no hace falta que usar la variable scrollLeft y mucho menos si vas a restarle. si levantas la variable verás que su valor es 0 y si encima le restas, pues .... escribe un valor absoluto (50)
todo el script

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
function buscar(ancla) {
document.getElementById('cargando').style.display = 'none';
var tag = ancla.buscaancla.value;
document.location.href = '#' + tag;

if (window.pageYOffset === undefined) {
var scrollTop = document.documentElement.scrollTop;
}else {
var scrollTop = window.pageYOffset;
}

window.scrollTo(50, parseInt(scrollTop-50));

}

function fnc(ancla) {
document.getElementById('cargando').style.display = 'block';
var tmo = setTimeout(function(){buscar(ancla);}, 2000);
}
</script>
<style type="text/css">
#header {
position:fixed;
}

#cont {
border: 1px red solid;
width: 2000px;
}

#cargando{
display: none;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div id="header">
<form name="anclaje">
<input type="text" value="a1" name="buscaancla" />
<input type="button" value="buscar" onclick="fnc(this.form);" />
cargando..
</form>
</div>
<div id="cont">
 
 
 
 
<a name="a1"></a>
ancla1
 
 
 
 
 
<a name="a2"></a>
ancla2
 
 
 
 
 
</div>
</body>
</html>

erfrancis · #23 (**permalink**) 09/01/2011, 17:28

isabelM aunque le ponga el valor absoluto de 50 no funciona, yo en realidad quiero que el scroll horizontal se quedecon unos 5px de left, pero si en el 0 le pongo 5px se mueve siempre 5px left, pero sin situar el ancla, es decir, si por ejemplo tengo un ancla con un left de 500px, cuando busca este ancla el top si lo situa justo despues de la cabecera, pero el left lo mueve 5 px en la pagina entera no 5 px en el ancla que busca como si ocurre con el top que lo hace bien, quiero que el left haga justo lo que hace el top pero en moviendolo 5px de left, si lo ponemos asi:

window.scrollTo(5, parseInt(scrollTop-99));

De esta forma solo me mueve 5 px el horizontal pero de la pagina entera no del ancla que encuentra, sabes? no se si me he explicado muy bien....
la cosa es hacer justo lo mismo que has hecho con el scrollTop, que si un ancla tiene un top de 2000 el scroll no se mueve 99px y ahí se queda (como pasa con el 5 absoluto), sino que primero busca el ancla y luego la situa a 99px del header, pues hacer justo lo mismo pero también con el scroll horizontal.... para que la cuadre bien tanto vertical como horizontalmente. Te paso el script a ver si lo puedes modificar para que haga eso:

Código Javascript:

Ver original<script type="text/javascript">
function busqueda() {
var tag = document.getElementById('serial').value;
document.location.href = '#' + tag;
 
if (window.pageYOffset === undefined) {
var scrollLeft = document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop;
}else {
var scrollLeft = window.pageXOffset;
var scrollTop = window.pageYOffset;
}
 
window.scrollTo(0, parseInt(scrollTop-99));
 
}
</script>

Por otro lado el script que me has pasado con lo del mensaje cargando es modificado con respecto al otro verdad???

lo he probado y no me va pero voy a seguir probando y te comento... ;)

IsaBelM · #24 (**permalink**) 10/01/2011, 06:57

el código anterior funciona en ie8, ff, chrome, opera y safari, acabo de probarlo.
bien, como el left no quieres que sea constante entonces hay modificar parte del código

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
function posicionabsoluta(element) {
if (typeof element == "string")
element = document.getElementById(element)

if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}

function buscar(ancla) {
document.getElementById('cargando').style.display = 'none';
var tag = ancla.buscaancla.value;
var elemento = document.getElementById(tag);
var pos = posicionabsoluta(elemento)
document.location.href = '#' + tag;
window.scrollTo(parseInt(pos.left-50), parseInt(pos.top-50));
}

function fnc(ancla) {
document.getElementById('cargando').style.display = 'block';
var tmo = setTimeout(function(){buscar(ancla);}, 2000);
}
</script>
<style type="text/css">
#header {
position:fixed;
}

#cont {
border: 1px red solid;
width: 2000px;
}

#cargando{
display: none;
background-color: yellow;
float: left;
}

#a1, #a2 {
border: 1px blue solid;
}

#a1 {
width:200px;
}

#a2 {
width:700px;
}
</style>
</head>
<body>
<div id="header">
<form name="anclaje">
<input type="text" value="a1" name="buscaancla" />
<input type="button" value="buscar" onclick="fnc(this.form);" />
cargando..
</form>
</div>
<div id="cont">
 
 
 
 
<a name="a1"></a>
<div align="center">
<div id="a1">
ancla1
</div>
</div>
 
 
 
 
 
<a name="a2"></a>
<div align="center">
<div id="a2">
ancla2
</div>
</div>
 
 
 
 
 
</div>
</body>
</html>

si quitas las partes que te he marcado en rojo, funciona exactamente igual, es decir quitarle las anclas

erfrancis · #25 (**permalink**) 10/01/2011, 18:48

isabelM muchas gracias por currartelo echandome una mano.
Mira lo que me has pasado lo estoy probando en mi buscador con tu script y es que te cuento, yo tengo el buscador para que busque tanto si le das al boton de buscar como si le das al intro tras poner el contenido a buscar en la caja de texto del buscador. (en el script que me pasas rula solo si le das al boton).

Aparte y a lo que voy tambien es que no me gustaría usar saltos y según lo que me pasaste y como lo he montado se me ha quedado bien sin usarlos, pero sigo teniendo los prolemas del scrollLeft y otro que se me ha añadido con i explorer que espero me puedas resolver que viendo lo visto para ti sera una tontería.
Mejor te voy a pasar el script que yo estoy usando tal cual, y el buscador y sobre el, hacemos las modificaciones precisas. sobre este script me siguen faltando:

1.El aplicar el left al scroll horizontal al igual que se hace con el parseInt(scrollTop-99) para el scroll vertical.

2.El mensaje de espera que sale antes de que encuentre el ancla conseguí ponerlo mezclando tu script con el primero que te pase (es el que te voy a poner ahora para que le eches el vistazo), total que consigo ponerlo y me funciona perfecto pulsando el enter y el boton de busqueda tanto en chrome, como en mozilla, pero en Internet Explorer (como siempre) solo me funciona si le doy al boton de busqueda, pero si pulso intro aparece el mensaje de buscando (en del 2000 de 2 seg) pero no busca el ancla, ahí se queda (cosa que no ocurre con los otros navegadores) Además abajo a la izquierda en explorer cuando invocas estos script sale el mensaje de error en la pagina (antes no salia, por lo que debera haber algo del script que explorer no reconozca o este mal).

Entonces en base al script que te voy a pasar con su buscador (el que estoy usando), espero que me puedas modificar este script para que quede solucionado por un lado el mover el scroll left al igual que se hace con el scrollTop y que funcione tambien lo del mensaje+ancla en explorer tras pulsar el boton intro.

Es solo lo que me queda para que rule perfecto y te lo agradezca infinitamente, se que a ti te costara muy poco dejarlo bien, pero como estoy iniciandome con el js ahora a mi me cuesta bastante sacar cualquier cosa. gracias espero tu respuesta ansioso.. ;)

Código Javascript:

Ver original<script type="text/javascript">
function finde(foto) {
document.getElementById('cargando').style.display = 'none';
var tag = foto.buscafoto.value;
document.location.href = '#' + tag;
 
if (window.pageYOffset === undefined) {
var scrollLeft = document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop;
}else {
var scrollLeft = window.pageXOffset;
var scrollTop = window.pageYOffset;
}
 
window.scrollTo(0, parseInt(scrollTop-99)); 
 
}
 
function fnc(foto) {
document.getElementById('cargando').style.display = 'block';
var tmo = setTimeout(function(){finde(foto);}, 2000);
}
 
</script>

aqui te paso el codigo del buscador (sin su css):

Código HTML:

Ver original<div id='buscador'>
<form onsubmit='fnc(this.form); return false'>
<input class='searchtext' name='buscafoto' onblur='if(this.value==&quot;&quot;)this.value=&quot;busqueda!&quot;;else;this.value=this.value' onfocus='if(this.value==&quot;busqueda!&quot;)this.value=&quot;&quot;;else;this.value=this.value' type='text' value='busqueda!'/>
<input class='searchsubmit' type='image' src='imagenes/findbutton.gif' onclick='fnc(this.form)'/>
<div id="cargando"><img src="imagenes/loader.gif" /> <strong>buscando...</strong></div>
</form>
</div>

Prueba los códigos y ya ves como rula..

Muchas gracias de antemano y espero que con esto te sirva para dejarlo perfect ;)

PD:por cierto he usado tu codigo el ultimo que me has pasado pero no me funciona si no uso obligatoriamente los saltos de pagina y nisiquiera aunque los use, no se a que es debido, prefiero por eso si lo puedes hacer con el codigo final que estoy usando (sino hubiera mas remedio pues se cambiaria pero si me puedes adaptar el codigo que te acabo de pasar con los 2 problemas resueltos seria lo mejor porque evitamos llenar el codigo de miles de )

saludos espero tu solucion. gracias.

erfrancis · #26 (**permalink**) 12/01/2011, 06:38

por cierto isabelM se me olvido decirte que este ultimo codigo que me has pasado funciona bien con los y con el align center pero en el momento que a un ancla le defines una posicion en la pagina y le pones absolute a esa capa para situarla ya no funciona.

Por eso te comento que lo mejor para que queda al 100% es adaptar al script que te he pasado el movimiento del left y que cargue tambien el script al darle al boton enter.

;)

IsaBelM · #27 (**permalink**) 12/01/2011, 07:24

a ver no voy a adaptar nada. tanto el primero como el segundo código funciona. con el segundo hay tanto scroll top como left. los saltos de líneas los he usado para crear scroll, tú no has de usarlo, o sí, depende de como tenga estructurada la página.
y ahora esto te toca a ti. para que no se sumite el formulario al presionar enter. lee sobre el objeto event, sacas el valor ascii de la teclas pulsadas y haces una condicional, comparando el valor ascii de la tecla pulsada con el valor 13 que el valor de la tecla enter. si se cumple esa condición invocas la función y devuelves false

erfrancis · #28 (**permalink**) 12/01/2011, 10:50

isabelM si puede ser que el codigo que me pasaste funcione, yo te dije que no funciona porque no me fije creo en el error. mira el codigo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function posicionabsoluta(element) {
if (typeof element == "string")
element = document.getElementById(element)
 
if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}
 
 
function buscar(ancla) {
document.getElementById('cargando').style.display = 'none';
var tag = ancla.buscaancla.value;
var elemento = document.getElementById(tag);
var pos = posicionabsoluta(elemento)
document.location.href = '#' + tag;
window.scrollTo(parseInt(pos.left-10), parseInt(pos.top-80));
}
 
 
function fnc(ancla) {
document.getElementById('cargando').style.display = 'block';
var tmo = setTimeout(function(){buscar(ancla);}, 2000);
}
</script>
<style type="text/css"> 
#header {
position:fixed;
}
 
#cont {
position:absolute;
background:#FFCCFF;
width: 50000px;
height: 50000px;
left:1px;
top: 100px;
}
 
#cargando{
display: none;
background-color: yellow;
float: left;
}
 
 
#1 {
position:absolute;
width:100px;
height:100px; 
top: 2000px;
left: 200px;
}
 
#a2 {
width:700px; 
}
</style> 
</head>
<body>
<div id="header">
<form name="anclaje">
<input type="text" value="a1" name="buscaancla" />
<input type="button" value="buscar" onclick="fnc(this.form);" />
<span id="cargando">cargando..</span>
</form>
</div>
 
<div id="cont">
<a name="1"></a>
<div id="1">
ancla
</div>
 
</div>
</body>
</html>

Pruebalo ya veras como no funciona.
A lo que voy y por lo que creo que no funciona es porque en este caso, las anclas leen ya directamente el id del div, y ese es el problema, que para mi pagina lo que se va a poner en el buscador es un numero tal caul, de ahí a lo necesario de usar la etiqueta name porque ahí si va un numero tal cual, y luego que el div que no lo leyera (con el script que te pase si que el lee el name por un lado, y el div por otro, pero en este que me has pasado no lo lee el name por eso te dije que no funcionaba, pero si que funciona en realidad, solo que usaba name y no el id del div para el ancla),pense en probar lo siguiente pero el problema esta aqui en que si al id del div le pongo de nombre un numero solo pues el css de ese div ya no lo reconoce, si a un div id le pongo el 1, ya no reconoce el css (todos los id tienen que empezar por un caracter no?), para eso tendria q poner "a1" como por ejemplo pones tu. El caso es ese,
¿como hago para que lea el name solo y el div pueda tener un nombre como foto1 con el codigo que tu me has pasado como me hace a mi con el mio?

Prueba este codigo que te acabo de pasar y veras como no funciona y ya me dices, por eso era lo de modificar el script que te pase. gracias ;)

IsaBelM · #29 (**permalink**) 12/01/2011, 13:33

es tan sencillo como esto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
function posicionabsoluta(element) {
if (typeof element == "string")
element = document.getElementById(element)

if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}

function buscar(ancla) {
document.getElementById('cargando').style.display = 'none';
var tag = ancla.buscaancla.value;
var elemento = document.getElementById('foto'+tag);
var pos = posicionabsoluta(elemento)
document.location.href = '#foto' + tag;
window.scrollTo(parseInt(pos.left-50), parseInt(pos.top-50));
}

function fnc(ancla) {
document.getElementById('cargando').style.display = 'block';
var tmo = setTimeout(function(){buscar(ancla);}, 2000);
}
</script>
<style type="text/css">
#header {
position:fixed;
}

#cont {
border: 1px red solid;
width: 2000px;
}

#cargando{
display: none;
background-color: yellow;
float: left;
}

.foto {
border: 1px blue solid;
width:200px;
}

</style>
</head>
<body>
<div id="header">
<form name="anclaje">
<input type="text" value="1" name="buscaancla" />
<input type="button" value="buscar" onclick="fnc(this.form);" />
cargando..
</form>
</div>
<div id="cont">
 
 
 
 
<div align="center">
<div id="foto1" class="foto">
ancla1
</div>
</div>
 
 
 
 
 
<div align="center">
<div id="foto2" class="foto">
ancla2
</div>
</div>
 
 
 
 
 
</div>
</body>
</html>

erfrancis · #30 (**permalink**) 13/01/2011, 12:35

isabelM te lo agradezco todo muchisimo de verdad, pero sigo sin resolverlo... jejej

te comento he probado tu codigo y bien perfecto, pero claro no me funcionaba y ya he visto que es lo que cambiaba y el porque no rulaba. Bueno a lo que voy, la cosa es que yo en el buscador en el <input type= button> de buscar yo he puesto una imagen y al cambiar eso ya al pulsar sobre la imagen que actua de button ya no funciona.

<form name="anclaje">
<input type="text" value="1" name="buscaancla" />
<input type="button" value="buscar" onclick="fnc(this.form);" />
cargando..
</form>

<form name="anclaje">
<input class="clase" type="text" value="1" name="buscaancla" />
<input class="clase" type="imagen" src="www." onclick="fnc(this.form);" />
cargando..
</form>

¿como se puede resolver esto para que use la imagen de button? yo siempre la he usado otras veces y no me ha dado ningun problema, ahora porque sucede????

Bueno eso por un lado y por otro y perdona mi ignorancia en .js (estoy aprendiendo) pero no llego a entender bien lo que me comentaste para el tema de que se invoque el script tambien con el enter.

"para que no se sumite el formulario al presionar enter. lee sobre el objeto event, sacas el valor ascii de la teclas pulsadas y haces una condicional, comparando el valor ascii de la tecla pulsada con el valor 13 que el valor de la tecla enter. si se cumple esa condición invocas la función y devuelves false"

Intenta hacermelo más facil por favor... saludos y mil gracias espero tu solucion ;)