"Timelinejs"
Bootstrap 3.3.0 Snippet by irinashuvalova

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wallOfFameSingle clearfix">
<h3 class="WOFSingleTitle">Моя история. Моя работа. Моя жизнь.</h3>
{{#if this}}
<div class="WOFSingleLeftCol left-float">
<a href="#" class="WOFImageWrapper">
{{#each this}}
<img class="js-period-img" data-photo="img{{@index}}" src="{{Photo}}" alt="" style="display: none;">
{{/each}}
</a>
</div>
<div class="WOFSingleRightCol right-float">
<div class="WOFSingleYear"></div>
<div class="WOFSingleDescription clearfix">
<div class="WOFSingleDescriptionBody">
{{#each this}}
<div class="singleDescr" data-descr="descr{{@index}}" data-descr-time="{{Date}}" style="display: none;">
<p class="js-descr-date">{{Date}}</p>
<p class="js-descr-long">{{Description}}</p>
</div>
{{/each}}
</div>
</div>
<div class="timeline">
{{#each this}}
<span class="period" data-timestamp="{{Date}}" data-descr="descr{{@index}}" data-photo="img{{@index}}">{{Date}}</span>
{{/each}}
</div>
</div>
{{/if}}
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import '../../../../WSSC.PRT.AVG/Layouts/WSSC.PRT.AVG/styles/props';
p {
margin: 0;
}
.wallOfFameSingle {
width: 100%;
.box-sizing;
background-color: @blue_dark_bg;
font-family: @font_narrow;
padding-bottom: 20px;
}
.WOFSingleLeftCol {
width: 180px;
margin: 0 50px 20px 20px;
}
.WOFSingleRightCol {
width: 606px;
margin-right: 50px;
margin-bottom: 20px;
color: @white;
}
.WOFSingleTitle {
font-size: 18px !important;
font-weight: 400 !important;
text-transform: uppercase;
color: @white;
padding: 20px;
margin-bottom: 25px !important;
border-bottom: 1px solid @white;
}
.WOFImageWrapper {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var $wallItem = $('#wall-item');
var wallItemTemplate = Handlebars.compile($('#wall-item-template').html());
var $wallOfFame = $('#wall-of-fame');
var hashChanged = function (e) {
var hash = window.location.hash;
if (hash && hash !== '#') {
var id = hash.substring(1);
getWallItem(id)
.then(renderWallItem)
.then(function (data) {
$wallOfFame.hide();
$wallItem.show();
})
.then(renderDate);
}
else {
$wallItem.hide();
$wallOfFame.show();
}
};
var revertDescrDates = function () {
var containerBody = $('.WOFSingleDescriptionBody');
containerBody.children().each(function (i, oneDescr) { containerBody.prepend(oneDescr) });
}
var changeTimestampWidth = function () {
var visibleTimeline = [];
var timelineChildren = $('.timeline').children();
var timelineWidth = $('.timeline').width();
for (var i = 0; i < timelineChildren.length; i++) {
if ($(timelineChildren[i]).is(':visible')) {
visibleTimeline.push(timelineChildren[i]);
};
};
var newTimelineWidth = (timelineWidth - visibleTimeline.length) / visibleTimeline.length;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: