HTML - Enlace Flotante

Pos: 143

Val: 9

Enlace Flotante

Publicado por José Luís (5 intervenciones) el 28/10/2017 17:41:11

Hola a todos.
Tengo el siguiente reto y necesito alguna sugerencia.
Gestiono un Iframe que tiene un menú de iconos que enlazan con webs externas.
Cuando pulso alguno de ellos, y me abre la web, necesito un punto flotante sobre la web que me permita regresar al menú de iconos comentado. Descartado el hacer un iframe para gestionar el iframe de iconos.
La aplicación funciona sobre móvil y, en Android no hay problema, pero con los iphone es tremendo el desastre.

Cualquier comentario es bienvenido.
Mi correo por es [email protected]

Un cordial saludo
José Luís García

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 5

Val: 277

Enlace Flotante

Publicado por Pedro (15 intervenciones) el 28/10/2017 22:47:54

A ver si te he entendido bien. Si no estoy equivocado lo que pides es un StickyLayer
¿Qué es un StickyLayer? Es por ejemplo un div que se posiciona en un lugar y aunque
hagas scroll está inmóvil.

Pues bien para lograr esto necesitas dos cosas un div

<div id="go-top" style="display: block;"><a href="a donde volver"><img src="smiley.gif" alt="Smiley face" height="42" width="42">/a></div>

Y necesitas crear un id go-top en un archivo css

#go-top {

    display: none;

    position: fixed;

    bottom: 15px;

    right: 15px;

    z-index: 9;

<!- Cualquier tag que implemente este id le indicamos que lo posicione el elemento a 15px | 15px respectivos de la parte de abajo a la derecha -->

No te olvides de linkear al css entre los tags head, espero haberte iluminado y espero que sea lo que buscas.
nQy8rY6

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 143

Val: 9

Enlace Flotante

Publicado por José Luís (5 intervenciones) el 29/10/2017 07:51:11

Lo probaré. Muchas gracias Pedro por la inmediatez en la respuesta.
Lo que busco es una solución que realmente no se si es viable.
Si entro en cualquier página, como por ejemplo he puesto adjuntada, desconozco si existe la posibilidad de hacer, como he puesto en el ejemplo, un punto flotante que me permita redireccionarme.
Punto-volver

Muchas gracias nuevamente por el aporte
Un saludo

Valora esta respuesta

Comentar

Pos: 3

Val: 886

Enlace Flotante

Publicado por Lopez (271 intervenciones) el 29/10/2017 02:40:08

Solo para complementar la buena respuesta de mi colega Pedro,
Te dejo a Portamento, un plugin basados en jquery,
que aporta otra forma de entregar el mismo resultado (Sin elementos fixed).
Demo : http://simianstudios.com/portamento/demos/no-limit.html
http://simianstudios.com/portamento/l.

Estos los puedes replicar sin necesidad de plugins,
pero tampoco es malo si es economico.

Saludos!

Valora esta respuesta

Comentar

Pos: 143

Val: 9

Enlace Flotante

Publicado por José Luís (5 intervenciones) el 29/10/2017 08:07:54

Gracias López. He puesto una explicación más detallada de la cuestión.

Pero admiro los aportes, que además no caen en saco roto.
Gracias de nuevo y un saludo

Valora esta respuesta

Comentar

Pos: 5

Val: 277

Enlace Flotante

Publicado por Pedro (15 intervenciones) el 29/10/2017 11:39:48

Excelente respuesta @Lopez he guardado todo lo necesario en mi biblioteca de source por tenerlo presente. Te he querido dar un like pero no sé porque motivo no me han verificado la cuenta.

Por otro lado @José Luís creo haber comprendido lo que exactamente quieres hacer:

<html>

<head>

<style type="text/css">

#imagen {

	position: absolute;

	top: 20px;

	left: 20px;

	z-index: 2;

	width: 708px;

	height: 25px;

#portacuadro {

	position:absolute;

	top: 20px;

	left: 20px;

	z-index: 1;

	width: 708px;

	height: 526px;

</style>

</head>

<body>

<div id="portacuadro">

	<iframe name="cuadro" height="100%" width="100%" scrolling="no" border="0" frameborder="0" src="fotos.htm"></iframe>

</div>

<div id="imagen">

	<img src="logotipo.jpg" width="708" height="25">

</div>

</body>

</html>

Si te fijas el iframe ocupa el 100% y el div con id="imagen" lo posiciona según su estilo ,con lo cual modificando el código puedes colocar un botón personalizado y hacer un history back para que vuelva a la página anterior.

nQy8rY6

créditos del código:ssclamp ...alud---...

Valora esta respuesta

Comentar

Pos: 143

Val: 9

Enlace Flotante

Publicado por José Luís (5 intervenciones) el 30/10/2017 09:14:32

Hoy mismo lo miro de poner en el código, Pedro. Hacia las 2 tengo que ponerme en ello y te digo algo.
Muchísimas gracias

Un cordial saludo
José Luís García

Valora esta respuesta

Comentar

Pos: 143

Val: 9

Enlace Flotante

Publicado por José Luís (5 intervenciones) el 16/11/2017 12:29:36

Hola de nuevo.
Después de varios dias de batalla hemos conseguido el objetivo. Como podeis ver en la imagen, hay un menú de opciones que cuando salimos de él, seguimos teniendo la posibilidad de regresar al menú principal, aunque sea una web externa de nuestro control.

Muchas gracias por los aportes.
Un cordial saludo
José Luís García

Valora esta respuesta

Comentar

Sistema de matricula escolar

Ventana modal con lista.