Skip to content

Fixed pivot's behavior #27

Closed
wants to merge 1 commit into from
View
292 index.html
@@ -1,147 +1,147 @@
-<!DOCTYPE html>
-<html>
- <head>
- <link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
- <style>
- body { width: 900px; margin: 0 auto; }
- </style>
- <script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="/scripts/jquery.metro.js"></script>
- <script type="text/javascript" src="/scripts/tilt.js"></script>
- </head>
- <body>
- <a href="http://github.com/Code52/metro.css/">
- <img alt="Fork me on GitHub" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" style="position: absolute; top: 0; right: 0; border: 0;">
- </a>
-
- <h1 class="accent">metro.css</h1>
- <h2 class="lime">stylesheets and then some</h2>
- <div class="metro-pivot">
- <div class="pivot-item">
- <h3>about</h3>
- <p>The <a href="http://code52.org">Code52</a> gang are putting together some stylesheets and resources for people looking to get more familiar with Metro.</p>
-
- <p>Much like the Twitter Bootstrap project (which was one of the inspirations for this project), the site uses LESS to build the stylesheets on-the-fly. So if you wanted to test this locally, you'd need something like <a href="http://github.com/mojombo/jekyll/">Jekyll</a> or our own <a href="http://github.com/Code52/Pretzel/">Pretzel</a> to serve up the content (as the generation is done using Javascript and you will likely encounter file:// permission issues).
-
- <p>While you can just go and grab the code from <a href="http://github.com/Code52/metro.css/">GitHub</a>, feel free to click around the site and see more for yourself.
- </div>
-
- <div class="pivot-item">
- <h3>demos</h3>
- <ul class="metro-list">
- <li class="accent"><a href="/demos/fonts/">A font for all occasions</a></li>
- <li class="accent"><a href="/demos/fonts/">jqMetro - a pivot control</a></li>
- <li class="accent"><a href="/demos/blog/">Applying Metro to a blog</a></li>
- <li class="accent"><a href="/demos/slides/">Adding metro to impress.js (WIP)</a></li>
- </ul>
- </div>
-
- <div class="pivot-item">
- <h3>columns</h3>
- <div class="row">
- <div class="span12">
- Level 1 of column
- <div class="row">
- <div class="span6">Level 2</div>
- <div class="span6">Level 2</div>
- </div>
- <div class="row">
- <div class="span4">Level 3</div>
- <div class="span4">Level 3</div>
- <div class="span4">Level 3</div>
- </div>
- <div class="row">
- <div class="span4">Level 4</div>
- <div class="span8">Level 4</div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="pivot-item">
- <h3>controls</h3>
- <h4>progress bars</h4>
- <div class="row">
- <div class="span4">
- <div class="progress">
- <div class="bar" style="width: 60%;"></div>
- </div>
- </div>
- </div>
- <h4>active progress bars</h4>
- <div class="row">
- <div class="span4">
- <div class="progress progress-striped active">
- <div class="bar" style="width: 40%;"></div>
- </div>
- </div>
- </div>
-
- <h4>tiles</h3>
- <div class="tiles" style="width:800px;">
- <div class="tilerow">
- <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
- <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
- <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
- <div class="tile two-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
- </div>
-
- <div class="tilerow">
- <div class="tile two-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
- <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
- <div class="tile two-v fifthcol limebg"><a href="#"><h2>test</h2></a></div>
- </div>
- <div class="tilerow">
- <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
- <div class="tile two-v fourthcol orangebg"><a href="#"><h2>test</h2></a></div>
- </div>
- <div class="tilerow">
- <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
- <div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
- </div>
- <div class="tilerow">
- <div class="tile one purplebg"><p><h2>test</h2></p></div>
- <div class="tile one purplebg"><p><h2>test</h2></p></div>
- <div class="tile one purplebg"><p><h2>test</h2></p></div>
- <div class="tile one purplebg"><p><h2>test</h2></p></div>
- <div class="tile one purplebg"><p><h2>test</h2></p></div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script>
- var defaults = {
- animationDuration: 350,
- headerOpacity: 0.25,
- fixedHeaders: false,
- headerSelector: function (item) { return item.children("h3").first(); },
- itemSelector: function (item) { return item.children(".pivot-item"); },
- headerItemTemplate: function () { return $("<span class='header' />"); },
- pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
- itemsTemplate: function () { return $("<div class='items' />"); },
- headersTemplate: function () { return $("<div class='headers' />"); },
- controlInitialized: undefined,
- selectedItemChanged: undefined
- };
-
- $(function () {
- $("div.metro-pivot").metroPivot(defaults);
-
-
- $(".tile").each(addTileTilt);
-
- });
-
-
-
- </script>
- </body>
+<!DOCTYPE html>
@shiftkey
Code 52 member
shiftkey added a note May 29, 2012

The line endings seem to be different now.

Is it just the

@dkarbayev
dkarbayev added a note May 29, 2012
@shiftkey
Code 52 member
shiftkey added a note May 29, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+<html>
+ <head>
+ <link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
+ <style>
+ body { width: 900px; margin: 0 auto; }
+ </style>
+ <script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
+ <script type="text/javascript" src="/scripts/jquery.metro.js"></script>
+ <script type="text/javascript" src="/scripts/tilt.js"></script>
+ </head>
+ <body>
+ <a href="http://github.com/Code52/metro.css/">
+ <img alt="Fork me on GitHub" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" style="position: absolute; top: 0; right: 0; border: 0;">
+ </a>
+
+ <h1 class="accent">metro.css</h1>
+ <h2 class="lime">stylesheets and then some</h2>
+ <div class="metro-pivot">
+ <div class="pivot-item">
+ <h3>about</h3>
+ <p>The <a href="http://code52.org">Code52</a> gang are putting together some stylesheets and resources for people looking to get more familiar with Metro.</p>
+
+ <p>Much like the Twitter Bootstrap project (which was one of the inspirations for this project), the site uses LESS to build the stylesheets on-the-fly. So if you wanted to test this locally, you'd need something like <a href="http://github.com/mojombo/jekyll/">Jekyll</a> or our own <a href="http://github.com/Code52/Pretzel/">Pretzel</a> to serve up the content (as the generation is done using Javascript and you will likely encounter file:// permission issues).
+
+ <p>While you can just go and grab the code from <a href="http://github.com/Code52/metro.css/">GitHub</a>, feel free to click around the site and see more for yourself.
+ </div>
+
+ <div class="pivot-item">
+ <h3>demos</h3>
+ <ul class="metro-list">
+ <li class="accent"><a href="/demos/fonts/">A font for all occasions</a></li>
+ <li class="accent"><a href="/demos/fonts/">jqMetro - a pivot control</a></li>
+ <li class="accent"><a href="/demos/blog/">Applying Metro to a blog</a></li>
+ <li class="accent"><a href="/demos/slides/">Adding metro to impress.js (WIP)</a></li>
+ </ul>
+ </div>
+
+ <div class="pivot-item">
+ <h3>columns</h3>
+ <div class="row">
+ <div class="span12">
+ Level 1 of column
+ <div class="row">
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
+ </div>
+ <div class="row">
+ <div class="span4">Level 3</div>
+ <div class="span4">Level 3</div>
+ <div class="span4">Level 3</div>
+ </div>
+ <div class="row">
+ <div class="span4">Level 4</div>
+ <div class="span8">Level 4</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="pivot-item">
+ <h3>controls</h3>
+ <h4>progress bars</h4>
+ <div class="row">
+ <div class="span4">
+ <div class="progress">
+ <div class="bar" style="width: 60%;"></div>
+ </div>
+ </div>
+ </div>
+ <h4>active progress bars</h4>
+ <div class="row">
+ <div class="span4">
+ <div class="progress progress-striped active">
+ <div class="bar" style="width: 40%;"></div>
+ </div>
+ </div>
+ </div>
+
+ <h4>tiles</h3>
+ <div class="tiles" style="width:800px;">
+ <div class="tilerow">
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
+ <div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
+ <div class="tile two-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
+ </div>
+
+ <div class="tilerow">
+ <div class="tile two-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
+ <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile two-v fifthcol limebg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile two-v fourthcol orangebg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
+ <div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
+ </div>
+ <div class="tilerow">
+ <div class="tile one purplebg"><p><h2>test</h2></p></div>
+ <div class="tile one purplebg"><p><h2>test</h2></p></div>
+ <div class="tile one purplebg"><p><h2>test</h2></p></div>
+ <div class="tile one purplebg"><p><h2>test</h2></p></div>
+ <div class="tile one purplebg"><p><h2>test</h2></p></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <script>
+ var defaults = {
+ animationDuration: 350,
+ headerOpacity: 0.25,
+ fixedHeaders: false,
+ headerSelector: function (item) { return item.children("h3").first(); },
+ itemSelector: function (item) { return item.children(".pivot-item"); },
+ headerItemTemplate: function () { return $("<span class='header' />"); },
+ pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
+ itemsTemplate: function () { return $("<div class='items' />"); },
+ headersTemplate: function () { return $("<div class='headers' />"); },
+ controlInitialized: undefined,
+ selectedItemChanged: undefined
+ };
+
+ $(function () {
+ $("div.metro-pivot").metroPivot(defaults);
+
+
+ $(".tile").each(addTileTilt);
+
+ });
+
+
+
+ </script>
+ </body>
</html>
View
2 less/pivot.less
@@ -19,5 +19,5 @@ metro-pivot .headers {
.metro-pivot .headers { white-space: nowrap; display: block; clear: both; }
.metro-pivot .pivot-item h3, .metro-pivot .headers .header { #headingstyles; font-size: @h2fontSize; display: inline-block; vertical-align: top; padding: 0; cursor: pointer; margin-right:24px; }
.metro-pivot .headers .header.current { }
-.metro-pivot .items { position: relative; }
+.metro-pivot .items { position: relative; overflow: hidden; }
.metro-pivot .items .pivotItem { display: block; white-space: normal; text-align: justify; width: 100%; }
View
5 scripts/jquery.metro.js
@@ -118,7 +118,8 @@
},
setCurrentItem: function(item, index){
var pivot = this;
-
+ var currentHeight = pivot.items.height();
+ pivot.items.height(currentHeight);
// hide current item immediately
pivot.items.children(".pivotItem.current").hide().removeClass("current");
@@ -128,7 +129,7 @@
item.css({ marginLeft: item.outerWidth() }).show().addClass("current");
// animate it to left
- item.animate( { marginLeft: 0 }, pivot.animationDuration, function() { pivot.currentItemChanged(index);});
+ item.animate( { marginLeft: 0 }, pivot.animationDuration, function() {pivot.items.height('auto'); pivot.currentItemChanged(index);});
}, 200);
},
Something went wrong with that request. Please try again.