Kovalsky

Как-то так наверное

update: версия не использующая transform'ы для центрирования элементов

obj = { a: 1, b: 2, c: 3}

keys = Object.keys(obj)

for (var i = 0, l = keys.length; i < l; i++) {
  console.log(keys[i] + ' is ' + obj[keys[i]]);
  // keys[i] - это ключ
  // obj[keys[i]] - а это свойство, доступное по этому ключу
}

Во

Как-то так? Только получилось решение с помощью css, а не js

Структура немножко поменялась: главный контейнер #storage содержит контейнеры line, которые содержат контейнеры container, в которых лежат картинки. Контейнер line выполняет роль строки, то есть всегда будет масштабировать контент так, чтоб все влезло в ширину окошка.

Гляньте jQuery masonry

У вас верстка слайдера организована немного странно, поэтому чтобы исправить это не изменяя верстки, придется немного усложнить JS.

Видимый слайд у вас имеет "position: absolute" и по этому поводу занимает верхний слой над остальным контентом родителя, остальные слайды последовательно выстроены в вертикальный ряд и спрятаны с помощью "visibility: hidden; opacity: 0;". Так как к свойству "position" нельзя применить transition, когда вы переключаете слайд, текущий слайд сразу же получает "position: relative" и занимает свое место в вертикальном строю, а целевой слайд сразу же получает "position: absolute" и выскакивает на место предыдущего. То есть при переключении текущий слайд моментально исчезает, после чего сразу же становится виден первый видимый в ряду слайд (который прозрачный), а целевой слайд занимает top-овый слой и ему остается еще целая секунда, чтобы получить 100% opacity То есть в вашем варианте при каждом переключении пользователь видит три слайда: текущий, потом первый видимый в ряду и только потом - целевой. Отсюда и возникает эффект плавного перехода когда вы переключаетесь с 1 на любой другой или со 2 на 1: в этих случаях нету промежуточно видимого слайда, их участвует только двое, поэтому переход получается плавный.

В целом, я бы для начала поменял верстку как-нибудь) Тогда все будет просто.

Но если вы религиозно придерживаетесь вашей собственной верстки, то для нее я придумал такой вариант решения: разделить свойства класса .show на те, которые нужно анимировать, и на те, которые не нужно анимировать, и не анимируемые снимать со слайдов только в конце анимации, чтобы во время переключения в верхнем слое было два видимых слайда. Получилось так:

.slider_artists .show {
  opacity: 1;
}
.slider_artists .position {
  position: absolute;
  top: 0;
  left: 0;
}

При переключении целевой слайд получает сразу два класса - .show и .position, а текущий лишается сначала класса .show, а потом и .position, когда отыграется анимированный переход к дефолтным для img стилям. Последнее можно было сделать, например, добавив для слайдов eventListener на transitionend, который будет убирать класс .position c текущего элемента (хотя еще можно было по клику на control не только убирать класс .show, а еще оставлять setTimeout для текущего элемента на 1000 миллисекунд, который также будет убирать класс .position). Как-то так:

for(var i = 0; i < sliderLength.length; i++){
  sliderLength[i].addEventListener("transitionend", function() {
    if (!hasClass(this,'show')) {
      this.classList.remove('position');
    }
  }, false);
}

Готовый вариант на codepen.io

PS: А таки зачем вы сначала указываете transition для всех img, а потом еще раз его указываете для .show ?) Таки в момент когда img получает .show, он уже имеет нужный transition)

Если лень читать - пример

То есть вы хотите сделать так, чтобы при прокрутке скроллился только блок диалогов, да?

Если я правильно понял вопрос, то скажите, что значит ваша фраза "Кроме перекрытия блока другим блоком через fixed"? Эдак не получится) Потому что визуальная часть vk.com именно с использованием fixed и устроена: есть основной блок фиксированной ширины, внутри него блок контента, который слева и сверху сжат одним блоком sidebar и несколькими header блоками. Поведение этих блоков регулируется классом .im_fixed_nav, который вешается на элемент body: на обычных страницах, например странице пользователя, контент прокручивается вместе с сайдбаром и хэдером, ибо эти блоки имеют по дефолту свойство position: relative;, а на странице диалогов прокручивается только контент, потому что блоки sidebar и header получают position: fixed;. Вот правило, которое за это отвечает:

.im_fixed_nav #page_header, .im_fixed_nav #side_bar {
    position: fixed;
}

Вообще, структура DOM у vk.com довольно запутанная, но если упростить, выглядит она так:

body

	div.scroll-fix-wrap

		div.scroll-fix

			div.page-layout {

				div.header

				div.sidebar 

				div.content

			}

Названия блоков мною выбраны так, чтобы наиболее доступно показать как именно реализован scroll-fix. Некоторые названия блоков, которые я здесь использую, действительно используются vk.com, но не все, поэтому не ищите 100%-го совпадения.

Тут я набросал скелетик vk.com, который показывает, как это все происходит, как структуру так и переключение между режимами скролла. Там найдете ответ на свой вопрос.

На сайте вконтакте размеры большинства основных блоков задаются динамически, например считаются onscroll; в моем примере все не так круто, никакого динамического подсчета нету, но я честно разделил указания размеров так же, как на vk.com: статические - указаны в css, динамические - в html, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.

С jQuery:

$( "#textarea" ).load( "url-of-file-to-load", function( response, status, xhr ) {
	if ( status == "error" ) alert( "Sorry but there was an error: " + xhr.status + " " + xhr.statusText );
	else $( this ).val(response);
});

Как сказал tef, для ноды можно юзать дефолтный fs, там все довольно простенько, никаких проблем не должно возникнуть.

Кстати если я правильно понял данный кусок php, у вас этот js выполняется столько раз, сколько у вас элементов в массиве $humans. Это же не дело, надо js вынести, если не в отдельный .js, то хотя бы из foreach. И зачем вам вообще нужен элемент lastdiv? Мне кажется его можно смело исключить. Получится как-то так:

<div class="teams_block">
<script type="text/javascript">
$(document).ready(function(){
	var team_elements = $('.team_element'), 
		round_blocks = $('.round_block');

	$('.team_element').on('click', function(){
		var self = $(this), 
			team_description = $('<div class="team_description"><center><img src="/img/spinner_32.gif"></center></div>');
		self.find('.team_description').remove();
		self.append(team_description);
		team_description.load('/command/humandescription?id='+self.data('id'), function(){
			$(this).css('display','block');
		});
		team_elements.removeClass('active');
		round_blocks.removeClass('active');
		self.addClass('active');
		self.find('.round_block').addClass('active');
	});
});
</script>
<?php foreach ($humans as $human){ ?>
<div class="team_element" data-id='<?= $human->id ?>'>
	<div class="round_block">
		<img src="/images/<?= $human->image ?>" />
	</div>
	<div class="title"><?= $human->name ?></div>
	<div class="desc"><?= $human->office ?></div>
	<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
</div>
<?php } ?>
</div>

Для начала у вас какая-то не очень понятная для меня рекурсия в первом же предложении вопроса: "Приходит json в котором помимо прочего есть дата выступления участников. Нужно сравнить эту дату с датой в json". Какую с какой ?)

Потом я содержимое объектов не понял: что такое date и что такое dataRel и одна ли это и та же дата?

Но в целом это не важно, дальше все будет просто.

Каюсь, лень изобретать готовое решение, но если вас устроит наметка, то она такая:

Даты можно переводить в timestamp, как-то сходу у меня это получается не очень корректно (при переводе спарсенной строки обратно в дату, время отстает на час), но чую проблема в привязке в GMT, это решаемо. А уже таймстемпы сравниваются как обычные числа, не вижу далее никаких сложностей.

Например, так:

a = new Date(Date.parse('Wednesday, November 04, 2015' + ' 13:30'))
b = new Date(Date.parse('Wednesday, November 04, 2015' + ' 11:30'))

if (a > b) {
    // что-нибудь натворим тут
}

А раз вы говорите, что можете корректировать json, то пихните туда еще собственно timestamp, тогда вообще алгоритм будет прозрачный.

Если вам никто не ответит до завтра, то с утра натворю полноценное решение на основе имеющейся информации.

Нажмите на Preferences -> Browse packages, попадете в папку Packages. В ней вам надо зайти в папку Theme - Default и найти файлик Default.sublime-theme. В этом файлике вам нужно править объекты у которых поле class соответствует маске sidebar_*

Например так:

...
{
    "class": "sidebar_container",
    // $base02:    #073642         
    "layer0.tint": [7,54,66],
    "layer0.opacity": 1.0,
    "layer0.draw_center": false,
    "layer0.inner_margin": [0, 0, 1, 0],
    "content_margin": [0, 0, 1, 0]
},
{
    "class": "sidebar_tree",
    "row_padding": [8, 3],
    "indent": 12,
    "indent_offset": 17,
    "indent_top_level": false,
    // $base2:     #eee8d5         
    "layer0.tint": [238,232,213],
    "layer0.opacity": 1.0,
    "dark_content": false
},
{
    "class": "sidebar_heading",
    // $base1:     #93a1a1         
    "color": [147,161,161],
    "font.bold": true,
    // $base3:     #fdf6e3         
    "shadow_color": [253,246,227],
    "shadow_offset": [0, 1]
},
{
    "class": "sidebar_heading",
    "parents":
    [
        { "class": "tree_row", "attributes": ["selected"] }
    ],

    "shadow_color": [160, 174, 192]
},
{
    "class": "sidebar_label",
    // $base01:    #586e75         
    "color": [88,110,117],
    "font.bold": false
    // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
},
{
    "class": "sidebar_label",
    "parents": [{"class": "tree_row", "attributes": ["selected"]}],
    // $base01:    #586e75         
    "color": [88,110,117]
    // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
},

{
    "class": "sidebar_label",
    "parents": [{"class": "tree_row", "attributes": ["expandable"]}],
    "settings": ["bold_folder_labels"],
    "font.bold": true
}
...

Только этот код не добявляйте, это код для светлого сайдбара xD

Гляньте этот или этот

Ах да, вы же хотите еще чтоб он вам тип файлика показывал)

Вот тут лежит приличный список тем для саблайма, например с 15 по 20 темы имеют обозначения типов файлов, но они какие-то очень уж дефолтные. Я не нашел инфы о готовом решении по кастомизации иконок, но, думаю, вам не составит особых трудов добраться до папки с иконками и до конфига, который связывает иконки и типы файлов)

Вот тут целая куча иконок для саблайма, и все они там очень похожи на те, что вы заскринили. Я даже думаю, что это именно те. Инструкция по установке там же.

Вся моя писанина, кажется, не имела смысла - парень ниже дал ссылку на тему, которая по дефолту юзает иконки из вашего скрина)

Кажется по дефолту только третий саблайм умеет юзать иконки, так что если у вас на втором саблайме их нет, то просто поставьте Sublime Text 3 и накатите на него эту тему . После установки темы может показаться что вам подсунули фальшивку и это гавно (которое вы поставили) следует срочно удалить. Я не знаю, зачем разработчик темы сделал это, но с самого начала она выглядит... немного странно. Инструкция как сделать из этой темы то, что вы видите на скринах, лежит там же, на гите.