cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

qdxKMo

A Pen By Alberto

Pen Settings

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there, that can effect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

     

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

     

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

Quick-add: + add another resource

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML

            
              <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="author" content="Made with ❤ by Jorge Epuñan - @csslab">

  <title>jQuery Timeline 0.9.54 - Dando vida al tiempo</title>
  <link rel="stylesheet" href="css/style.css" media="screen" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="js/jquery.timelinr-0.9.54.js"></script>
  <script>
    $(function(){
    			$().timelinr({
    				arrowKeys: 'true'
    			})
    		});
  </script>
</head>

<body>

  <div id="timeline">
    <ul id="dates">
      <li><a href="#1984">1984</a></li>
      <li><a href="#1987">1987</a></li>
      <li><a href="#1991">1991</a></li>
      <li><a href="#1992">1992</a></li>
      <li><a href="#1993">1993</a></li>
      <li><a href="#1995">1995</a></li>
      <li><a href="#1996">1996</a></li>
      <li><a href="#1997">1997</a></li>
      <li><a href="#1998">1998</a></li>
      <li><a href="#1999">1999</a></li>
      <li><a href="#2000">2000</a></li>
      <li><a href="#2001">2001</a></li>
      <li><a href="#2002">2002</a></li>
      <li><a href="#2004">2004</a></li>
      <li><a href="#2006">2006</a></li>
      <li><a href="#2007">2007</a></li>
      <li><a href="#2009">2009</a></li>
      <li><a href="#2014">2014</a></li>
      <li><a href="#2015">2015</a></li>
      <li><a href="#2016">2016</a></li>

    </ul>
    <ul id="issues">
      <li id="1984">

        <h1>1984</h1>
        <p>DKN Hotels founded with the acquisition of the Surf Motel Carlsbad, CA</p>
        <br>
        <p>Acquisition of the Marco Polo Inn Anaheim, CA (repositioned as: Days Inn)</p>
      </li>

      <li id="1987">

        <h1>1987</h1>
        <p>Acquisition of the Park Vue Anaheim, CA (repositioned as: Econo Lodge)</p>
      </li>
      <li id="1991">

        <h1>1991</h1>
        <p>Acquisition of the Quality Inn in Ontario, CA (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Construction of the Econo Lodge Flagstaff East, AZ (repositioned as: Days Inn)</p>
      </li>
      <li id="1992">

        <h1>1992</h1>
        <p>Acquisition of the Sandman Inn Anaheim, CA (repositioned as: Ramada Limited)</p>
      </li>
      <li id="1993">

        <h1>1993</h1>
        <p>Acquisition of the Summer House Inn in San Diego, CA</p>
      </li>
      <li id="1995">

        <h1>1995</h1>
        <p>Acquisition of the Comfort Inn San Diego (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Acquisition of the Harbor Inn Anaheim, CA (repositioned as: Comfort Inn)</p>
        <br>
        <p>Construction of the Hampton Inn Flagstaff East (repositioned as: Country Inn & Suites)
        </p>
      </li>
      <li id="1996">

        <h1>1996</h1>
        <p>Acquisition of the Travelodge Midway San Diego, CA</p>
        <br>
        <p>Acquisition of the Midway Motel in San Diego, CA (repositioned as: Travelodge SeaWorld)</p>
      </li>
      <li id="1997">

        <h1>1997</h1>
        <p>Acquisition of the Newport Bay Inn in Costa Mesa, CA (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Acquisition of the Newport Beach Inn in Newport Beach, CA (repositioned as: Best Western)</p>
        <br>
        <p>Acquisition of he Travelodge in San Marcos, CA (repositioned as: Ramada Limited)
        </p>
      </li>
      <li id="1998">

        <h1>1998</h1>
        <p>Acquisition of the Days Inn I-40 in Flagstaff, AZ</p>
        <br>
        <p>Acquisition of the Days Inn in San Diego, CA (repositioned as: Best Western)</p>
        <br>
        <p>Acquisition of the Del Norte Inn in Camarillo, CA (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Acquisition of the Quality Inn in Fresno, CA</p>
        </p>
      </li>
      <li id="1999">

        <h1>1999</h1>
        <p>Acquisition of the Days Inn Route 66 in Flagstaff, AZ</p>
        <br>
        <p>Acquisition of the Quality Suites in San Clemente, CA (repositioned as: Hampton Inn & Suites)</p>
        <br>
        <p>Acquisition of the Conestoga Hotel in Anaheim, CA (repositioned as: Holiday Inn & Suites)</p>
        </p>
      </li>
      <li id="2000">

        <h1>2000</h1>
        <p>Acquisition of the Best Western Desert Villa Inn in Barstow, CA</p>
      </li>
      <li id="2001">

        <h1>2001</h1>
        <p>Acquisition of the Newport Classic Inn in Newport Beach, CA (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Acquisition of the Goodnite Inn in Ontario, CA</p>
        <br>
        <p>Acquisition of the Laguna Beach Inn in Laguna Beach, CA</p>
      </li>
      <li id="2002">

        <h1>2002</h1>
        <p>Acquisition of the Best Western Westwood Hotel in Los Angeles, CA (repositioned as: Holiday Inn Express)</p>
        <br>
        <p>Acquisition of the Super 8 Motel in Flagstaff, AZ</p>
        <br>
        <p>Acquisition of the Best Western Raffles Inn in Anaheim, CA</p>
      </li>
      <li id="2004">

        <h1>2004</h1>
        <p>Acquisition of the Fairfield Inn in Buena Park, CA </p>
        <br>
        <p>Acquisition of the Heritage Hotel in Sacramento, CA (repositioned as Courtyard Inn and Fairfield Inn)</p>
        <br>
        <p>Construction of the New Town Place in Sacramento, CA</p>
        <br>
        <p>Acquisition of the Fairfield Inn in Placentia, CA (repositioned as: Quality Inn)</p>
      </li>
      <li id="2006">

        <h1>2006</h1>
        <p>Acquisition of the Amerisuites Hotel in Ontario, CA (repositioned as: Hyatt Place)</p>
      </li>

      <li id="2007">

        <h1>2007</h1>
        <p>Acquisitioon of the Country Plaza Inn in San Clemente, CA (repositioned as: Holiday Inn Express)</p>
      </li>

      <li id="2009">

        <h1>2009</h1>
        <p>Construction of the Hilton Garden Inn in San Bernardino, CA</p>
      </li>

      <li id="2014">

        <h1>2014</h1>
        <p>Construction of the SpringHill Suites Anaheim Maingate in Anaheim, CA</p>
        <br>
        <p>Acquisition of the Cardiff-by-the-Sea Lodge in Cardiff-by-the-Sea, CA</p>
        <br>
        <p>Acquisition of the Hilton Hotel in San Bernardino, CA (repositioned as: DoubleTree)</p>
      </li>

      <li id="2015">

        <h1>2015</h1>
        <p>Acquisition of the Wyndham Garden Ventura Pierpont Inn in Ventura, CA</p>
        <br>
        <p>Construction of the Residence Inn in Rancho Cucamonga, CA</p>
        <br>
        <p>Construction of the Hampton Inn & Suites in Murrietta, CA</p>
        <br>
        <p>Construction of the Homewood Suites in Irvine, CA</p>
      </li>

      <li id="2016">

        <h1>2016</h1>
        <p>Construction of the SpringHill Suites in Carlsbad, CA</p>
      </li>
    </ul>
    <div id="grad_left"></div>
    <div id="grad_right"></div>
    <a href="#" id="next">+</a>
    <a href="#" id="prev">-</a>
  </div>


</body>
!

CSS

            
              * {
  margin: 0;
  padding: 0;
}

body {
  background: #222;
  font-family: Georgia, serif;
  color: #fff;
  font-size: 14px;
}

a {
  color: #ffffcc;
  text-decoration: none;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}

a:hover,
a.selected {
  color: #ffcc00;
}

h1,
h2,
h4,
h5,
h6 {
  text-align: center;
  color: #ccc;
  text-shadow: #000 1px 1px 2px;
  margin-bottom: 5px;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 14px;
}

.sociales {
  text-align: center;
  margin-bottom: 20px;
}

#timeline {
  width: 800px;
  height: 350px;
  overflow: hidden;
  margin: 100px auto;
  position: relative;
  background: url('../images/dot.gif') left 45px repeat-x;
}

#dates {
  width: 800px;
  height: 60px;
  overflow: hidden;
}

#dates li {
  list-style: none;
  float: left;
  width: 100px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  background: url('../images/biggerdot.png') center bottom no-repeat;
}

#dates a {
  line-height: 38px;
  padding-bottom: 10px;
}

#dates .selected {
  font-size: 38px;
}

#issues {
  width: 800px;
  height: 350px;
  overflow: hidden;
}

#issues li {
  width: 800px;
  height: 350px;
  list-style: none;
  float: left;
}

#issues li.selected img {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

#issues li img {
  float: left;
  margin: 10px 30px 10px 50px;
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  /* IE 8 */
  
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
  /* IE 6 & 7 */
  
  zoom: 1;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
}

#issues li h1 {
  color: #ffcc00;
  font-size: 48px;
  margin: 20px 0;
  text-shadow: #000 1px 1px 2px;
  text-align: left;
  padding-left: 70px;
}

#issues li p {
  font-size: 14px;
  margin-right: 70px;
  margin-left: 70px;
  font-weight: normal;
  line-height: 22px;
  text-shadow: #000 1px 1px 2px;
}

#grad_left,
#grad_right {
  width: 100px;
  height: 350px;
  position: absolute;
  top: 0;
}

#grad_left {
  left: 0;
  background: url('../images/grad_left.png') repeat-y;
}

#grad_right {
  right: 0;
  background: url('../images/grad_right.png') repeat-y;
}

#next,
#prev {
  position: absolute;
  top: 0;
  font-size: 70px;
  top: 170px;
  width: 22px;
  height: 38px;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

#next:hover,
#prev:hover {
  background-position: 0 -76px;
}

#next {
  right: 0;
  background: red;
}

#prev {
  left: 0;
  background: blue;
}

#next.disabled,
#prev.disabled {
  opacity: 0.2;
}
!

JS

            
              /* ----------------------------------
jQuery Timelinr 0.9.54
tested with jQuery v1.6+

Copyright 2011, CSSLab.cl
Free under the MIT license.
https://www.opensource.org/licenses/mit-license.php

instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
---------------------------------- */

jQuery.fn.timelinr = function(options){
	// default plugin settings
	settings = jQuery.extend({
		orientation: 				'horizontal',		// value: horizontal | vertical, default to horizontal
		containerDiv: 				'#timeline',		// value: any HTML tag or #id, default to #timeline
		datesDiv: 					'#dates',			// value: any HTML tag or #id, default to #dates
		datesSelectedClass: 		'selected',			// value: any class, default to selected
		datesSpeed: 				'normal',			// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
		issuesDiv: 					'#issues',			// value: any HTML tag or #id, default to #issues
		issuesSelectedClass: 		'selected',			// value: any class, default to selected
		issuesSpeed: 				'fast',				// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
		issuesTransparency: 		0.2,				// value: integer between 0 and 1 (recommended), default to 0.2
		issuesTransparencySpeed: 	500,				// value: integer between 100 and 1000 (recommended), default to 500 (normal)
		prevButton: 				'#prev',			// value: any HTML tag or #id, default to #prev
		nextButton: 				'#next',			// value: any HTML tag or #id, default to #next
		arrowKeys: 					'false',			// value: true | false, default to false
		startAt: 					1,					// value: integer, default to 1 (first)
		autoPlay: 					'false',			// value: true | false, default to false
		autoPlayDirection: 			'forward',			// value: forward | backward, default to forward
		autoPlayPause: 				2000				// value: integer (1000 = 1 seg), default to 2000 (2segs)
	}, options);

	$(function(){
		// setting variables... many of them
		var howManyDates = $(settings.datesDiv+' li').length;
		var howManyIssues = $(settings.issuesDiv+' li').length;
		var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
		var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
		var widthContainer = $(settings.containerDiv).width();
		var heightContainer = $(settings.containerDiv).height();
		var widthIssues = $(settings.issuesDiv).width();
		var heightIssues = $(settings.issuesDiv).height();
		var widthIssue = $(settings.issuesDiv+' li').width();
		var heightIssue = $(settings.issuesDiv+' li').height();
		var widthDates = $(settings.datesDiv).width();
		var heightDates = $(settings.datesDiv).height();
		var widthDate = $(settings.datesDiv+' li').width();
		var heightDate = $(settings.datesDiv+' li').height();
		// set positions!
		if(settings.orientation == 'horizontal') {	
			$(settings.issuesDiv).width(widthIssue*howManyIssues);
			$(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
			var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
		} else if(settings.orientation == 'vertical') {
			$(settings.issuesDiv).height(heightIssue*howManyIssues);
			$(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
			var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
		}
		
		$(settings.datesDiv+' a').click(function(event){
			event.preventDefault();
			// first vars
			var whichIssue = $(this).text();
			var currentIndex = $(this).parent().prevAll().length;
			// moving the elements
			if(settings.orientation == 'horizontal') {
				$(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
			} else if(settings.orientation == 'vertical') {
				$(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
			}
			$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
			// prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date
			if(howManyDates == 1) {
				$(settings.prevButton+','+settings.nextButton).fadeOut('fast');
			} else if(howManyDates == 2) {
				if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.prevButton).fadeOut('fast');
				 	$(settings.nextButton).fadeIn('fast');
				} 
				else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.nextButton).fadeOut('fast');
					$(settings.prevButton).fadeIn('fast');
				}
			} else {
				if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.nextButton).fadeIn('fast');
					$(settings.prevButton).fadeOut('fast');
				} 
				else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.prevButton).fadeIn('fast');
					$(settings.nextButton).fadeOut('fast');
				}
				else {
					$(settings.nextButton+','+settings.prevButton).fadeIn('slow');
				}	
			}
			// now moving the dates
			$(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
			$(this).addClass(settings.datesSelectedClass);
			if(settings.orientation == 'horizontal') {
				$(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
			} else if(settings.orientation == 'vertical') {
				$(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
			}
		});

		$(settings.nextButton).bind('click', function(event){
			event.preventDefault();
			// bugixed from 0.9.54: now the dates gets centered when there's too much dates.
			var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
			if(settings.orientation == 'horizontal') {
				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
				var currentIssueIndex = currentPositionIssues/widthIssue;
				var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
				var currentIssueDate = currentPositionDates-widthDate;
				if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
					$(settings.issuesDiv).stop();
					$(settings.datesDiv+' li:last-child a').click();
				} else {
					if (!$(settings.issuesDiv).is(':animated')) {
						// bugixed from 0.9.52: now the dates gets centered when there's too much dates.
						$(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
					}
				}
			} else if(settings.orientation == 'vertical') {
				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
				var currentIssueIndex = currentPositionIssues/heightIssue;
				var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
				var currentIssueDate = currentPositionDates-heightDate;
				if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
					$(settings.issuesDiv).stop();
					$(settings.datesDiv+' li:last-child a').click();
				} else {
					if (!$(settings.issuesDiv).is(':animated')) {
						// bugixed from 0.9.54: now the dates gets centered when there's too much dates.
						$(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
					}
				}
			}
			// prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
			if(howManyDates == 1) {
				$(settings.prevButton+','+settings.nextButton).fadeOut('fast');
			} else if(howManyDates == 2) {
				if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.prevButton).fadeOut('fast');
				 	$(settings.nextButton).fadeIn('fast');
				} 
				else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.nextButton).fadeOut('fast');
					$(settings.prevButton).fadeIn('fast');
				}
			} else {
				if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.prevButton).fadeOut('fast');
				} 
				else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.nextButton).fadeOut('fast');
				}
				else {
					$(settings.nextButton+','+settings.prevButton).fadeIn('slow');
				}	
			}
		});

		$(settings.prevButton).click(function(event){
			event.preventDefault();
			// bugixed from 0.9.54: now the dates gets centered when there's too much dates.
			var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
			if(settings.orientation == 'horizontal') {
				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
				var currentIssueIndex = currentPositionIssues/widthIssue;
				var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
				var currentIssueDate = currentPositionDates+widthDate;
				if(currentPositionIssues >= 0) {
					$(settings.issuesDiv).stop();
					$(settings.datesDiv+' li:first-child a').click();
				} else {
					if (!$(settings.issuesDiv).is(':animated')) {
						// bugixed from 0.9.54: now the dates gets centered when there's too much dates.
						$(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
					}
				}
			} else if(settings.orientation == 'vertical') {
				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
				var currentIssueIndex = currentPositionIssues/heightIssue;
				var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
				var currentIssueDate = currentPositionDates+heightDate;
				if(currentPositionIssues >= 0) {
					$(settings.issuesDiv).stop();
					$(settings.datesDiv+' li:first-child a').click();
				} else {
					if (!$(settings.issuesDiv).is(':animated')) {
						// bugixed from 0.9.54: now the dates gets centered when there's too much dates.
						$(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
					}
				}
			}
			// prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
			if(howManyDates == 1) {
				$(settings.prevButton+','+settings.nextButton).fadeOut('fast');
			} else if(howManyDates == 2) {
				if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.prevButton).fadeOut('fast');
				 	$(settings.nextButton).fadeIn('fast');
				} 
				else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
					$(settings.nextButton).fadeOut('fast');
					$(settings.prevButton).fadeIn('fast');
				}
			} else {
				if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.prevButton).fadeOut('fast');
				} 
				else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
					$(settings.nextButton).fadeOut('fast');
				}
				else {
					$(settings.nextButton+','+settings.prevButton).fadeIn('slow');
				}	
			}
		});
		// keyboard navigation, added since 0.9.1
		if(settings.arrowKeys=='true') {
			if(settings.orientation=='horizontal') {
				$(document).keydown(function(event){
					if (event.keyCode == 39) { 
				       $(settings.nextButton).click();
				    }
					if (event.keyCode == 37) { 
				       $(settings.prevButton).click();
				    }
				});
			} else if(settings.orientation=='vertical') {
				$(document).keydown(function(event){
					if (event.keyCode == 40) { 
				       $(settings.nextButton).click();
				    }
					if (event.keyCode == 38) { 
				       $(settings.prevButton).click();
				    }
				});
			}
		}
		// default position startAt, added since 0.9.3
		$(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
		// autoPlay, added since 0.9.4
		if(settings.autoPlay == 'true') { 
			setInterval("autoPlay()", settings.autoPlayPause);
		}
	});
};

// autoPlay, added since 0.9.4
function autoPlay(){
	var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
	if(settings.autoPlayDirection == 'forward') {
		if(currentDate.parent().is('li:last-child')) {
			$(settings.datesDiv+' li:first-child').find('a').trigger('click');
		} else {
			currentDate.parent().next().find('a').trigger('click');
		}
	} else if(settings.autoPlayDirection == 'backward') {
		if(currentDate.parent().is('li:first-child')) {
			$(settings.datesDiv+' li:last-child').find('a').trigger('click');
		} else {
			currentDate.parent().prev().find('a').trigger('click');
		}
	}
}
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console