documentation/._Examples_Adaptive_Columns.html documentation/._Examples_AutoLayouts.html documentation/._Examples_Columns.html documentation/._Examples_Layouts.html documentation/._Examples_Web_Layouts.html documentation/._mozilla does subpixel rounding.html documentation/Demos/._.DS_Store documentation/Demos/cristina_zorrilla/._contact.html documentation/Demos/cristina_zorrilla/._home.html documentation/Demos/cristina_zorrilla/._index.html documentation/Demos/cristina_zorrilla/Screenshot.png documentation/Demos/cristina_zorrilla/contact.html documentation/Demos/cristina_zorrilla/design_gimp_slice.png documentation/Demos/cristina_zorrilla/elastic documentation/Demos/cristina_zorrilla/home.html documentation/Demos/cristina_zorrilla/images/blue_arrow.jpg documentation/Demos/cristina_zorrilla/images/dark_blue_circle.jpg documentation/Demos/cristina_zorrilla/images/image_contact.jpg documentation/Demos/cristina_zorrilla/images/image_exhibitions.jpg documentation/Demos/cristina_zorrilla/images/image_home.jpg documentation/Demos/cristina_zorrilla/images/image_main.jpg documentation/Demos/cristina_zorrilla/images/image_workshops.jpg documentation/Demos/cristina_zorrilla/images/light_blue_circle.jpg documentation/Demos/cristina_zorrilla/images/line_background.jpg documentation/Demos/cristina_zorrilla/images/logo.jpg documentation/Demos/cristina_zorrilla/images/logo_main.jpg documentation/Demos/cristina_zorrilla/images/mailto_button.jpg documentation/Demos/cristina_zorrilla/images/navigation_contact.jpg documentation/Demos/cristina_zorrilla/images/navigation_contact_current.jpg documentation/Demos/cristina_zorrilla/images/navigation_exhibitions.jpg documentation/Demos/cristina_zorrilla/images/navigation_exhibitions_current.jpg documentation/Demos/cristina_zorrilla/images/navigation_home.jpg documentation/Demos/cristina_zorrilla/images/navigation_home_current.jpg documentation/Demos/cristina_zorrilla/images/navigation_workshops.jpg documentation/Demos/cristina_zorrilla/images/navigation_workshops_current.jpg documentation/Demos/cristina_zorrilla/images/page_background.jpg documentation/Demos/cristina_zorrilla/images/slider_left_arrow.jpg documentation/Demos/cristina_zorrilla/images/slider_right_arrow.jpg documentation/Demos/cristina_zorrilla/index.html documentation/Demos/cristina_zorrilla/skin.css documentation/Demos/cristina_zorrilla/skin.js documentation/Demos/cristina_zorrilla/uploads/bull.jpg documentation/Demos/cristina_zorrilla/uploads/cheetah.jpg documentation/Demos/cristina_zorrilla/uploads/hippo.jpg documentation/Demos/cristina_zorrilla/uploads/hippo_med.jpg documentation/Demos/cristina_zorrilla/uploads/mandril.jpg documentation/Demos/cristina_zorrilla/uploads/tiger.jpg documentation/Demos/elastic_vs_yui/elastic_vs_yui.html documentation/Demos/elastic_vs_yui/elastic_vs_yui_content.html documentation/Demos/gallery/default.css documentation/Demos/gallery/elastic_gallery.js documentation/Demos/gallery/images/img1.jpg documentation/Demos/gallery/images/img10.jpg documentation/Demos/gallery/images/img10_thumb.jpg documentation/Demos/gallery/images/img1_thumb.jpg documentation/Demos/gallery/images/img2.jpg documentation/Demos/gallery/images/img2_thumb.jpg documentation/Demos/gallery/images/img3.jpg documentation/Demos/gallery/images/img3_thumb.jpg documentation/Demos/gallery/images/img4.jpg documentation/Demos/gallery/images/img4_thumb.jpg documentation/Demos/gallery/images/img5.jpg documentation/Demos/gallery/images/img5_thumb.jpg documentation/Demos/gallery/images/img6.jpg documentation/Demos/gallery/images/img6_thumb.jpg documentation/Demos/gallery/images/img7.jpg documentation/Demos/gallery/images/img7_thumb.jpg documentation/Demos/gallery/images/img8.jpg documentation/Demos/gallery/images/img8_thumb.jpg documentation/Demos/gallery/images/img9.jpg documentation/Demos/gallery/images/img9_thumb.jpg documentation/Demos/gallery/images/left.png documentation/Demos/gallery/images/right.png documentation/Demos/gallery/index.html documentation/Examples_Adaptive_Columns.html documentation/Examples_AutoLayouts.html documentation/Examples_Columns.html documentation/Examples_Layouts.html documentation/Examples_Web_Layouts.html documentation/changes.txt documentation/images&css/._css_for_demo_files.css documentation/images&css/._demo_header.png documentation/images&css/css_for_demo_files.css documentation/images&css/demo_header.png documentation/nesting.txt library/css/._print.css library/css/base.css library/css/class.css library/css/fonts.css library/css/grid.css library/css/print.css library/css/reset.css library/js/._elastic.js library/js/elastic.js library/js/jquery.ui.js production/._elastic.css production/._elastic.js @@ -15,36 +15,36 @@ Elastic is organized in several files * *engine.js*: subpixel rounding, and special helpers * *skin.css*: your place to build the skin of your site (you can choose whatever you want) -h3. Browser support - -Our team has been able to test and confirm support layouts made with elastic in the following browsers: - -* Firefox 2 mac, windows, linux -* Firefox 3 mac, windows, linux -* Safari 3 mac and windows -* Safari 4 -* Opera 9.6 linux -* Internet Explorer 6 -* Internet Explorer 7 -* Internet Explorer 8 Beta 2 - -h3. About subpixel rounding - -The subpixel rounding problems can be found on every browser according to our test, but it is more difficult to find -this rounding problems in safari and firefox, and every browser does rounding in a different way, that is why -elastic's engine.js provides a predictable way of rounding letting you know what can be subject of modifications - -h4. The order is this: - -* .column.fixed never modified -* .column (last) modified -* .column.elastic (last) - -h4. Engine performance - -Since version 1.0 we have been working in making engine faster, and will continue to improve -the speed of the engine, but from version 1.0 to 2.0 we have gained around a 60% of speed -some new features have been added, so if you use them all, you may get a lil slower than 1.0 +h3. Browser support + +Our team has been able to test and confirm support layouts made with elastic in the following browsers: + +* Firefox 2 mac, windows, linux +* Firefox 3 mac, windows, linux +* Safari 3 mac and windows +* Safari 4 +* Opera 9.6 linux +* Internet Explorer 6 +* Internet Explorer 7 +* Internet Explorer 8 Beta 2 + +h3. About subpixel rounding + +The subpixel rounding problems can be found on every browser according to our test, but it is more difficult to find +this rounding problems in safari and firefox, and every browser does rounding in a different way, that is why +elastic's engine.js provides a predictable way of rounding letting you know what can be subject of modifications + +h4. The order is this: + +* .column.fixed never modified +* .column (last) modified +* .column.elastic (last) + +h4. Engine performance + +Since version 1.0 we have been working in making engine faster, and will continue to improve +the speed of the engine, but from version 1.0 to 2.0 we have gained around a 60% of speed +some new features have been added, so if you use them all, you may get a lil slower than 1.0 but hey engine is doing more things. <pre><code class="html"> @@ -127,7 +127,7 @@ Well you can, but currently not for auto-columns. and it is called span <div class="column">first column content</div> <div class="column">second column content</div> <div class="column span-2">third column content spawned as a double column</div> -</div> +</div> <div class="unit on-4 columns"> <div class="column">first column content</div> <div class="column span-3">second column content spawned as a triple column</div> @@ -173,7 +173,7 @@ h3. Make a layout based on 2 columns and a 3 columns below that h3. Make a layout of 2 columns and the left column contain 3 columns <pre><code class="html"> -<div class="unit two-columns"> +<div class="unit on-2 columns"> <div class="column three-columns"> <div class="column">first column content</div> <div class="column">second column content</div> @@ -181,7 +181,7 @@ h3. Make a layout of 2 columns and the left column contain 3 columns </div> <div class="column">second column content</div> </div> -<div class="unit three-columns"> +<div class="unit on-3 columns"> <div class="column">first column content</div> <div class="column">second column content</div> <div class="column">third column content</div> @@ -201,6 +201,21 @@ h3. Make a column fixed and the other elastic <div class="elastic column">second column content</div> <div class="fixed column" style="width:250px;">second column content</div> </div> +</code></pre> + +h3. Elastic height +<pre><code class="html"> +<div class="unit"> + <div class="container" style="height:200px;"> + <div class="unit"> + some text + </div> + <!-- The next unit will occupy the remaining space in the contianer --> + <div class="unit elastic-height"> + some text, check documentation for overflow integration + </div> + </div> +</div> </code></pre> h3. How about i dont know the width of fixed-column @@ -214,26 +229,26 @@ h3. How about i dont know the width of fixed-column <div class="elastic column">second column content</div> <div class="fixed column" style="width:250px;">second column content</div> </div> -</code></pre> - +</code></pre> + h3. How about a 3x3 layout <pre><code class="html"> -<div class="unit columns on-3"> - <div class="column"> - column - </div> - <div class="column"> - column - </div> - <div class="column"> - column - </div> - <div class="column span-2"> - column - </div> - <div class="column"> - column +<div class="unit on-3 columns"> + <div class="column"> + column + </div> + <div class="column"> + column + </div> + <div class="column"> + column + </div> + <div class="column span-2"> + column + </div> + <div class="column"> + column </div> </div> </code></pre> @@ -245,31 +260,77 @@ h3. Make columns of same height <div class="column">first column content</div> <div class="column">second column content</div> </div> -</code></pre> - +</code></pre> + h3. Centering on the vertical axis <pre><code class="html"> <div class="unit columns same-height"> <div class="column" style="height:50px;">first column content</div> - <div class="column"> - <div class="container vertical-center" style=""> - second column content - </div> + <div class="column"> + <div class="container vertical-center" style=""> + second column content + </div> </div> </div> -</code></pre> - +</code></pre> + h3. full-width. This one is cool for inputs <pre><code class="html"> -<div class="unit two-columns same-height"> +<div class="unit on-2 columns same-height"> <div class="column">first column content</div> - <div class="column"> - <input type="text" class="full-width" name="some_name" value="" id="" /> + <div class="column"> + <input type="text" class="full-width" name="some_name" value="" id="" /> </div> </div> +</code></pre> + +h3. Make adaptive layouts. + +Elastic provides a new way to make layouts adaptive on the number of columns per row on layouts, using the new class +adaptive-min-max where min is the minimum number of pixels for a column and max is the oposite. + +<pre><code class="html"> +<div class="unit columns adaptive-200-300 same-height"> + <div class="column">first column content</div> + <div class="column">first column content</div> + <div class="column">first column content</div> + <div class="column">first column content</div> + <div class="column">first column content</div> +</div> </code></pre> + +h2. Layouts + +Elastic provides layout features, (similar idea of CSS3 Layouts), but this is a pure Elastic implementation following the Framework DSL. +This lets layout creator provide ceo friendly content, and change layouts easily. Even though it is accomplished via javascript, but it +lets Elastic do its magic more properly. + +<pre><code class="html"> +<div class="unit position-body">body 1</div> +<div class="unit position-footer">footer 1</div> +<div class="unit position-body">body 2</div> + +<div class="unit on-2 columns same-height"> + <div class="column display body"></div> + <div class="column display footer"></div> +</div> +</code></pre> + +From this html code you will get this after Elastic processes. + +<pre><code class="html"> +<div class="unit on-2 columns same-height"> + <div class="column display body"> + <div class="unit position-body">body 1</div> + <div class="unit position-body">body 2</div> + </div> + <div class="column display footer"> + <div class="unit position-footer">footer 1</div> + </div> +</div> +</code></pre> h2. About Padding and Margin @@ -280,7 +341,7 @@ To overcome this in the framework an special class exists .container h3. separate columns form its container <pre><code class="html"> -<div class="unit two-columns"> +<div class="unit on-2 columns"> <div class="container same-height" style="padding:10px;"> <div class="column">first column content</div> <div class="column">second column content</div> @@ -291,7 +352,7 @@ h3. separate columns form its container h3. Separate columns from each other <pre><code class="html"> -<div class="unit two-columns same-height"> +<div class="unit on-2 columns same-height"> <div class="column"> <div class="container" style="margin-right:5px;"> first column content @@ -329,14 +390,51 @@ h3. Show something on printed version only <div class="unit print-only"> content does get printed but not seen on screen </div> -</code></pre> +</code></pre> +h2. Javascript API + h3. Telling elastic to refresh calculations <pre><code class="html"> -<script type="text/javascript" language="javascript" charset="utf-8"> - // direct call - Elastic.refresh(context); +<script type="text/javascript" language="javascript" charset="utf-8"> + // direct call + Elastic.refresh(context); +</script> +</code></pre> + +h3. Telling elastic to not refresh calculations on resize + +<pre><code class="html"> +<script type="text/javascript" language="javascript" charset="utf-8"> + // direct call + Elastic.configuration.refreshOnResize = false; +</script> +</code></pre> + +h2. Event System + +Elastic now provides an event system, that gets very usefull when creating widgets and some special cases + +<pre><code class="html"> +<script type="text/javascript" language="javascript" charset="utf-8"> + // Do something before elastic initializes + jQuery(document).bind('elastic:beforeInitialize', function(){ /* code here */}); + + // Do something after elastic initializes + jQuery(document).bind('elastic:initialize', function(){ /* code here */}); + + // Do something before elastic does some refresh + jQuery(document).bind('elastic:beforeRefresh', function(){ /* code here */}); + + // Do something after elastic does some refresh + jQuery(document).bind('elastic:refresh', function(){ /* code here */}); + + // Do something before elastic does reset + jQuery(document).bind('elastic:beforeReset', function(){ /* code here */}); + + // Do something after elastic does some reset + jQuery(document).bind('elastic:reset', function(){ /* code here */}); </script> </code></pre> @@ -349,8 +447,14 @@ You are very wellcome to contribute. Just fork the git repository and create a n h2. Contributors -Fernando Trasviña (Lead Developer) trasvina [at] gmail +Fernando Trasviña (Lead Developer) + -trasvina [at] gmail + -@azendal (Twitter) -Sergio de la Garza (Core Member Lead) sergio.delagarza [at] gmail - -Javier Ayala (Website) jav.forza [at] gmail +Sergio de la Garza (Core Member Lead) + -sergio.delagarza [at] gmail + -@sgarza (Twitter) + +Javier Ayala (Website) + -jav.forzza [at] gmail + -@javi_ayala (Twitter) README.textile jquery.js @@ -10,5 +10,8 @@ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr Elastic CSS Framework Released under the MIT, BSD, and GPL Licenses. More information http://elasticss.com + +@author Fernando Trasvi–a (@azendal) +@core team Sergio de la Garza (@sgarza), Javier Ayala (@javi_ayala) */ .unit:after,.container:after,.columns:after,.column:after,.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.unit,.container,.columns,.column,.clearfix{display:block;*zoom:1;*display:inline-block;}.full-height{display:block;}.same-height{display:block;}.elastic-height{height:0;}.horizontal-center{margin:0 auto;}.vertical-center{/* margin:auto 0; */display:block;}.center{/* margin:auto */margin:0 auto;}.column{float:left;}.column.final{display:block;}.column.fixed{width:auto;}.column.elastic{display:block;}.inverted>.column,.inverted>.container>.column{float:right;}.on-2.columns>.column:not(.fixed),.on-2.columns>.container>.column:not(.fixed){width:50%;}.on-3.columns>.column:not(.fixed),.on-3.columns>.container>.column:not(.fixed){width:33.33%;}.on-3.columns>.column.span-2,.on-3.columns>.container>.column.span-2{width:66.66%;}.on-4.columns>.column:not(.fixed),.on-4.columns>.container>.column:not(.fixed){width:25%;}.on-4.columns>.column.span-2,.on-4.columns>.container>.column.span-2{width:50%;}.on-4.columns>.column.span-3,.on-4.columns>.container>.column.span-2{width:75%;} production/elastic.css @@ -5,9 +5,9 @@ Elastic Engine - @author Fernando Trasviña - @core team Sergio de la Garza, Javier Ayala + @author Fernando Trasviña (@azendal) + @core team Sergio de la Garza (@sgarza), Javier Ayala (@javi_ayala) @copyright 2009 Elastic CSS framework @version 2.0 */ -(function ($){var CStyle=function (element,pseudoElement){if(window.getComputedStyle){return window.getComputedStyle(element,pseudoElement);}else{return element.currentStyle;}};var width=function (element){var width=CStyle(element).width;if(width=='auto'){return $(element).width();}else{return parseFloat(width);}};window.Elastic=function Elastic(context){var i,j,k,l,il,jl,kl,ll,econs,econ,econw,econclass,ecols,ecol,ecolclass,eg,egml,egcl,egnl,ecw,escol,rp,ig,efcs,efcsw,eecs,eecsw,eecw,ecs,ecsw,ec,ecclass,adaptive,ecolminw,ecolmaxw,egreg=/(^|\s+)on\-(\d+)(\s+|$)/,esreg=/(^|\s+)span\-(\d+)(\s+|$)/,eareg=/(^|\s+)adaptive\-(\d+)\-(\d+)(\s+|$)/;eg=[];egcl=egnl=0;econs=$.find('.columns',context);for(i=0,il=econs.length;i<il;i++){econ=econs[i];econclass=econ.className;if(econclass.indexOf('on-')>-1&&egreg.test(econclass)){egml=Number(RegExp.$2);}else{egml=$.find('>.column,>.container>.column',econ).length;}econ=$.find('>.container',econ)[0]||econ;econw=width(econ);ecw=Math.round(econw/egml);if(econclass.indexOf('adaptive-')>-1&&eareg.test(econclass)){ecolminw=Number(RegExp.$2);ecolmaxw=Number(RegExp.$3);if(ecw>ecolmaxw){while(ecw>ecolmaxw){egml=egml+1;ecw=Math.round(econw/egml);}}else if(ecw<ecolminw){while(ecw<ecolminw){egml=egml-1;ecw=Math.round(econw/egml);}}}ecols=$.find('>.column',econ);for(j=0,jl=ecols.length;j<jl;j++){efcs=[],eecs=[],ecs=[];rp=ig=efcsw=ecsw=0;ecol=ecols[j];ecolclass=ecol.className;escol=1;if(ecolclass.indexOf('span-')>-1&&esreg.test(ecolclass)){escol=Number(RegExp.$2);}ecol.escol=((escol<=egml)?escol:1);egnl+=escol;if(egnl==egml||j==(jl-1)||ecolclass.indexOf('final')>-1){eg.push(ecol);egcl=0;rp=1;}else if(egnl<egml){eg.push(ecol);egcl=egnl;}else if(egnl>egml){egcl=escol;rp=1;ig=1;}if(rp){for(k=0,kl=eg.length;k<kl;k++){ec=eg[k];ecclass=ec.className;if(ecclass.indexOf('fixed')>-1){efcs.push(ec);efcsw+=width(ec);}else if(ecclass.indexOf('elastic')>-1){eecs.push(ec);}else{ecs.push(ec);ec.style.width=(ecw*ec.escol)+'px';ecsw+=width(ec);}}ll=eecs.length;if(ll>0){eecw=Math.round((width(econ)-(ecsw+efcsw))/ll);eecsw=eecw*ll;if(ll>1){for(l=0;l<ll;l++){eecs[l].style.width=eecw+'px';}}eecs[ll-1].style.width=(width(econ)-(ecsw+efcsw+(eecsw-eecw)))+'px';}else if(ecol.escol==egml&&efcs.length==0){ecol.style.width=width(econ)+'px';}else if(ecs.length>0&&efcs.length==0&&egnl==egml){ecs[ecs.length-1].style.width=(width(econ)-((ecsw-width(ecs[ecs.length-1]))+efcsw))+'px';}else if(egnl<egml&&ecolclass.indexOf('final')>-1){ecol.style['margin'+((econclass.indexOf('inverted')>-1)?'Left':'Right')]=(width(econ)-ecsw-efcsw)+'px';}eg=[];egnl=0;}if(ig){eg=[ecol];egnl=escol;}}}for(i in Elastic.helpers){if(Elastic.helpers.hasOwnProperty(i)){Elastic.helpers[i](context);}}};var Elastic=window.Elastic;Elastic.version='2.0';Elastic.reset=function Elastic_reset(context){var doc=$(document);doc.trigger('elastic:beforeReset');var i,w,wl,h,hl,p,pl,m,ml;h=$.find('.same-height>*,.full-height,.elastic-height',context);for(i=0,hl=h.length;i<hl;i++){h[i].style.height='';}p=$.find('.vertical-center,.center,.bottom',context);for(i=0,pl=p.length;i<pl;i++){p[i].parentNode.style.paddingTop='';}w=$.find('.column:not(.fixed),.full-width',context);for(i=0,wl=w.length;i<wl;i++){w[i].style.width='';}m=$.find('.column.last',context);for(i=0,ml=m.length;i<ml;i++){m[i].style.marginLeft='';m[i].style.marginRight='';}doc.trigger('elastic:reset');};Elastic.refresh=function Elastic_refresh(context){var doc=$(document);doc.trigger('elastic:beforeRefresh');Elastic.reset(context);Elastic(context);doc.trigger('elastic:refresh');};Elastic.configuration={refreshOnResize:true};Elastic.helpers={'full-width':function Elastic_helper_fullWidth(context){var i,$el;var els=$.find('.full-width',context);var elsl=els.length;for(i=0;i<elsl;i++){$el=$(els[i]);$el.width($el.parent().width()-($el.outerWidth(true)-$el.width()));}},'same-height':function Elastic_helper_sameHeight(context){$('.same-height',context).each(function (){var columns=$('>*',this);var maxHeight=0;columns.each(function (){var currentHeight=$(this).outerHeight(true);maxHeight=(maxHeight>currentHeight)?maxHeight:currentHeight;}).each(function (){$(this).css('height',maxHeight);});});},'full-height':function Elastic_helper_fullHeight(context){$('.full-height',context).each(function (){var _this=$(this);_this.css('height',$(this.parentNode).height()-(_this.outerHeight(true)-_this.height()));});},'elastic-height':function Elastic_helper_elasticHeight(context){$('.elastic-height',context).each(function (){var _this=$(this);var h=0;$('>*:not(.elastic-height)',this.parentNode).each(function (){h+=$(this).outerHeight(true);});_this.css('height',Math.round(_this.parent().height()-h));Elastic.refresh(this);});},'center':function Elastic_helper_center(context){$('.vertical-center,.center',context).each(function (){var parentNode=$(this.parentNode);var paddingTop=Math.round((parentNode.height()-$(this).outerHeight(true))/2);parentNode.css({paddingTop:paddingTop+'px',height:(parentNode.css('height'))?(parentNode.outerHeight()-paddingTop):''});});},'bottom':function Elastic_helper_bottom(context){$('.bottom',context).each(function (){var parentNode=$(this.parentNode);var paddingTop=Math.round(parentNode.height()-$(this).outerHeight(true));parentNode.css({paddingTop:paddingTop+'px',height:(parentNode.css('height'))?(parentNode.outerHeight()-paddingTop):''});});}};/*ElasticLayouts*/$(document).bind('elastic:beforeInitialize',function (){var r=/(^|\s+)display\s+([\w\_\-\d]+)(\s+|$)/;$('.display').each(function Elastic_layout(){r.test(this.className);var c='.position-'+RegExp.$2;$(c).removeClass(c).appendTo(this);});});})(jQuery);jQuery(window).bind('load',function (){var doc=jQuery(document);var iw=document.body.clientWidth;doc.trigger('elastic:beforeInitialize');Elastic();if(iw!=document.body.clientWidth){Elastic.refresh();}jQuery(window).bind('resize',function Elastic_resizeHandler(){if(Elastic.configuration.refreshOnResize){Elastic.refresh();}});doc.bind('elastic',Elastic.refresh);doc.trigger('elastic:initialize');}); +(function($){var CStyle=function(element,pseudoElement){if(window.getComputedStyle){return window.getComputedStyle(element,pseudoElement)}else{return element.currentStyle}};var width=function(element){var width=CStyle(element).width;if(width=='auto'){return $(element).width()}else{return parseFloat(width)}};window.Elastic=function Elastic(context){var r,ra,i,j,k,l,il,jl,kl,ll,econs,econ,econw,econclass,ecols,ecol,ecolclass,eg,egml,egcl,egnl,ecrw,ecw,escol,rp,ig,efcs,efcsw,eecs,eecsw,eecw,eecrw,ecs,ecsw,ec,ecclass,eecfw,ecolminw,ecolmaxw,egreg=/(^|\s+)on\-(\d+)(\s+|$)/,esreg=/(^|\s+)span\-(\d+)(\s+|$)/,eareg=/(^|\s+)adaptive\-(\d+)\-(\d+)(\s+|$)/;eg=[];egcl=egnl=0;econs=$.find('.columns',context);for(i=0,il=econs.length;i<il;i++){econ=econs[i];econclass=econ.className;if(econclass.indexOf('on-')>-1&&egreg.test(econclass)){egml=Number(RegExp.$2)}else{egml=$.find('> .column, > .container > .column',econ).length}econ=$.find('> .container',econ)[0]||econ;econw=width(econ);ecrw=econw/egml;ecw=Math.round(ecrw);if(econclass.indexOf('adaptive-')>-1&&eareg.test(econclass)){ecolminw=Number(RegExp.$2);ecolmaxw=Number(RegExp.$3);if(ecw>ecolmaxw){while(ecw>ecolmaxw){egml=egml+1;ecrw=econw/egml;ecw=Math.round(ecrw)}}else if(ecw<ecolminw){while(ecw<ecolminw){egml=egml-1;ecrw=econw/egml;ecw=Math.round(ecrw)}}}ecols=$.find('> .column',econ);for(j=0,jl=ecols.length;j<jl;j++){efcs=[];eecs=[];ecs=[];rp=ig=efcsw=ecsw=0;ecol=ecols[j];ecolclass=ecol.className;escol=1;if(ecolclass.indexOf('span-')>-1&&esreg.test(ecolclass)){escol=Number(RegExp.$2)}ecol.escol=escol=((escol<=egml)?escol:egml);egnl+=escol;if(egnl==egml||j==(jl-1)||ecolclass.indexOf('final')>-1){eg.push(ecol);egcl=0;rp=1}else if(egnl<egml){eg.push(ecol);egcl=egnl}else if(egnl>egml){egcl=escol;rp=1;ig=1}if(rp){for(k=0,kl=eg.length;k<kl;k++){ec=eg[k];ecclass=ec.className;if(ecclass.indexOf('fixed')>-1){efcs.push(ec);efcsw+=width(ec)}else if(ecclass.indexOf('elastic')>-1){eecs.push(ec)}else{ecs.push(ec);if(ec==eg[kl-1]){ec.style.width=Math.round(ecrw*ec.escol)+'px'}else{ec.style.width=Math.round(ecw*ec.escol)+'px'}ecsw=ecsw+width(ec)}}ll=eecs.length;if(ll>0){eecfw=econw-(ecsw+efcsw);eecrw=eecfw/ll;eecw=Math.round(eecrw);eecsw=eecw*ll;for(l=0;l<ll;l++){eecs[l].style.width=eecw+'px'}if(eecsw>eecfw){ra=eecsw-eecfw+1;for(r=1;r<ra;r++){eecs[eecs.length-r].style.width=(eecw-1)+'px'}}else if(eecsw<eecfw){ra=eecfw-eecsw+1;for(r=1;r<ra;r++){eecs[eecs.length-r].style.width=(eecw+1)+'px'}}else{eecs[ll-1].style.width=(econw-(ecsw+efcsw+(eecsw-eecw)))+'px'}}else if(ecol.escol==egml&&efcs.length===0){ecol.style.width=econw+'px'}else if(ecs.length>0&&efcs.length===0&&egnl==egml){if(ecsw>econw){ra=ecsw-econw+1;for(r=1;r<ra;r++){ecs[ecs.length-r].style.width=((ecw-1)*ecs[ecs.length-r].escol)+'px'}}else if(ecsw<econw){ra=econw-ecsw+1;for(r=1;r<ra;r++){ecs[ecs.length-r].style.width=((ecw+1)*ecs[ecs.length-r].escol)+'px'}}else{ec.style.width=(econw-(ecsw-width(ec)))+'px'}}else if(egnl<egml&&ecolclass.indexOf('final')>-1){ecol.style['margin'+((econclass.indexOf('inverted')>-1)?'Left':'Right')]=(econw-ecsw-efcsw)+'px'}eg=[];egnl=0}if(ig){eg=[ecol];egnl=escol}}}for(i in Elastic.helpers){if(Elastic.helpers.hasOwnProperty(i)){Elastic.helpers[i](context)}}};var Elastic=window.Elastic;Elastic.version='2.0';Elastic.reset=function Elastic_reset(context){var doc=$(document);doc.trigger('elastic:beforeReset');var i,w,wl,h,hl,p,pl,m,ml;h=$.find('.same-height > *, .full-height, .elastic-height',context);for(i=0,hl=h.length;i<hl;i++){h[i].style.height=''}p=$.find('.vertical-center, .center, .bottom',context);for(i=0,pl=p.length;i<pl;i++){p[i].parentNode.style.paddingTop=''}w=$.find('.column:not(.fixed), .full-width',context);for(i=0,wl=w.length;i<wl;i++){w[i].style.width=''}m=$.find('.column.final',context);for(i=0,ml=m.length;i<ml;i++){m[i].style.marginLeft='';m[i].style.marginRight=''}doc.trigger('elastic:reset')};Elastic.refresh=function Elastic_refresh(context){var doc=$(document);doc.trigger('elastic:beforeRefresh');Elastic.reset(context);Elastic(context);doc.trigger('elastic:refresh')};Elastic.configuration={refreshOnResize:true};Elastic.helpers={'full-width':function Elastic_helper_fullWidth(context){var i,$el;var els=$.find('.full-width',context);var elsl=els.length;for(i=0;i<elsl;i++){$el=$(els[i]);$el.width($el.parent().width()-($el.outerWidth(true)-$el.width()))}},'same-height':function Elastic_helper_sameHeight(context){$('.same-height',context).each(function(){var columns=$('> *',this);var maxHeight=0;columns.each(function(){var currentHeight=$(this).outerHeight(true);maxHeight=(maxHeight>currentHeight)?maxHeight:currentHeight}).each(function(){$(this).css('height',maxHeight)})})},'full-height':function Elastic_helper_fullHeight(context){$('.full-height',context).each(function(){var _this=$(this);_this.css('height',$(this.parentNode).height()-(_this.outerHeight(true)-_this.height()))})},'elastic-height':function Elastic_helper_elasticHeight(context){$('.elastic-height',context).each(function(){var _this=$(this);var h=0;$('> *:not(.elastic-height)',this.parentNode).each(function(){h+=$(this).outerHeight(true)});_this.css('height',Math.round(_this.parent().height()-h));Elastic.refresh(this)})},'center':function Elastic_helper_center(context){$('.vertical-center, .center',context).each(function(){var parentNode=$(this.parentNode);var paddingTop=Math.round((parentNode.height()-$(this).outerHeight(true))/2);parentNode.css({paddingTop:paddingTop+'px',height:(parentNode.css('height'))?(parentNode.outerHeight()-paddingTop):''})})},'bottom':function Elastic_helper_bottom(context){$('.bottom',context).each(function(){var parentNode=$(this.parentNode);var paddingTop=Math.round(parentNode.height()-$(this).outerHeight(true));parentNode.css({paddingTop:paddingTop+'px',height:(parentNode.css('height'))?(parentNode.outerHeight()-paddingTop):''})})}};$(document).bind('elastic:beforeInitialize',function(){var r=/(^|\s+)display\s+([\w\_\-\d]+)(\s+|$)/;$('.display').each(function Elastic_layout(){r.test(this.className);var c='.position-'+RegExp.$2;$(c).removeClass(c).appendTo(this)})})})(jQuery);jQuery(window).bind('load',function(){var doc=jQuery(document);var iw=document.body.clientWidth;doc.trigger('elastic:beforeInitialize');Elastic();if(iw!=document.body.clientWidth){Elastic.refresh()}jQuery(window).bind('resize',function Elastic_resizeHandler(){if(Elastic.configuration.refreshOnResize){Elastic.refresh()}});doc.bind('elastic',Elastic.refresh);doc.trigger('elastic:initialize')}); production/elastic.js doc/changes.txt doc/demo/cristina_zorrilla/Screenshot.png doc/demo/cristina_zorrilla/contact.html doc/demo/cristina_zorrilla/design_gimp_slice.png doc/demo/cristina_zorrilla/elastic doc/demo/cristina_zorrilla/home.html doc/demo/cristina_zorrilla/images/blue_arrow.jpg doc/demo/cristina_zorrilla/images/dark_blue_circle.jpg doc/demo/cristina_zorrilla/images/image_contact.jpg doc/demo/cristina_zorrilla/images/image_exhibitions.jpg doc/demo/cristina_zorrilla/images/image_home.jpg doc/demo/cristina_zorrilla/images/image_main.jpg doc/demo/cristina_zorrilla/images/image_workshops.jpg doc/demo/cristina_zorrilla/images/light_blue_circle.jpg doc/demo/cristina_zorrilla/images/line_background.jpg doc/demo/cristina_zorrilla/images/logo.jpg doc/demo/cristina_zorrilla/images/logo_main.jpg doc/demo/cristina_zorrilla/images/mailto_button.jpg doc/demo/cristina_zorrilla/images/navigation_contact.jpg doc/demo/cristina_zorrilla/images/navigation_contact_current.jpg doc/demo/cristina_zorrilla/images/navigation_exhibitions.jpg doc/demo/cristina_zorrilla/images/navigation_exhibitions_current.jpg doc/demo/cristina_zorrilla/images/navigation_home.jpg doc/demo/cristina_zorrilla/images/navigation_home_current.jpg doc/demo/cristina_zorrilla/images/navigation_workshops.jpg doc/demo/cristina_zorrilla/images/navigation_workshops_current.jpg doc/demo/cristina_zorrilla/images/page_background.jpg doc/demo/cristina_zorrilla/images/slider_left_arrow.jpg doc/demo/cristina_zorrilla/images/slider_right_arrow.jpg doc/demo/cristina_zorrilla/index.html doc/demo/cristina_zorrilla/inicio.xcf doc/demo/cristina_zorrilla/pages.xcf doc/demo/cristina_zorrilla/skin.css doc/demo/cristina_zorrilla/skin.js doc/demo/cristina_zorrilla/uploads/bull.jpg doc/demo/cristina_zorrilla/uploads/cheetah.jpg doc/demo/cristina_zorrilla/uploads/hippo.jpg doc/demo/cristina_zorrilla/uploads/hippo_med.jpg doc/demo/cristina_zorrilla/uploads/mandril.jpg doc/demo/cristina_zorrilla/uploads/tiger.jpg doc/demo/elastic_vs_yui/elastic_vs_yui.html doc/demo/elastic_vs_yui/elastic_vs_yui_content.html doc/nesting.txt doc/test/test-columns.html doc/test/test_adaptive.html doc/test/test_adaptive_final.html doc/test/test_layouts.html lib/css/base.css lib/css/class.css lib/css/fonts.css lib/css/grid.css lib/css/print.css lib/css/reset.css lib/js/elastic.js lib/js/jquery.ui.js a48b1f96e4364e224f86f35b068746dbd6790d0d fernando trasvina@gmail.com http://github.com/azendal/elastic/commit/7ac462c5d08870d40c65f1a1600722c05811a3e4 7ac462c5d08870d40c65f1a1600722c05811a3e4 2009-07-08T15:17:27-07:00 2009-07-08T15:17:27-07:00 Elastic 2.0 final 985b1d64362809ed4ffa0af9321db26b08f2da1e fernando trasvina@gmail.com