Ответы пользователя по тегу HTML
  • Рисование графиков, есть ли интересная статья или пример?

    dummyman
    @dummyman
    диссидент-схизматик
    Из jquerийных простенький morris и посложнее flot.
    Для Анжелы n3. Для любителей Ember Charts.
    Простенькие ChartJS и uvCharts.
    Очень легкий и хорошо разжеванный ChartList.
    Не менее хорошо разжеванный, но платный, ZingChart.
    Поддержку legacy обеспечит FusionCharts - обещают работу на IE6.
    Профессионалам понравится список фичей plotly.
    Вы бы конкретнее указывали какие графики вам нужны. А то все не подходят, а что нужно - секрет. Хотите создавать свою систему - читайте исходники существующих. - Врятли любая статья будет лучше и более полной чем исходники рабочих библиотек.
    Ответ написан
    5 комментариев
  • Как организовать переход между страницами с таким эффектом?

    dummyman
    @dummyman
    диссидент-схизматик
    Ваш пример принципиально ничем не отличается от getbootstrap.com/javascript/#carousel
    Ищите простые вещи в любых сколько либо сложных вещах. А на простые скрипты еще проще вешать функционал.
    Ответ написан
  • Как сделать при активной строке поиска кнопку активной?

    dummyman
    @dummyman
    диссидент-схизматик
    У вас там похоже нестандартный обработчик на кнопке submit. И похоже он читает состояние inputа, но когда форма пытается засабмититься, сначала пропадает фокус с инпута, тем самым обработчик думает что форма закрыта. Хотя может я ошибаюсь, я бы так не далал.

    Во-первых свистоперделку можно сделать средствами html+css.
    Во-вторых, перегружать кнопку сабмита - плохая практика. Обычно перегружают сам сабмит у формы.
    Ну и втретьих... Господи, что это?! Что вы курите? Вы пробовали как все это работает на мобильных?
    Ответ написан
  • Какая причина идиотизма со шрифтом?

    dummyman
    @dummyman
    диссидент-схизматик
    * {
        text-rendering: geometricprecision;
    }
    Ответ написан
    Комментировать
  • Нужны ли фреймы в html?

    dummyman
    @dummyman
    диссидент-схизматик
    Посмотрел комментарии к вопросу... Оказывается, такие недалекие ответчики... На кой фреймы бы были нужны разрабатывая один сайт? Какие хедеры и футеры? Причем здесь php? Конкретно iframe изначально был сделан для публикаций чужих сервисов на своем сайте. Например, у вас есть сайт с фотографиями природы в разных местах/континентах. Вы выкладываете ваш материал "бесплатно и без смс". Чтобы отбить затраты на хостинг, вы по партнерской программе подключаете баннер с выбором/поиском тура/перелёта в от места обитания посетителя до места где сделана фотография. За каждый купленный тур/билет агрегатор выплачивает вам 5% стоимости. То есть ваша задача - подключить ифрейм, а как оно там будет дальше работать - задача партнера. Вы лишь отвечаете за увеличение количества посетителей своего сайта. Вот и все фреймы...

    UPD Обычные фреймы тоже довольно популярны. Например, их до недавнего времени использовал Google при отображении сохраненной версии страницы. Некоторые анонимайзеры/веб-прокси используют горизонтальный фрейм для отображения адресной строки. Также можно использовать при проектировании в админках сайта, когда страница работает сама по себе, но, например, сбоку есть какое-то сервисное управление, и друг другу они не мешают.
    Ответ написан
    2 комментария
  • Блок сообщения и уведомления уходит за экран. Как исправить?

    dummyman
    @dummyman
    диссидент-схизматик
    Попробуй поменять .wrapper на body:
    body {
        margin-right: auto;
        margin-left: auto;
        min-width: 720px;
        max-width: 1920px;
        width: 85%;
    }


    или

    body, .wrapper {
        margin-right: auto;
        margin-left: auto;
        min-width: 720px;
        max-width: 1920px;
        width: 85%;
    }
    Ответ написан
  • Кастомизировать scrollbar?

    dummyman
    @dummyman
    диссидент-схизматик
    Я согласен со Stalker_RED: Стандартный браузерный кастомизируется не полностью, и далеко не во всех браузерах.
    Вообще, кастомизируйте скрол только в том случае, если вы делаете полноэкранное приложение. Если вам нужно сие чудо для обычного сайта - я бы рекомендовал вам не делать этого. Если заказчик утвердил дизайн - отговорить руководство от этой ереси, пусть заказчик переутвердит дизайн. - Это будет однозначно в интересах заказчика. Дайте установленной у пользователя ОС решать самой как должен быть кастомизирован его скрол. Уверяю вас, браузеров, гаджетов, операционных систем такое множество, что вы не предусмотрите все варианты отображения скролов, вы просто сделаете невозможным работу стандартного. А пользователю можно выставить например заглушку типа установите себе нормальный браузер IE11+ для отображения контента, в противном случае вы не сможете прокрутить страницу до данного контента. И мало кого волнует, что на этой ОС и вообще на этой платформе невозможно установить данный браузер. Не говоря уже о том, что на устройстве может не быть как манипулятора "мышь" так и touchscreen.
    Ответ написан
    Комментировать
  • Можно ли на overflow: hidden элемент принудительно наложить абсолютно спозиционированный элемент?

    dummyman
    @dummyman
    диссидент-схизматик
    var bodyRect = document.body.getBoundingClientRect();
    var hiddenRect = document.querySelector('#hidden').getBoundingClientRect();
    var overlay = document.querySelector('#overlay');
    overlay.style.top=(hiddenRect.top - bodyRect.top) + 'px';
    overlay.style.left=(hiddenRect.left - bodyRect.left) + 'px';

    Только это при условии что overlay лежит в body, элемент hidden может быть где угодно в DOM.
    Ответ написан
    Комментировать
  • Чем запарсить сотню страниц?

    dummyman
    @dummyman
    диссидент-схизматик
    Уже писал где-то

    Тут может помочь каспер
    docs.casperjs.org/en/latest/quickstart.html#now-le...

    var links = [];
    var casper = require('casper').create();
    
    function getLinks() {
        var links = document.querySelectorAll('h3.r a');
        return Array.prototype.map.call(links, function(e) {
            return e.getAttribute('href');
        });
    }
    
    casper.start('http://google.fr/', function() {
       // Wait for the page to be loaded
       this.waitForSelector('form[action="/search"]');
    });
    
    casper.then(function() {
       // search for 'casperjs' from google form
       this.fill('form[action="/search"]', { q: 'casperjs' }, true);
    });
    
    casper.then(function() {
        // aggregate results for the 'casperjs' search
        links = this.evaluate(getLinks);
        // now search for 'phantomjs' by filling the form again
        this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
    });
    
    casper.then(function() {
        // aggregate results for the 'phantomjs' search
        links = links.concat(this.evaluate(getLinks));
    });
    
    casper.run(function() {
        // echo results in some pretty fashion
        this.echo(links.length + ' links found:');
        this.echo(' - ' + links.join('\n - ')).exit();
    });


    Запускаем
    $ casperjs googlelinks.js

    Получаем
    20 links found:
     - https://github.com/casperjs/casperjs
     - https://github.com/casperjs/casperjs/issues/2
     - https://github.com/casperjs/casperjs/tree/master/samples
     - https://github.com/casperjs/casperjs/commits/master/
     - http://www.facebook.com/people/Casper-Js/100000337260665
     - http://www.facebook.com/public/Casper-Js
     - http://hashtags.org/tag/CasperJS/
     - http://www.zerotohundred.com/newforums/members/casper-js.html
     - http://www.yellowpages.com/casper-wy/j-s-enterprises
     - http://local.trib.com/casper+wy/j+s+chinese+restaurant.zq.html
     - http://www.phantomjs.org/
     - http://code.google.com/p/phantomjs/
     - http://code.google.com/p/phantomjs/wiki/QuickStart
     - http://svay.com/blog/index/post/2011/08/31/Paris-JS-10-%3A-Introduction-%C3%A0-PhantomJS
     - https://github.com/ariya/phantomjs
     - http://dailyjs.com/2011/01/28/phantoms/
     - http://css.dzone.com/articles/phantom-js-alternative
     - http://pilvee.com/blog/tag/phantom-js/
     - http://ariya.blogspot.com/2011/01/phantomjs-minimalistic-headless-webkit.html
     - http://www.readwriteweb.com/hack/2011/03/phantomjs-the-power-of-webkit.php
    Ответ написан
  • Как сделать интерактивную карту?

    dummyman
    @dummyman
    диссидент-схизматик
    Есть такой фреймворк openlayers
    Вот ссылка на пример openlayers.org/en/latest/examples/select-features.html
    там разделение по государствам, нужно будет вместо https://openlayers.org/.../geojson/countries.geojson составить свой файл geojson по областям
    Данные берем отсюда gis-lab.info/qa/osm-adm.html
    Стили карт берем тут https://www.mapbox.com/maps/
    15-30 минут на все и карта готова.
    Ответ написан
    2 комментария
  • Как скрыть часть текста?

    dummyman
    @dummyman
    диссидент-схизматик
    " Сосна+Бук + 33 110 руб.".trim().replace(/^(\S+).*$/, '$1');


    Array.from(document.querySelectorAll("span"))
        .forEach(span => span.innerHTML = 
             span.innerHTML.trim().replace(/^(\S+).*$/, '$1')
    );
    Ответ написан
    Комментировать
  • Как разместить параграф под заголовком?

    dummyman
    @dummyman
    диссидент-схизматик
    У текста под заголовком
    display:block; 
    clear:both;
    Ответ написан
    Комментировать
  • Есть ли сервисы делающие ревью кода?

    dummyman
    @dummyman
    диссидент-схизматик
    Вот здесь есть все ссылки на инструменты от W3C
    https://www.w3.org/developers/tools/
    Ответ написан
    Комментировать
  • Где взять простые psd макеты по bootstrap сетке?

    dummyman
    @dummyman
    диссидент-схизматик
    Конкретно по макетам по сетке сказать нечего, но вы можете начать поиски, например, отсюда bootswatch.com
    Ответ написан
    Комментировать
  • Почему не корректно работает прелоадер?

    dummyman
    @dummyman
    диссидент-схизматик
    Во-первых, чтобы скрыть сайт без стилей под простыней, ее надо раздвинуть на 100% по высоте и ширине.
    Активировать его необходимо на чистом JS без CSS, т.к. стили должны загружаться после лоадера.
    Тег .preloader должен добавляться строго в body. Чтобы прелоадер отображался по центру, также необходимо дать 100% высоты тегам html и body (и тоже через JS). Перехватить управление в JS после окончания парсинга html но до отображения странички можно так:
    window.addEventListener('DOMContentLoaded', preloaderShow, false);
    window.addEventListener('load', preloaderHide);
    
    function preloaderShow() {
       alert('Контента еще нет');
    }
    
    function preloaderHide() {
       alert('Весь контент загружен');
    }

    Этот код должен быть объявлен в HEAD до всех остальных JS и CSS. И не в выделеном файле, а прямиком полностью в HEAD.

    Да, и делайте прелодер ваш без jQuery, а то самый гигантский файл странички должен загрузиться до прелодера для его отображения. Маразм какой-то.

    https://jsfiddle.net/q536qd70/

    Даже накидал вам почти весь код прелодера.
    Ответ написан
    5 комментариев
  • Как грамотно сделать date- и timepicker?

    dummyman
    @dummyman
    диссидент-схизматик
    Datepicker по картинке прямо взят отсюда.
    А вот по поводу времени у вас все правильно нарисовано кроме самого поля.
    Я бы делал как то так:
    fa65789d434a491e89db78af7b708f25.png

    И в html оформлял бы двумя простыми select/option без какого либо js. - одинакого круто работает и на десктопе и на мобиле. Значение вводи хоть с клавиатуры. Если селекты будут скрыты и исчезать по удалению ховера, это будет менее удобно чем они бы отображались сразу.
    Ответ написан
    Комментировать
  • Новые возможности javascript являются частью спецификации языка?

    dummyman
    @dummyman
    диссидент-схизматик
    что jsx-скрипт распарсивается какой-то библиотекой написаной на стандартном javascript и транслирует в него же...

    А что вас так удивляет... Тут их целый зоопарк был еще до JSX: TypeScript, CoffeeScript, Angular, WebAssembly и все они из разных буферов данных формируют объекты Plain Old JavaScript Objects. Каждая либа считается по всем параметрам превосходит до безобразия жуткий JavaScript. Только вот друг с другом они не совместимы. Совместимы они только с JavaScript.
    Чуть не забыл clojure
    Ответ написан
    6 комментариев
  • Как ограничить скрипт спойлера?

    dummyman
    @dummyman
    диссидент-схизматик
    Во-первых, в классической реализации спойлера не было javascript:
    codepen.io/oloman/pen/odnqy
    Ответ написан
    Комментировать
  • Опенкарт, как настроить переход от сайта к лендингу?

    dummyman
    @dummyman
    диссидент-схизматик
    Немного зашквар.
    // '.menu a' я написал от балды, подставь значение верстки как у тебя в шаблоне карта
    document.querySelector('.menu a').addEventListener('click', function(event){
       event.preventDefault();
       event.stopPropagation();
       this.href; // По этому параметру можешь определить до куда скролиться
                 // то есть, какую именно ссылку нажали
       document.body.scrollTop; // Меняя значение этой переменной 
                              //страница проскролится до узказанных пикселей
       // Плавный scrollTo() можно найти в интернетах.
    })


    Только учти, что поисковик будет видеть ссылку на страницу. Скорее всего, если пользователь искал товар, поисковик пришлет пользователя именно на страницу товара а не на страницу витрины категории.
    Ответ написан
  • Как атрибут lang влияет на font-face?

    dummyman
    @dummyman
    диссидент-схизматик
    html lang, как уже было отмечено в ответе выше, не влияет на отображение шрифтов.
    Это современная версия http-equiv тегов meta.
    У этого атрибута задача ровно такая же как у http-заголовка Content-Language.
    Проблем значение атрибута обычно не приносит. Ровно до того момента, пока значения одинаковые или объявлены лишь одним способом. Как только используются все варианты и в них передаются разные значения, каждый браузер может воспринимать это по своему. Какие-нибудь типа IE могут отказаться показывать вообще что-либо, когда, например, в http-заголовках я устанавливаю кодировку cp1251, а в html как и в реальности на сайте - utf8.
    Ответ написан