Permalink
Browse files

responsive refactor

  • Loading branch information...
nikki committed Jan 21, 2013
1 parent d185a0d commit 60c66c325420cf24f571f4f7739da1ea4a75596e
View
@@ -1,3 +1,6 @@
/* !!! box-sizing: whatever normal is, not border-box; */
@charset 'utf-8';
/*************************************************!
*
@@ -12,9 +15,37 @@
*
**************************************************/
/****************************************** Core */
.liteAccordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; -webkit-tap-highlight-color: transparent }
.liteAccordion, .liteAccordion * { padding: 0; margin: 0 }
.liteAccordion {
text-align: left;
font-size: 16px;
line-height: 24px;
font: 'Helvetica Neue', Verdana, Arial, sans-serif;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-tap-highlight-color: transparent;
/* translate Z to trigger hw acceleration */
/*transform: scale3d(0.5, 0.5, 0.01);*/
image-rendering: optimizeSpeed;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
.liteAccordion, .liteAccordion * { padding: 0; margin: 0; border: 0 }
.liteAccordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.liteAccordion > ol > li { list-style-type: none }
.liteAccordion .slide > h2 {
color: black;
font-size: 16px;
@@ -213,26 +244,32 @@
/******************************************** IE */
/* stitch */
.liteAccordion.ie.stitch .slide > h2 { line-height: 265% }
.liteAccordion.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.liteAccordion.ie.stitch .slide > h2 { /*line-height: 265%*/ }
.liteAccordion.ie.stitch .slide > h2 span { /*height: 89%; padding-right: 8%*/ }
.liteAccordion.ie.stitch .slide > h2.selected:after { display: none }
.liteAccordion.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.liteAccordion.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.liteAccordion.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.liteAccordion.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.liteAccordion.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
.liteAccordion.ie.stitch .slide-5 > h2 span { background-color: #c25252 }
.liteAccordion.ie.stitch .slide-6 > h2 span { background-color: #ca9859 }
.liteAccordion.ie.stitch .slide-7 > h2 span { background-color: #96ba5f }
.liteAccordion.ie.stitch .slide-8 > h2 span { background-color: #59abb7 }
.liteAccordion.ie.stitch .slide-9 > h2 span { background-color: #bb6098 }
/* transforms */
.liteAccordion.ie .slide > h2,
.liteAccordion.ie .slide > h2 span,
.liteAccordion.ie .slide > h2 b { filter: none; -ms-filter: none; -ms-transform: none }
.liteAccordion.ie7 .slide > h2 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) }
.liteAccordion.ie7 .slide > h2 b { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) }
.liteAccordion.ie8 .slide > h2 { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -ms-transform: none }
.liteAccordion.ie8 .slide > h2 b { filter: none; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -ms-transform: none }
.liteAccordion.ie9 .slide > h2 { filter: none; -ms-filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.liteAccordion.ie9 .slide > h2 b { filter: none; -ms-filter: none; -ms-transform: rotate(90deg) }
.liteAccordion.ie8 .slide > h2 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" }
.liteAccordion.ie8 .slide > h2 b { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)" }
.liteAccordion.ie9 .slide > h2 { -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.liteAccordion.ie9 .slide > h2 b { -ms-transform: rotate(90deg) }
/* misc */
.liteAccordion.ie .slide > h2 b { top: 36%; left: 5% }
.liteAccordion.ie.dark .slide > h2 b, .liteAccordion.ie.light .slide > h2 b { top: 44% }
.liteAccordion.ie9.dark .slide > h2.selected span, .liteAccordion.ie9.dark .slide > h2.selected span:hover, .liteAccordion.light .slide > h2 span { filter: none }
.liteAccordion.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }
.liteAccordion.ie9.stitch .slide > h2 b { top: 0; left: 10% }
.liteAccordion.ie7 .slide > h2 b, .liteAccordion.ie8 .slide > h2 b { top: 44%; left: 5% }
.liteAccordion.ie7.stitch .slide > h2 b, .liteAccordion.ie8.stitch .slide > h2 b { top: 36% }
.liteAccordion.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) }
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -105,7 +105,7 @@ <h2><span>Slide One</span></h2>
<div>
<figure>
<img src="img-demo/1.jpg" alt="image" />
<figcaption class="ap-caption">Assassini!</figcaption>
<figcaption class="ap-caption">Slide One</figcaption>
</figure>
</div>
</li>
@@ -114,7 +114,7 @@ <h2><span>Slide Two</span></h2>
<div>
<figure>
<img src="img-demo/2.jpg" alt="image" />
<figcaption class="ap-caption">Couldn't find an image of a Khajit thief! Fail!</figcaption>
<figcaption class="ap-caption">Slide Two</figcaption>
</figure>
</div>
</li>
@@ -123,7 +123,7 @@ <h2><span>Slide Three</span></h2>
<div>
<figure>
<img src="img-demo/3.jpg" alt="image" />
<figcaption class="ap-caption">That's one angry looking red dude.</figcaption>
<figcaption class="ap-caption">Slide Three</figcaption>
</figure>
</div>
</li>
@@ -132,7 +132,7 @@ <h2><span>Slide Four</span></h2>
<div>
<figure>
<img src="img-demo/4.jpg" width="768" alt="image" />
<figcaption class="ap-caption">Was fun for a couple of hours or so...</figcaption>
<figcaption class="ap-caption">Slide Four</figcaption>
</figure>
</div>
</li>
@@ -141,7 +141,7 @@ <h2><span>Slide Five</span></h2>
<div>
<figure>
<img src="img-demo/5.jpg" alt="image" />
<figcaption class="ap-caption">Not as good as Hot Pursuit.</figcaption>
<figcaption class="ap-caption">Slide Five</figcaption>
</figure>
</div>
</li>
@@ -398,31 +398,31 @@ <h2>Methods</h2>
<h2>More Examples</h2>
<div id="three">
<ol>
<li data-slide-name="ezio">
<li data-slide-name="slide-one">
<h2><span>Slide One</span></h2>
<div>
<img src="img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="imperial">
<li data-slide-name="slide-two">
<h2><span>Slide Two</span></h2>
<div>
<img src="img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="zelda">
<li data-slide-name="slide-three">
<h2><span>Slide Three</span></h2>
<div>
<img src="img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="man-down">
<li data-slide-name="slide-four">
<h2><span>Slide Four</span></h2>
<div>
<img src="img-demo/4.jpg" width="768" alt="image" />
</div>
</li>
<li data-slide-name="crash">
<li data-slide-name="slide-five">
<h2><span>Slide Five</span></h2>
<div>
<img src="img-demo/5.jpg" alt="image" />
@@ -434,11 +434,11 @@ <h2><span>Slide Five</span></h2>
</noscript>
</div>
<p>Links:
<a href="#ezio">ezio</a>
<a href="#imperial">imperial</a>
<a href="#zelda">zelda</a>
<a href="#man-down">man down!</a>
<a href="#crash">crashy crashy</a>
<a href="#slide-one">one</a>
<a href="#slide-two">two</a>
<a href="#slide-three">three</a>
<a href="#slide-four">four</a>
<a href="#slide-five">five</a>
</p>
<pre class="brush: js">$('#yourdiv').liteAccordion({
theme : 'dark',
View
@@ -19,11 +19,7 @@
containerWidth : 960, // px, % or em
containerHeight : 320, // px, % or em
headerWidth : 48, // px, % or em
responsive : false, // overrides the above three settings, accordion adjusts to fill container
autoScaleImages : false, // if a single image is placed within the slide, this will be automatically scaled to fit
// minContainerWidth : 300, // minimum width the accordion will resize to
// maxContainerWidth : 960, // maximum width the accordion will resize to
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
@@ -147,12 +143,7 @@
core.setSlidePositions();
// override container and slide widths for responsive setting
if (settings.responsive) {
core.responsive();
} else {
// trigger autoScaleImages once for fixed width accordions
if (settings.autoScaleImages) core.autoScaleImages();
}
if (settings.responsive) core.responsive();
},
// set initial positions for each slide
@@ -191,47 +182,26 @@
// responsive styles
responsive : function() {
var parentWidth = elem.parent().width();
// set new container width
if (parentWidth > settings.minContainerWidth) {
settings.containerWidth = parentWidth < settings.maxContainerWidth ? parentWidth : settings.maxContainerWidth;
} else if (parentWidth < settings.maxContainerWidth) {
settings.containerWidth = parentWidth > settings.minContainerWidth ? parentWidth : settings.minContainerWidth;
var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''],
width = elem.parent().width(),
scale = width / settings.containerWidth; // linear scale
console.log(scale);
/*
if (linear) {
// linear scale
scale.x = scale.y = Math.min(obj.width / 480, obj.height / 320); // linear scale
// don't scale beyond min size
if (scale.x < 1) return;
} else {
scale.x = obj.width / 480;
scale.y = obj.height / 320;
}
*/
// set new container height
settings.containerHeight = settings.containerWidth / 3 | 0;
// resize slides
slideWidth = settings.containerWidth - slideLen * settings.headerWidth;
// resize container
elem
.width(settings.containerWidth)
.height(settings.containerHeight);
// resize slides
slides
.children(':first-child')
.width(settings.containerHeight);
// set slide positions
core.setSlidePositions();
},
// scale images contained within a slide to fit the slide height and width
autoScaleImages : function() {
slides.children('div').each(function() {
var $this = $(this),
$imgs = $this.find('img');
if ($imgs.length) {
$imgs.each(function(index, item) {
$(item).width($this.width() + 1); // fix the anti-aliasing bug in chrome
$(item).height($this.height());
});
}
prefixes.forEach(function(prefix) {
elem[0].style[prefix ? prefix + 'Transform' : 'transform'] = 'scale(' + scale + ', ' + scale + ')';
});
},
@@ -274,18 +244,13 @@
// resize and orientationchange
if (settings.responsive) {
$(window)
.on('load.liteAccordion', function() {
if (settings.autoScaleImages) core.autoScaleImages();
})
.on('resize.liteAccordion orientationchange.liteAccordion', function() {
// approximates 'onresizeend'
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
core.responsive();
if (settings.autoScaleImages) core.autoScaleImages();
}, 100);
});
$(window).on('resize.liteAccordion orientationchange.liteAccordion', function() {
// approximates 'onresizeend'
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
core.responsive();
}, 100);
});
}
},
@@ -425,6 +390,7 @@
ieClass : function(version) {
if (version < 7) methods.destroy();
if (version >= 10) return;
if (version === 7 || version === 8) {
slides.each(function(index) {
$(this).addClass('slide-' + index);
@@ -440,7 +406,7 @@
// test for ie
if (index !== -1) {
ua = ua.slice(index + 5, index + 6);
ua = ua.slice(index + 5, index + 7);
core.ieClass(+ua);
}
Oops, something went wrong.

0 comments on commit 60c66c3

Please sign in to comment.