Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт timeline - большой разрыв между датами (https://javascript.ru/forum/dom-window/69140-skript-timeline-bolshojj-razryv-mezhdu-datami.html)

Anna1991 01.06.2017 11:57

Скрипт timeline - большой разрыв между датами
 
Вложений: 1
Всем привет!
Подскажите, пожалуйста, такая ситуация:
есть скрипт на js, который отображает на сайте timeline - линию времени. У меня между датами большой промежуток и приходится долго листать. Можно сделать так, чтобы промежуток был между датами одинаковый?

Скрипт прикреплён.

Anna1991 01.06.2017 16:12

может быть плохо объяснила... наглядно посмотреть можно здесь:
https://codyhouse.co/gem/horizontal-timeline/
но там даты относительно друг друга рядом находятся. А если сделать между ними расстояние в десять лет - то уже приходится долго листать...

рони 01.06.2017 16:46

Anna1991,
заменить в плагине соответсвующие функции
function setDatePosition(timelineComponents, min) {
		for (i = 0; i < timelineComponents['timelineDates'].length; i++) {
		    var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),
		    	distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 2;
		   // timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');
              timelineComponents['timelineEvents'].eq(i).css('left', (100*i + 15)+'px');
		}
	}

	function setTimelineWidth(timelineComponents, width) {
		var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length-1]),
			timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'],
			timeSpanNorm = Math.round(timeSpanNorm) + 4,
			//totalWidth = timeSpanNorm*width;
            totalWidth = (timelineComponents['timelineDates'].length - 1)*100+64;
		timelineComponents['eventsWrapper'].css('width', totalWidth+'px');
		updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth);
		updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents);

		return totalWidth;
	}

laimas 01.06.2017 16:59

рони,
согласно описания в плагине минимальный шаг между датами задается в переменной eventsMinDistance в пикселях. Даты временной шкалы задаются в атрибутах date-date, минимальная расстояние между которыми и будет равно указанному в eventsMinDistance. В примере 60 рх для 5 дней, для 10 будет равно 120 рх. Получается, что нужно просто определить в eventsMinDistance нужную величину.

рони 01.06.2017 17:15

laimas,
ничего в плагине менять не надо :lol: -- достаточно все указать в течение одного месяца не хватит то следующего.
Anna1991, укажите даты через равные промежутки в атрибуте
data-date="16/01/2014" неважно какая дата на самом деле.

laimas 01.06.2017 17:24

Цитата:

Сообщение от рони
ничего в плагине менять не надо

А там и не написано, что менять в плагине, этот параметр задаваемый, а вот кто-то, не будем говорить кто, хотя это было рони, предлагает заменить функции. :)

Этот параметр для минимальной разницы дат на временной шкале. Следовательно, формируя данные для нее, зная макс. и мин. разницу между датами, задать eventsMinDistance.

рони 01.06.2017 18:58

Цитата:

Сообщение от laimas
Этот параметр для минимальной разницы дат на временной шкале. Следовательно, формируя данные для нее, зная макс. и мин. разницу между датами, задать eventsMinDistance.

не могу понять о чём ты, уже второй раз пишешь, особенно причём тут eventsMinDistance :(
видимо для меня проще через data-date сделать или плагин поменять.

laimas 01.06.2017 19:53

Цитата:

Сообщение от рони
особенно причём тут eventsMinDistance

В описании плагина расписана настройка через данный параметр, определяющая расстояния между точками на временной шкале.

рони 01.06.2017 20:12

laimas,
и что нужно сделать с этим параметром,чтоб промежутки были одинаковыми???

laimas 01.06.2017 20:54

Цитата:

Сообщение от рони
и что нужно сделать с этим параметром,чтоб промежутки были одинаковыми???

В описании говорится, что интервалы дат на временной шкале могут быть неравномерными, а данный параметр определяет расстояние для наименьшего интервала, по которому уже будут рассчитываться расстояния между остальными (в демонстрации, мин. между 30 августа и 15 сентября = 60рх, а между 9 июля и 30 августа = 182рх, и т.д.). Получается, что чем более интервал, тем меньшее значение значение этого параметра нужно задавать. Но если наименьший к примеру 3 дня, а наибольшие годы, то и получатся слишком большие расстояния между точками.

Более ничего то нет из задаваемых параметров.


Часовой пояс GMT +3, время: 22:54.