newshorts/slider.html

## slider.html
<!--
No License, if you feel like giving me credit for something...my name's Mike.

http://iwearshorts.com/

README:

This example requires you install google closure (http://code.google.com/closure/library/docs/gettingstarted.html) and make the library available. Put this file next to the closure-library directory and you should be able to run it without a problem.

It uses some closure tools to manage the slider positions. It also uses css3 transitions for effect. Don't use this for production as it won't be compatible with all major browsers (http://www.findmebyip.com/litmus).

Obviously I should have refactored the javascript a bit...but it's 1AM and I have to be to work early.

-->
<!DOCTYPE html>
<html>
    <head>
        <title>Simple Slider using Google Closure and CSS3 transitions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #window {
                width: 600px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }

            .slide {
                width: 600px;
                height: 300px;
                position: absolute;
                top: 0;
                left: 0;
                -webkit-transition: left 0.3s ease;
                -moz-transition: left 0.3s ease;
                -o-transition: left 0.3s ease;
                transition: left 0.3s ease;
            }

            .slide:nth-of-type(1) {
                background-color: salmon;
            }

            .slide:nth-of-type(2) {
                background-color: cornflowerblue;

            }

            .slide:nth-of-type(3) {
                background-color: cornsilk;
            }

            .slide:nth-of-type(4) {
                background-color: burlywood;
            }

            .slide:nth-of-type(5) {
                background-color: royalblue;
            }

            .slide:nth-of-type(6) {
                background-color: steelblue;
            }

            .arrow {
                position: absolute;
                display: block;
                width: 50px;
                height: 50px;
                top: 125px;
                background-color: orangered;
                z-index: 300;

            }

            #arrow-left {
                left: -25px;
            }

            #arrow-right {
                right: 335px;
            }
        </style>
        <script src="closure-library/closure/goog/base.js"></script>
        <script>
            goog.provide("goox.ui.Slider");

            goog.require("goog.dom");
            goog.require("goog.style");
            goog.require("goog.math");
            goog.require("goog.fx");
            goog.require("goog.fx.dom");
            goog.require("goog.fx.AnimationParallelQueue");
        </script>
    </head>
    <body>
        <div style="margin: 0 auto; width: 960px; min-height: 600px; position: relative;">
            <a href="#" id="arrow-left" class="arrow"></a>
            <a href="#" id="arrow-right" class="arrow"></a>
            <div id="window">
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
            </div>
        </div>

        <script>
            var slides = goog.dom.getElementsByTagNameAndClass(null, 'slide');
            console.dir(slides);

            var slideLength = slides.length;

            var slideWidth = 600;

            var rah = false;

            var lah = false;

            var index = 0;

            goog.array.forEach(slides, function(slide, idx) {
                var posLeft = slideWidth*idx;
                goog.style.setStyle(slide, {left: posLeft+'px'});
            });

            var setIndex = function(next) {
                var d = next ? 1 : -1;
                index = goog.math.modulo(index + d, slideLength);
                console.debug(index);
            }

            var calcLeftPos = function(idx) {
                return (((-1*index)*(slideWidth)) + idx*(slideWidth));
            }

            goog.events.listen(goog.dom.getElement("arrow-right"), goog.events.EventType.CLICK, function (e) {
                e.preventDefault();
                setIndex(true);

                goog.array.forEach(slides, function(slide, idx) {

                    var leftPos = calcLeftPos(idx);

                    goog.style.setStyle(slide, {left: leftPos+'px'});
                });

                if(rah) {
                    goog.style.setStyle(goog.dom.getElement("arrow-left"), {display: 'block'});
                }
            });

            goog.events.listen(goog.dom.getElement("arrow-left"), goog.events.EventType.CLICK, function (e) {
                e.preventDefault();
                setIndex(false);

                goog.array.forEach(slides, function(slide, idx) {

                    var leftPos = calcLeftPos(idx);

                    goog.style.setStyle(slide, {left: leftPos+'px'});
                });

                if(lah) {
                    goog.style.setStyle(goog.dom.getElement("arrow-right"), {display: 'block'});
                }
            });
        </script>

    </body>
</html>
	<!--
	No License, if you feel like giving me credit for something...my name's Mike.

	http://iwearshorts.com/

	README:

	This example requires you install google closure (http://code.google.com/closure/library/docs/gettingstarted.html) and make the library available. Put this file next to the closure-library directory and you should be able to run it without a problem.

	It uses some closure tools to manage the slider positions. It also uses css3 transitions for effect. Don't use this for production as it won't be compatible with all major browsers (http://www.findmebyip.com/litmus).

	Obviously I should have refactored the javascript a bit...but it's 1AM and I have to be to work early.

	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Slider using Google Closure and CSS3 transitions</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
	#window {
	width: 600px;
	height: 300px;
	position: relative;
	overflow: hidden;
	}

	.slide {
	width: 600px;
	height: 300px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: left 0.3s ease;
	-moz-transition: left 0.3s ease;
	-o-transition: left 0.3s ease;
	transition: left 0.3s ease;
	}

	.slide:nth-of-type(1) {
	background-color: salmon;
	}

	.slide:nth-of-type(2) {
	background-color: cornflowerblue;

	}

	.slide:nth-of-type(3) {
	background-color: cornsilk;
	}

	.slide:nth-of-type(4) {
	background-color: burlywood;
	}

	.slide:nth-of-type(5) {
	background-color: royalblue;
	}

	.slide:nth-of-type(6) {
	background-color: steelblue;
	}

	.arrow {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	top: 125px;
	background-color: orangered;
	z-index: 300;

	}

	#arrow-left {
	left: -25px;
	}

	#arrow-right {
	right: 335px;
	}
	</style>
	<script src="closure-library/closure/goog/base.js"></script>
	<script>
	goog.provide("goox.ui.Slider");

	goog.require("goog.dom");
	goog.require("goog.style");
	goog.require("goog.math");
	goog.require("goog.fx");
	goog.require("goog.fx.dom");
	goog.require("goog.fx.AnimationParallelQueue");
	</script>
	</head>
	<body>
	<div style="margin: 0 auto; width: 960px; min-height: 600px; position: relative;">
	<a href="#" id="arrow-left" class="arrow"></a>
	<a href="#" id="arrow-right" class="arrow"></a>
	<div id="window">
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
	<div class="slide"></div>
	</div>
	</div>

	<script>
	var slides = goog.dom.getElementsByTagNameAndClass(null, 'slide');
	console.dir(slides);

	var slideLength = slides.length;

	var slideWidth = 600;

	var rah = false;

	var lah = false;

	var index = 0;

	goog.array.forEach(slides, function(slide, idx) {
	var posLeft = slideWidth*idx;
	goog.style.setStyle(slide, {left: posLeft+'px'});
	});

	var setIndex = function(next) {
	var d = next ? 1 : -1;
	index = goog.math.modulo(index + d, slideLength);
	console.debug(index);
	}

	var calcLeftPos = function(idx) {
	return (((-1index)(slideWidth)) + idx*(slideWidth));
	}

	goog.events.listen(goog.dom.getElement("arrow-right"), goog.events.EventType.CLICK, function (e) {
	e.preventDefault();
	setIndex(true);

	goog.array.forEach(slides, function(slide, idx) {

	var leftPos = calcLeftPos(idx);

	goog.style.setStyle(slide, {left: leftPos+'px'});
	});

	if(rah) {
	goog.style.setStyle(goog.dom.getElement("arrow-left"), {display: 'block'});
	}
	});

	goog.events.listen(goog.dom.getElement("arrow-left"), goog.events.EventType.CLICK, function (e) {
	e.preventDefault();
	setIndex(false);

	goog.array.forEach(slides, function(slide, idx) {

	var leftPos = calcLeftPos(idx);

	goog.style.setStyle(slide, {left: leftPos+'px'});
	});

	if(lah) {
	goog.style.setStyle(goog.dom.getElement("arrow-right"), {display: 'block'});
	}
	});
	</script>

	</body>
	</html>