Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Carousel: Improvements to pageNav positioning

  • Loading branch information...
commit fa9a9ad8f92a183a944df1a4d1d1e784f2a9efd9 1 parent 95c6cee
Jake Archibald authored
View
4 src/ui/Carousel/Carousel.css
@@ -49,7 +49,8 @@
/* Page nav */
.glowCSSVERSION-Carousel .Carousel-pageNav {
height: 8px;
- margin: 4px 0;
+ margin: 4px 0 4px auto;
+ position: relative;
}
.glowCSSVERSION-Carousel .Carousel-pageNav div {
display: inline-block;
@@ -94,4 +95,5 @@
.glowCSSVERSION-Carousel .Carousel-title {
position: absolute;
background: #ccc;
+ overflow: hidden;
}
View
11 src/ui/Carousel/Carousel.js
@@ -191,7 +191,7 @@ Glow.provide(function(glow) {
// get titles and remove them from their items
itemTitles = this._itemTitles = getItemTitles(this);
// set the holder to the same height as the items
- titlesHolder.height( itemTitles[0].style.height );
+ itemTitles && titlesHolder.height( itemTitles[0].style.height );
pane = this._pane = new glow.ui.CarouselPane(itemContainer, this._opts);
spot = pane._spot
@@ -199,7 +199,7 @@ Glow.provide(function(glow) {
this.itemContainer = pane.itemContainer;
// set the item titles to be the same size as the items
- itemTitles.width( items.width() );
+ itemTitles && itemTitles.width( items.width() );
pane.moveTo(0, {
tween: null
@@ -332,7 +332,8 @@ Glow.provide(function(glow) {
itemTitles = carousel._itemTitles,
titlesHolder = carousel._titlesHolder.empty(),
titlesHolderOffset = titlesHolder.offset().left,
- titlesToShow = glow();
+ titlesToShow = glow(),
+ animDuration = carousel._pane._opts.duration * !!animate;
for (var i = 0, leni = indexes.length; i < leni; i++) {
titlesToShow.push(
@@ -345,7 +346,9 @@ Glow.provide(function(glow) {
);
}
- titlesToShow.css('opacity', 0).fadeIn(carousel._pane._opts.duration * !!animate);
+ titlesToShow.css('height', 0).fadeIn(animDuration).slideOpen(animDuration, {
+ lockToBottom: true
+ });
}
/**
View
7 src/ui/Carousel/pageNav.js
@@ -96,7 +96,8 @@ Glow.provide(function(glow) {
positionX = position.slice(5),
pane = carousel._pane,
numberOfPages = 1 + Math.ceil( (carousel.items.length - pane._spot.capacity) / pane._step ),
- htmlStr = '';
+ htmlStr = '',
+ itemTitles = carousel._itemTitles;
// this can be less than one if there's less than 1 page worth or items
numberOfPages = Math.max(numberOfPages, 0);
@@ -108,9 +109,9 @@ Glow.provide(function(glow) {
pageNav.css('text-align', (positionX == 'Middle') ? 'center' : 'right');
// cater for 'belowNext' when we have title boxes
- if (position === 'belowNext' && carousel._opts.itemTitles) {
+ if (position === 'belowNext' && itemTitles) {
// TODO: move up by the height of the title boxes (negative margin-top)
- pageNav.width( carousel._nextBtn.width() );
+ pageNav.width( carousel._nextBtn.width() ).css( 'margin-top', parseInt( pageNav.css('margin-top') ) - itemTitles.height() );
}
// move it under the last item for *Last positions
else if (positionX === 'Last') {
View
98 test/manual/glow/ui/Carousel/Carousel.html
@@ -15,16 +15,23 @@
</script>
<style type="text/css">
- #carousel1Outer {
+ #carousel1Outer, #carousel2Outer {
width: 550px;
+ font-size: small;
}
- #carousel1 {
+ #carousel1, #carousel2 {
margin: 0; padding: 0;
list-style: none;
+
}
- #carousel1 img {
+ #carousel1 img,
+ #carousel2 img {
display: block;
}
+ .itemTitle {
+ padding: 5px 0;
+ background: #ccc;
+ }
</style>
</head>
@@ -41,40 +48,40 @@
<div class="testarea" id="carousel1Outer">
<ol id="carousel1">
<li>
- <img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" />
- <div>Title 0</div>
+ <img src="../CarouselPane/images/1.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Leonardo</div>
</li>
<li>
- <img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" />
- <div>Title 1</div>
+ <img src="../CarouselPane/images/2.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Michelangelo</div>
</li>
<li>
- <img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" />
- <div>Title 2</div>
+ <img src="../CarouselPane/images/3.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Donatello</div>
</li>
<li>
- <img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" />
- <div>Title 3</div>
+ <img src="../CarouselPane/images/4.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Raphael</div>
</li>
<li>
- <img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" />
- <div>Title 4</div>
+ <img src="../CarouselPane/images/5.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Master Splinter</div>
</li>
<li>
- <img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" />
- <div>Title 5</div>
+ <img src="../CarouselPane/images/6.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Shredder</div>
</li>
<li>
- <img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" />
- <div>Title 6</div>
+ <img src="../CarouselPane/images/7.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">April O'Neil</div>
</li>
<li>
- <img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" />
- <div>Title 7</div>
+ <img src="../CarouselPane/images/8.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Krang</div>
</li>
<li>
- <img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" />
- <div>Title 8</div>
+ <img src="../CarouselPane/images/9.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Technodrome</div>
</li>
</ol>
</div>
@@ -82,10 +89,57 @@
<script type="text/javascript" class="showSrc">
glow.ready(function() {
window.myCarousel = new glow.ui.Carousel('#carousel1', {
- itemTitles: 'div'
+ itemTitles: '.itemTitle'
});
});
</script>
+
+ <div class="testarea" id="carousel2Outer">
+ <ol id="carousel2">
+ <li>
+ <img src="../CarouselPane/images/1.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Leonardo</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/2.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Michelangelo</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/3.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Donatello</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/4.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Raphael</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/5.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Master Splinter</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/6.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Shredder</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/7.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">April O'Neil</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/8.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Krang</div>
+ </li>
+ <li>
+ <img src="../CarouselPane/images/9.jpg" alt="" width="150" height="150" />
+ <div class="itemTitle">Technodrome</div>
+ </li>
+ </ol>
+ </div>
+
+ <script type="text/javascript" class="showSrc">
+ glow.ready(function() {
+ window.myCarousel2 = new glow.ui.Carousel('#carousel2');
+ });
+ </script>
<script type="text/javascript">
Please sign in to comment.
Something went wrong with that request. Please try again.