Permalink
Browse files

finished pauseOnHover

  • Loading branch information...
1 parent 9a14e21 commit 37501b0fd7101fa84e984958452f95f7984e7a3d @nikki nikki committed Feb 3, 2011
Showing with 347 additions and 424 deletions.
  1. +8 −16 css/liteaccordion.css
  2. +0 −310 demo.html
  3. +313 −73 index.html
  4. +26 −25 js/liteaccordion.jquery.js
View
24 css/liteaccordion.css
@@ -9,38 +9,30 @@
/*************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
-
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
-
-.accordion li > h2 { color: black; font-weight: normal; margin: 0; position: absolute; z-index: 2; top: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
-
+.accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
+.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
+.accordion li > h2 b { position: absolute; top: 10%; left: 10%; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2:hover { cursor: pointer; }
-
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
-
-.accordion noscript { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; /*z-index: 10*/ }
-
+.accordion noscript { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; }
.accordion noscript p { padding: 10px; margin: 0; }
/****************************************** Basic */
-.basic li > h2 { background: #333; color: white; }
-
+.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
-
.basic li > div p { margin: 10px; font-size: 14px; }
/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
-
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
-.dark li > h2 span { background: #353535; color: white; display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
-.dark li > h2 span:hover, .dark li > h2 span.selected { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
-
+.dark li > h2 span { background: #353535; color: white; }
+.dark li > h2 b { color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
+.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark li > div { background: #030303; margin-left: 5px; }
/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
-
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
/***************************************** Light */
View
310 demo.html
@@ -1,310 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
- <style>
- body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
- body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
- h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
- dt { font-weight: bold }
- dd { margin: 0 }
- figure { display: block; width: 100%; height: 100% }
- figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: rgba(0,0,0,0.7); color: white;
- -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
- </style>
- <link rel="stylesheet" href="css/liteaccordion.css">
- <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" />
- <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" />
- </head>
- <body>
-
- <h1>liteAccordion - a horizontal accordion plugin for jQuery</h1>
- <div id="one" class="accordion">
- <ol>
- <li>
- <h2><span>Slide One</span></h2>
- <div>
- <figure>
- <img src="img-demo/1.jpg" alt="image" />
- <figcaption>I can haz big caek?</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Two</span></h2>
- <div>
- <figure>
- <img src="img-demo/3.jpg" alt="image" />
- <figcaption>Whoops.</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Three</span></h2>
- <div>
- <figure>
- <img src="img-demo/2.jpg" alt="image" />
- <figcaption>Some caption text goes in here...</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Four</span></h2>
- <div>
- <figure>
- <img src="img-demo/5.jpg" width="768" alt="image" />
- <figcaption>Pew pew pew!</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Five</span></h2>
- <div>
- <figure>
- <img src="img-demo/2.jpg" alt="image" />
- <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
- </figure>
- </div>
- </li>
- </ol>
- <noscript>
- <p>Please enable JavaScript to get the full experience.</p>
- </noscript>
- </div>
-
- <h2>Download</h2>
- <p>Get liteAccordion from <a href="https://github.com/nikki/liteAccordion">Github</a></p>
-
- <h2>FAQ</h2>
- <dl>
- <dt>Q. Why is this plugin called 'liteAccordion'?</dt>
- <dd>A. It is called liteAccordion because the raw JavaScript source is only 100000kb in size, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to XKB!</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 has a range of options, and I've tried to use relative measurements in the css so that the styles scale.</dd>
- <dt>Q. What themes are available?</dt>
- <dd>A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on <a href="http://www.ormanclark.com/">Orman Clark</a>'s <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">stitch</a> theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)</dd>
- <dt>Q. Does it work in...</dt>
- <dd>A. It works in Firefox, Chrome, Safari, Opera and IE7 upwards.</dd>
- <dt>Q. Sounds good! Can I use it for commercial projects?</dt>
- <dd>A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.</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>Basic Implementation</h2>
- <p>1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:</p>
- <pre class="brush: xml">
- &lt;head&gt;
- &lt;link rel="stylesheet" href="liteAccordion.css"&gt;
- &lt;/head&gt;
- &lt;body&gt;
- ... <!-- Before the closing body tag -->
- &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
- &lt;script src="liteaccordion.jquery.js"&gt;&lt;/script&gt;
- &lt;/body&gt;</pre>
- <p>2. Insert the basic liteAccordion markup into your page:</p>
- <pre class="brush: xml">
- <div class="accordion">
- <ol>
- <li>
- <h2>Slide One</h2>
- <div></div>
- </li>
- <li>
- <h2>Slide Two</h2>
- <div></div>
- </li>
- <li>
- <h2>Slide Three</h2>
- <div></div>
- </li>
- <li>
- <h2>Slide Four</h2>
- <div></div>
- </li>
- <li>
- <h2>Slide Five</h2>
- <div></div>
- </li>
- </ol>
- <noscript>
- <p>Please enable JavaScript to get the full experience.</p>
- </noscript>
- </div></pre>
- <p>3. Call the plugin</p>
- <pre class="brush: xml">
- &lt;script&gt;
- $('#yourdiv').liteAccordion();
- &lt;/script&gt;</pre>
-
- <h2>Basic Example</h2>
- <p>This is a demonstration of the default implementation above, but with some text content added to the slides.</p>
- <div id="two" class="accordion">
- <ol>
- <li>
- <h2>Slide One</h2>
- <div>
- <h3>This is Slide One.</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. <a href="#">Link somewhere</a>
- </p>
- </div>
- </li>
- <li>
- <h2>Slide Two</h2>
- <div>
- <h3>This is Slide Two.</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
- </p>
- </div>
- </li>
- <li>
- <h2>Slide Three</h2>
- <div>
- <h3>This is Slide Three.</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. <a href="#">Link somewhere</a>
- </p>
- </div>
- </li>
- <li>
- <h2>Slide Four</h2>
- <div>
- <h3>This is Slide Four.</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
- </p>
- </div>
- </li>
- <li>
- <h2>Slide Five</h2>
- <div>
- <h3>This is Slide Five.</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. <a href="#">Link somewhere</a>
- </p>
- </div>
- </li>
- </ol>
- <noscript>
- <p>Please enable JavaScript to get the full experience.</p>
- </noscript>
- </div>
-
- <h2>Options</h2>
- <p>These are the default settings for the liteAccordion plugin:</p>
- <pre class="brush: js">
- containerWidth : 960, // width of accordion (px)
- containerHeight : 320, // height of accordion (px)
- headerWidth : 48, // width of tabs (px)
-
- firstSlide : 1, // number of the first active slide (integer)
- onActivate : function() {}, // callback function triggered on tab click/mouseover (function)
- slideSpeed : 800, // speed of slide animation (time/ms)
- slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
-
- autoPlay : false, // automatically scroll through the slides (boolean)
- cycleSpeed : 6000, // time between slide activation (time/ms)
- pauseOnHover : false, // pause slides on hover (boolean)
-
- theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
- rounded : false // whether to use rounded corners or not** (boolean)</pre>
- <p>(* coming soon, **doesn't work in IE)</p>
- <p>Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.</p>
- <pre class="brush: js">
- $('#one').liteAccordion({
- theme : 'dark',
- rounded : true,
- onActivate : function() {
- this.find('figcaption').fadeOut();
- },
- slideCallback : function() {
- $('figcaption').fadeIn();
- },
- autoPlay : true
- }).find('figcaption:first').show();</pre>
- <p>Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).</p>
-
- <h2>More Examples</h2>
- <div id="three" class="accordion">
- <ol>
- <li>
- <h2><span>Slide One</span></h2>
- <div>
- <img src="img-demo/1.jpg" alt="image" />
- </div>
- </li>
- <li>
- <h2><span>Slide Two</span></h2>
- <div>
- <img src="img-demo/2.jpg" alt="image" />
- </div>
- </li>
- <li>
- <h2><span>Slide Three</span></h2>
- <div>
- <img src="img-demo/3.jpg" alt="image" />
- </div>
- </li>
- <li>
- <h2><span>Slide Four</span></h2>
- <div>
- <img src="img-demo/5.jpg" width="768" alt="image" />
- </div>
- </li>
- <li>
- <h2><span>Slide Five</span></h2>
- <div>
- <img src="img-demo/2.jpg" alt="image" />
- </div>
- </li>
- </ol>
- <noscript>
- <p>Please enable JavaScript to get the full experience.</p>
- </noscript>
- </div>
- <pre class="brush: js">$('#yourdiv').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });</pre>
-
- <h2>Licence</h2>
- <p>The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact.
- You may freely use this jQuery plugin in websites, web applications, templates, themes, and any other format intended for sale and/or distribution.
- Derivative works are not permitted.</p>
-
- <h2>Attribution</h2>
- <p>The '<a href="http://www.premiumpixels.com/horizontal-accordion-slider-psd/">dark</a>' theme was inspired by Orman Clark</a>. Thanks Orman! :)</p>
-
- <!-- Syntax Highlighter -->
- <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
- <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script>
- <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.js"></script>
- <script>SyntaxHighlighter.all();</script>
- <!-- end Syntax Highlighter -->
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script src="js/liteaccordion.jquery.js"></script>
- <script>
- // liteAccordion demos
- $('#one').liteAccordion({
- theme : 'dark',
- rounded : true,
- onActivate : function() {
- this.find('figcaption').fadeOut();
- },
- slideCallback : function() {
- $('figcaption').fadeIn();
- },
- autoPlay : true,
- pauseOnHover : true
- }).find('figcaption:first').show();
- $('#two').liteAccordion();
- $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });
- </script>
-
- </body>
-</html>
View
386 index.html
@@ -1,80 +1,320 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
<html lang="en">
-<head>
- <meta charset="utf-8" />
- <title>test accordion</title>
- <style>
- body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; margin: 50px; background: #eee }
- body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
- h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
- dt { font-weight: bold }
- dd { margin: 0 }
- figure { display: block; width: 100%; height: 100% }
- figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 20px; z-index: 3; background: rgba(0,0,0,0.7); color: white; display: none;
- -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
- </style>
- <link rel="stylesheet" href="css/liteaccordion.css">
-</head>
-<body>
-
- <div class="accordion">
- <ol>
- <li>
- <h2><span>Slide One</span></h2>
- <div>
- <figure>
+ <head>
+ <meta charset="utf-8" />
+ <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
+ <style>
+ body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
+ body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
+ h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
+ dt { font-weight: bold }
+ dd { margin: 0 }
+ figure { display: block; width: 100%; height: 100% }
+ figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: rgba(0,0,0,0.7); color: white;
+ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
+ </style>
+ <link rel="stylesheet" href="css/liteaccordion.css">
+ <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" />
+ <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" />
+ <!--[if IE]>
+ <script>
+ document.createElement('figure');
+ document.createElement('figcaption');
+ </script>
+ <![endif]-->
+ </head>
+ <body>
+
+ <h1>liteAccordion - a horizontal accordion plugin for jQuery</h1>
+ <div id="one" class="accordion">
+ <ol>
+ <li>
+ <h2><span>Slide One</span></h2>
+ <div>
+ <figure>
+ <img src="img-demo/1.jpg" alt="image" />
+ <figcaption>I can haz big caek?</figcaption>
+ </figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Two</span></h2>
+ <div>
+ <figure>
+ <img src="img-demo/3.jpg" alt="image" />
+ <figcaption>Whoops.</figcaption>
+ </figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Three</span></h2>
+ <div>
+ <figure>
+ <img src="img-demo/2.jpg" alt="image" />
+ <figcaption>Some caption text goes in here...</figcaption>
+ </figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Four</span></h2>
+ <div>
+ <figure>
+ <img src="img-demo/5.jpg" width="768" alt="image" />
+ <figcaption>Pew pew pew!</figcaption>
+ </figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Five</span></h2>
+ <div>
+ <figure>
+ <img src="img-demo/2.jpg" alt="image" />
+ <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
+ </figure>
+ </div>
+ </li>
+ </ol>
+ <noscript>
+ <p>Please enable JavaScript to get the full experience.</p>
+ </noscript>
+ </div>
+
+ <h2>Download</h2>
+ <p>Get liteAccordion from <a href="https://github.com/nikki/liteAccordion">Github</a></p>
+
+ <h2>FAQ</h2>
+ <dl>
+ <dt>Q. Why is this plugin called 'liteAccordion'?</dt>
+ <dd>A. It is called liteAccordion because the raw JavaScript source is only 100000kb in size, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to XKB!</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 has a range of options, and I've tried to use relative measurements in the css so that the styles scale.</dd>
+ <dt>Q. What themes are available?</dt>
+ <dd>A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on <a href="http://www.ormanclark.com/">Orman Clark</a>'s <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">stitch</a> theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)</dd>
+ <dt>Q. Does it work in...</dt>
+ <dd>A. It works in Firefox, Chrome, Safari, Opera and IE7 upwards.</dd>
+ <dt>Q. Sounds good! Can I use it for commercial projects?</dt>
+ <dd>A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.</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>Basic Implementation</h2>
+ <p>1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:</p>
+ <pre class="brush: xml">
+ &lt;head&gt;
+ &lt;link rel="stylesheet" href="liteAccordion.css"&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ ... <!-- Before the closing body tag -->
+ &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
+ &lt;script src="liteaccordion.jquery.js"&gt;&lt;/script&gt;
+ &lt;/body&gt;</pre>
+ <p>2. Insert the basic liteAccordion markup into your page:</p>
+ <pre class="brush: xml">
+ <div class="accordion">
+ <ol>
+ <li>
+ <h2><span>Slide One</span></h2>
+ <div></div>
+ </li>
+ <li>
+ <h2><span>Slide Two</span></h2>
+ <div></div>
+ </li>
+ <li>
+ <h2><span>Slide Three</span></h2>
+ <div></div>
+ </li>
+ <li>
+ <h2><span>Slide Four</span></h2>
+ <div></div>
+ </li>
+ <li>
+ <h2><span>Slide Five</span></h2>
+ <div></div>
+ </li>
+ </ol>
+ <noscript>
+ <p>Please enable JavaScript to get the full experience.</p>
+ </noscript>
+ </div></pre>
+ <p>3. Call the plugin</p>
+ <pre class="brush: xml">
+ &lt;script&gt;
+ $('#yourdiv').liteAccordion();
+ &lt;/script&gt;</pre>
+
+ <h2>Basic Example</h2>
+ <p>This is a demonstration of the default implementation above, but with some text content added to the slides.</p>
+ <div id="two" class="accordion">
+ <ol>
+ <li>
+ <h2><span>Slide One</span></h2>
+ <div>
+ <h3>This is Slide One.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. <a href="#">Link somewhere</a>
+ </p>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Two</span></h2>
+ <div>
+ <h3>This is Slide Two.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
+ </p>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Three</span></h2>
+ <div>
+ <h3>This is Slide Three.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. <a href="#">Link somewhere</a>
+ </p>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Four</span></h2>
+ <div>
+ <h3>This is Slide Four.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
+ </p>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Five</span></h2>
+ <div>
+ <h3>This is Slide Five.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. <a href="#">Link somewhere</a>
+ </p>
+ </div>
+ </li>
+ </ol>
+ <noscript>
+ <p>Please enable JavaScript to get the full experience.</p>
+ </noscript>
+ </div>
+
+ <h2>Options</h2>
+ <p>These are the default settings for the liteAccordion plugin:</p>
+ <pre class="brush: js">
+ containerWidth : 960, // width of accordion (px)
+ containerHeight : 320, // height of accordion (px)
+ headerWidth : 48, // width of tabs (px)
+
+ firstSlide : 1, // number of the first active slide (integer)
+ onActivate : function() {}, // callback function triggered on tab click/mouseover (function)
+ slideSpeed : 800, // speed of slide animation (time/ms)
+ slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
+
+ autoPlay : false, // automatically scroll through the slides (boolean)
+ cycleSpeed : 6000, // time between slide activation (time/ms)
+ pauseOnHover : false, // pause slides on hover (boolean)
+
+ theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
+ rounded : false, // whether to use rounded corners or not** (boolean)
+ enumerateSlides : false // show slide number in tab</pre>
+ <p>(* coming soon, **doesn't work in IE)</p>
+ <p>Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.</p>
+ <pre class="brush: js">
+ $('#one').liteAccordion({
+ onActivate : function() {
+ this.find('figcaption').fadeOut();
+ },
+ slideCallback : function() {
+ this.find('figcaption').fadeIn();
+ },
+ autoPlay : true,
+ pauseOnHover : true,
+ theme : 'dark',
+ rounded : true,
+ enumerateSlides : true
+ }).find('figcaption:first').show();</pre>
+ <p>Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).</p>
+
+ <h2>More Examples</h2>
+ <div id="three" class="accordion">
+ <ol>
+ <li>
+ <h2><span>Slide One</span></h2>
+ <div>
<img src="img-demo/1.jpg" alt="image" />
- <figcaption>I can haz big caek?</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Two</span></h2>
- <div>
- <figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Two</span></h2>
+ <div>
<img src="img-demo/2.jpg" alt="image" />
- <figcaption>Some caption text goes in here...</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Three</span></h2>
- <div>
- <figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Three</span></h2>
+ <div>
<img src="img-demo/3.jpg" alt="image" />
- <figcaption>Whoops.</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Four</span></h2>
- <div>
- <figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Four</span></h2>
+ <div>
<img src="img-demo/5.jpg" width="768" alt="image" />
- <figcaption>Pew pew pew!</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <h2><span>Slide Five</span></h2>
- <div>
- <figure>
+ </div>
+ </li>
+ <li>
+ <h2><span>Slide Five</span></h2>
+ <div>
<img src="img-demo/2.jpg" alt="image" />
- <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
- </figure>
- </div>
- </li>
- </ol>
- <noscript>
- <p>Please enable JavaScript to get the full experience.</p>
- </noscript>
- </div>
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script src="js/liteaccordion.jquery.js"></script>
- <script>
- $('.accordion').liteAccordion({ theme : 'dark', containerWidth: 600, containerHeight: 200, autoPlay: true });
- </script>
-
-</body>
+ </div>
+ </li>
+ </ol>
+ <noscript>
+ <p>Please enable JavaScript to get the full experience.</p>
+ </noscript>
+ </div>
+ <pre class="brush: js">$('#yourdiv').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });</pre>
+
+ <h2>Licence</h2>
+ <p>The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact.
+ You may freely include this jQuery plugin in websites, web applications, templates, themes, and other materials intended for sale and/or distribution.
+ You are not permitted to offer this plugin for distribution and/or resale 'as is' without prior consent.</p>
+
+ <h2>Attribution</h2>
+ <p>The '<a href="http://www.premiumpixels.com/horizontal-accordion-slider-psd/">dark</a>' theme was inspired by Orman Clark</a>. Thanks Orman! :)</p>
+
+ <!-- Syntax Highlighter -->
+ <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
+ <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script>
+ <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.js"></script>
+ <script>SyntaxHighlighter.all();</script>
+ <!-- end Syntax Highlighter -->
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+ <script src="js/liteaccordion.jquery.js"></script>
+ <script>
+ // liteAccordion demos
+ $('#one').liteAccordion({
+ onActivate : function() {
+ this.find('figcaption').fadeOut();
+ },
+ slideCallback : function() {
+ this.find('figcaption').fadeIn();
+ },
+ autoPlay : true,
+ pauseOnHover : true,
+ theme : 'dark',
+ rounded : true,
+ enumerateSlides : true
+ }).find('figcaption:first').show();
+ $('#two').liteAccordion();
+ $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });
+ </script>
+
+ </body>
</html>
View
51 js/liteaccordion.jquery.js
@@ -29,7 +29,8 @@
pauseOnHover : false,
theme : 'basic', // basic, light*, dark, stitch*
- rounded : false
+ rounded : false,
+ enumerateSlides : false
},
// merge defaults with options in new settings object
@@ -75,11 +76,7 @@
playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
- // clearInterval(playing);
- },
- slideCallbackContext : function() {
- // fix context
- return settings.slideCallback.call();
+ clearInterval(playing);
}
};
@@ -94,26 +91,30 @@
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
- .eq(settings.firstSlide - 1).children().addClass('selected');
+ .eq(settings.firstSlide - 1).addClass('selected');
// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;
- if (index >= settings.firstSlide) {
- left += slideWidth;
- }
-
- $this
- .css('left', left)
- .next()
- .width(slideWidth)
- .css({ left : left, paddingLeft : settings.headerWidth });
+ if (index >= settings.firstSlide) {
+ left += slideWidth;
+ }
+
+ $this
+ .css('left', left)
+ .next()
+ .width(slideWidth)
+ .css({ left : left, paddingLeft : settings.headerWidth });
+
+ // add number to bottom of tab
+ settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
+
});
-
+
// bind event handler for activating slides
- $header.click(function() {
+ $header.click(function(e) {
var $this = $(this),
index = $header.index($this),
pos = {
@@ -124,43 +125,43 @@
$group = utils.getGroup.call(this, pos, index);
// stop animation on click
- // utils.pause();
+ if (playing && e.originalEvent) {
+ utils.pause();
+ }
// activate onclick callback with slide div as context
- settings.onActivate.call($slides.children('div').eq(index));
+ settings.onActivate.call($slides.eq(index));
// set animation direction
if (this.offsetLeft === pos.left) {
newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
newPos = -slideWidth;
- } // rewrite
+ }
// check if animation in progress
if (!$header.is(':animated')) {
// remove, then add selected class
- $header.children().removeClass('selected').filter($this.children()).addClass('selected');
+ $header.removeClass('selected').filter($this).addClass('selected');
// get group of tabs & animate
$group
.add($group.next())
.animate({
left : '+=' + newPos
- }, settings.slideSpeed, utils.slideCallbackContext);
+ }, settings.slideSpeed, function() { return settings.slideCallback.call($slides.eq(index)) });
}
});
// pause accordion on hover
- /*
if (settings.pauseOnHover) {
$slides.hover(function() {
utils.pause();
}, function() {
utils.play($slides.index($(this)) + 1);
});
}
- */
// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();

0 comments on commit 37501b0

Please sign in to comment.