Tag: html

Sustituir icono radio button bootstrap 4

Vamos a sustituir el icono standard del radio button por algo más visible. En este caso práctico vamos a cambiar el modo de visualización de un listado, por lo que vamos a hacer que los iconos sean visiblemente más acorde a lo que se sugiere que es cambiar la vista a modo «Bloque» o modo «Listado».

Para realizar la estructura HTML he usado – bootstrap 4

Para los iconos – fontawesome 5

La estructura CSS tiene que estar bien anidada para no machacar otros estilos.

Efecto Inclinado (Skew Effect) HTML + CSS

La inclinación de bordes con CSS (css skew effect) es el efecto en el que los laterales (izquierda y/o derecha) aparecen inclinados. Ejemplo:

El efecto lo logramos utilizando la propiedad transform: skew.  Con esto y un poco más de estilos obtenemos el resultado.

HTML:

<div id="user-config-1" class="square-skew square-dark-blue text-white">
<span>
<label>Config 1</label>
<i type="btn" class="edit-config fas fa-pencil-alt" title="Editar"></i>
<i type="btn" class="remove-config fa fa-times"></i>
</span></div>

CSS:

.square-skew {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    padding: 0.2rem 0;
    position: relative;
    left: 10px;
    float: left;
}

.square-skew label {
    margin: 0 !important;
    font-weight: bold;
}

.square-skew span {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    display: inline-block;
    font-size: 0.625rem;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.square-dark-blue {
    background-color: #007cb6;
    margin-right: 0.625rem;
}

Nueva línea en textarea (HTML, PHP)

Para crear un salto de línea en PHP en una variable de tipo STRING que estamos concatenando, simplemente añadiremos la función nativa de PHP: PHP_EOL (END OF LINE).

Por ejemplo:

$nombresParticipantes = '';

foreach ($participantes as $participante){

$nombresParticipantes .= $participante[‘nombre’].’  ‘ $participante[‘apellidos’].PHP_EOL;

}

<textarea><?php echo $nombresParticipantes ?></textarea>

Para añadir una nueva línea vía HTML utilizaremos el código html:
<textarea>Manuel Prieto &#13;&#10; Enrique Prieto</textarea>
Esto nos mostrará en el textarea un texto tipo listado:

Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept». Esto hará que se abra el dialogo para elegir el archivo y que se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.

<input id="campoFile" accept="audio/*,video/*,image/*" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc):

accept="audio/*"

Para utilizar más de un filtro, debemos añadirlos separados por comas «,»

IMAGES:

accept="image/gif,image/jpeg,image/jpg,image/png"

EXCEL 97-2003 (.xls):

accept="application/vnd.ms-excel"

EXCEL 2007+ (.xlsx)

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

PDF

accept=".pdf"

VIDEO (.avi, .mpg, .mpeg, .mp4)

accept="video/*"

Validar Tamaño y Extensión con Javascript y Jquery

En el siguiente ejemplo aceptaremos archivos de imágenes, vídeo, audio y PDF.

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando jQuery antes de enviarlo por POST.

En el código Javascript podemos observar las extensiones que aceptamos con la variable ext. Esta comprobación es CASE SENSITIVE, es decir que si colocamos extensiones en minúsculas, se hará la comprobación solo con extensiones en minúsculas.

Para evitar esto lo que hacemos es pasar la extensión que recuperamos en la variable ext y aplicarle el toLowerCase.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: