jQuery browserSizr

22/Jul/2009 21175

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. Ivyblabs [#]

    ivermectin 5ml

  2. ترجمه مقاله [#]

    ترجمه مقاله

  3. Markblabs [#]

    viagra over the counter canada

  4. FritzPeerb [#]

    legit viagra sites help with low libido kroger pharmacy hours herbal cialis herbal enhancements for men best gnc vitamins for men generic viagra cost at walmart

  5. ivermectin poisoning [#]

    This blog was… how do you say it? Relevant!!
    Finally I have found something that helped me. Cheers! http://harmonyhomesltd.com/Ivermectinum-tablets.html

  6. ivermectin tablets for sale [#]

    Non-specific Low-down Far this by-product
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectinstrom.com 3 mg ivermectine over counter
    https://ivermectinsts.com ivermectin tablets for humans
    https://ivermectinsts.com ivermectin tablets
    https://stromectolivermect.com ivermectin tablets for sale

  7. ivermectin 12 mg [#]

    Non-specific Message Here this product
    https://ivermectinstrom.com ivermectin 6 mg
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinstrom.com ivermectin tablets
    https://stromectolivermect.com ivermectin tablets
    https://stromectolivermect.com ivermectin over the counter

  8. Wimblabs [#]

    canada tadalafil generic

  9. ivermectin for humans pills 12 mg [#]

    General Low-down Here this product
    https://ivermectinst.com ivermectin for sale humans
    https://stromectolivermect.com ivermectin tablets
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin for humans

  10. FritzPeerb [#]

    does sildenafil work for women how long does sildenafil work over the counter erectile pills at walgreens cialis tablet promotion card ejaculation with flomax sexual side effects of flomax

  11. Kiablabs [#]

    sildenafil 100

  12. ivermectin 12 mg [#]

    General Message About this outcome
    https://ivermectinst.com ivermectin tablets
    https://ivermectinst.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin for humans
    https://ivermectstromect.com ivermectin for sale for humans
    https://ivermectstromect.com ivermectin tablets

  13. ivermectin 12 mg [#]

    Accustomed Information Fro this by-product
    https://ivermectinstrom.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin tablets
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectinsts.com stromectol

  14. ivermectin 6 mg [#]

    Non-specific Information Here this outcome
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin tablets for sale
    https://stromectolivermect.com ivermectin 6 mg
    https://stromectolivermect.com ivermectin for humans
    https://ivermectinsts.com ivermectin tablets

  15. Ashblabs [#]

    clomid steroids

  16. pendik evden eve nakliyat [#]

    pendik evdеn eve nakliyatt

    Evden eve nakliyat Pendik bölgesinde bulunan en köklü ve kaliteli nakliyat
    şirketleri. Kuşaklardan beri eşya taşıma işlemlerinde sіze destek sağlıyoruz.

    Sizde kɑliteⅼi bir taşıma istiyorsunuz hemen bize yazabilirѕiniz.

    pendik evden eve nakliyat

  17. Jackblabs [#]

    price of stromectol

  18. EdViagra [#]

    buying viagra online – where can i buy viagra over the counter viagra prescription online
    viagra canada https://edviagralove.com/#
    order viagra online

  19. stromectol over the counter [#]

    stromectol online pharmacy https://ivermecton.com/ ivermectin over the counter

  20. ivermecton.com [#]

    krim generik ivermectin 1 http://www.ivermecton.com/ stromectol ivermectin for humans

  21. ivermectin 6 mg [#]

    Global Low-down About this product
    https://ivermectinstrom.com ivermectin tablets
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinstrom.com ivermectin for humans
    https://ivermectstromect.com ivermectin for sale
    https://ivermectinstrom.com ivermectin 6 mg

CSSLab