jQuery browserSizr

22/jul/2009 15

jQuery browserSizr

Your flexible fixed layout / Tu estructura fija, flexible

Selecciona tu idioma / Select your language:

EN

Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter.

With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width:

browserSizr: 4kb

  • smartphones (310px or less)
  • less than 1024px (from 311px to 1023px)
  • greater than 1024px (from 1024px to 1279px – including 1024px)
  • greater than 1280px (from 1280px and higher – including 1280px)

Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each resolution:

#container {
   width: 960px; /* normal width */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* width for less than 1024px */
      font-size: 12px; /* smaller font-size */
   }
   #container.over1280 {
      width: 1200px; /* width for over 1280px */
      font-size: 16px; /* bigger font-size */
   }

See example

Configuration:

  • Include the jQuery library and this humble plugin:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.browserSizr.js" type="text/javascript"></script>
  • Inicialize-it with the default parameters:
$(function(){
   $().browserSizr();
});
  • Or configure it as preferred
$().browserSizr({
   containerDiv: '#container',
   //containerDiv - value: any HTML tag or #id, default to #container
   debug: 'off',
   //debug-  value: on | off, default to 'off'
   smartphones: 'off',
   //smartphones - value: on | off, default to 'off'
   lower1024: 'on',
   //lower1024 - value: on | off, default to 'on'
   over1024: 'on',
   //over1024 - value: on | off, default to 'on'
   over1280: 'off'
   //over1280 - value: on | off, default to 'off'
});

ES

Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y el modelo de caja se comporta como esperas si haces uso de un buen reseter de estilos CSS.

Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes:

browserSizr: 4kb

  • smartphones (310px o menos)
  • menor que 1024px (de 311px a 1023px)
  • mayor que 1024px (de 1024px a 1279px – incluye 1024px)
  • mayor que 1280px (de 1280px o más – incluye 1280px)

En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de especificidad, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución:

#container {
   width: 960px; /* ancho normal del sitio web */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* ancho para resoluciones menores que 1024px */
      font-size: 12px; /* menor tamaño de fuente */
   }
   #container.over1280 {
      width: 1200px; /* ancho para resoluciones mayores que 1280px */
      font-size: 16px; /* mayor tamaño de fuente */
   }

Ver ejemplo

Configuración:

  • Incluye la librería jQuery y luego, este humilde plugin:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.browserSizr.js" type="text/javascript"></script>
  • Inicialízalo con los parámetros por defecto:
$(function(){
   $().browserSizr();
});
  • O configúralo como más prefieras:
$().browserSizr({
   containerDiv: '#container',
   //containerDiv - id o etiqueta donde se inyectará la class
   debug: 'off',
   //debug - ventana debug on | off, por defecto off
   smartphones: 'off',
    //smartphones - valores: on | off, por defecto 'off'
   lower1024: 'on',
    // valores: on | off, por defecto 'on'
   over1024: 'on',
    //over1024 - valores: on | off, por defecto 'on'
   over1280: 'off'
    //over1280 - valores: on | off, por defecto 'off'
});

Bajar/Download plugin (.zip 1kb)

Bajar/Download plugin+demos (.zip 22kb)

browserSizr logo by toledopasarin

Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px.

Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px.

Ver Ejemplo Alto Ventana

Bajar/Download plugin + demo (.zip 24kb)

Comentarios

  1. Gabriel Porras [#]

    Pregunta pregunta….
    Y los navegadores móviles si pueden ejecutar jQuery?
    Que pruebas han hecho con ellos.
    Gracias

  2. ViBViB [#]

    Excelente!!!! Justo (que casualidad) andaba necesitando algo como esto. Como siempre, gracias!

  3. Giancarlo [#]

    Los navegadores de los mobiles no siempre tienen el soporte de JavaScript habilitado, por ende no puedes contar con ello. Los “smartPhone” en cambio si los tienen habilitados (nuevas blackberry, iphone, etc). Saludos!

  4. Jorge Epuñan [#]

    gracias Giancarlo por tu aclaración, y disculpen la demora en responder… has explicado todo muy bien; mi intencion es mas q nada llegar a iPhone mas q los smartphones, pero deje la posibilidad abierta en todo caso.

    Saludos.

  5. Enlaces de la semana (V) | Mareos de un geek [#]

    [...] jQuery browserSizr permite optimizar el tamaño líquido de los contenedores CSS. [...]

  6. hans stad [#]

    Nice plug-in, just what I was looking for. Except I have noticed that you need the check the script for maximizing the webbrowser. The script isn’t checking this.

  7. Jorge Epuñan [#]

    hans: which browser are you using? it’s kinda weird your maximizing issue, because this plugin works on 2 events: resize and load.

    In my tests works just fine.

  8. Hans Stad [#]

    I have found the reason for this, over1280 off is missing. My screensize is 1600×1200 at maximum, this is a browserwidth higher then 1280. Dragging the edge of the browser is not a problem because over1280 off is in the plugin. Maximizing the browser jumps straight to over1280, the class is not removed with over1280 off

  9. Hans Stad [#]

    “Dragging the edge of the browser is not a problem because over1280 off is in the plugin. ”
    This must be over1024 off!!

  10. joaquín núñez [#]

    great job! you should put a callback too. i think it could be very useful

  11. carlos de jesus [#]

    Que interesante, esto lo tuve que hacer también para redimiensionar un div cuando se mostrara por un proyector.
    saludos

  12. Jorge Sousa [#]

    I’m doing a web site that scrolls horizontally, so I need to adjust the hight of the diferent resolutions.
    I tray change width by hight on the script but it continue considerin the width.
    What must I do?
    Regards

  13. Jorge Epuñan [#]

    Jorge Sousa: that’s interesting, let me see what can I do with the height of the window, and I’ll post it here soon.

  14. Jorge Epuñan [#]

    Jorge Sousa working on it right now!

  15. Ron Burgundy [#]

    Awesome plugin, thanks a lot!
    I switched from vertical to the horizontal timeline and for some reason. the little dotted line (dot.gif) doesn’t appear anymore whereas biggerdot.png still appear. I use the same CSS as in the example file, do you have any idea of what can cause that?
    Thanks a lot

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab