Category Archives: html

Imagen de fondo a pantalla completa

Ponemos como estilo:

body {
  background: url(imagen.jpg) center center cover no-repeat fixed;
}
@media only screen and (max-width: 767px) {
  body {
    background-image: url(imagenmaspeque.jpg);
  }
}

Y como código de la pagina:

Todo lo que tengas que poner.

El resultado seria:

Todo lo que tengas que poner

Usar verify.js para validar un formulario usando AJAX

El plugin verify.js nos permite validar un formulario rápidamente, pero funciona cuando se envía el formulario con el botón submit.

Si el formulario lo queremos utilizar mediante ajax no se dispara el evento.

campoobligatorio

Para ellos vamos a utilizar el evento beforeSubmit

<form id="formulario1" action="destiny.php" method="POST" name="formulario1">
<input id="field" class="form-control" name="field" type="text" value="" placeholder="" data-validate="required" /> 
<input type="submit" onclick="function_validate_form()"/>
</form>
<script>
function function_validate_form(){
    $('#formulario1').verify({
    'beforeSubmit': function(form, result) {
    if (result) {
        // Since the form is valid, submit form via AJAX.
      alert('OK, send ajax');
      send_ajax();
    }else{
        //do nothing
    }

    // Form is either invalid or was already submitted, return `false` to tell verify.js to not submit the form.
    return false; 
}
});
}
function send_ajax(){
var formData = $("#formulario1").serializeArray(); 
var URL = $("#formulario1").attr("action"); 
$.post(URL, formData, function(data) { console.log(data); },"json") .fail(function(jqXHR, textStatus, errorThrown) { alert( "error ajax" ); });
}
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
<script src="plugins/verify.notify.min.js"></script>

Detectar tecla mayusculas pulsada al hacer click en un enlace

Si queremos que al pulsar en un elemento se comporte de manera distinta si tiene la tacla mayusculas pulsada lo podemos conseguir con Javascript:

<html>
<head>

<script>
var may;
function estaPulsadoShift(event){
if (event.shiftKey==1)
    may=true;
else
   may=false;
}
function prueba(){
	if (may){
		window.location="https://www.google.es/?gws_rd=ssl#q=pulsado";
	}else{
		window.location="https://www.google.es/?gws_rd=ssl#q=no+pulsado";
		
	}
	
}
</script>
</head>
<body onmousedown="estaPulsadoShift(event);">
	Si quieres que se comporte distinto manten pulsado "Mayusculas"
	<input type="button" onclick="prueba()" value="Pulsame">

</body>
</html>

Ejemplo funcinando https://jsfiddle.net/Lu252r5z/

Tabla responsive hasta cierto tamaño

Tenemos una tabla formada por varias imágenes, queremos que las imágenes se reduzcan a medida que la pantalla disminuye, pero a partir de un determinado tamaño no queremos que se reduzcan mas,sino que salten de linea:

La tabla podría ser:

<table id="opcionesinicio">
				<tr>
					<td>
						<img src="http://placehold.it/300x300" class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						
						<img src="http://placehold.it/300x300"  class="img-responsive"/>
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
					<td>
						<img src="http://placehold.it/300x300"  class="img-responsive"/><br />
						
					</td>
				</tr>
			</table>

Tal y como está sin css el resultado seria:

responsive1

Ahora añadimos el css para hacerlo responsive:

#opcionesinicio{
    width:100%
}
 .img-responsive  {
           max-width: 100%; 
           width: auto;  
       }

Y el resultado es:
responsive2

Pero si la pantalla es muy pequeña las imagenes apenas se ven.
responsive3

Aqui es donde añadimos el codigo para que a partir de un tamaño la tabla se rompa

@media screen and (max-width:500px){
    
    #opcionesinicio td{
         float:left;
    }
}

responsive4

El resultado completo se puede ver en:

https://jsfiddle.net/18ko3yu8/