Kovalsky

Если я все правильно понял, то с jQuery можно сделать так:

$('.variations_form.cart').before( $('.description-table, .price').clone() )

Без jQuery как-то так:

var form = document.getElementsByClassName('variations_form')[0],
    form_container = form.parentElement,
    table_copy = form.getElementsByClassName('description-table')[0].cloneNode(true),
    span_copy = form.getElementsByClassName('price')[0].cloneNode(true);

form_container.insertBefore(table_copy, form);
form_container.insertBefore(span_copy, form);

Надо вывести в консоль все id? Если да, то так, наверное:

$( document ).ready(function() {
	$.ajax({
		url: 'http://mylink.com',
		type: 'GET',
		dataType: 'json',
		crossDomain: true,
		success: function(data){
			for (var i = 0, l = data.length; i < l; i++) {
				console.log(data[i].id);
			}
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader ("Authorization", "Token " + "mytoken");
		},
	});
});

"Как выучить js творческому человеку?"

Представления не имею)

"Код выполняется построчно и не перескакивает с строки на строку?"

Код выполняется в порядке появления инструкций. Упрощенно: движок разбирает исходный код, проверяет его на соответствие синтаксису, и если все Ок, то выполняет инструкции в том порядке, в каком они были описаны. Например:

var a = 5;

var test = function() {
	var b = 192847;

	var sum = a + b;

	alert('a + b = ' + sum);
};

test();

Первая инструкция это "var a = 5;", она сложная, т.к. состоит из двух инструкций: одна это объявление переменной a, другая - присвоение переменной a значения 5. Если разделить эту сложную инструкцию на две элементарные, то получится так:

var a;

a = 5;

Далее. Вторая инструкция в моем коде это "var test = function() { var b = 192847; var sum = a + b; alert('a + b = ' + sum); };". Она тоже сложная, порядок выполнения такой:

1. Объявление переменной test,
2. Присвоение переменной test значения "function() { var b = 192847; var sum = a + b; alert('a + b = ' + sum); };", (на самом деле в переменной test будет лежать ссылка на эту функцию, но мне кажется, что это пока можно пропустить)

Все инструкции внутри этой функции будут выполняться только тогда, когда эта функция будет вызвана посредством обращения к переменной, в которой она сохранена, с явным указанием передаваемых аргументов (даже если ни одного аргумента не будет передано). Следующая инструкция в моем коде как раз это и будет делать - вызывать функцию test:
test();
test - это название переменной, в которой лежит функция, а в скобках указаны аргументы, которые мы передаем функции, то есть никаких. Функция test содержит такие инструкции:

var b = 192847;

var sum = a + b;

alert('a + b = ' + sum);

Выполняться эти инструкции будет так, опишу в элементарных инструкциях:

1. var b; - объявление переменной b,
2. b = 192847; - присвоение переменной b значения 192847,
3. var sum; - объявление переменной sum,
4. sum = a + b; - присвоение переменной sum значения, равного сумме значений, которые сохранены в переменных a и b, то есть 5 + 192847 = 192852,
5. alert('a + b = ' + sum); - вызов функции alert и передача этой функции единственного аргумента 'a + b = ' + sum, который равен сумме строки 'a + b = ' и числа сохраненного в переменной sum. В JS можно прибавить строку к числу, потому что в этом случае число будет принудительно приведено к строке, таким образом произойдет объединение строк 'a + b = ' и '192852'. То есть эта инструкция вызывает функцию alert и передает ей аргумент 'a + b = 192852'. Функция alert выводит переданные ей аргументы в диалоговом окне в браузере, то есть вызов alert('a + b = ' + sum); покажет пользователю диалоговое окошке с текстом 'a + b = 192852'.

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

var a;

a = 5;

var test;

test = function() {	var b = 192847; var sum = a + b; alert('a + b = ' + sum); };

// выполнение следующих инструкций инициировано вызовом функции test()

var b;

b = 192847;

var sum;

sum = a + b;

alert('a + b = ' + sum);

Вызов функции alert на самом деле не является элементарной инструкцией, потому что сама по себе эта функция состоит еще из многих других, но посмотреть что в ней внутри, я не смогу) Поэтому схема останется такой. К тому же, схема от этого не теряет наглядности.

Всей этой белибердой я хотел показать, что элементарной единицей кода является инструкция. Отвечая на ваш вопрос "Код выполняется построчно и не перескакивает с строки на строку?": код, так сказать, перескакивает с строки на строку до тех пор, пока не будет найден конец текущей инструкции, после чего эта инструкция будет выполнена, а затем будет выполнена следующая инструкция.

"Если что то будет не по синтаксису то будет ошибка?"

Верно, любое несоответствие синтаксису вызовет ошибку. Возьмем наш же пример:

var a = 5;
var test = function() {
	var b = 192847;
	var sum = a + b;
	alert('a + b = ' + sum);
test();

В этом примере я намеренно пропустил символ "}", который показал бы движку (который выполняет код JS), что инструкция объявления функции (начавшаяся на второй строке) закончена.
При выполнении этого кода появляется такая ошибка:

"SyntaxError: missing } after function body"

Поскольку проверка синтаксиса происходит до выполнения кода, даже синтаксически правильно описанная инструкция var a = 5; не была выполнена, несмотря на то, что шла перед ошибочной инструкцией.

"Как можно манипулировать классом lowPosition которого нет?"

Ну, это можно делать так же, как можно на листочке бумаги рисовать несуществующих животных) Я так понял, речь об этой части кода: _block.toggleClass('lowPosition');
Метод .toggleClass('someClass') делает вот что: проверяет, имеет ли элемент класс 'someClass', и если элемент имеет класс 'someClass', то убирает этот класс, а если не имеет, то добавляет к элементу этот класс. Список классов, которые имеет элемент, описаны просто строкой: элемент <div class="container fluid"></div> имеет классы "container" и "fluid", а элемент <a href="example.com">example</a> так же как элемент <p class="">some paragraph</p> не имеет классов. Поэтому чтобы "манипулировать классом lowPosition которого нет", достаточно добавить строку "lowPosition" к строке с классами элемента. Например, если мы хотим добавить к элементу <div class="container fluid"></div>, класс "lowPosition", то в результате у нас получится такой элемент: <div class="container fluid lowPosition"></div>

".hasClass функция которая проверяет наличие класса, допустим. Мне обязательно это делать?"

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

$(document).ready(function () {

    $('.menu-trigger').click(function () {
        $('nav ul').slideToggle(500);
    }); 

    $(window).resize(function () {
        if ($(window).width() > 600) {
            $('nav ul').removeAttr('style');
        }
    }); 

	var _menu = $("#menu");
	var _block = $("#block");

	_menu.click(function () {
	    _block.toggleClass('lowPosition');
	    var nextpos = _block.hasClass('lowPosition') ? '10%' : '4%';
	    _block.animate({
	        'bottom': nextpos
	    }, 300);
	});

});

Это одна длинная инструкция. Тут происходит вот что: метод .ready() принимает аргументом функцию, которую он выполнит сразу же по рендеру (отрисовке) документа. Давайте сразу будем обсуждать ту часть этой функции, которая начинается с инструкции "var _menu = $("#menu");". В ней происходит вот что:

1. var _menu = $("#menu"); - объявляется переменная _menu, которой присваивается ссылка на элемент #menu,
2. var _block = $("#block"); - объявляется переменная _block, которой присваивается ссылка на элемент #menu,
3. _menu.click( function() {} ); (инструкции внутри функции опущены) - вызывается метод .click(), который принимает аргументом функцию function() {}. Метод .click( function() {} ) "связывает" некоторые события, происходящие в браузере, с функциями, которые должны быть выполнены, когда эти события произойдут, а именно: функция function() {} будет выполнена, когда для элемента _menu произойдет событие, то есть когда пользователь кликнет на него.

А теперь по инструкциям внутри этой функции. Когда пользователь кликает на элемент _menu происходит следующее:

1. _block.toggleClass('lowPosition'); - если элемент _block имеет класс 'lowPosition', то этот класс с него убирается, а если не имеет - добавляется,
2. var nextpos = _block.hasClass('lowPosition') ? '10%' : '4%'; - объявляется переменная nextpos, которой присваивается значение '10%' если элемент _block имеет класс 'lowPosition', или значение '4%' если элемент _block не имеет класс 'lowPosition',
3. _block.animate({ 'bottom': nextpos }, 300); - метод .animate() принимает аргументом объект с необходимыми для анимации свойствами и длительность анимации в миллисекундах, (в результате свойство 'bottom' элемента _block за 300 миллисекунд примет достаточное количество промежуточных значений, чтобы пользователю этот переход показался плавным. Например, если изначально свойство 'bottom' имело значение '4%', и мы в первом аргументе метода .animate() задали конечное значение '10%', и если предположить что за 300 миллисекунд метод .animate() анимирует 6 кадров, то свойство 'bottom' будет принимать такие значения, начиная с исходного и заканчивая тем, которое задано в первом аргументе для метода .animate(): 4%, 5%, 6%, 7%, 8%, 9%, 10%. Через 50 миллисекунд после начала анимации свойство будет равно 5%, через 100 - 6, и так далее).

...

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

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, там все довольно простенько, никаких проблем не должно возникнуть.