{% for element in site.elements_partial %}
{% include element-partial.html %}
diff --git a/_posts/examples/2010-12-19-elements-partial-horizontal.html b/_posts/examples/2010-12-19-elements-partial-horizontal.html
new file mode 100644
index 0000000..20844cc
--- /dev/null
+++ b/_posts/examples/2010-12-19-elements-partial-horizontal.html
@@ -0,0 +1,16 @@
+---
+title: Elements Partial Horizontal
+layout: elements
+category: examples
+body_class: horizontal
+layout_options: cellsByColumn
+---
+
+
+
+ {% for element in site.elements_partial %}
+ {% include element-partial.html %}
+ {% endfor %}
+
+
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..62ab84e
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,204 @@
+html {
+ height: 100%;
+}
+
+body {
+ padding: 20px;
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ font-size: 13px;
+ line-height: 1.5em;
+ background: #1D1D1D;
+ color: #FFF;
+ height: 100%;
+}
+
+a {
+ color: #FB4;
+ text-decoration: none;
+}
+
+.wrap {
+ background: transparent;
+ border: 4px solid #FFF;
+ padding: 20px;
+}
+
+.element {
+ width: 110px;
+ height: 110px;
+ margin: 5px;
+ float: left;
+ background: white;
+ overflow: hidden;
+ position: relative;
+ color: #222;
+ border-top-right-radius: 1.2em;
+}
+
+.xray .element {
+ border-width: 5px;
+ border-style: solid;
+ width: 100px;
+ height: 100px;
+ background-color: hsla( 0, 0%, 14%, 0.8 ) !important;
+}
+
+.element.alkali { background-color: hsl( 0, 100%, 50%); }
+.element.alkaline-earth { background-color: hsl( 36, 100%, 50%); }
+.element.lanthanoid { background-color: hsl( 72, 100%, 50%); }
+.element.actinoid { background-color: hsl( 108, 100%, 50%); }
+.element.transition { background-color: hsl( 144, 100%, 50%); }
+.element.post-transition { background-color: hsl( 180, 100%, 50%); }
+.element.metalloid { background-color: hsl( 216, 100%, 50%); }
+.element.other.nonmetal { background-color: hsl( 252, 100%, 50%); }
+.element.halogen { background-color: hsl( 288, 100%, 50%); }
+.element.noble-gas { background-color: hsl( 324, 100%, 50%); }
+
+
+.xray .element.alkali { color: hsl( 0, 100%, 50%); background-color: inherit; }
+.xray .element.alkaline-earth { color: hsl( 36, 100%, 50%); background-color: inherit; }
+.xray .element.lanthanoid { color: hsl( 72, 100%, 50%); background-color: inherit; }
+.xray .element.actinoid { color: hsl( 108, 100%, 50%); background-color: inherit; }
+.xray .element.transition { color: hsl( 144, 100%, 50%); background-color: inherit; }
+.xray .element.post-transition { color: hsl( 180, 100%, 50%); background-color: inherit; }
+.xray .element.metalloid { color: hsl( 216, 100%, 50%); background-color: inherit; }
+.xray .element.other.nonmetal { color: hsl( 252, 100%, 50%); background-color: inherit; }
+.xray .element.halogen { color: hsl( 288, 100%, 50%); background-color: inherit; }
+.xray .element.noble-gas { color: hsl( 324, 100%, 50%); background-color: inherit; }
+
+
+.element * {
+ position: absolute;
+ margin: 0;
+}
+
+.element .symbol {
+ left: 0.2em;
+ top: 0.4em;
+ font-size: 3.8em;
+ line-height: 1.0em;
+ color: #FFF;
+}
+.element.large .symbol {
+ font-size: 4.5em;
+}
+
+.xray .element .symbol {
+ left: 0.1em;
+ top: 0.3em;
+ color: inherit;
+}
+.xray .element.large .symbol {
+ font-size: 4.2em;
+}
+
+.xray .element.fake {
+ background-color: hsla( 0, 0%, 25%, 0.8 ) !important;
+}
+
+.element.fake .symbol {
+ color: #000;
+}
+
+.xray .element.fake .symbol {
+ color: inherit;
+}
+
+
+.element .name {
+ left: 0.5em;
+ bottom: 1.6em;
+ font-size: 1.05em;
+}
+
+.element .weight {
+ font-size: 0.9em;
+ left: 0.5em;
+ bottom: 0.5em;
+}
+
+.element .number {
+ font-size: 1.25em;
+ font-weight: bold;
+ color: hsla(0,0%,0%,.5);
+ right: 0.5em;
+ top: 0.5em;
+}
+.xray .element .number { color: inherit; }
+
+.variable-sizes .element.width2 { width: 230px; }
+.variable-sizes.xray .element.width2 { width: 220px; }
+
+.variable-sizes .element.height2 { height: 230px; }
+.variable-sizes.xray .element.height2 { height: 220px; }
+
+.variable-sizes .element.width2.height2 {
+ font-size: 2.0em;
+}
+
+.element.large,
+.variable-sizes .element.large,
+.variable-sizes .element.large.width2.height2 {
+ font-size: 3.0em;
+ width: 350px;
+ height: 350px;
+ z-index: 100;
+}
+.xray .element.large,
+.xray .variable-sizes .element.large,
+.xray .variable-sizes .element.large.width2,
+.xray .variable-sizes .element.large.height2 {
+ width: 340px;
+ height: 340px;
+}
+
+.wrap.molequul,
+.molequul .element {
+ -webkit-transition-duration: 1.0s;
+ -moz-transition-duration: 1.0s;
+/* -o-transition-duration: 1.0s;*/
+ transition-duration: 1.0s;
+
+}
+
+.wrap.molequul {
+ -webkit-transition-property: height, width;
+ -moz-transition-property: height, width;
+/* -o-transition-property: height, width;*/
+ transition-property: height, width;
+}
+
+.molequul .element {
+ -webkit-transition-property: -webkit-transform, opacity;
+ -moz-transition-property: -moz-transform, opacity;
+/* -o-transition-property: -o-transform, opacity;*/
+ transition-property: transform, opacity;
+}
+
+
+#filters li li,
+.options li {
+ display: inline-block;
+ margin-right: 0.5em;
+ list-style: none;
+}
+
+.molequul-hidden {
+ pointer-events: none;
+}
+
+/**** Horizontal ****/
+
+.horizontal #options {
+ width: 300px;
+ position: absolute;
+ left: 20px;
+ top: 20px;
+}
+
+.horizontal .wrap {
+ height: 80%;
+ position: relative;
+ margin-left: 340px;
+ top: 20px;
+}
\ No newline at end of file
diff --git a/src/jquery.molequul.js b/src/jquery.molequul.js
index a75cd20..dba4319 100755
--- a/src/jquery.molequul.js
+++ b/src/jquery.molequul.js
@@ -461,6 +461,22 @@
return this;
+ },
+
+ _getRows : function( namespace ) {
+ this[ namespace ].rowHeight = ( this.options[ namespace ] && this.options[ namespace ].rowHeight ) || this.$allAtoms.outerHeight(true);
+
+ // if colW == 0, back out before divide by zero
+ if ( !this[ namespace ].rowHeight ) {
+ window.console && console.error('Row height calculated to be zero. Stopping Molequul plugin before divide by zero. Check that the width of first child inside the molequul container is not zero.');
+ return this;
+ }
+ this.height = this.element.height();
+ this[ namespace ].rows = Math.floor( this.height / this[ namespace ].rowHeight ) ;
+ this[ namespace ].rows = Math.max( this[ namespace ].rows, 1 );
+
+ return this;
+
}
};
@@ -653,6 +669,46 @@
}
});
+ $.extend( $.Molequul.prototype, {
+
+ _cellsByColumnReset : function() {
+ this.cellsByColumn = {};
+ this._getRows('cellsByColumn');
+ this.cellsByColumn.columnWidth = this.options.cellsByColumn.columnWidth || this.$allAtoms.outerHeight(true);
+ return this;
+ },
+
+ _cellsByColumnLayout : function( $elems ) {
+ var instance = this,
+ rows = this.cellsByColumn.rows;
+ this.cellsByColumn.atomsLen = $elems.length;
+ $elems.each( function( i ){
+ var $this = $(this),
+ x = ( ~~( i / rows ) + 0.5 ) * instance.cellsByColumn.columnWidth
+ - $this.outerWidth(true) / 2 + instance.posLeft,
+ y = ( i % rows + 0.5 ) * instance.cellsByColumn.rowHeight
+ - $this.outerHeight(true) / 2 + instance.posTop;
+ instance._pushPosition( $this, x, y );
+ });
+ return this;
+ },
+
+ _cellsByColumnGetContainerSize : function() {
+ return { width : Math.ceil( this.cellsByColumn.atomsLen / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth + this.posLeft };
+ },
+
+ _cellsByColumnResize : function() {
+ var prevRows = this.cellsByColumn.rows;
+ this._getRows('cellsByColumn');
+
+ // if column count has changed, do a new column cound
+ if ( this.cellsByColumn.rows !== prevRows ) {
+ this.reLayout();
+ }
+ return this;
+ }
+ });
+