| Loop icons | |
 | Contiene 106 íconos de 16x16 en formato PNG. descargar |
 | |
| Windows phone | |
 | Contiene 1482 íconos de 48x48 en formato PNG. descargar |
 | |
TinyScroller: Simple y personalizable |
TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.
El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.
Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:
El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.
Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:
<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
return{
init:function(a,c,b,s,d){
a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
b.style.display='block'; a.style.overflow='hidden';
var h=a.offsetHeight, t=c.offsetHeight;
if(t<h){
b.style.display='none'
}else{
a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
s.onselectstart=function(){return false}
}
a.l=b.offsetHeight-s.offsetHeight
},
st:function(e,f){
var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
if(a.mv){this.sp(f)}
a.mv=function(event){TINY.scroller.mv(event,f)};
a.sp=function(){TINY.scroller.sp(f)};
if(T$$$()){
document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
}else{
document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
}
if(a.d){s.className+=' '+a.n}
},
mv:function(e,f){
var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
if(m>=0&&m<a.l){
s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
}else if(m<0){
s.style.top=0; c.style.top=0
}else if(m>a.l){
s.style.top=a.l+'px'; c.style.top=a.m+'px'
}
},
sp:function(f){
var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
if(T$$$()){
document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
}else{
document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
}
a.mv=0;
}
}
}();
TINY.cursor=function(){
return{
top:function(e){
return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
}
}
}();
//]]>
</script>Y lo usarmemos de este modo:
<div id="ejemplo-scroll" class="scroll">
<div id="ejemplo-scrollcontent" class="scrollcontent">
....... acá pondremos nuestro contenido .......
</div>
<div id="ejemplo-scrollbar" class="scrollbar">
<div id="ejemplo-scroller" class="scroller"></div>
</div>
</div>e inmediantamente debajo, llamamos a la función que en este caso, sería así:
<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:
el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)
Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:
el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)
Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:
<style>
/* las reglas genéricas */
.scroll { /* el contenedor */
overflow: auto;
position: relative;
}
.scrollcontent { /* el contenido */
position: absolute;
z-index: 200;
}
.scrollbar { /* la barra de desplazamiento es una imagen */
background:url(URL_scroll-bg.gif);
display: none;
float: right;
position: relative;
width: 15px;
z-index: 100;
}
.scroller { /* el botón de desplazamiento también es una imagen */
background-color: #CCC;
background-image: url(URL_scroll-arrows.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
top: 0;
width: 15px;
}
.buttonclick { background-color:#BBB; }
/* y defino los anchos, altos y otros detalles de cada uno de elllos */
#ejemplo-scroll { /*
background-color: #000;
margin: 0 auto;
height: 200px; /* el ancho */
width: 300px; /* el alto */
}
#ejemplo-scrollcontent {
width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
}
#ejemplo-scrollbar {
height: 200px; /* el mismo alto que el contenedor */
}
</style>Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:
#otro-scroll{
background-color: #222;
border: 2px solid #000;
height: 270px;
margin: 0 auto;
outline: 1px solid #666;
width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }
El atributo required |
El atributo required es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser "llenado" y evitar que un formulario se envíe sin contenido.
Aunque la verificación final de los datos enviados desde un formulario debe ser hecha en el servidor que los procesará, siempre es bueno realizar una validación previa con JavaScript y así reducir los accesos y evitar el envío de datos vacíos o nulos.
Agregar fullscreen a distintos elementos |
Mostrar contenido en pantalla completa no es algo exclusivo de los videos incrustados ya que puede hacerse sobre cualquier otro contenido aunque siempre veremos la advertencia del navegador que nos avisa que esta opción está en uso y que podemos volver atrás utilizando la tecla ESC.
simpleWeather: El tiempo en el blog con jQuery |
simpleWeather es un plugin de jQuery que sirve para mostrar informacion sobre el estado del tiempo del tiempo en un lugar definido y que para eso, utiliza el API Weather feed de Yahoo.
El script es muy simple porque, en realidad, no genera la salida sino que simplemente obtiene los datos así que la parte complicada del asunto es que nosotros debemos armar el HTML correspondiente.
Una vez que agregamos el script a la plantilla, deberíamos crear la función que es lo que mostrará el resultado; básicamente es algo así:
El script es muy simple porque, en realidad, no genera la salida sino que simplemente obtiene los datos así que la parte complicada del asunto es que nosotros debemos armar el HTML correspondiente.
Una vez que agregamos el script a la plantilla, deberíamos crear la función que es lo que mostrará el resultado; básicamente es algo así:
$.simpleWeather({
location: 'xxxxxxxxxxx',
unit: 'c',
success: function(weather) { ... },
error: function(error) { ... }
});donde location es la ciudad y unit indica la unidad de la temperatura.
Este es un ejemplo simple:
Este es un ejemplo simple:
<script type="text/javascript">
//<![CDATA[
$(function() {
$.simpleWeather({
location: 'xxxxxxxxxxx',
unit: 'c',
success: function(weather) {
html = '<h2>'+weather.city+'</h2>';
html += '<img src="'+weather.image+'"/>';
html += '<p>'+weather.temp+'° '+weather.units.temp+'<span>'+weather.currently+'</span></p>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
//]]>
</script>Así que ahora, bastaría colocar el DIV de salida allí donde quisiéramos mostrarlo:
<div id="weather"></div>
Y un poco de CSS:
<style>
#weather {
background-color: #456;
border: 4px solid #ABC;
overflow: hidden;
padding: 10px 20px 0;
position: relative;
text-align: center;
width: 185px;
}
#weather h2 {
color: #DEF;
font-family: Century Gothic;
font-size: 28px;
font-weight: normal;
letter-spacing: -3px;
margin: 0;
text-align: center;
}
#weather img {
margin-top: 10px;
}
#weather p {
color: #DEF;
font-family: Times New Roman;
font-size: 48px;
left: 80px;
letter-spacing: -6px;
margin: 0;
position: absolute;
top: 140px;
}
#weather p span {
color: #ABC;
display: block;
font-size: 20px;
letter-spacing: 0;
text-transform: lowercase;
}
</style>
Bordes, listas, el primero y el último |
Esta es una solución sencilla a un problema común.
Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:
Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:
<div id="demobordes">
<ul>
<li>el primer item</li>
<li>el segundo item</li>
<li>el tercer item</li>
<li>el último item</li>
</ul>Entonces pruebo con una regla básica:
<style>
#demobordes li {
background-color: #000;
border-bottom: 2px dotted #ABC;
border-top: 2px dotted #ABC;
color: #888;
padding: 5px 10px;
}
</style>pero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas "gordos":
- el primer item
- el segundo item
- el tercer item
- el último item
Entonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:
- el primer item
- el segundo item
- el tercer item
- el último item
- el primer item
- el segundo item
- el tercer item
- el último item
Y como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso first-child:
#demobordes li {
.......
border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }Y al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con last-child:
#demobordes li {
.......
border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }Y con eso resuelvo el asunto:
- el primer item
- el segundo item
- el tercer item
- el último item
- el primer item
- el segundo item
- el tercer item
- el último item
Una curiosidad: Logos de GMail con CSS3 |
Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.
Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.
Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.
.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}
Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.Y si alguno cree que eso fue excesivo, es porque no vieron este otro:
