Skip to content

Commit

Permalink
fixed pivot's behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown authored and unknown committed May 22, 2012
1 parent 6360669 commit 1e280e5
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 149 deletions.
292 changes: 146 additions & 146 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
<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>
2 changes: 1 addition & 1 deletion less/pivot.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%; }
5 changes: 3 additions & 2 deletions scripts/jquery.metro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -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);
},
Expand Down

0 comments on commit 1e280e5

Please sign in to comment.