Ответы пользователя по тегу CSS
  • Как менять стили блока после нажатия на другой блок?

    lazalu68
    @lazalu68
    Salmon
    1. element.style.* атрибуты мапятся напрямую в style атрибут элемента. То есть с помощью element.style.* можно получить только те свойства, которые, собственно, прописаны в атрибуте style у элемента. На вашем примере: ваш элемент #p2 не имеет атрибута style вообще. Чтобы получить rendered (рассчитанные, примененные) стилевые свойства элемента, надо использовать window.getComputedStyle(el)

    2.
    if (document.getElementById("p2").style.display = "inline-block") {
      document.getElementById("p2").style.display = "none";
    }


    В этой строке вы сначала присваиваете style.display значение "inline-block", т.к. используете оператор присваивания (=) вместо операторов сравнения. Эта операция возвращает строку "inline-block", которая конвертируется в true, таким образом благополучно выполняется блок условного оператора, в котором происходит еще одно присвоение style.display = "none";.

    Отвечая на ваш вопрос "Как менять стили блока после нажатия на другой блок?" - мне кажется, для этого удобнее работать с классами: добавить в CSS класс с нужными стилями, по клику на кнопку добавлять/убирать класс с элемента.
    Ответ написан
    Комментировать
  • Как получить номер строки блока, в которой находится слово?

    lazalu68
    @lazalu68
    Salmon
    Ну, я попытался реализовать что-нибудь близкое к задаче, вот что получилось.

    Вкратце: кастомный метод getBoundingRectElement возвращает див, форма и положение которого взяты у исходного элемента с помощью нативного метода getBoundingClientRect. Первым аргументом этот метод (зачем-то) принимает класс, который вешается на элемент, вторым - флажок, в зависимости от которого элементы перерисовываются по скроллу и ресайзу или не перерисовываются.

    Способ обособления строк в отдельные строчные элементы, я думаю, значения не имеет. В моём примере эти элементы выделены заранее. А вообще можно это делать как угодно: делать replace, как советовал pashted, или например использовать selection.

    В примере слова из верхнего блока не перерисовываются, а из нижнего - перерисовываются.
    Ответ написан
    Комментировать
  • Как отцентрировать картинки любого размера по вертикали и горизонтали в строке?

    lazalu68
    @lazalu68
    Salmon
    Ну можно попробовать использовать vertical-align и вспомогательный элемент. Здесь написано как это работает и как можно это дополнительно допилить чтоб и до IE доходило.
    Ответ написан
    Комментировать
  • Плохо ли использовать инлайновые стили в оформлении статей или новостей на сайте?

    lazalu68
    @lazalu68
    Salmon
    Инлайн стили это те, которые описаны для каждого отдельного элемента в атрибуте style, а мне всё же кажется что вам нужны не инлайн стили, а просто индивидуальные стили для статей; несколько стилевых правил, описанных не в главном файле со стилями, а либо в отдельном, либо просто в блоке style.

    Как вам и говорит парень выше, посудите сами: хотите сделать вёрстку статьи уникальной - делайте нужные классы, добавляйте их в индивидуальные для статей/страниц стили. Так делают все, это удобно. Не просто так для каждой CMS существует туча плагинов типа "individual CSS"/"page specific CSS".

    К тому же, это просто не нужно. Нет никакой нужды хранить индивидуальные стили в основном стилевом файле, если можно их разделить.

    Я уважаю чужое мнение, и не в обиду Артёму Грибкову всё же хочу сказать, что религиозное "я это не приемлю" - не более чем максимализм, юношеский например. Не в теории, а на практике индивидуальные стили - это удобно.

    UPD: хочу заметить, что Артём и лайкавшие его ответ были немножко сбиты с толку тем, что автор использовал термин инлайн, хотя имел в виду page specific.
    Ответ написан
    1 комментарий
  • Как при наведении не потерять фокус блока?

    lazalu68
    @lazalu68
    Salmon
    Если я правильно понял, изначально у вас проблема в том, что вы вешаете обработчик на элемент, в котором находятся ваши links. То есть суть в том, что обработчик срабатывает 1) когда вы кликаете на kitchen, и 2) когда вы кликаете на любой дочерний элемент, например kitchen-links.

    Одно из решений - повесить e.stopPropagation() на клик по контенту. Как-то так
    Ответ написан
    Комментировать
  • Как можно вычислить ширину введенных символов?

    lazalu68
    @lazalu68
    Salmon
    Посмотрите тут и тут
    Ответ написан
    Комментировать
  • Как сделать скролл внутри элемента по кнопке?

    lazalu68
    @lazalu68
    Salmon
    Для того чтоб подобное сотворить, достаточно анимировать scrollTop для нужного элемента.

    Если нужно, чтобы скроллилось не однократно, а в течение всего нажатия на управляющий элемент, можно использовать setInterval: по нажатию (mousedown) на контрол начать выполнять функцию скролла через какой-то интервал, а когда кнопка отпущена (mouseup) - обнулять интервал.
    Ответ написан
    Комментировать
  • Как правильно получить координаты и масштаб?

    lazalu68
    @lazalu68
    Salmon
    Не знаю правильно ли я понял задачу, но все же:

    Вы для rel_top рассчитываете разницу между ui.position.top и начальным y вашего мувера, это значение будет отрицательно если вы уменьшаете ui.position.top. Поэтому чтобы в верхней части блока были положительные значения относительного расстояния по y, его расчет достаточно инвертировать.

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

    var rel_left = (ui.position.left - startLeft) / (width_joystick * 2); 
    var rel_top = -(ui.position.top  - startTop) / (height_joystick * 2);


    Имея все это, я думаю вы справитесь с расчетом scale)
    Ответ написан
    Комментировать
  • Как адаптировать множественный селектор на js для тех, у кого отключен js?

    lazalu68
    @lazalu68
    Salmon
    Кажется парень спрашивает, как адаптировать сам раскрывающийся список. Если это так, то сто́ит в элемент <noscript> сложить стили, которые будут использоваться, если в браузере выключены скрипты. Например, в вашем случае наверное сто́ит задать там стили, при которых ваш список был бы по дефолту полностью раскрытым.
    Ответ написан
    5 комментариев
  • Существует ли инспектор элементов в мобильном?

    lazalu68
    @lazalu68
    Salmon
    Не знаю всех тонкостей, но кажется browserstack добавил поддержку айфонов и андроида.
    Ответ написан
    Комментировать
  • Как сверстать блок с blur и fixed background?

    lazalu68
    @lazalu68
    Salmon
    Утащено у какого-то американца - https://jsfiddle.net/20uqjmqy/
    Ответ написан
    Комментировать
  • Как сделать такой прогресс бар?

    lazalu68
    @lazalu68
    Salmon
    Вариантов реализации - очень много)

    Я, например, думаю в сторону самого простого, самого надежного и самого кроссбраузерного варианта создания таких штук, а именно - разбиения исходных картинок на минимально возможные части с последующим впиливанием их в слои. Например так: фон (background) будет нижним слоем, полоска (fill) - посередине, и рамка (frame) будет верхним слоем. Для каждого из этих элементов берем такие части изображений из исходников, которых будет достаточно для того чтоб воспроизвести соответствующий элемент для любой ширины основного блока, то есть паттерны. Ну и хвосты еще (левые и правые части) для тех элементов, оформление которых не может быть выполнено паттернами.

    Для background паттерн получился такой:
    1
    Если вы умеете пользоваться графическими редакторами, можно осветлить fill и всю тень сымитировать на изображениях для frame. Если нет, то придется еще вырезать хвосты, то есть левую и правую часть для fill. Мне помогли, у меня вроде бы вся тень успешно перенесена в frame, так что для fill я использую только паттерн:
    2-2
    С frame такое не прокатит, у нее есть левые и правые части, которые придется оформлять раздельно. Левая, паттерн и правая часть соответственно получились такие:
    3-13-23-3
    Осталось придумать как будет происходить анимация fill, то есть как раз анимация прогресс бара. Я решил, что самым простым вариантом будет просто анимировать ширину fill: 0% ширина будет соответствовать 0% прогресса, 100% ширина будет соответствовать 100% прогресса, все прозрачно)

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

    Собственно, пример (без интерфейса взаимодействия с прогресс баром).

    Пример работает нормально начиная с IE8, IE7 начинает баловаться с box-sizing и все блоки разъезжаются. Можно искать решение, а можно забить, как я. Кстати, на IE8 пример запустить можно только открыв сохраненную его копию, т.к. в отличие от моего bloody-bar'а JSFiddle не поддерживает IE8 xD

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

    Вот если честно, не представляю как парни предлагают анимировать бар через @keyframes 0_0 С баром же надо взаимодействовать, это сделает JS.

    И конечно ни в коем случае не смотрите пример до тех пор, пока не реализуете сами, потеряете экспу))
    Ответ написан
    2 комментария
  • Как реализовать принудительный масштаб сайта?

    lazalu68
    @lazalu68
    Salmon
    Кажется отсюда можно почерпнуть полезное по теме
    Ответ написан
  • Ка сверстать такие колонки?

    lazalu68
    @lazalu68
    Salmon
    Ну например с флоатами, как-то так.
    Ответ написан
    Комментировать
  • Как выучить js творческому человеку?

    lazalu68
    @lazalu68
    Salmon
    "Как выучить 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, и так далее).

    ...
    Ответ написан
    1 комментарий
  • Как убрать часть верхней границы блока?

    lazalu68
    @lazalu68
    Salmon
    А обязательно нужно чо-то обрезать/вырезать? Мне такое даже в голову не пришло

    Вот без всяких разрывов и вычислений размеров башки этого мужика
    Ответ написан
    4 комментария