• Подсказка на css. Как треугольнику задать border?

    alsolovyev
    @alsolovyev
    Вы переделали как я написал и отметили свой ответ решением... хм... окей))

    ps да еще и криво сделали....
  • Подсказка на css. Как треугольнику задать border?

    alsolovyev
    @alsolovyev
    Задайте border-radius для элемента :after
    div::after{
      border-radius: 100% 0 0 0;
    }

    https://jsfiddle.net/zth7s63b/19/

    ps или создайте нормальную разметку. Ибо Ваша очень сомнительно выглядит... измените длину текста и будет беда, позиционирование - беда и тд... Да и идея создавать еще одну обертку для подсказки выглядит ужасно.

    psps https://jsfiddle.net/7zyxbj5k/ если делать как у Вас было.
  • Как загрузить файл с компьютера в папку без php?

    alsolovyev
    @alsolovyev
    Это функция рабочая. По ссылке выше документация к ней. Мне расширение написать Вам?

    Вот исходники расширения:
    var menu_obj = {
        'title': "Save Image in Folder...",
        'contexts': ["image"],
        'onclick': (function() { return false; })
    };
    
    var parent_id = chrome.contextMenus.create(menu_obj);
    var folders = JSON.parse(localStorage.getItem("folders"));
    var items = {};
    for (var i = 0; i < Object.keys(folders).length; i++) {
        var child_obj = {
            'title': folders[i],
            'contexts': ["all"],
            'onclick': (function(info,tab) { 
                var url = info['srcUrl'];
                var dir = items[info['menuItemId']];
                var filename = dir+url.substring(url.lastIndexOf('/')+1);
                chrome.downloads.download({url:url,filename:filename,saveAs: false},function() {
                    console.log(chrome.runtime.lastError);
                });
            }),
            'parentId': parent_id
        };
        var id = chrome.contextMenus.create(child_obj);
        items[id] = folders[i];
    }

    Что это Вам даст, если Вы даже доки читать не хотите?

    ps ппц, даже в доках пример есть....
    Examples
    You can find simple examples of using the chrome.downloads API in the examples/api/downloads directory. For other examples and for help in viewing the source code, see Samples.

    мб Вам не стоить браться за это дело?
  • Что значит li[i].getElementsByTagName('a')[0]?

    alsolovyev
    @alsolovyev
    let array = [1, 2, 3, 4, 5 .... n]
    
    console.log(array[0]) // вывод в консоле 1
    console.log(array[1]) // вывод в консоле 2
    console.log(array[2]) // вывод в консоле 3


    В цикле for Вы проходите по каждому элементу в массиве. Чтобы обратиться к конкретному элементу массива используется - array[n] - где N порядковый номер.

    В Вашем примере в цикле for каждый раз i увеличивается на 1.
    Получается на первом проходе цикла будет li[0], на втором li[1] .... пока не достигнет конца массива li.length - 1 (потому что начинаем считать с 0). После этого выполнение цикла остановится.

    <ul>
    	<li></li> <!-- li[0] -->
    	<li></li> <!-- li[1] -->
    	<li></li> <!-- li[2] -->
    	<li></li> <!-- li[3] -->
    	<li></li> <!-- li[4] -->
    </ul>
  • Как удаленно подключиться к MongoDB?

    alsolovyev
    @alsolovyev
    # запретить всё, что не разрешено для входящих
    iptables -P INPUT DROP 
    
    # разрешить подключаться с IP-адреса 1.2.3.4 по протоколу TCP на порт 20
    iptables -A INPUT -s 1.2.3.4 -p tcp --dport 20 -j ACCEPT
    
    # разрешить подключаться с IP-адреса 1.2.3.4 по протоколу TCP на порт 80
    iptables -A INPUT -s 1.2.3.4 -p tcp --dport 80 -j ACCEPT
    
    # посмотреть таблицу установленных правил
    iptables -nL


    Что-то такое
  • Как семантически правильно делать разметку главного меню сайта?

    alsolovyev
    @alsolovyev
    И почему это правильно? Потому что Вы читали книгу "Как стать верстальщиком. 5 издание" 1991 года?

    Из возможных плюсов могу выделить только 2 пункта:
    • До html5 было негласное правило(или соглашение\удобство) навигацию помещать в список. Поэтому cms (например wordpress) или программисты ожидают увидеть именно такую разметку.
    • Более удобное размещение подменю.

    Как можно заметить оба пункта сомнительные. В wordpress можно переопределить название tag'ов, а сабменю можно любым элементом сделать. Но у Вас как у программиста есть задача сделать код удобночитабельным. Для меня в2 вариант:
    <nav>
        <a>
        <a>
        <a>
    </nav>

    выглядит удобнее. И если у Вас нет необходимости в списке, то зачем его использовать?
  • Два блока объединились. Как исправить?

    alsolovyev
    @alsolovyev
    Владислав, попробуйте добавить overflow: hidden для .logo. И будет понятно, что блоки ведут себя правильно(текст Focal выходит за рамки блока .logo)
    https://jsfiddle.net/oL4btuhx/10/

    Если Вам надо текст поверх фото в блоке .logo, то удаляйте width - https://jsfiddle.net/oL4btuhx/11/
    Если надо текст отдельно от фото, то разделяйте на 2 блока - https://jsfiddle.net/oL4btuhx/12/ (или если нужно центровать по вертикали https://jsfiddle.net/oL4btuhx/14/ )
    ps пытался сделать максимально не затрагивая Вашу разметку.

    Ну а если говорить прямо, то Вам надо продумать лучше структуру header'а. Много лишнего в разметке + если будете что-то добавлять, то будет куча проблем. Посмотрите исходники популярных сайтов и делайте по аналогии.
  • Как удалить все одинаковые элементы из массива?

    alsolovyev
    @alsolovyev
    Vodnu, работает сей способ? Значит можно, но у Вас тут сразу несколько проблем:
    1. дублируете код. Зачем писать одно и тоже по несколько раз? Сейчас 2 раза, а если надо будет удалить 100+n?
    2. Что будет, если у Вас порядок поменяется в массиве?
    3. В чем причина отказа от стандартных методов? Все равно придется их изучить или хотя бы понять. Это намного проще и быстрее, чем писать свою "велосипед"
      ......
  • Как удалить все одинаковые элементы из массива?

    alsolovyev
    @alsolovyev
    Vodnu, что Вы имеете ввиду? Из документации:
    Метод filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

    filter() - это метод глобального объекта Array.

    Вот реализация сего метода, если Вам по какой-то причине надо знать как его написать самостоятельно(не знаю зачем Вам нужно это):
    if (!Array.prototype.filter)
      Array.prototype.filter = function(func, thisArg) {
        'use strict';
        if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
            throw new TypeError();
        
        var len = this.length >>> 0,
            res = new Array(len), // preallocate array
            t = this, c = 0, i = -1;
        if (thisArg === undefined)
          while (++i !== len)
            // checks to see if the key was set
            if (i in this)
              if (func(t[i], i, t))
                res[c++] = t[i];
        else
          while (++i !== len)
            // checks to see if the key was set
            if (i in this)
              if (func.call(thisArg, t[i], i, t))
                res[c++] = t[i];
        
        res.length = c; // shrink down array to proper size
        return res;
      };
  • Как сделать выезжающее меню при свайпе JQuery?

    alsolovyev
    @alsolovyev
    Правильное решение: добавить атрибут data-role="none"
    <label for="foo">
    <select name="foo" id="foo" data-role="none">
    	<option value="a">A</option>
    	<option value="b">B</option>
    	<option value="c">C</option>
    </select>


    ps А какие стили изменил?
    Если #custom-collapsible и #custom-collapsible h3 a(ну или какие у Вас), то просто переопределите стили у себя
    #custom-collapsible {
        width: 74% !important; 
        margin-left: 9px !important; 
        border-width: 0px !important; 
        background-color: white  !important;
    }
    
    #custom-collapsible h3 a {
        border-width: 0px !important; 
        background: white  !important;
    }
  • Canvas wave animate?

    alsolovyev
    @alsolovyev
    Артем, у Вас работает анимация. Добавьте к своему path opacity = 0
    var path = s.path(firstPath).attr({"fill-opacity": 0, stroke: "#000"});

    и Вы увидите, что у Вас просто путь нарисован плохо(если я правильно понял что вы хотите от сей анимации).
    5abbfaaf227de554643776.png
  • Как сделать выезжающее меню при свайпе JQuery?

    alsolovyev
    @alsolovyev
    Если Вы по windows swipe делаете, то его...

    В примерах обычно добавляют $(".swipe-area") (на весь экран которая), который и используют, но можно и document
  • Canvas wave animate?

    alsolovyev
    @alsolovyev
    Из описание threejs - легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.

    Оба созданы для реализации анимации на webgl. Вы можете анимировать все что угодно. Другое дело порог вхождения выше среднего(шейдеры и тп). Поэтому, возможно, для Вас будет лучше делать на snapsvg.io или использовать gsap (в данный момент стандарт для анимации любой в web)
  • Как изменить главную страницу сайта?

    alsolovyev
    @alsolovyev
    alex1nd, ну пусть как-то так будет loop - jsfiddle.net/Lt4n7/1
    но Вам все равно надо будет записать видео с экрана + чуть-чуть монтажа(удалить что-то\склеить куски )
  • Как изменить главную страницу сайта?

    alsolovyev
    @alsolovyev
    alex1nd, все верно. Вы никак не сможете взаимодействовать с видео. Или Вам придется переделывать весь сайт с нуля и делать уже как положено на canvas(использовать WebGl PixijS ThreeJS ... )
  • Как изменить главную страницу сайта?

    alsolovyev
    @alsolovyev
    alex1nd, я в2 пунктом хотел лишь показать, что wix и технология threeJS вообще никак не связаны. И если Вы этого не поняли\не заметили, то и "влезать" в исходники будет для Вас задачей невыполнимой. Сама технология webgl(threejs, шейдеры...еtc) очень сложная, которую годами люди изучают.

    А парень, который делал https://www.phantom-detective.ru/, нормально так "схитрил"(я бы назвал это другим словом)
    Вы можете сделать как и он. Для этого задаем display: none всем элементам на странице falter.wild.plus/#en. Оставляем только canvas. Запускаем программу захвата экрака(запись видео). Записываем все что проиходит. Обрезаем нужные кадры. Потом просто заменяем файл видео на новый. Про интерактив забудьте.
  • Как сделать адаптивной такую чудную сетку? Или как убрать BORDER у крайних блоков?

    alsolovyev
    @alsolovyev
    borderWidth - это просто размер Вашего бордера. Просто поставьте везде одно значение
    https://jsfiddle.net/5ynfpn3n/ - адаптивно?
    Через table tr td
  • Как сделать адаптивной такую чудную сетку? Или как убрать BORDER у крайних блоков?

    alsolovyev
    @alsolovyev
    Роман Кузнецов, удалить absolute. размер таблицы calc(100% + 2 x borderWidth) и translate(-borderWidth, -borderWidth). Идея такая же. Или делать по нормальному через table
  • Позиционирование Flex. Как правильно сделать?

    alsolovyev
    @alsolovyev
    Петр, на практике лучше будет такая структура
    <header>
    	<div class="logo">
    		<img>
    	</div>
    	<div class="navigation">
    		... link etc
    	</div>
    </header>

    Лишний div поможет избежать кучу проблем в будущем...
    Тогда Вы сможете header'у задать flex и justify-content: space-between(прижать logo и nav к краям). А align-item: center, чтобы вертикально по центру были logo и nav, если высота у них будет разная.
  • Позиционирование Flex. Как правильно сделать?

    alsolovyev
    @alsolovyev
    Эмм... И зачем Вам flex? https://jsfiddle.net/zrr4q0tr/4/
    Ну пусть будет flex - https://jsfiddle.net/zrr4q0tr/5/

    А если делать прямо как Вы хотите(хотя очень странно выглядит структура html), то используйте grid. Flexbox решает другие проблемы(иными словами: сделать средствами flexbox нельзя)