Как убрать часть верхней границы блока?

Алексей A: ну, как раз тот эффект который у меня в примере, в фотошопе не сделаешь

Как правильно удалить объект из массива?

Иван Соломенников: там же все читаемо, чего ж еще?

Наша с вами переписка занимает ~9300 символов без кода и цитат. Добавьте же еще каких-нибудь 100-150, расскажите мне что не так со скобками и почему унарный инкремент это плохо.

Как правильно удалить объект из массива?

"У вас во втором примере по последней ссылке, переменная location объявляется в глобальной области видимости, а она там не нужна до возникновения события." - как и в остальных. Не очень понял, ну и что? Я-то другие вещи тестировал.

"Также по части фигурных скобок, ай-ай-ай, jslint будет очень сильно и долго ругаться." - а что с ними не так? Все как доктор, то бишь Илья Кантор, прописал

"Переменная i++, тоже лучше так не делать, а использовать i += 1" - ну это уже вообще какая-то соционика) Это-то почему не правильно? (upd: и результаты тестов вторят вам, правда разница в производительности маленькая, но все таки. Кааак? Кааак, Карл?)

Как сделать сайт без перезагрузки страниц?

Zhainar: ... который еще вдобавок весь шириной 680px )

Почему люди не нажимают на рекламу?

...это во-первых, а во вторых adblock + anti-adblock killer xD

Как правильно удалить объект из массива?

Иван Соломенников: "Интересное утверждение что методы класса Array будут работать медленнее чем обычные циклы, но спорить не буду так как реализацию их на С++ не смотрел." - ну так они потому и обычные, что больше ничем не заняты, кроме перебора индексов, и потому же они быстрей. Методы класса Array имеют чуть более сложную логику, учитывающую структурные особенности массивов. О том и велась речь с самого начала: создавая в массиве дырки вы обрекаете себя на использование этих самых методов, ибо если вы все же хотите использовать простые циклы, вам придется вводить соответствующие проверки, что значительно уменьшит их преимущество в производительности. К слову, ES5 методы тоже намного (в ~30 раз) быстрее выполн...; таким образом они тоже не очень любят разреженные массивы, независимо от того вызывается колбэк или нет.

Вообще смотря на ваш код, я вижу почему мы с вами не сходимся во мнениях. Вы абсолютно для каждого действия выбираете более лаконичный код, чем более производительный: если нужно вызвать Array.prototype.slice, вы создаете для этого новый массив; для того чтоб выбрать нужные элементы, вы пользуетесь querySelectorAll, вместо того чтоб сначала выбрать контекст, а потом запустить поиск ...

Если переписать ваш пример, прирост производительности будет ~0-20%. А если переделать его, чтобы массив был разреженным, тогда ваш вариант будет работать в ~30% медленнее. В целом, это все конечно мелочи и большого внимания они не заслуживают, особенно при учете что эта ваша функция выполняется onhashchange и onload, и особенно производительной ее можно не делать. Но все же - если мы имеем возможность упростить код, сделав его менее лаконичным, но более производительным, разве это не стоило бы сделать?

Как убрать часть верхней границы блока?

Ну да, а надо было как-то по-другому?

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

Как правильно удалить объект из массива?

Иван Соломенников: Да нет же, это вы как-будто шутите, отвечая.

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

2. Понять не могу, при чем тут это и какое это отношение имеет к делу? Я на это уже отвечал. Я знаю, что колбэк не будет вызываться для этих элементов. В моем тесте так и происходит. Да даже если б вызывался, я бы сильно не расстроился потому что в вашем варианте производительность и так не составляет 10-и процентов той, от которой вы отказываетесь,

3. Раз вы читаете спецификацию, я вас бесконечно уважаю. Вы правы, я сам их не читал, тут ничего не могу сказать. Но jsperf - это реальная информация о производительности. Не вижу ничего постыдного в том, чтобы замерить реальное время выполнения кода, реализовывающего какой-то гипотетический случай, имеющий спорные моменты. Все же гляньте, демонстрация того что производительность ES5 методов в случае с разреженными и полными массивами ничтожна, по сравнению с производительностью простых циклов,

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

Как правильно удалить объект из массива?

Иван Соломенников: Почему это правильно не значит быстро? Если б мы говорили о музыке или о еще каком искусстве, то да. А тут, мне кажется, другое дело. И уж точно не тот правильный вариант, который делает использование простейших циклов до смешного медленным.

Ну так и напишите другой вариант тоже, хотя бы для энциклопедичности.

Как правильно удалить объект из массива?

Не очень понимаю, к чему вы вспоминаете про метод, которым изначально прошлись по элементу, если я говорю о том, что после такого грубого удаления элемента итерироваться движком ваш дырявый массив будет уже как dictionary, таким образом использование базовых циклов будет затруднено лишними проверками и замедлено (в ~50 раз), а использование методов типа forEach будет сильно замедлено (в ~20 раз). Убедитесь сами

Чувак спрашивает, как правильно удалить элемент. Если один способ настолько замедляет дальнейшую работу с массивом, он точно не может считаться верным, ибо простой проход по вашему массиву по длительности переплюнет даже временные затраты на slice()

Что мне необходимо сделать, чтобы поисковая система Yandex стала выдавать мой сайт на первой странице поисковой выдачи?

Насчет вашего послесловия: думаю это как-то связано с персонифицированной выдачей и количеством визитов ifour.ru через Яндекс в определенном браузере.

Как правильно удалить объект из массива?

Иван Соломенников: про избыточность ни слова не было.

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

А плохого в таком массиве то, что с точки зрения итератора это уже не массив, а dictionary, который перебирается в среднем всего-то в 20-25 раз медленнее, фигня-то какая. Лишние дыры всегда имеют значение.

Зачем лишаться возможности использовать простейшие циклы без лишних проверок, если можно этой возможности не лишаться?

Круг с точек, как сделать?

Всмысле "из точек"?

Как правильно удалить объект из массива?

Иван Соломенников: wuuut? Парень бы вроде дал вам понять о чем идет речь и почему ему не нравится ваше решение, даже показал, что именно в этом самом итоге ему не нравится. А в итоге получается вполне себе sparse array. И чем же лучше иметь дырявый массив?

Как сделать анимированый прогресс бар?

Ну вот - workshop.rs/demo/progress-bar-in-4-lines/#jquery-u...

Он же анимированный

Как захватить цвет?

Захват цвета это вроде бы дико сложная задача, вот гляньте на попытку реализации - https://html2canvas.hertzen.com/documentation.html, а это реализация захвата цвета из одной картинки - jsfiddle.net/thirtydot/9SEMf/869

В данный момент наверное нет реально работающих сервисов способных такое сделать.

Что это за синтаксис?

Ну, видать PHPStorm не умеет в ECMAScript 2015 на должном уровне, Игорь вам скинул пример аналогичного кода использующего классический синтаксис, такой конечно без ошибок везде пройдет; а если будете передавать стрелочные функции как аргументы, наверное всегда будет такой warning в PHPStorm.

Как настроить событие на элемент отслеженный getElementsByClassName???

По ошибке все просто: весь ваш код выполняется сразу же, ни одна из частей кода не ждет другую. А поскольку ваш скрипт завершает работу только спустя некоторое время, в последней части кода вы пытаетесь выбрать селектором элементы которых еще нет, а именно document.getElementsByClassName("section-span") не находит нужных элементов, потому что в момент его выполнения структура элемента body такая:

<body>
	<div id="block">
		...
		<div class="section" id="section-%number%">

		</div>
		...
	</div>
</body>

То есть в момент вызова функции document.getElementsByClassName("section-span") на странице есть только div#block с пустыми секциями; заполнены элементами span.section-span они будут позже.
Исправить это не исправляя основной код можно добавив лишнюю проверку к функции intervalOutputing, а именно после того, как колонка заполнена, проверять последняя ли это колонка, и если да, то выполнять ваш код. Вот рабочий пример.

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

Для начала раскидайте ваш код так, как этого хочет jsfiddle: весь css код - в окошко CSS, весь html код - в html, и js - в js.
Получится так.

У вас в функции setContent опечатка: вы присваиваете значение this.innerHTMl, когда у элемента this нет такого свойства. Этому элементу будет добавлено свойство innerHTMl. Зато у этого элемента есть свойство innerHTML xD То есть вы ошиблись в последнем символе, а поскольку JS регистрозависим, то это критический логический баг.

У вас есть переменная makingColumsInterval, вы в нее кладете идентификатор, который вам возвращает функция setTimeout(). В том же месте у вас объявлена именованная функция rekurs() в которой столько ошибок, что работоспособность вашего кода я назвал бы чудом) Эта функция просто нерабочая. Вот эта часть кода:

var makingColumsInterval = setTimeout(function rekurs(){
 	 	if(randNumbersArray.length === columQty){
    	    clearTimeout(makingColumsInterval);
	    }
		var randomNum = getRandomNum(1, columQty);

		if(randNumbersArray.indexOf(randomNum) === -1) {
			randNumbersArray.push(randomNum);
			outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
		}
		var makingColumsInterval = (rekurs(),100);
},100);

1. В строке "var makingColumsInterval = (rekurs(),100);" туча ошибок: для начала вы объявляете переменную makingColumsInterval через ключевое слово var, таким образом делая ее видимой только внутри функции rekurs() во время её выполнения. А ведь ваша функция рассчитана на то, чтоб использовать внешнюю переменную makingColumsInterval. Потом в этой же строке вы пропустили 'setTimeout': хотели написать 'setTimeout(rekurs(),100)', а написали '(rekurs(),100)' (кстати, даже если бы вы не пропустили 'setTimeout', все равно все бы обрушилось, ибо скобки после имени функции означают ее немедленный вызов, а тогда функция setTimeout первым аргументов бы получила undefined, что привело бы к ошибке). Таким образом запись в переменную makingColumsInterval уже начата (то есть ссылка на внешнюю переменную makingColumsInterval уже стерта), но не закончена, т.к. rekurs() никогда не завершается. То есть завершается, но принудительно браузером. Поэтому rekurs() не видит внешнюю переменную makingColumsInterval, зато видит недоделанную внутреннюю, которая ввиду своей недоделанности равна undefined. Если бы вы заглянули в консоль, вы бы увидели, что ваш скрипт выполняется больше хрентиллиона раз, а потом аварийно вырубается.

Читайте эту статью про области видимости.

2. Теперь об этой части кода:

if(randNumbersArray.length === columQty){
	clearTimeout(makingColumsInterval);
}

Видимо предполагалось, что этот if должен остановить выполнение функции, но по факту происходит вот что: сравниваются значения переменных randNumbersArray.length и columQty, если они равны - чистится таймаут и продолжается выполнение функции, а если не равны, то чистка таймаута пропускается, а функция продолжает выполняться. Блок, который выполняется условным оператором if, никак не влияет на ход функции, и в итоге функция выполняется пока браузер не остановит ее, выдав ошибку too much recursion. Исправить это можно добавив после чистки таймаута инструкцию 'return;'

В целом ваша функция использует странную логику - она выполняется, потом создает еще раз отложенный вызов самой себя и так до тех пор, пока randNumbersArray.length не станет равен columQty. Вместо setTimeout можно использовать setInterval - первый аргумент у него это функция которая будет выполняться каждый промежуток времени, заданный вторым аргументов. Если бы вы использовали setInterval, вам бы пришлось создать и очистить интервал всего раз.

После исправлений ваша функция стала выглядеть вот так:

makingColumnsInterval = setInterval(function (){
    if(randNumbersArray.length === columQty){
        clearInterval(makingColumnsInterval);
        return;
    }
    var randomNum = getRandomNum(1, columQty);

    if(randNumbersArray.indexOf(randomNum) === -1) {
      randNumbersArray.push(randomNum);
      outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
    }
}, 100);

Далее: в функции intervalOutputing когда количество добавленных span'ов равно пятидесяти, вы вызываете функцию afterOutput, которая в свою очередь выполняет сама себя каждые десять секунд, и не чистит за собой таймаут.
Функция afterOutput судя по логике общего и своего собственного алгоритма (и даже по ее названию) рассчитана на то, что она будет вызвана не после того, как заполнится колонка, а после того, как будут заполнены все колонки, то есть вызвана она будет всего раз. Таким образом 1) можно смело удалять из нее setTimeout, 2) можно было бы исключить ее из intervalOutputing, но ввиду того что на заполнение колонки уходит время (следовательно заполнение цифрами можно считать оконченным не когда алгоритм приступит к заполнению последней колонки, а когда последняя колонка будет заполнена) придется ее оставить там и выполнять только когда myI === 50 и randNumbersArray.length === columQty.

Вот вам исправленная версия.

Как настроить событие на элемент отслеженный getElementsByClassName???

Umid:
Если вы имеете ввиду зачем вписывать false если useCapture и так по дефолту будет равен false, то да, в некоторых случаях можно обойтись без него, т.к. вызов addEventListener('click', handler) аналогичен вызову addEventListener('click', handler, false). Но в некоторых случаях из удобства (и не только) этот аргумент не опускается. Например, у меня в примере: чтобы вешать обработчики я использую и true, и false значения useCapture, поэтому чтобы снимать обработчики, мне нужно различать обработчики на те которые используют capture, и те которые не используют, ибо если на элемент повешены обработчики обоих типов:

el.addEventListener('click', handler, false);
el.addEventListener('click', handler, true);

...то снять все обработчики с useCapture=true можно будет только явно указав useCapture=true в функции removeEventListener, и например такой код не уберет все обработчики:

el.removeEventListener('click', handler);
el.removeEventListener('click', handler);

...зато такой уберет:

el.removeEventListener('click', handler, false);
el.removeEventListener('click', handler, true);

А если вы имеете ввиду что не видите смысла в использовании capture режима, то тут я могу сказать только то, что если вы не видите как можно применить фичу, то она для вас наверное и впрямь бесполезна, и станет полезной только тогда, когда вы наткнетесь на необходимость использовать ее. Не знаю, какой пример вам дать, чтоб вы убедились в том, что эта фича полезна. Ну например если при клике на какие-то элементы нам сначала нужно вызвать обработчик родительского элемента, то у родителя useCapture должен быть true, а у элементов внутри него - false.

Как получить ключ объекта в js?

obj = { 'key': [ 1, 2, 3, 4, 5 ], 0: 'somevalue', 1: 564}

keys = Object.keys(obj)

for (var i = 0, l1 = keys.length; i < l1; i++) {
	if ( isNaN(parseInt(keys[i])) ) {
		for (var j = 0, arr = obj[keys[i]], l2 = arr.length; j < l2; j++) {
			console.log(arr[j]);
		}
	}
}

То есть если у вас в объекте есть элементы имеющие и числовые и текстовые ключи, то вы можете выбрать те, у которых ключи текстовые, и работать только с ними.