JQuery/JavaScript calender slider

В настоящее время я программирую Calender и имею идею создать его как слайдер.JQuery/JavaScript calender slider

Что-то вроде: http://wisestartupblog.com/wp-content/uploads/2008/02/itunes-cover-flow1.png

Выбранный день должен быть сосредоточен на видовом и должны показать ниже позже на различных мероприятиях.

Я создал гибкую коробку и создал для каждого дня округленный div-контейнер и установил родительский контейнер для переполнения для скрытия не актуальных дней.

HTML с 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

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

#event_container { 
    margin: 0 auto 0; 
    height: 100%; 
    width: 70%; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

#menu_bar { 
    width: 70%; 
    margin: 302px auto 0; 
    height: 50px; 
    background-color: rgba(0, 0, 0, 0.75); 
    color: white; 
} 

#date_rotation { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    position: fixed; 
    top: 75px; 
    z-index: 101; 
} 
#date_rotation .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; 
} 
#date_rotation .date_picker p { 
    line-height: 50px; 
} 
#date_rotation .date_picker:hover { 
    cursor: pointer; 
    transform: scale(1.5); 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
}

Что я пытаюсь это АРХИВ центрирования щелкнул DIV с классом date_picker и, следовательно, перемещение полный родительский контейнер переполняется.

Я полностью застрял и надел t know how to exactly move the parent-container till the selected child-item is centered perfectly =/ I d люблю иметь анимированное решение или подсказки, как я могу архивировать свою цель.

бы реально оценить некоторые намеки/ответы =)

Решение:

$(".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"); 

     //Center Selected child-items 

     var selectedDate = $(document).width()/2; 
     var selectedLeft = $(this).position().left 
     console.log(selectedLeft); 
     var dateCentering = selectedLeft - selectedDate; 
      dateCentering += 150; 
     $("#date_rotation").animate({ 
      'left' : -dateCentering 
      }); 
     });

С наилучшими пожеланиями Cab

источник

2015-05-28 Cabrinha98

Что я могу думать о том, чтобы вычислить смещение влево вашего центрированного элемента (л -cen), левое смещение вашего текущего (l-curr) и вычисление разности = l-cen-l-curr; (центрированный элемент минус тот, который вы хотите перейти к ... так что, если осталось, вы получите положительное значение, если это правильно, вы получите отрицательное значение). Примените разницу к переходу на #date_rotation (если это правильно, то есть отрицательное значение, ваш div будет двигаться влево). Это должно сработать. Вы можете технически применить переход и к первому элементу datepicker.

Получение вращения элементов, как показано на изображении, будет более сложным, но основано на том же принципе.

источник

2015-05-28 11:46:17

Спасибо, ты дал мне правильный намек =) Добавлено мое решение внизу. – Cabrinha98

Рад, что я мог помочь! Дайте мне знать, когда вы закончите, я бы хотел увидеть это в действии –

JQuery/JavaScript calender slider

ответ

Смежные вопросы