Responsive Website Design: jQuery Timeline

index.html

<!doctype html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="author" content="">
 
 <title>jQuery Timeline</title>
 <link rel="stylesheet" href="style.css" media="screen" />
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="jquery.timeline.js"></script>
 <script>
  $(function(){
   $().timelinr({
    orientation:  'vertical',
    issuesSpeed:  300,
    datesSpeed:  100,
    arrowKeys:   'true',
    startAt:  3
   })
  });
 </script>

</head>

<body>
 
 <div id="timeline">
  <ul id="dates">
   <li><a href="#2006" class="selected">2006</a></li>
   <li><a href="#2007">2007</a></li>
   <li><a href="#2008">2008</a></li>
   <li><a href="#2009">2009</a></li>
   <li><a href="2010">2010</a></li>
   
  </ul>
  <ul id="issues">
   <li id="2006" class="selected">
    <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="256" height="256" />
    <h1>2006</h1>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.

</p>
   </li>
   <li id="2007">
    <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" width="256" height="256" />
    <h1>2007</h1>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>
   </li>
   <li id="2008">
    <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" width="256" height="256" />
    <h1>2008</h1>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>
   </li>
   <li id="2009">
    <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" width="256" height="256" />
    <h1>2009</h1>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>
   </li>
   <li id="2010">
    <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" width="256" height="256" />
    <h1>2010</h1>
    <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>
   </li>
   
  </ul>
  <div id="grad_top"></div>
  <div id="grad_bottom"></div>
  <a href="#" id="next">+</a>
  <a href="#" id="prev">-</a>
 </div>
  
</body>
</html>

style.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: 500px;
  height: 600px;
  overflow: hidden;
  margin: 40px auto;
  position: relative;
  background: url('../images/dot.gif') 3px top repeat-y;
 }
  #dates {
   width: 100px;
   height: 600px;
   overflow: hidden;
   float: left;
  }
   #dates li {
    list-style: none;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 24px;
    padding-left: 10px;
    background: url('../images/biggerdot.png') left center no-repeat;
   }
    #dates a {
     line-height: 38px;
     padding-bottom: 10px;
    }
    #dates .selected {
           font-size: 38px;
    }
  
  #issues {
   width: 400px;
   height: 600px;
   overflow: hidden;
   float: left;
  } 
   #issues li {
    width: 400px;
    height: 600px;
    list-style: none;

}
    #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;
     -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;
     text-align: center;
     text-shadow: #000 1px 1px 2px;
    }
    #issues li p {
     font-size: 14px;
     margin: 10px 20px;
     font-weight: normal;
     line-height: 22px;
     text-shadow: #000 1px 1px 2px;
    }
  
  #grad_top,
  #grad_bottom {
   width: 500px;
   height: 80px;
   position: absolute;
  }
   #grad_top {
          top: 0;
          background: url('../images/grad_top.png') repeat-x;
   }
   #grad_bottom {
          bottom: 0;
          background: url('../images/grad_bottom.png') repeat-x;
   }
  
  #next,
  #prev {
   position: absolute;
   left: 55%;
   font-size: 70px;
   width: 38px;
   height: 22px;
   background-position: 0 -44px;
   background-repeat: no-repeat;
   text-indent: -9999px;
   overflow: hidden;
  }
   #next:hover,
   #prev:hover {
    background-position:  0 0;
   }
   #next {
    bottom: 0;
    background-image: url('../images/next_v.png');
   }
   #prev {
    top: 0;
    background-image: url('../images/prev_v.png');
   }
    #next.disabled,
    #prev.disabled {
     opacity: 0.2;
    }

jquery.js

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');
  }
 }
}

Wednesday 8 April 2015

jQuery Timeline

index.html

style.css

jquery.js

No comments:

Post a Comment