Permalink
Browse files

removed responsive options

  • Loading branch information...
nikki committed Jan 21, 2013
1 parent 60c66c3 commit 363cedeaa451bdec0ccf7adbe996574d39bdbad8
View
@@ -1,4 +1,4 @@
Copyright (c) 2012 Nicola Hibbert
Copyright (c) 2013 Nicola Hibbert
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
View
@@ -2,7 +2,7 @@
liteAccordion is a horizontal accordion plugin for jQuery.
Please post any support or feature requests [here](http://nicolahibbert.com/liteaccordion-v2/).
Please post any support or feature requests [here](http://nicolahibbert.com/liteaccordion-v2/).
**Please do not post support requests on the issue tracker!**
Follow me on Twitter [@nicolahibbert](http://twitter.com/nicolahibbert) for liteAccordion development news.
@@ -12,29 +12,24 @@ Follow me on Twitter [@nicolahibbert](http://twitter.com/nicolahibbert) for lite
These are the default settings for the liteAccordion plugin:
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
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
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, colorful, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, colorful, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
***
@@ -60,6 +55,13 @@ $('#yourdiv').liteAccordion('next').liteAccordion('next');
***
###Changelog
**v2.2** - 21/01/2013
- removed responsive option
- removed autoScale images option
- fixed issue #66
- fixed minor css bugs (ie10)
**v2.1.1** - 10/09/2012
- fixed issue #58
@@ -91,12 +93,12 @@ $('#yourdiv').liteAccordion('next').liteAccordion('next');
**v2.0** - 16/11/2011
- new methods:
- play
- play
- stop
- next
- prev
- destroy
- debug
- debug
- rewrote plugin to expose methods
- refactored core
- refactored css, styles no longer cascade into slide content divs
View
@@ -1,6 +1,3 @@
/* !!! box-sizing: whatever normal is, not border-box; */
@charset 'utf-8';
/*************************************************!
*
@@ -20,30 +17,11 @@
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, .liteAccordion * { padding: 0; margin: 0; border: 0; box-sizing: content-box }
.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 {
View
@@ -177,33 +177,30 @@ <h2>Looking for a WordPress version?</h2>
</div>
<h2>Download</h2>
<p>More details and download <a href="http://nicolahibbert.com/liteaccordion-v2">here</a></p>
<p>More details and download <a href="http://nicolahibbert.com/liteaccordion-v2">here</a>.</p>
<h2>FAQ</h2>
<dl>
<dt>Q. Why is this plugin called 'liteAccordion'?</dt>
<dd>A. It is called liteAccordion because the minified JS source only weighs 6kb. If you gzip the minified JS, you can get the file size down to 2kb!</dd>
<dt>Q. What can I use it for?</dt>
<dd>A. Anything you like! Text, images, video - anything you can put in a div, you can put in a slide.</dd>
<dt>Q. But my page isn't 960px wide...</dt>
<dd>A. Not a problem, the plugin caters to fixed width and responsive designs.</dd>
<dt>Q. What themes are available?</dt>
<dd>A. Originally, liteAccordion had two themes - 'basic' and 'dark'. In version 2, two more themes were added - 'light and stitch'. These themes are based on Orman Clark's work over at <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">Premium Pixels</a>. Well worth checking out if you need some design inspiration.</dd>
<dt>Q. Does it work in...</dt>
<dd>A. It's been tested on the latest versions of Firefox, Chrome, Safari and Opera on both OSX and W7. It has also been tested on IE7, IE8 &amp; IE9 on W7. Unfortunately IE6 is not supported - you will need to provide your own css if you plan to support IE6.</dd>
<dd>A. It's been tested on the latest versions of Firefox, Chrome, Safari and Opera. It has also been tested on IE7, IE8, IE9 &amp; IE10. Unfortunately IE6 is not supported - you will need to provide your own css if you plan to support IE6.</dd>
<dt>Q. But it doesn't work in IEx!</dt>
<dd>A. It works in the native versions of IE. When you use, for example, IE9 in IE8 developer mode, it’s not the same as using IE8 proper. The rendering engine (Trident) applies both the CSS styles for IE8, and for IE9. This creates a conflict that causes the accordion to display incorrectly. The plugin has been tested in IE7, IE8, IE9, and now IE10 – everything functions properly.</dd>
<dt>Q. Sounds good! Can I use it for commercial projects?</dt>
<dd>A. liteAccordion is free to use for commercial and personal projects. As long as you're not trying to sell this plugin 'as is', feel free to do with it as you please.</dd>
</dl>
<p>If you find any bugs, please <a href="https://github.com/nikki/liteAccordion/issues">file a ticket on Github</a> and I'll fix it as soon as possible. Thanks!</p>
<h2>New in 2.1! (19/08/11)</h2>
<strong>Responsive layout option</strong>
<p>liteAccordion now has a responsive layout option. If you set { responsive : true } in the plugin options, the accordion will now stretch to fit your page's responsive design. This also works on mobile devices when the orientation of the device is changed. Check out the demo on desktop or mobile <a href="responsive.html">here</a>.
Use the minContainerWidth and maxContainerWidth options in conjunction with the responsive option, to limit the minimum and maximum ranges your accordion can scale to.</p>
<strong>Auto scale images</strong>
<p>If you plan to use liteAccordion as an image slider, there is now an option to scale images contained in a slide to automatically fit the slide dimensions. This works
in both responsive and fixed width modes. Check out the <a href="responsive.html">responsive demo</a> to see it in action.</p>
<h2>Version 2.2 (21/01/13)</h2>
<strong>Responsive layout and auto scale images options removed</strong>
<p>After some consideration, I've decided to remove the responsive options. In it's current format, the accordion works well on mobile devices, but the mechanics of the interface are not suited to responsive designs (for example, the headers are too small to activate on mobile devices).</p>
<strong>Development status: on indefinate hiatus</strong>
<p>After this update, I do not plan to continue developing this plugin. Regrettably, I can no longer respond to support emails - please be sure to read the <a href="http://nicolahibbert.com/liteaccordion-v2">blog post</a> comments if you have any issues, as 99% of them will have been discussed there.</p>
<h2>New in 2.0! (16/11/11)</h2>
<strong>Methods:</strong>
@@ -339,11 +336,6 @@ <h2>Options</h2>
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
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
slideSpeed : 800, // slide animation speed
@@ -355,7 +347,7 @@ <h2>Options</h2>
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, or stitch
theme : 'basic', // basic, dark, light, colorful, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash</pre>
View
@@ -6,7 +6,7 @@
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.2.0
* Copyright: (c) 2010-2012 Nicola Hibbert
* Copyright: (c) 2010-2013 Nicola Hibbert
* Licence: MIT
*
**************************************************/
@@ -16,10 +16,9 @@
var LiteAccordion = function(elem, options) {
var defaults = {
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
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth : 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
@@ -141,9 +140,6 @@
// set slide positions
core.setSlidePositions();
// override container and slide widths for responsive setting
if (settings.responsive) core.responsive();
},
// set initial positions for each slide
@@ -180,35 +176,8 @@
});
},
// responsive styles
responsive : function() {
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;
}
*/
prefixes.forEach(function(prefix) {
elem[0].style[prefix ? prefix + 'Transform' : 'transform'] = 'scale(' + scale + ', ' + scale + ')';
});
},
// bind events
bindEvents : function() {
var resizeTimer = 0;
// bind click and mouseover events
if (settings.activateOn === 'click') {
header.on('click.liteAccordion', core.triggerSlide);
@@ -241,17 +210,6 @@
!core.playing && methods.play(core.currentSlide);
});
}
// resize and orientationchange
if (settings.responsive) {
$(window).on('resize.liteAccordion orientationchange.liteAccordion', function() {
// approximates 'onresizeend'
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
core.responsive();
}, 100);
});
}
},
// counter for autoPlay (zero index firstSlide on init)
Oops, something went wrong.

0 comments on commit 363cede

Please sign in to comment.