Como dar estilos a tu barras de scroll rapidamente

La idea es simple, tenemos un precioso diseño pero al maquetarlo nos damos cuenta que queda un poco feote con esas barras de scroll de sistema.

La solución es fácil, con un simple plugin de jquery podemos darle el estilo que queramos, la forma es bastante sencilla:

Añadimos el plugin en el head de nuestro site, junto con el css básico al que luego podremos dar forma:

Ahora solo tenemos que llamar al elemento de bloque, con overflow:auto, al que queramos dar estilo, si tenemos por ejemplo:

       
  • Enlace 1
    •  
       
  • Enlace 2
    •  
       
  • Enlace 3
    •  
     
        
    La llamada será tal que así:
          
    $(function(){	
        $('.lista_enlaces').jScrollPane();
    }); 
        
    ¡Y eso es todo! 
    Más información: jScrollPane
    
						
    
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				

						
						
						
    
							
						
    
						

						
						
					
    
					
    
				
    				
			
				
				
    
					
    
						
    
							
							
    Recursos jQuery [Volumen 1]
    
							
							
    Intentaré (en la medida que mi flojera me lo permita) ir publicando cada semana una pequeña colección de sitios con material interesante sobre recursos en jquery/javascript, entre otras cosas para tener toda esta información más organizada, y de paso igual hasta le vale a alguien.
    The 20 Most Practical and Creative Uses of jQuery
    Una lista con los ejemplos más creativos de cosas que se pueden hacer con jquery 
    50+ Amazing Jquery Examples 
    El título lo dice todo, hasta 50 ejemplos prácticos de usos de jquery (Accordion, Slideshows, etc)
    jQuery corners  
    El eterno debate, si no te apetece hacer esquinas redondeadas con css, y no quieres usar las propiedades de css3, siempre puedes recurrir a jquery.
    jQuery 1.2 Cheat Sheet 
    Una lista de atajos imprescindibles para trabajar día a día con jQuery (aunque acaba de salir jQuery 1.3) 
    
						
    
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				

						
						
						
    
							
						
    
						

						
						
					
    
					
    
				
    				
			
				
				
    
					
    
						
    
							
							
    Blogs: Comentarios o visitas
    
							
							
    He tenido esta conversación más de una vez, ¿Qué es más importante, tener un blog lleno de comentarios y con un alto grado de participación o un blog con miles de suscriptores donde apenas hay movimiento de comentario e implicación por parte de los lectores?…pues mire usted, ni una cosa ni otra.
    Lo realmente importante de un blog es su contenido, en teoría si hay contenido de calidad la participación de los lectores debería de surgir de forma natural y no habría ningun problema, no sirve de nada crear un sitio y llenarlo de mierda para conseguir un puñado de visitar y llenar así la cuenta de adsense cada mes.
    ¿Y todo esto por que viene?, pues muy fácil:
    Hace cosa de un año tuve la suerte de coincidir con Andrés Nieto en el Congreso de Webmasters 2007 de Madrid, y entre conferencia y conferencia estuvimos hablando sobre la posibilidad de integrar los comentarios de un blog directamente desde el lector de feeds.
    La idea es poder ir leyendo las diferentes noticias desde nuestro reader y poder comentar “on the fly” sin salir del lector, tantas noticias y tantas veces como nos apetezca, de tal forma no perderíamos tiempo en salir, cargar la página, autenticarnos y comentar el post.
    La desventaja de esto es que los blogs disminuirían su volumen de visitas de forma considerable ya que se producirían menos entradas por la web, pero como he dicho, lo importante para mi es tener contenido de calidad y participación de los lectores, el resto es todo secundario. 
    Como Andrés es un crack, aunque esté hasta arriba de curro ha tenido tiempo de sacar CommentFeed, una versión para google reader que la verdad es que va estupendamente, si os interesa ver como lo ha hecho pasaros por aquí.
    Anieto2K - CommentFeed 
    Un saludo a todos! 
    
						
    
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				

						
						
						
    
							
						
    
						

						
						
					
    
					
    
				
    				
			
				
				
    
					
    
						
    
							
							
    Posicionamiento en CSS
    
							
							
    Con este tutorial de CSS aprenderemos las características de las etiquetas de CSS referentes al posicionamiento de elementos, tales como divs. Comenzaremos con la etiqueta por defecto.
     POSICIÓN ESTÁTICA 
    Creo que este atributo es un poco inútil, ya que es el valor que tiene el parámetro position por defecto. Si no definimos posición, será esta la que aparezca, así que no hace falta especificarla.
     
    #ejemplo {
     position:static;
     }
     
    Con esto especificamos que el elemento div aparecerá donde lo haría normalmente, a la izquierda y arriba. Un ejemplo para que veais el funcionamiento básico.
     POSICIÓN RELATIVA 
    Esta posición determina la distancia entre la situación de la div y la que tendría que tener por defecto. Esto quiere decir quees como una position:static, pero podemos mover la capa tantos píxeles como queramos hacia cada lado, usando para ello las etiquetas top, right, bottom y left.
     
    #ejemplo {
     position:relative;
     top:50px;
     left:50px;
     }
     
    Con el anterior código he movido la capa número uno 50 píxeles hacia abajo y hacia la derecha. Recordad que los números negativos cambian el sentido del movimiento: top:-50px sería moverlo hacia arriba, y left:-50px sería hacia la izquierda. Un ejemplo de posición relativa.
     POSICIÓN ABSOLUTA 
    La posición absoluta anula la relatividad de la posición. En otras palabras: ahora no movemos la capa en relación a la capa superior, sinó que la movemos a través de toda la pantalla.
     
    #ejemplo {
     position:absolute;
     top:0;
     left:0;
     }
     
    Este código coje la capa del ejemplo y la coloca a 0 píxeles de arriba y a 0 píxeles de la izquierda. Si fuera position:relative, la pondría en la esquina de la capa en la que se encuentra, pero al ser absoluta la coloca en la esquina de la página. Un ejemplo de esta posición aquí.
     
    Esto pasa porque si no hay una div referida como relativa con el atributo position:relative, el elemento que coje el relative es la pantalla del navegador. Si usamos un position:absolute en un elemento que esta dentro de una div con position:relative, el elemento no se moverá dentro de la pantalla sinó dentro de la caja del div relativo. Ejemplo práctico.
     
    #ejemplocontenedor {
     position:relative;
     }
     #ejemplocontenido {
     position:absolute;
     bottom:0;
     right:0;
     }
     
    Recordad que podemos aplicar el position:absolute a tantos divs como queramos, mientras estén dentro del div que tiene el position:relative.
     FLOATS (FLOTADORES)
    Imaginad ahora que queremos hacer un par de columnas y utilizamos una capa relativa, y en su interior dos capas absolutas (una a la derecha y otra a la izquierda). En principio está bien pero, ¿qué pasa si quiero que estas columnas sobrepasen la altura de la capa que las contiene? ¿y si quiero que cada columna tenga una altura distinta? Para eso usaremos los flotadores (floats).
     
    #ejemplo1 {
     float:left;
     }
     #ejemplo2 {
     float:right;
     }
     
    Miradlo en funcionamiento. Por último, quiero añadir que esta situación es incómoda debido a que, si ahora queremos añadir una nueva div abajo, por ejemplo un footer, en este caso dios sabe dónde quedará colocado. Lo normal es que queramos colocarlo en el borde inferior de la columna que llegue hasta más abajo, pero puede que no sepamos cual de las dos será mas alta.
     
    #ejemplo1 {
     float:left;
     }
     #ejemplo2 {
     float:right;
     }
     #footer {
     clear:both;
     }
     
    Para que el footer quede a ran de la columna más alta (la que quede más abajo) tendremos que usar el atributo clear:both en el div que haga de footer. Último ejemplo: footer sin el clear:both, y footer con el clear:both.
     
    Via:Edenahp.net