Graphic Products Guide Slider

Just a work thing...

by Steven Senkus

HTML

<script src="http://code.jquery.com/ui/1.8.6/jquery-ui.js"></script>
<link rel="stylesheet" href="www.gpcontent.com/global-includes/css/bootstrap.css">
<link rel="stylesheet" href="http://www.gpcontent.com/global-includes/css/bootstrap.css">
<div class="span12 scroll" id="guideSlide">
			<h2>FREE Safety &amp; Productivity Guides</h2>
			<div class="scrollGuides pull-left">
				<div class="scrollGuideWrap">
					<ul class="popular mleftZero">
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/five-s-system.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/fivess.png" alt="" />
							<h3>5S System Best Practice Guide</h3>
						</a></li>
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/nfpa-guide.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/nfpa.png" alt="" />
							<h3>NFPA Diamond Quick Reference Guide</h3>
						</a></li>
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/arc-flash.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/arcflash.png" alt="" />
							<h3>Arc Flash Practical Solutions Handbook</h3>
						</a></li>
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/pipe-guide.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/pm.png" alt="" />
							<h3>Pipe Marking Quick Reference Guide</h3>
						</a></li>
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/free-pm-best-practices.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/pmbp.png" alt="" />
							<h3>Pipe Marking Best Practice Guide</h3>
						</a></li>	
						<li class="span2"><a href="http://dev.graphicproducts.com/free-gifts/free-facility-pipe-marking-guide.php">
							<img src="http://graphic.pairserver.com/global/images/guides/scroll/pmcomm.png" alt="" />
							<h3>Guides &amp; Standards for Facility Pipe...

CSS

/* guide slider */
.scroll {padding:20px 0;}
.scroll h2 {font-weight:bold;font-size:2.1em;margin-bottom:5px;}
.scrollGuides {background:#f9f9f9;border:1px solid #e4e4e4;border-bottom:1px solid #bbb\9;border-radius:8px 8px 0 0;box-shadow:0 4px 6px -6px #303030;width:100%;padding:18px 0 12px;}
.scrollGuides ul, .xtraLinks ul {list-style-type:none;}
.scrollGuides ul li.span2 {margin-left:16px;}
.scrollGuides .arc li.offset2 {margin-left:167px;}
.scrollGuides a:hover, .scrollGuides a:hover h3{color:#303030;text-decoration:none;}
.scrollGuides img {display:block;margin:auto;}
.scrollGuides h3 {text-align:center;line-height:18px;color:#666768;padding-top:5px;font-size:1.1em;}
.guideCats {position:relative;text-align:center;background:linear-gradient(to bottom, #bbb 0%, #FFFFFF 5%, #EFEFEF 100%) repeat scroll 0 0 transparent;
padding:15px 0 8px;width:100%;border:1px solid #e4e4e4;border-top:0;border-radius:0 0 8px 8px;box-shadow:0 4px 6px -7px #303030;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #bbbbbb 0%, #ffffff 5%, #efefef 100%, #bbbbbb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(5%,#ffffff), color-stop(100%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #bbbbbb 0%,#ffffff 5%,#efefef 100%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #bbbbbb 0%,#ffffff 5%,#efefef 100%,#bbbbbb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #bbbbbb 0%,#ffffff 5%,#efefef 100%,#bbbbbb 100%); /* IE10+ */
background: linear-gradient(to bottom,  #bbbbbb 0%,#ffffff 5%,#efefef 100%,#bbbbbb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-8 */
}
.guideCats .dwnArrow{background:url("http://graphic.pairserver.com/global/images/main/down-arrow.png") no-repeat top left scroll...

JavaScript

/**
 * some stuff here and such... 
 *
 */ 
	var timelist = 100; // start time, time of first slide elm.
	var timeduration = 100; // this will add time to each elm.
	var effectin = 'easeOutQuart'; // jq ui easing effect for elms sliding in view.
	var effectout = 'easeInBack'; // jq ui easing effect for elms sliding out of view.
	var Pdistance = 1000; // distance of slide out and in.
	
	// Do not change below //
	var Ndistance = -Pdistance;
	var ulTotalWidth = 0;
	var timeArray = [];
	var runActions = true;
	for (var x=0; x < 6; x++) {
		timeArray[x] = timelist;
		timelist = timelist + timeduration;
	};
	
$(function(){
	// setup slides
	$('.scrollGuideWrap ul').hide();
	$('.guideCats a').each(function(i){
		$(this).addClass('slide'+i).attr('page',i);
	});
	$('.scrollGuideWrap ul').each(function(i){
		var thiswidth = $(this).width();
		$(this).addClass('slides next slide'+i).attr('page',i).show();
		ulTotalWidth = ulTotalWidth + thiswidth;
	});
	find_active();

    $('body').on('click','.guideCats a',function(e){
		if(runActions == true && !$(this).hasClass('active')){ // check if slide is running
			var current = $('.guideCats').find('.active').attr('page');
			var thiscenter = $(this).width() / 2;
			var thispos = $(this).position();
			var newpos = thispos.left + thiscenter + 7;
			var pageNum = $(this).attr('page');
			var thisslide = $('ul.slide'+pageNum);
			$('.guideCats a').removeClass('active').css('cursor', 'wait');
			$(this).addClass('active');
			$('.dwnArrow').animate({'left': newpos,'margin-left':'0'},300);
			animate_li(thisslide, $('ul.slide'+current));
			runActions = false;
		}
		e.preventDefault();
    });

	
});
function find_active(){
	var active = $('.guideCats a.active');
	var newpos = (active.width()/2) + active.position().left + 7;
	var slideNum = 'ul.slide'+active.attr('page');
	// setup slides area
	$('.scrollGuideWrap').width(ulTotalWidth);
	$(slideNum).removeClass('next').prevAll().addClass('prev').removeClass('next');
	// change the...