Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

cabrinha98
cabrinha98
10,616 Points

Calender Slider

I´m currently programming an Calender and had the idea to design it like a slider.

Something like: http://wisestartupblog.com/wp-content/uploads/2008/02/itunes-cover-flow1.png

The selected day should be centered on the viewport and should show below later on different events.

I´ve created a flex-box and created for each day a rounded div-container and set the parent container to overflow for hiding the non relevant days.

HTML with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <section id="top_container">
    <div id="date_rotation">
    </div>
    </section>
    <nav id="menu_bar">
    </nav>
    <section id="event_container">
      jj
    </section>
    <script>

      // Variables

      var date = new Date();
      var daynames = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
      var monthnames = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober",
          "November","Dezember"];
      var calStart = new Date(2015, 4, 28);
      var selectedYear = calStart.getFullYear();
      var selectedMonth = calStart.getMonth();
      var selectedDay = calStart.getDate();
      var calLength = 2000;

      //Functions

      function daysofMonths(myyear,mymonth) {  
        var monthStart = new Date(myyear, mymonth, 1);
        var monthEnd = new Date(myyear, mymonth + 1, 1);
        var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
        return monthLength;
        }

      // Creating Calender

          for (var i=0; i <= calLength; i++) {
            currentDate = new Date(selectedYear, selectedMonth, selectedDay);
            if (selectedDay > daysofMonths(selectedYear,selectedMonth)) {
              selectedDay = 1;
              selectedMonth ++;
                if (selectedMonth > 11) {
                  selectedMonth = 0;
                  selectedYear ++;
                }
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              console.log("First");
            } else {
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              selectedDay ++;
              console.log("Secound");
            }
          }

      // Rotate Calender

      // Get Position relative to Container

      $(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px"); 
    </script>
  </body>
</html>

SCSS

@import "compass/css3";

// Variables

$overlay: rgba(0,0,0,0.75);
$light_overlay: rgba(0,0,0,0.50);

//Layout


#top_container {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 300px;
  background-color: $overlay;
  border-bottom: 2px solid black;
}

#event_container {
  margin: 0 auto 0;
  height: 100%;
  width: 70%;
  background-color: $light_overlay;
}

#menu_bar {
  width: 70%;
  margin: 302px auto 0;
  height: 50px;
  background-color: $overlay;
  color: white;
}


#date_rotation {
  @include display-flex(flex);
  @include flex-direction(row);
  position: fixed;
  top: 75px;
  z-index: 101;
  .date_picker {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 25px;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 1em;
    p {
      line-height:50px
    }
  }
  .date_picker:hover {
    cursor: pointer;
    transform: scale(1.5);
    background-color: $light_overlay;
    color: white;
  }
}

What I´m trying to archieve is to center the clicked div with the class date_picker and therefore moving the complete parent overflowed container.

I´m totally stuck and dont know how to exactly move the parent-container till the selected child-item is centered perfectly =/ Id love to have an animated solution or hints how I can archieve my goal.

edit: Would be also nice to know if there is a possibility to change the css related to the position. So the selected day in the center of the window should be highlighted with transform: scale(1.5).

Would really appreciate some hints/answers =)

Best regards Cab

1 Answer

It would be great if you provide us with CSS without mixins and so on. You have a problem inside script tags JS too.

When you add a new one element inside DOM and execute 'handler' on it there is a time when element doesn't exist and jQuery can't attach it. There is some other construction for such situation. Look below and try to find out, how "jquery event on appended element" works.

$(document).on('click', '.someClass', function(){});

I hope that is what you are looking for. BTW, check your code with some tools. There is the problem with brackets on it. {{{ }}}

Edited code: http://codepen.io/newmandani/pen/PqWwMe