Skip to content

Instantly share code, notes, and snippets.

@xspirkovska

xspirkovska/Slider-like-Yahoo-Weather-App.markdown

Forked from anonymous/Slider-like-Yahoo-Weather-App.markdown
Created November 19, 2013 22:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xspirkovska/7554057 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xspirkovska/7554057 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 19, 2013.
    7 changes: 7 additions & 0 deletions Slider-like-Yahoo-Weather-App.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Slider like Yahoo Weather App
    -----------------------------


    A [Pen](http://codepen.io/nikolinass/pen/cdekq) by [Nikolina Spirkovska](http://codepen.io/nikolinass) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/nikolinass/pen/cdekq/license).
    14 changes: 14 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <div class="slider-wrap">
    <div class="slider" id="slider">
    <div class="holder">
    <div class="slide" id="slide-0"><span class="temp">74°</span></div>
    <div class="slide" id="slide-1"><span class="temp">64°</span></div>
    <div class="slide" id="slide-2"><span class="temp">82°</span></div>
    </div>
    </div>
    <nav class="slider-nav">
    <a href="#slide-0" class="slide-0">Slide 0</a>
    <a href="#slide-1" class="slide-1">Slide 1</a>
    <a href="#slide-2" class="slide-2">Slide 2</a>
    </nav>
    </div>
    73 changes: 73 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    var slider = {

    // Not sure if keeping element collections like this
    // together is useful or not.
    el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
    },

    timing: 800,
    slideWidth: 300, // could measure this

    // In this simple example, might just move the
    // binding here to the init function
    init: function() {
    this.offsetCalc();
    this.onScroll();
    this.onClick();
    },
    offsetCalc: function(el){
    var sliderOffset = this.slideWidth / 2
    cnt = 0,
    that = this,
    maxWidth = 0;
    $.each(this.el.allSlides, function(){
    maxWidth += that.slideWidth;
    cnt = maxWidth - that.slideWidth / 2;
    that.onScroll($(this), cnt, maxWidth);
    });
    },
    onScroll: function(slide, offset, maxWidth){
    var that = this;

    this.el.slider.on("scroll", function(event) {
    console.log($(event.target).scrollLeft());
    var minOffset = offset - that.slideWidth / 2;
    if( $(event.target).scrollLeft() >= minOffset && $(event.target).scrollLeft() <= maxWidth ){
    var element = "." + $(slide).prop("id");
    $(".slider-nav > a").removeClass("active");
    $(element).addClass("active");
    }
    slider.moveSlidePosition(event);
    });
    },
    onClick: function(){
    this.el.sliderNav.on("click", "a", function(event) {
    slider.handleNavClick(event, this);
    });
    },
    moveSlidePosition: function(event) {
    // Magic Numbers =(
    this.el.allSlides.css({
    "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });
    },
    handleNavClick: function(event, el) {
    event.preventDefault();
    var position = $(el).attr("href").split("-").pop();
    this.el.slider.animate({
    scrollLeft: position * this.slideWidth
    }, this.timing);

    this.changeActiveNav(el);
    },
    changeActiveNav: function(el) {
    this.el.allNavButtons.removeClass("active");
    $(el).addClass("active");
    }
    };

    slider.init();
    65 changes: 65 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    @import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);

    .slider-wrap {
    width: 300px;
    height: 500px;
    margin: 0 auto;
    }
    .slider {
    overflow-x: hidden;
    }
    .holder {
    width: 300%;
    }
    .slide {
    float: left;
    width: 33.3%;
    height: 500px;
    position: relative;
    background-position: -100px 0;
    z-index:-1;
    }
    .temp {
    position: absolute;
    color: white;
    font-size: 80px;
    bottom: 20px;
    left: 15px;
    font-family: 'Josefin Slab', serif;
    font-weight: 100;
    }
    #slide-0 {
    background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
    }
    #slide-1 {
    background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
    }
    #slide-2 {
    background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
    }
    .slide:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(transparent, black);
    z-index:-1;
    }
    .slider-nav {
    text-align: center;
    margin: -25px 0 0 0;
    }
    .slider-nav a {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: #ddd;
    overflow: hidden;
    text-indent: -9999px;
    border-radius: 50%;
    }
    .slider-nav a.active {
    background: #999;
    }