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

    blackseabreathe
    @blackseabreathe
    brackets
    Юзать css flex align-items: center например
    Ответ написан
  • Не воспроизводится видео, в чем проблема?

    blackseabreathe
    @blackseabreathe
    brackets
    попробуйте указать кодеки

    например

    <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
    Ответ написан
    1 комментарий
  • Checkbox некорректно отображается на IOS устройстве, в чем проблема?

    blackseabreathe
    @blackseabreathe
    brackets
    input,button,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0px}input[type="checkbox"]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}input[type="radio"]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio-button}
    Ответ написан
    Комментировать
  • Как сделать checkbox не активным при выборе значения select?

    blackseabreathe
    @blackseabreathe
    brackets
    Не совсем понятно написан вопрос.

    $('select').on('change', function(){
    if($(this).val() == 'какой-то размер'){
    $('.checkbox').prop('checked', false);
    }
    
    });
    Ответ написан
    Комментировать
  • Как скрыть блок?

    blackseabreathe
    @blackseabreathe
    brackets
    Смотря как "скрыт" блок

    $('button').on('click', function(){
    if($('.block1').is(':visible')){
    $('.block1').slideUp(300);
    $('.block2').slideDown(300);
    }
    
    else{
    $('.block1').slideDown(300);
    $('.block2').slideUp(300);
    }
    });
    Ответ написан
  • Как так-же стилизовать input file upload?

    blackseabreathe
    @blackseabreathe
    brackets
    В css пишите input[type="file"]{display:none}
    Теперь в html написать:
    Надеюсь Вы знаете какие параметры добавить к форме, где есть input type File

    <div class="uCanUpload">Загрузить файлы и бла бла бла</div>
    <div class="file-upload"><label><input type="file" name="file"><span> /*изображение скрепки вставить либо прям тут либо через css :before*/ Загрузить файлы</span></label></div>


    Тут мы сделали label, при клике на который будет триггер на input type file

    Далее если хотите поймать название файла с компа юзера, то js

    // Перехват файла с формы
    var files = '', fileName = '';
    // Получим данные файлов и добавим их в переменную
    $(document).on('change', 'input[type=file]', function(){
    	var file = this.files[0];
    	fileName = $(this).val();
    	fileName = fileName.split('\\'); 
    	fileName = fileName[fileName.length - 1]; 
    	var reader = new FileReader();
    	reader.onload = function (e) { 
    	   files = e.target.result 
    	};
    	reader.readAsDataURL(file);
    	
    	if($('.fileName').length == 0) $('.file-upload').before('<div class="fileName"></div>');
    	$('.fileName').html(fileName+'<span id="delFile">X</span>');
    	
    });
    
    $(document).on('click', '#delFile', function(){
    	var inp = $('input[type="file"]').clone();
    	$('input[type="file"]').before(inp).remove();
    	$('.fileName').remove();
    });
    
    function base64_encode(data) {
      
      var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
      var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
        ac = 0,
        enc = '',
        tmp_arr = [];
     
      if (!data) {
        return data;
      }
     
      do { // pack three octets into four hexets
        o1 = data.charCodeAt(i++);
        o2 = data.charCodeAt(i++);
        o3 = data.charCodeAt(i++);
     
        bits = o1 << 16 | o2 << 8 | o3;
     
        h1 = bits >> 18 & 0x3f;
        h2 = bits >> 12 & 0x3f;
        h3 = bits >> 6 & 0x3f;
        h4 = bits & 0x3f;
     
        // use hexets to index into b64, and append result to encoded string
        tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
      } while (i < data.length);
     
      enc = tmp_arr.join('');
     
      var r = data.length % 3;
     
      return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
    }


    Вот так. Не забыть стилизовать блок с именем перехватанного файла, так как оно может быть супер длинное, добавьте что-то типа css
    white-space:no-wrap; overflow:hidden; text-overflow:ellipsis;max-width:200px;


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

    blackseabreathe
    @blackseabreathe
    brackets
    /*типа запрет ротации моб устройства*/
    @media only screen and (min-width: 415px) and (max-width: 1279px) {
    body{display:none} html:before{content:'Переверните устройство в портретный режим или откройте сайт с компьютера.';position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;background:#fff;z-index:999;text-align:center;width:80%;height:100px} 
    }
    Ответ написан
    Комментировать
  • Почему ВКонтакте не подцепляет мой OpenGraph image?

    blackseabreathe
    @blackseabreathe
    brackets
    Ответ написан
    Комментировать
  • Вопрос по верстке блока с картинками?

    blackseabreathe
    @blackseabreathe
    brackets
    смотрите в сторону position:relative; top:-50px;
    Ответ написан
    Комментировать
  • Как скрывать мобильное меню при клике на раздел меню - якорь?

    blackseabreathe
    @blackseabreathe
    brackets
    Попробуйте так:

    $('.здесь_id_меню li').click(function(){
      $('здесь_Id_меню_или_во_что_оно_оборачивается').hide(300);
    Ответ написан
    Комментировать
  • Применяется ли в HTML табуляция строк кода?

    blackseabreathe
    @blackseabreathe
    brackets
    Да ладно вам, вон посмотрите как у Гугла сделано и не парьтесь5aaeb17fdf023205674285.png
    Ответ написан
    1 комментарий
  • Как закрыть меню при клике на его пункт?

    blackseabreathe
    @blackseabreathe Автор вопроса
    brackets
    Ответили на stackoverflow и работает все отлично:

    var menuBtn = document.getElementById('menuBtn');
    //Находим наш блок с меню
    var menu = document.getElementById('menu');
    var menuContainer = document.getElementById('menuContainer');
    var menuIconClosed = "menu-icon closed"; //class name for closed button
    var menuIconOpened = "menu-icon opened"; //class name for opened button
    var menuContClosed = "menu-container closed"; //class name for closed menu
    var menuContOpened = "menu-container opened"; //class name for opened menu
    //Вешает клики на документ
    //Проверяемклики в обертке для меню
    menu.onclick = function(e) {
        //Проверяем объект клика - если кнопка меню запускаем функцию
        if(e.target ==  menuBtn) closeOrOpenMenu();
        //Если клик был не на ссилке не делаем ничего
        if(e.target.tagName != 'A') return;
        else closeOrOpenMenu();//Иначе закрываем меню
        
        //Функция для удобства
        function closeOrOpenMenu(){
          if (menuBtn.className == menuIconClosed) {
              menuBtn.className = menuIconOpened;
              menuContainer.className = menuContOpened;
          } else if (menuBtn.className == menuIconOpened) {
              menuBtn.className = menuIconClosed;
              menuContainer.className = menuContClosed;
          }
         }
    }


    <!--Сделаем обертку для меню чтобы проверять клики только в ней-->
    <div id="menu">
    <span class="menu-icon closed" id="menuBtn"></span>
    
    <div class="showMenu" id="menu"menu>Меню</div>
    <nav class="menu-container closed" id="menuContainer">
    <ul>
    <li><a href="#gototop">Главная</a></li>
    <li><a href="#ourservices">Услуги агентства</a></li>
    <li><a href="#aboutus">О нас</a></li>
    <li class="liNoAfter"><a href="#callus">Контакты</a></li>
    <div class="myCellMobile">
    <div class="myCellMargin">
    <i class="fa fa-map-marker myFa"></i>
    <p><span>г. Усть-Лабинск, ул.Октябрьская, 78</span><br />г. Краснодар, ул. Ставропольская 312 офис 8</p>
    </div></div>
    <div class="myCellMobile">
    <div class="myCellMarginPhone">
    <i class="fa fa-phone"></i>
    <p class="ios_reset"><span class="nonono">+7 (918) 344-10-05</span><br />info@ricit.ru</p>
    </div></div>
    <li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
    </ul>
    </nav>
    </div>


    Удачи всем!
    Ответ написан
    Комментировать