Cambiar url del botón para resolución de dispositivos móviles

javimarcal · #1 (**permalink**) 05/06/2014, 05:10

Hola a todos, disculpad mi poco o casi nulo conocimiento de Javascript para solucionar un problema que por mucho que investigue por Internet, no doy con la solución.

El caso es: En la web, cuando la resolución es para móviles no se visualiza el video y quiero cambiar la url de un botón para que lleve a un enlace de Youtube. Porque en la plantilla de WordPress sobre el que trabajo, el vídeo que hay embebido sólo se visualiza en resoluciones mayores.

Quisiera hacer algo así:

if (pantalla == 640x480) { boton: href="#" } ***Perdonen que invente el código y esté mal escrito pero es para que me entiendan***

Es posible? Muchísimas gracias de antemano. Saludos!

quimfv · #2 (**permalink**) 05/06/2014, 05:28

Código Javascript:

Ver originalif (screen.width+"x"+screen.height=="640x480"){
    document.getElementById("id_del_boton").href="#";
}

Si?

javimarcal · #3 (**permalink**) 09/06/2014, 05:38

Hola de nuevo, antes que nada agradecerte la respuesta anterior pero por no se qué motivo no ejecuta la funcion. Te muestro el código para que veas en qué está fallando:

El código HTML

Código HTML:

Ver original<p style="text-align: center;">
<input type="button" id="video" onclick="verVideo()" style="background: url('#/video_button.png') no-repeat; border: none; width: 100px; height: 100px;" title="video" name="video" type="button" value="" />
</p>

El código JavaScript que lo tengo en la etiqueta <head> de un documento PHP

Código Javascript:

Ver original<script language="javascript">
function verVideo(){
    document.getElementById("video").href="http://palaciodearozteguia.com/video-movil/";
} else {
    document.getElementById("video").href="http://palaciodearozteguia.com/video-2/";
}}
</script>

Gracias de antemano y un saludo

quimfv · #4 (**permalink**) 09/06/2014, 06:03

Código Javascript:

Ver original<script language="javascript">
document.getElementById("id_del_boton").href="http://palaciodearozteguia.com/video-movil/";
if (screen.width+"x"+screen.height=="640x480"){//<-- Ajusta las medidas.
    document.getElementById("id_del_boton").href="http://palaciodearozteguia.com/video-2/";
}
</script>

pega estes script DESPUES del botón, tal qual sin función, ajusta el condicional a la medidas que quieras detectar, al cargarse la pagina va a detectar las medidas de la pantalla y pondrá el link adecuado.

Tu función

Código Javascript:

Ver original<script language="javascript">
function verVideo(){
         document.getElementById("video").href="http://palaciodearozteguia.com/video-movil/";
    } else {
        document.getElementById("video").href="http://palaciodearozteguia.com/video-2/";
   }
}
</script>

no tiene ningún sentido, le falta el condicional.

javimarcal · #5 (**permalink**) 09/06/2014, 06:23

Hola de nuevo, de verdad muchas gracias pero sigo igual. He hecho lo siguiente:

Código HTML:

Ver original<p style="text-align: center;">
<input type="button" id="video" style="background: url('#/video_button.png') no-repeat; border: none; width: 100px; height: 100px;" title="video" name="video" value="" />
</p>
 
<script language="javascript">
document.getElementById("video").href="http://palaciodearozteguia.com/video-movil/";
if (screen.width+"x"+screen.height=="640x480"){//<-- Ajusta las medidas.
    document.getElementById("video").href="http://palaciodearozteguia.com/video-2/";
}
</script>

La duda que tengo es si no lleva ningún evento onclick? El Id del botón es "video"? Además, este HTML está dentro de una página PHP de WordPress, funciona igual?

Muchas gracias ufff!!! Jeje!

Italico76 · #6 (**permalink**) 09/06/2014, 07:54

El evento es onload pero no lo necesitas si colocas ese script AL FINAL del archivo .php justo antes de </body>

Código Javascript:

Ver original<!-- al final del archivo -->
<script language="javascript">
    document.getElementById("video").href="http://palaciodearozteguia.com/video-movil/";
    if (screen.width+"x"+screen.height=="640x480"){//<-- Ajusta las medidas.
    document.getElementById("video").href="http://palaciodearozteguia.com/video-2/";
}
</script>
 
</body>
</html>

javimarcal · #7 (**permalink**) 09/06/2014, 08:22

Hola y gracias de nuevo pero... sigue sin funcionar.

He probado de las dos formas, con evento onload y sin ello con el mismo resultado, nada.

De hecho, he creado una nueva página .html nueva para ver si funcionaba y tampoco. Puede que esté equivocado pero me da que falta algo, verdad?

Código HTML:

Ver original<html>
<head>
<title></title>
</head>
 
<body>
 
<h1 style="text-align: center;">Arozteguía, un destino en Navarra</h1>
<p style="text-align: center;"><input id="video" onload="verVideo()" title="video" name="video" type="button" value="video" /></p>
 
<script>
    function verVideo(){
    document.getElementById("video").href="#";
    if (screen.width+"x"+screen.height=="640x480"){
    document.getElementById("video").href="#";
}}
</script>
 
</body>
</html>

Código HTML:

Ver original<html>
<head>
<title></title>
</head>
 
<body>
 
<h1 style="text-align: center;">Arozteguía, un destino en Navarra</h1>
<p style="text-align: center;"><input id="video" title="video" name="video" type="button" value="video" /></p>
 
<script>
    document.getElementById("video").href="#";
    if (screen.width+"x"+screen.height=="640x480"){
    document.getElementById("video").href="#";
}
</script>
 
</body>
</html>

Por otro lado, como ya he comentado, estoy trabajando con WordPress y en una de las páginas he insertado un botón de play para ver un video pero según cambie de dispositivo, sobre todo con los móviles y tablets, la url debe apuntar a un sitio o a otro.

Pienso que igual en el WordPress haya algún script que anula a éste. He probado con poner este script en el header.php e incluso en el footer.php. Qué puedo hacer? Tiene alguna solución?

Gracias por vuestro apoyo y paciencia.

Un abrazo!

Alexis88 · #8 (**permalink**) 09/06/2014, 08:56

No puedes aplicar el evento onload a cualquier elemento, solo por los especificados aquí (revisa la sección onload is Supported by the Following HTML Tags). Por otro lado y de manera similar al caso anterior, no todos los elementos poseen el atributo href, solo sé que lo poseen los elementos <a> y <link>, mas no los <input> como intentas hacerlo.

Lo que podrías hacer es cambiar la ruta cuando se pulse el botón:

Código Javascript:

Ver originalvar boton = document.getElementById("video"),
    medidas = screen.width + "x" + screen.height;
 
boton.addEventListener("click", function(){
    if (medidas == "640x480")
        window.location = "enlace1.php";
    else
        window.location = "enlace2.php";
}, false);

Solamente necesitarás cambiar los enlaces que puse en el ejemplo por los que tienes.

Saludos

javimarcal · #9 (**permalink**) 09/06/2014, 09:52

Como siempre, muchas gracias pero esto sigue sin funcionar.

He probado creando una página en blanco en un html y aunque apunta a un sitio pero cuando está a 640x480 no cambia la url.

Os adjunto el enlace del documento he creado por si puede localizar el error:

http://www.palaciodearozteguia.com/responsive-prueba.html

Gracias de antemano por la paciencia y apoyo!