La idea es poder añadir una leyenda con el contador de caracteres maximo y los que quedan todavia:
A medida que se escribe el contador va bajando.
El codigo necesario está en github
Puede ver un ejemplo en vivo aqui
Category Archives: html
Mostrar placeholder siempre en input HTML
El atributo placeholder de un input se muestra mientras no tiene valor pero luego desaparece.
La idea es mostrar ese contenido en la parte inferior derecha de la caja de texto siempre que tenga un valor.
Asi para una caja como:
Cuando ponemos el valor el placeholder pasa a estar en la parte inferior
El código necesario está en github :
Y se puede ver funcionando en el siguiente enlace
Para ello hay que incluir la libreria jplaceholder.js ( es necesario el uso de JQUERY )
Y posteriormente ejecutar el codigo:
$('input').jPlaceHolderEmpty();
Jugando con imagenes en jquery (añadir texto y reemplazar texto )
Añadir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tamaño que la imagen y como contenido el texto alternativo.
Para ello nos hace falta JQuery y estilo css
Dada una imagen
Lo que obtenemos es la misma imagen pero con una leyenda inferior
La otra variante oculta la imagen y en su lugar muestra un hueco del mismo tamaño pero con el texto alternativo como contenido.
El ejemplo completo se puede ver aquí
Añadir contador de caracteres restantes a caja de texto
La idea es teniendo una caja de texto o un elemento input añadir un contador de los caracteres que faltan y que se vaya actualizando a medida que escribimos.
para ello utilizamos JQuery y la siguiente libreria:
(function($) {
'use strict';
$.fn.countChar = function() {
return this.each(function(i, element) {
$(element).keyup(function updateCharCounter() {
var $me = $(this);
var maxLength = parseInt($me.attr('maxlength'), 10);
var charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
});
var $me = $(this),
maxLength = parseInt($me.attr('maxlength'), 10),
charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);
if (cajalimite){
$me.after('<p id="'+nombrecajalimite+'" class="limit"></p>');
}
cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
});
};
$( "<style>.limit { float: right; clear: both; margin-bottom: 10px; font: 400 0.688em/1.38 'Roboto'; text-align: right; color: #777777;}</style>" ).appendTo( "head" )
}(jQuery));
Con esto lo único que tenemos que hacer es añadir una clase a nuestra caja de texto:
<div class=" clearfix"> <label class="_text">Caja de texto con maxlength = 50</label> <input id="nickname" class="cuentacaracteres _textfield" size="32" maxlength="50" placeholder="counter.js"> </div>
Y añadir al final del documento la linea que lo enlaza:
<script>
$(document).ready(function (){
'use strict';
// works on one field
$('.cuentacaracteres').countChar();
});
</script>
Redirigir tráfico sin www en http a https con www
Necesitamos añadir estas lineas en el fichero .htaccess
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{HTTPS} !=on
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]
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.
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>
Crear imagenes del tamaño necesario rapidamente
Hoy necesitaba unas imágenes de un tamaño determinado y al final he creado un sitio web que especificando el alto y el ancho nos devuelve un png de ese tamaño.
http://www.josejavierfm.es/imagesize
La imagen es negra y tiene como texto el tamaño de la imagen:
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:
Ahora añadimos el css para hacerlo responsive:
#opcionesinicio{
width:100%
}
.img-responsive {
max-width: 100%;
width: auto;
}
Y el resultado es:
Pero si la pantalla es muy pequeña las imagenes apenas se ven.
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;
}
}
El resultado completo se puede ver en: