• Как правильно сверстать одинаковые блоки в bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Простое решение:
    Ограничить высоту колонок через max-height: XXXpx;.
    И поставить text-overflow: ellipsis;.
    При клике или :hover открывать весь блок.

    или По сложнее:
    Сверстать три колонки и пропорционально распихать блоки по ним. Но этот вариант подойтет только для фиксированой верстки. Flex-box

    или Сложное но простое:
    Использовать masonry.js.

    P.S. Класс clearfix используется совсем для других целей.
    Ответ написан
  • Как правильно реализовать динамическую ширина центральной колонки в сетке?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    .leftcoll { width: 200px; float:left;}
    .rightcoll { width: 250px; float:right; }
    .main {margin: 0 250px 0 200px;}


    <div class="leftcoll">1</div>
    <div class="rightcoll">2</div>
    <div class="main">text</div>


    Просто... Правильнее не бывает.
    Можно воспользоваться "Флексом", но правильнее от этого не станет. Будет слегка адаптивнее.
    Ответ написан
    2 комментария
  • Какие этапы верстки сайта?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    1. Пишеш полностью контент, текст и ставишь инлайн рисунки. Смотришь в браузере. Это будет то, что увидит клиент если вдруг при загрузке слетит CSS, такое бывает довольно часто у клиентов и при правильном кешировании страница останется в таком виде у клиента. Клиент должен увидеть весь контент. Обязательно прописываем viewport;
    2. Ставим обнуление: reset.css или normalize.css их великое множество, на ваш выбор;
    3. Пишем Таблицу блочной модели: для html, section, article, aside, header, footer именно так без класов, она должна быть универсальна. Здесь можно задать отдельно представление для первой и последней секций, и например для чередующихся, если нужно. При сборке эта часть должна быть сразу за reset.css;
    4. Пишем таблицу модели управления: для "menu", "input", "button", "a" (во всех ипостасях) и т.д. Навигацию я делаю через анчоры, дивы по образу Л.Артема. "Li" и не использую для меню в принципе! Они по логике ложатся в таблицу представления. Использовать их нужно для списков в тексте, а не для навигации (только лишние элементы разметки. Лично моё мнение - никого к этому не принуждаю).;
    5. Дальше таблица представления: h1, ... , ul, li, p, blockquote, addr, figure, table... Задайте базовый шрифт и размер в блоке html. Дальше у вас все шрифты ИСКЛЮЧИТЕЛЬНО в "em"-ах.

    Теперь Сайт должен смотреться довольно неплохо на всех устройствах, включая іМафоны...

    6. Только теперь, можно крутить модель оформления - её можно верстать сверху в низ, или по-элементно. По ходу дела прописывая класы в HTML. Это вашая рабочая таблица. Если сделали все правильно - возвращайться к предидущим вам не придется.
    7. Таблицы адаптирования: на основе таблицы блочной модели и модели оформления, пишем правила для каждой ширины в сторону возрастания.

    Графику фоны, красивости рекоментую заводить в векторном SVG. Лично я не рисую в фотожопе. Только вектор. Картинки автоматически приобретают любое разрешение, с минимальным трафиком. Фотки, а без них не обойтись, проганяйте через панду. Формат для картинок с прозрачностями png, все остальное в JPG.

    Все. Ваша страничка ПЭРФЭКТНА.
    Ответ написан
    Комментировать
  • Каким образом сделать инпуты с рамкой до половины?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    <i><input type="text" value="enter text"></i>
    CSS
    i {
      position:relative;
      padding:.5em;
    }
    i:after {
      content:" "; 
      display:block;
      top:50%;
      bottom:0;
      width:100%;
      position:absolute;
      border: 2px solid #fff;
      border-top: none;
    }
    Ответ написан
    Комментировать
  • В какой последовательности пишете JavaScript код?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Правильные вопросы задаёте...

    Во-первых: Последовательность в Java Script не важна, но нужно понимать ход выполнения. Например:
    function Mun(a){ return a };
      ( function(a){ console.log(a+' пошел'); } )( Mun('Первый') )
      /* Результат сразу же - Первый пошел */
      /* Мы создали функцию и выполнили её */
    
      function MunGo(a){ console.log(a+' ушел'); };
      function Mun(a){ return 'Не '+a };
      MunGo(Mun('Первый'));
      /* Выдаст - Не Первый ушел. */


    Во-вторых: Понимайте контекст описаной функции, и не вызывайте её из друго контекста.
    ... /* продолжая верхний пример*/ 
        (  function(a) {
              var Mun = function(a){ return a+' и третий'};
              MunGo ( Mun(a) );      /* Выдаст - Второй и третий ушел */
         }
       ) ( 'Второй');
      MunGo( Mun ('Второй') );    /* Выдаст - Не Второй ушел */


    В-третьих:
    Цикл должен быть максимально простым. Вынесите из него все возможное и не возможное. Это его сильно ускорит. Не только объявления но даже вызовы функций, создание нод, даже обращение к полям объектов старайтесь сделать вне цикла. Внутри цикла опперируйте только переменными локального контекста.

    В-чертвертых: Используйте анонимний контекст для всего своего кода, а взаимодействие между разными анономными контекстами делайте через события.
    Ответ написан
    1 комментарий
  • Как показать div на половину, при hover показать div полностью?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    .display {                               /* пропиши свои размеры */
           height:100px;                    /* высота раскрытого */
           max-height:50px;              /* высота скрытого */
       }
       .display:hover {
           max-height:100px;           /* опять высота раскрытого */
       }
    Ответ написан
  • Как развиться от фрилансера до серьезной компании?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Простой фрилансер всем занимается сам. В большой компании у каждого есть своя область полномочий.

    Тебе нужно научится делигировать полномочия.

    P.S. Разделяй и властвуй - основной принцип бизнеса.
    Ответ написан
    Комментировать
  • ЧПУ .htaccess + CI, что посоветуете?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Ответ написан
    Комментировать
  • Как убрать на мултилайн текстбоксе постоянный css focus?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    input, textarea {
        background-color: #424b5f;
        color:white;
        border:0;
        background-color:white;
        color:#424b5f;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    input:focus, textarea:focus {           /*   <- Ключевое изменение :focus на textarea */
        box-shadow:0 0 10px #6dc331;
        color:#6dc331;
        background-color:white;
    }
    Ответ написан
    1 комментарий
  • Сразу виден конечный результат. Почему функции не выполняются последовательно?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Или подойти по другому и явно распаралелить потоки:

    function animationDiv() { 
    $('.first-title, .second-title','.first-section').delay(500 /*3000*/)     //  пауза забольшая 500мс для пустототы достаточно
    .fadeOut(700,function(){
         $('.first-title','.first-section').html('Общая емкость 5712 паллето мест');
         $('.second-title','.first-section').html('Работаем круглосуточно')
    }).fadeIn(700)
    .delay(3000)
    .fadeOut(700,function(){
         $('.first-title','.first-section').html('Офисные помещения в аренду');
         $('.second-title','.first-section').html('Оборудованные минимаркеты для продажи товара рядом с хладокомбинатом')
    }).fadeIn(700)
    .delay(3000)
    .fadeOut(700,function(){
         $('.first-title','.first-section').html('Полностью автоматизированный склад класса А');
         $('.second-title','.first-section').html('Температурный режим до -25 С')
    }).fadeIn(700);
    }


    JSFiddle
    Ответ написан
    Комментировать
  • Как при создании элемента в JQ, в дальнейшем на нем перехватить событие?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Есть делигированные собития, это когда событие висит на родительском блоке, а обрабатывается на потомке без железной привязки. Появился - событие работает, пропал событие есть но нет объекта и оно не работает. Вешается один раз на родителя.

    $(".colors").on("click", ".CancelFramework" ,function(){
          $( '.colors' ).removeClass('colorBorder');
          $( 'div.color div' ).remove();
          $( 'div.color strong' ).remove();
          $( 'div.color' ).fadeOut(500);
          filterObj();
    });
    Ответ написан
    Комментировать
  • Как заставить body \ html растягиваться по ширине содержимого вне зависимости от размеров окна?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Ваш темный блок DIV лежит как и BODY внутри HTML, и нижний скрол появляется у HTML. По тому и фон серый. Потому что вы скролите HTML. :D

    Задом на перед на коня не садитесь — Разберитесь с блочной моделью.
    JS fiddle
    Ответ написан
    Комментировать
  • Что быстрее PHP или Node.js?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Все будет зависить от ответов стороннего АPI.
    1. Если АPI будет в состоянии обработать асинхронные запросы быстро (100ms), не ставя их в очередь - то node.js или просто страничка с асинхронными вызовами будут обрабатывать быстрее;
    2. Если же API для обработки запроса нужно будет делать серьезные действия (например 500 ms), то экономия будет ничтожна.

    P.S. Синхронные вызовы обрабатываются сервером с более высоким приоритетом и априори получают результат раньше асинхронных. И возможно виигрыш с асинхронными не покроет разницы. Так что если увас уже написан скрип то переписывать его нет смысла.
    Ответ написан
    4 комментария
  • Как к функции прикрутить XDomainRequest?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    function getXmlHttp() {
        var xmlhttp;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                (typeof XMLHttpRequest != 'undefined') && (xmlhttp = new XMLHttpRequest() ) ||
                (typeof XDomainRequest != 'undefined') && (xmlhttp = new XDomainRequest() );
            }
        }
    
        return xmlhttp;
    }


    Если запрос Cross-Origin Resource Sharing то Opera mini его не держит совсем.
    Can I use...
    Ответ написан
  • Как найти на странице input:password если страница подгружается через Ajax?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    var i = 6490,
         password = 1751,
         success = false,
         aclp = {
                      url: "login.php",
                      type: "POST",
                      data: {'password': password},
              success: function(data) {
                   if ( data.match(/input type="password"/gi) ) return success = true;     /* проверяем*/
                   password++;
                   i++;
                   acl();
              } 
         }; 
    
    function acl () {
          $.ajax(aclp);
    };
    Ответ написан
    Комментировать
  • Почему не корректно работает регулярка?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Используй онлайн тестер: Например.
    И старайся упрощать... а не усложнять.

    function getStrongText(value) {
      var str = 'Hello world hello123',
      regex = new RegExp(value, "gi");
      return str.replace(regex, '<strong>$&</strong>');
    }	
    console.log(getStrongText('Hello'));


    Если нужно искать только слова, а не части слов то нужно делать слегка иначе.

    function getStrongText(value) {
      var str = 'Hello, world hello123',
        pattern = "(\s|^)"+value+"(\W|\s|$)",
        regex = new RegExp(pattern, "gi");
        return str.replace(regex, "$1<strong>$2</strong>$3");   
    }	
    console.log( getStrongText('hello') );


    В твоем примере замена производилась трёх значений. $& значит все найденные субпатерны в одной итерации, а у тебя три субпатерна.
    <strong>$&</strong> все равно, что <strong>$1$2$3</strong>
    Ответ написан
  • Используете ли вы витамины для "мозга"?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Модные витамины разводняк на деньги не ведитесь.

    Прирацетам (ноотропил - улучшает мембранное питание у нейронов, эффект минимум через месяц) + магний ( в основном бобовые, гречка, пшено Продукты богатые на Mg ) + комплекс витаминов B (Ундевит - лучший выбор, дешево и сердито). Можно "Магне-В6" если денег не жалко - но правильное питание им не заменишь.

    P.S. "Снековая диета" - к которой частые рецедивы у ИТишников сама по себе ВЕЛИЧАЙШЕЕ ЗЛО всех времен и народов.
    Ответ написан
    5 комментариев
  • Как правильно понять этот сложный код?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Учи матчасть...

    /* Функция асинхронной загрузки хеадера */
    function getHeader() {
      $.post('modules/constructor.php',     /* Аппелируем к серверному скрипту по указаному адресу */
          { 'action': "header", 'lang': lang },   /* Передаем параметры на сервер */
           function(data) {                            /* Callback - параметр анонимня функция. Вызывается при удачном запросе */
              $('div#header')                          /* Выбираем #header - но правильнее $('#header'), ибо 2 блока с одним id не правильно */
                 .empty().append(data);           /* Очищает выбраный блок и дописывает к нему полученные данные */
           	}
          ).done(function() {                         /* Событие выполняется после удачного выполнения запроса */
            getFooter()                                 /* Вызов запроса Fotter */
          })
    }
    
    /* далее аналогично но для footer */
     
    function getFooter() {
      $.post('modules/constructor.php',    
          { 'action': "footer", 'lang': lang },    
           function(data) {                            
              $('#footer').empty().append(data); 
           	}
          ).done(function() {
            getScriptHandF();              /* Здесь была синтаксическая ошибка: отсутствие замыкающего ";" */
            getContent(content)
          })
    }
    function getContent(cont) {
      $.post('modules/constructor.php', 
          { 'content': cont, 'lang': lang, 'device': devi },
           function(data) { 
              $('#content-wrapper').empty().append(data); 
           	}
          ).done(function() {
    
    /* Далее человек питался сделать прелоадинг картинок. НО! */
    /* Картинки уже начались загружатся после  выполнения
     колбеков из загрузок getContent, getHeader, getFoоter */
            var paths  = [];                  /* Готовим массив для прелоадинга картинок */
            var images = $('body').find('img');    /* Выбираем все картинки */
            images.each(function() {                  /* Пробегаемся по всем картинкам */
              paths.push($(this).attr('src'));          /* Записываем ссылку на картинку в масив */
            });
             
            preloadImages(paths, function () {   /* Вызывает preloadImages Описания процедуры нет */
              $("html,body").animate({"scrollTop":0},200);  /* Анимирует скроллинг если страница прокручена на верх страницы */
              $('#preload').fadeOut(1000);   /* Анимирует прозрачность кроющего блока #preload */
              getScript();                              /* Вызывает getScript */
              if (cont=="home") getSlider(); /* Вызывает getSlider если страница домашняя */
            });
          })
    }
    Ответ написан
    2 комментария