Advanced Search

Javascript fluid layout

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // afhankelijkheden:
  2. // - yahoo.js
  3. // - dom.js
  4. //- event.js
  5.  
  6. fluidLayout = function() {
  7. var maxW = 1280;
  8. var minW = 800;
  9. var fluidW = "98%";
  10.  
  11. var vp = YAHOO.util.Dom.getViewportWidth();
  12. // afhankelijk van of de container een id of classname heeft pas je de onderstaande regel aan (id heeft voorkeur)
  13. var col = document.getElementById("objectId"); //YAHOO.util.Dom.getElementsByClassName("col1")\[0\];
  14.  
  15. if(vp >= maxW) {
  16.    YAHOO.util.Dom.setStyle(col,"width",maxW + "px");
  17.    YAHOO.util.Dom.setStyle(col,"border","2px solid red"); // kun je later verwijderen
  18. } else if(vp <= minW) {
  19.    YAHOO.util.Dom.setStyle(col,"width",minW + "px");
  20.    YAHOO.util.Dom.setStyle(col,"border","2px solid orange"); // kun je later verwijderen
  21. } else {
  22.    YAHOO.util.Dom.setStyle(col,"width",fluidW);
  23.    YAHOO.util.Dom.setStyle(col,"border","2px solid green"); // kun je later verwijderen
  24. }
  25. }
  26.  
  27. YAHOO.util.Event.addListener(window,"load",fluidLayout);
  28. YAHOO.util.Event.addListener(window,"resize",fluidLayout);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.