Como determinar el comportamiento de un Link
Ya que no encuentro nada y me esta costando.
Tengo una página web que es responsive, se adapta a las pantallas de los diferentes dispositivos y va bien. Aparte y que no esta incluido en mi web tengo un script en php para gestionar reservas online.
¿Qué quiero hacer? Introducir el script dentro de mi web como si hiciere parte de ella (pues el script visualmente es un calendario y ya esta, no tiene más). Lo he introducido en el cuerpo de uno de los documentos html mediante un iframe y va de lujo, no tiene problema al funcionar y visualmente nadie diría que son dos cosas diferentes.
¿Cuál es el problema? Que el script al no ser responsive no se adapta, entonces cuando abro el html desde un móvil la web se ve bien, pero el script se ve cortado por la mitad.
El script no le puedo hacer responsive a menos que me ponga a rediseñarlo y toda la historia que va a ser que no. Entonces tengo dos opciones, una es hacer el calendario enano para que se vea bien en el móvil, pero horrible en la web y no es lo que quiero.
O lo que pensé, es la manera en que al hacer click en el enlace que me muestra el html que contiene el script ( <a href="mi-html-con-script">reservas</a> ) mediante alguna función o cualquier cosa parecida, el navegador sea capaz de determinar:
Que si estamos en un pc, o tablet abra el link con el atributo _self y que si se abre desde un móvil o cualquier cosa que tenga una resolución parecida lo abra con el atributo _blank. No se si me explico correctamente.
También podría dejarlo todo con el atributo blank y me dejo de líos pero la cuestión era que se viese integrado en la web y no como si fuesen dos cosas diferentes. Cualquier aporte, opinión, solución alternativa o lo que sea me viene bien porque no se me ocurre nada.
2 respuestas
Personalmente te diría que eliminases todo lo que sean iframes, son malísimos para el seo y el posicionamiento.
Lo único que se me ocurre, que crees un div tal que así
<div id="contenedor">
<div id="calendario"></div>
</Div
Y que el div calendario lo ocultes con css y su propiedad display:none, y luego utilizando la propiedades onMouseOver o onclick hagas que la propiedad css pase a display:block.
Aunque yo te recomiendo que busques algún plugin jquery o tu mismo hagas un jquery con las propiedades .show() y .hide(), créeme no es complicado.
La otra solución pero ya seria bastante distinto a lo que tu tienes es que te hagas con una plantilla responsive y la vayas modificando con tu contenido.
Aunque te sigo aconsejando jquery.