Ответы пользователя по тегу HTML
  • Как сделать кнопку на сайте?

    Вообще это готовый виджет, но если просто хочешь такую кнопку то сделать не проблема.
    Вот те вариант если svg пихать будешь иконку, https://jsfiddle.net/gp1kdqbv/1/ (правда там не отображает svg), а так ровно будет.

    А вот вариант, если захочешь картинку вставить или текст, https://jsfiddle.net/gp1kdqbv/3/
    Ответ написан
    Комментировать
  • Как изменить размер блока при hover, чтобы другие блоки не уезжали?

    Надо глянуть код, надо было сюда залить https://jsfiddle.net или на подобные.
    Это просто сделать, выше вон чел написал под ником twolegs.
    Надо просто чтобы блок накладывался сверху на другой и все.
    Ответ написан
    Комментировать
  • Как убрать всплывающие подсказки при наборе в input?

    ws17
    @ws17 Автор вопроса
    autocomplete="off" щас проверяю, работает, странно, а то не срабатывала.
    Ответ написан
    Комментировать
  • Svg иконки, какие расширения лучше исполльзовать woff-ttf-svg-eot?

    ws17
    @ws17 Автор вопроса
    Так если не ошибаюсь, то все форматы прописывать это хорошо, не все сразу они грузятся.
    Ход подгрузки вроде такой.

    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }


    На developers.google приводится пример как браузер определяет, что для отображении сайта нужен какой-либо шрифт, он читает предоставленных список ресурсов в указанном порядке и старается скачать нужный шрифт.
    1)Браузер читает разметку страницы и определяет, какие варианты шрифтов нужны для отрисовки текста.
    2)Браузер проверяет, не установлены ли нужные шрифты на устройстве.
    3)Если файла нет на устройстве, браузер читает список внешних расположений:
    4)Если формат указан, перед скачивание браузер проверяется, поддерживается ли он. В случае отрицательного ответа программа переходит к следующему варианту.
    5)Если указание на формат отсутствует, браузер скачивает ресурс.

    Но это шрифт, а у меня вопрос по иконки ) svg
    Ответ написан
    Комментировать
  • Google Page Speed - шрифты, иконки, файл js и css не попадают в кэш?

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

    У меня так svg и woff2
    # Add correct content-type for fonts & SVG
    AddType application/font-woff2 .woff2
    AddType image/svg+xml .svg
    и
    <ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml
    </ifModule>


    Я твой код пробовал и потом просканил сайт опять, как было 39 так и осталось.
    Задайте правила эффективного использования кеша для статических объектов Найдено 39 ресурсов.
    Ответ написан
  • Якорь на доп страницах ведущий на главную, как анимацию сохранить?

    ws17
    @ws17 Автор вопроса
    Вот решение рабочее, тестил и на мобиле и в хроме и в мозиле, весь инет обыскал так и не нашел решения, но за бабосы мне сделали )))

    Делюсь бесплатно:

    <script>
          jQuery('a[href*="#"]')
          // Remove links that don't actually link to anything
            .not('[href="#"]')
            .not('[href="#0"]')
            .on('click', function(event) {
            event.preventDefault();
            // On-page links
            var _this = jQuery(this), id = _this.attr('href').substring(_this.attr('href').indexOf('#'));
    
            if(jQuery(id).length > 0) {
    
              // Figure out element to scroll to
              var target = jQuery(this.hash);
              target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
    
              // Does a scroll target exist?
              if (target.length) {
                // Only prevent default if animation is actually gonna happen
                event.preventDefault();
                jQuery('html, body').animate({
                  scrollTop: target.offset().top
                }, 1000, function() {
    
                });
              }
    
            } else {
              window.location.href = _this.attr('href');
            }
    
          });
    
          var target = window.location.hash;
    
          // delete hash so the page won't scroll to it
          window.location.hash = "";
    
          // now whenever you are ready do whatever you want
          // (in this case I use jQuery to scroll to the tag after the page has loaded)
          $(window).on('load', function() {
            if (jQuery(target).length) {
              $('html, body').animate({
                scrollTop: jQuery(target).offset().top
              }, 700, 'swing', function () {});
            }
          });
    
    
          jQuery(function(){
    
            if(jQuery(target).length > 0) {
    
              jQuery('html, body').animate({
                scrollTop: jQuery(target).offset().top
              }, 1000, function() {
                history.pushState(null,null, target);
              });
            }
    
            return false;
          });
        </script>
    Ответ написан
    Комментировать
  • Автоматическая подставка города в селекте при переходе в данный город по урл, как реализовать?

    ws17
    @ws17 Автор вопроса
    Вот решение:
    <script>
          function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
          }
          function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            div = document.getElementById("myDropdown");
            a = div.getElementsByTagName("a");
            for (i = 0; i < a.length; i++) {
              if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                a[i].style.display = "";
              } else {
                a[i].style.display = "none";
              }
            }
          }
    
          
          jQuery(document).on('ready', function() {
            var filter = jQuery('#myDropdown'), links = filter.find('a'), btn = jQuery('.dropbtn')
    
            links.each(function(index, el) {
              var _this = jQuery(el), attr_href = _this.attr('href'), re = new RegExp(attr_href.replace(/\\/g, ''),'ig');
    
              if(re.test(window.location.pathname)) {
                _this.addClass('selected');
                btn.text(_this.text());
              }
            });
    
          });
        </script>


    и стиль
    .drt a.selected {
      background: #F48951;
      color: #fff;
    }


    Добавлен кусок когда. При переходе в город из списка селект, город выделяется и где написано выберите город, написан город.
    Ответ написан
    Комментировать
  • Адаптация таймера eTimer, как реализовать?

    ws17
    @ws17 Автор вопроса
    Как я сделал адаптацию, скачал к себе
    <script src="https://e-timer.ru/js/etimer.js"></script>


    Открыл:
    etimer.js

    Там удалил кусок кода:
    5d3a779176c6e586437470.png

    Далее задал размеры шрифта через css ну и медия.
    .eTimer, .etUnit, .etNumber, .etSep {
      font-size: 60px;
    }
    .etSign {
      font-size: 18px;
    }
    @media only screen and (max-width:860px) {
      .eTimer, .etUnit, .etNumber, .etSep {
      font-size: 40px;
      }
      .etSign {
        font-size: 16px;
      }
    }
    Ответ написан
  • Переход на страницу при выборе элемента в select, как сделать?

    ws17
    @ws17 Автор вопроса
    Я решил так, убрал селект для такой задачи и просто сделал обычную кнопку по которой кликаешь и вылезает список, можно из любого меню сделать такое, где есть выпадающий список.
    Ответ написан
    Комментировать
  • Переадресация на 404 если такого урла не существует, как лучше сделать?

    ws17
    @ws17 Автор вопроса
    Так проблему решил таким способом:

    .htaccess
    ErrorDocument 404 /404.php

    в 404.php
    добавил
    <?php header("HTTP/1.1 404 Not Found"); ?>

    Но есть проблема с переадресацией с несуществующего урла на 404.
    Переадресация работает, проблема в урл, допустим я пишу так сайт.ру/gfgfgf урл которого нет, он по идеи должен делать переадресацию на сайт.ру/404.php, он ее делает, но урл не меняет.
    Ответ написан
    Комментировать
  • Как сделать правильную ссылку для скачивания xls, для айфона?

    ws17
    @ws17 Автор вопроса
    Вот такой вариант подъехал, но там про pdf, но можно заменить на .xls

    Может кому поможет, но мне чет не помогло.

    Файлы pdf открываются в браузере? Решение есть!
    - Как заставить браузер скачивать pdf, а не открывать в браузере?
    - Нужно посылать правильный заголовок.
    Не буду заморачиваться на тонкостях mime типов, и того как браузеры эти типы отрабатывают. Замечу, есть три способа загрузки (скачивания) файлов. Может и ещё есть, но я о них не знаю.

    inline - браузер получает стандартный заголовок соответсвующего mime типа и самостоятельно принимает решение о действих по закачке
    save as - браузер показывает окно выбора места записи файла
    download - браузер закачивает файл без вопроса о выборе места
    Первый способ я не буду описывать, а начну со третьего

    Download. Нужно отдать правильный заголовок
    Рассмотрим два варианта: серверный и скриптовый (отдельно покажу).

    Под серверным я понимаю использование apache, а вернее .htaccess. Т.к. это наиболее удобный способ управления локальным ресурсом

    RewriteRule .*\.pdf$ - [L,T=application/octet-stream]

    Оапппа. и все работает. Pdf файлы молча скачиваются.

    Если хотите - добавляйте свои типы в правило, например

    RewriteRule .*\.(pdf|mp3)$ - [L,T=application/octet-stream]

    Но!!! А можно и так, переопределить mime тип. Не всегда работает - зависит от настроек хоста

    AddType application/octet-stream .mp3
    AddType application/octet-stream .pdf

    Save as. Нужно отдать правильный заголовок
    Увы, одной строчкой не обойдемся, но на это есть другой метод

    Header set Content-Disposition "attachment"


    Не буду описывать директив. Цель - отдать правильный заголовок для pdf файла.

    Скриптовое решение
    Это применимо, если вдруг... не получается управлять сервером. Да-да, случается такое. Но потребуются накладные расходы

    /* Оформляем ссылку на скачивние */
    <a href="download.php?file=myfile.pdf">

    /* Пишем скрипт */
    <?php
    if (
      !isset($_GET["file"])
      || ($f=$_GET["file"])===false
      || ($fp=@fopen($f,"rb"))===false
      || ($fi=pathinfo($f))===false
      || ($fi["fsize"]=filesize($f))===false
      || strtolower($fi["extension"])!="pdf"
    ) die("Failed");
     
    ob_start();
    header("Accept-Ranges: bytes");
    header("Content-Length: {$fi["fsize"]}");
    header("Content-Type: application/pdf");
    header("Content-Disposition: attachment; filename="{$fi["basename"]}"");
     
    $sent = 0;
    while ( !feof($fp) && $sent < $fi["fsize"] && ($buf = fread($fp, 8192)) != "" ){
      echo $buf;
      $sent += strlen($buf);
      flush();  ob_flush();
    }
    fclose($fp);
    exit;
    ?>


    Добавив, дополнительный параметр в запрос, напрмер type=download или type=saveas определяющий тип закачки, скрипт получится универсальным.
    Ответ написан
    Комментировать
  • При 1000px разрешения экрана появление div тега в html, как сделать?

    ws17
    @ws17 Автор вопроса
    Помутил и нашел решение то что надо, без всяких js и т.д.

    Вот: что мне надо было сделать, адаптивность блоков.
    https://jsfiddle.net/pc4ktm10/3/
    Ответ написан
    Комментировать
  • G-recaptcha, адаптация, есть проблема, как решить?

    ws17
    @ws17 Автор вопроса
    Решил вопрос так.
    Добавил width: 230px; чтобы при определенном разрешение экрана применялся и все было ок.

    .g-recaptcha {
      transform: scale(.83);
      -webkit-transform: scale(.83);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
    }
    @media only screen and (max-width:420px) {
      .g-recaptcha {
        width: 230px;
        transform: scale(.79);
        -webkit-transform: scale(.79);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0
      }
    }
    @media only screen and (max-width:340px) {
      .g-recaptcha {
        transform: scale(.75);
        -webkit-transform: scale(.75);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0
      }
    }
    Ответ написан
  • Грамотная разметка адаптивной верстки?

    Кросбрайзерный дизайн, с растягиванием в низ, если контента мало то низ будет как бы пустой, а этот метод растягивает.

    <div class="wrapper">
    <header class="header">
    Верх
    </header>
    
    <main class="content">
    Центр
    </main>
    
    </div>
    
    <footer class="footer">
    Низ
    </footer>
    
    </body>


    <b>CSS с нормализацией.</b>
    
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;}
    html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
    audio,canvas,video{display:inline-block}
    audio:not([controls]){display:none;height:0}
    [hidden]{display:none}
    a{outline:none; text-decoration: none;}
    abbr[title]{border-bottom:1px dotted}
    pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
    sub,sup{font-size:75%;line-height:0;position:relative}
    sup{top:-0.5em}
    sub{bottom:-0.25em}
    fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
    button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
    button,input{line-height:normal}
    button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
    button[disabled],input[disabled]{cursor:default}
    input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
    input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
    input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
    button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
    textarea{overflow:auto;vertical-align:top}
    input:focus,button:focus,select:focus,textarea:focus{outline:none}
    table{border-collapse:collapse;border-spacing:0}
    img { border: 0; }
    :focus::-webkit-input-placeholder {color: transparent}
    :focus::-moz-placeholder          {color: transparent}
    :focus:-moz-placeholder           {color: transparent}
    :focus:-ms-input-placeholder      {color: transparent}
    
    *{
      padding: 0;
      margin: 0;
    }
    html{height:100%;}
    * html body{height:100%;}
    
    html, body{
      font-family: tahoma, Helvetica, sans-serif;
      font-size: 14px;
      height: 100%;
      background: #fff;
    }
    .wrapper {
      width: 100%;
      min-width: 1100px;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
    .header {
      width: 100%;
      height: 150px;
      background: #ffffff;
    }
    .content {
      padding: 0 0 150px;
    }
    .footer {
      margin: -245px auto 0;
      min-width: 1100px;
      height: 245px;
      position: relative;
    }
    Ответ написан
    Комментировать
  • Как узнать какая иконка иконочного шрифта использована у дизайнера?

    На вот тебе сервис, не епи мозг себе с этими шаблонами, подбирай иконки тут __https://www.flaticon.com
    Ответ написан
    Комментировать
  • Как выровнять пункты меню в одну линию, будучи выровненным по центру?

    Можно так, хотя выше уже много вариантов написали.
    https://jsfiddle.net/h07s4w1t/

    А если в одну линию по вертикали, чтобы все ровно в строку было.
    https://jsfiddle.net/h07s4w1t/1/

    Вот еще вариант, с выравниванием в одну линию все пункты и еще выравнивание текста от значка.
    https://jsfiddle.net/h07s4w1t/2/

    ul,li {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
    
    .list{
        width: 400px;
        margin: 0 auto;
        font-size: 20px;
        text-align: center;
    }
    Ответ написан
    2 комментария
  • Как сделать такую карусель и слайдер?

    Можно взять любой слайдер, и изменить стрелки и т.д, вообще с любого сделать можно, но лучше взять более подходящий.
    Ответ написан
    Комментировать
  • Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

    ws17
    @ws17 Автор вопроса
    Можно конечно по проще сделать, переработал и сделал так.

    a, b, strong, h1, h2, h3, h4, h5, h6, i, div, input, textarea, button, select{
      text-decoration: none;
      -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
      transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
    }
    
    a img {
      -webkit-transition:opacity 200ms linear 0ms;
      transition: opacity 200ms linear 0ms;
      opacity:1; 
      -moz-opacity:1; 
      filter:alpha(opacity=100);
    }
    a img:hover{
      -webkit-transition:opacity 200ms linear 0ms;
      transition: opacity 200ms linear 0ms;
      opacity:0.5; 
      -moz-opacity:0.5; 
      filter:alpha(opacity=50);
    }


    вроде все ок, везде как работало и работает.
    Ответ написан
    Комментировать
  • Микроразметка отзывов о компании, как оформить правильно?

    ws17
    @ws17 Автор вопроса
    не, так ошибок еще больше.

    microdata
    ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop

    itemType =
    itemreviewed
    medicalorganization
    ПРЕДУПРЕЖДЕНИЕ: Не выполнено обязательное условие для структурированных сниппетов Яндекс.Справочника: поле name отсутствует или пусто
    ПРЕДУПРЕЖДЕНИЕ: Не выполнено обязательное условие для структурированных сниппетов Яндекс.Справочника: поле address отсутствует или пусто
    itemType = schema.org/MedicalOrganization
    review
    review
    ПРЕДУПРЕЖДЕНИЕ: поле itemReviewed отсутствует или пусто
    itemType = schema.org/Review
    datepublished = 2018-05-10
    name = Отзывы наркологического центра
    author
    person
    itemType = schema.org/Person
    name = Игорь Николаевич
    reviewbody = Хочу поблагодарить врачей клиники за их высокий профессионализм. Благодаря специалистам уже больше года как не пью, а до лечения без алкоголя не мог п...
    Ответ написан
    Комментировать