[SOLUCIONADO] e.pageX, e.pageY = desajuste en posición

[alberto510a]

Hola.

He creado un script de jQuery para que al clickar sobre un enlace genere un div justo en la posición del click más 15 px tanto en el eje x como en y.

Lo he probado en mi ordenador y funciona perfectamente pero el problema viene cuando lo subo a mi web, algún estilo css o algo le afecta y hace que salga más alejado de la cuenta y no consigo encontrar que es.

Este es mi script:

Código Javascript:

$(document).ready(function(){
    a = 0;
    $('#news').click(function(e){
        $('#news2').html('');
        $('#news2').animate({'width':'0px','height':'0px'},a,function(){
        var x = e.pageX + 15;
        var y = e.pageY + 15;
        $('#news2').css({'border-radius':'15px','background-color':'#C63','position':'absolute','top':y,'left':x});
        $('#news2').animate({'width':'210px','height':'140px'},600,function(){
        $('#news2').html('<ul><li><a target="_blank" href="http://www.guardian.co.uk/">TheGuardian</a></li><li><a target="_blank" href="http://www.express.co.uk/">Express</a></li><li><a target="_blank" href="http://www.nytimes.com/">The New Your Times</a></li><li><a target="_blank" href="http://www.nypost.com/">New York Post</a></li><li><a target="_blank" href="http://europe.wsj.com">The Wall Street Journal</a></li></ul>');
        a = 300;
        });
        });
        
    });
    $('#news2').mouseleave(function(){
        $('#news2').html('');
        $('#news2').animate({'width':'0px','height':'0px'},a);
    });
 
 
});
 

Y esta mi página:

http://coolenglish.tk/index.php?option=com_content&view=featured&Itemid= 104

Saludos y gracias por leerme.

[fhederico]

Hola,

Estuve revisando y si ves tu CSS, desde "#main {" (linea 305) hacia abajo, todos los que ocupen la propiedad "position: relative;", causan conflicto con el recuadro que quieres posicionar ocupando "position: absolute;"

En una prueba rapida, si elimino todos los que tenga "position: relative;", la imagen queda en su lugar.

De todas formas, corrigiendo eso, no seria mejor obtener una sola vez la posicion de la imagen y asi siempre mostraria el recuadro nuevo en una sola posicion? o es la idea que sea dinamica, es decir, si pincho en la letra E la muestra casi al lado, si pincho en la esquina inferio igualmente? (Esto es anexo)

Saludos

[alberto510a]

Si la idea es que sea dinámico voy a revisar el css y te comento

[alberto510a]

Estuve mirando y la cuestión es como hago para no tener quitarle a estos:

main
wrapper
comp_80
breadcrumbs

el position:relative y que el otro que yo quiero no le afecte, porque depende de esos 4.

[fhederico]

Hola,

Mi pregunta es... necesitas realmente que tengan una posicion relativa? porque finalmente esto no afecta en gran medida, es decir, mantienen su posicion original en el HTML. Creo, que deberias buscar otra forma de armar tu pagina, lamentablemente yo solo se un poco mas de lo basico en CSS. y personalmente no ocupo estos elementos a menos que sean realmente necesarios.

Y bueno, esto ya no es JQuery, si no que es CSS.

Saludos

[alberto510a]

En todos no pero en el breadcrumbs si porque lo subo 40px gracias a eso, he probado a subirlo con padding y con margin pero lo unico que hace es aumentar la altura de la página.

Necesito saber otra forma de subirlo o alguna forma de que no le afecte las position.

Saludos.

[fhederico]

Hola,

Dejando tu CSS como lo tenias originalmente, con los "relative", al elemento ID "news", agregale "position: absolute", y luego al elemento ID "news2", corrigele el "left" y el "top".

Con esto, al tener los dos una posicion "absoluta", se colocara el otro elemento sobre el "news"


http://vagabundia.blogspot.com/2011/...s-con-css.html


Nota: Recien se me ocurrio y busque info con eso :D

Saludos

[alberto510a]

Hola ya probé a combinar eso que dices y tampoco funciona si tan solo pudiera subir el div breadcrumbs ya le podría quitar el position:relative a todos : /

[fhederico]

Que raro, yo lo probe y funcionaba.

Probaste reemplazando el top y el position actual por margin-top: -40px

Saludos

[alberto510a]

Perfecto eso es lo que necesitaba, había probado margin-bottom, padding-bottom pero no se me ocurrió ponerlo en el top negativo así ya si puedo conseguirlo muchas gracias por tu ayuda!

Saludos y suerte.