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

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Когда инициализуруэш карусель пропиши autoplay:false.

    Например:
    $('.owl-carousel').owlCarousel({
       /* здесь могут быть ваши параметры инициализации карусели */
        autoplay:false
    });
    Ответ написан
  • Как обновить курсор в браузере когда блоки под курсором обновляются но курсор стоит на месте?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    В таких случаях Z-index не поможет...
    Маленький квадрат нужно убрать совсем или через fadeOut или через коллбек...
    $('div').click(function(){
        $('div').fadeOut(200)
    });
    $('div').click(function(){
        $(this).css({opacity: 0},function(){$(this).css({'display':'none'});})
    });
    Ответ написан
    Комментировать
  • Всплывающие окно предупреждения JS?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    <form method="get" id="delForm">
      <input id="dell" type="button" name="dell" value="Delete">
    </form>


    Создаем простую кнопку вместо Submit.

    function checkButton()
    {
      var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
      var yes = document.getElementById('yes'); // id кнопки ДА
      var no = document.getElementById('no'); // id кнопки НЕТ
      
      yes.onclick  = function(e) //если будет нажата кнопка ДА
      {
        var frm = document.getElementById('delForm'); //Находим id формы
        this.onclick = null;
        hid.className = ''; // скрывается окно подтверждения
        frm.submit();  //// отправка на сервер происходит
        e.stopPropagation();
        e.preventDefault();
      };
      no.onclick = function(e) // Если будет нажата кнопка НЕТ
      {
        var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
        this.onclick = null;
        hid.className = ''; //скрывается окно подтверждения
        // отправка на сервер не происходит
        e.stopPropagation();
        e.preventDefault();
      }
    
       // Oтображается окно подтверждения.
       hid.className = 'substrate';
    }
    
    window.onload = function(e)
    {
      var myf = document.getElementById('dell');
      myf.onclick = checkButton; //Подписка на событие клика по кнопке УДАЛИТЬ
      e.stopPropagation();
      e.preventDefault();
    }

    И привязываем события, а не проверяем наличие привязаного события на кнопках yes и no

    И еще поправим CSS:
    .show-none{
      display:none;       /* просто прячем окно, а не задвигаем его в минуса */
    }
    .substrate{
    ...
    Ответ написан
  • Как использовать полученные данные через Ajax далее в коде?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    var Var;
    $.get(url + 'pages/read.json', {events: true} ,function(data) {
              Var = data
          }
      });


    Или глобально в контексте Window...
    $.get(url + 'pages/read.json', {events: true} ,function(data) {
              window.Var = data;
          }
      });


    Или в контексте своего обекта:
    MyObj = {Var:'Ответ от сервера не пришел!' // <- Сдесь можно вставить данные по-умолчанию}; 
    $.get(url + 'pages/read.json', {events: true} ,function(data) {
              MyObj.Var = data;
          }
      });

    Ваши значение по-умолчанию поменяються как только прийдет ответ от сервера...
    Ответ написан
    2 комментария
  • Изменение параметра отдельного свойства элемента через jQuery?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    То что ты просил:
    $('a').css({border-bottom-color:'rgba(100,100,100, 0 или 1)'});


    Но делается это проще через CSS...
    a{
       font-family: 'Open Sans', sans-serif;
       font-weight: 500;
       font-size: 14pt;
       letter-spacing: 1px;
       color: #fff;
       border-bottom: 2px solid rgba(100,100,100, .1);  /*  .1 (90% прозрачности), 0 будет прозрачным */
       &:hover{
          border-bottom-color: rgba(100,100,100, 1);  /*  1 (0% прозрачности), 0 будет прозрачным */
       }
    }
    Ответ написан
    Комментировать
  • Как получить width в jquery?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Можно читать и менять прямо в стилях. Там точно в процентах.

    document.styleSheets[{stylesheet number}].cssRules[{rule number}].style.width = "40%";


    P.S. Думаю скрипт для поиска {stylesheet number} и {rule number} не составит проблем.
    Ответ написан
    Комментировать
  • Как сделать чтобы исчезал div при нажатии на другой div?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    document.querySelector('div.toClick').onClick = function(){
         document.querySelector('div.toHide').style.display = "hidden";
       }
    Ответ написан
    Комментировать
  • Как подключить скрипт после загрузки ajax?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    jQuery.getScript()
    Делает запрос к серверу без перезагрузки страницы, с запросом javascript файла. При получении запрошенного файла, код внутри него будет автоматически выполнен. Метод имеет параметры:
    jQuery.getScript(url, [success(data, textStatus)]):XMLHttpRequestv:1.0
    url — url-адрес js-файла.
    success(data, textStatus) — пользовательская функция, которая будет вызвана после удачного выполнения загруженного js-файла.

    data — данные, присланные с сервера.
    textStatus — статус того, как был выполнен запрос.
    Примеры

    Запросим у сервера файл "test.js", который будет автоматически выполнен, как только загрузится:
    $.getScript("test.js");

    Загрузим файл и выведем сообщение, после его удачного выполнения:
    $.getScript("test.js", function(){
       alert("Скрипт выполнен.");
     });
    Ответ написан
    7 комментариев
  • Как позволить ContentEditable редактировать только текст?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    <li><input type="checkbox" class="edit"/ ><span contenteditable="true">'
     + text + ' </span><button class="delete">Delete</button></li>
    Ответ написан
    Комментировать
  • Как заставить скрипт, остановиться?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    В файле HTML должно быть:
    <html>
    <head>
    ...
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="materialPreloader.js"></script>
    <link rel="stylesheet" type="text/css" href="css/materialPreloader.css"> 
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        preloader = new $.materialPreloader({
            position: 'top',
            height: '5px',
            col_1: '#159756',
            col_2: '#da4733',
            col_3: '#3b78e7',
            col_4: '#fdba2c',
            fadeIn: 200,
            fadeOut: 200
        });
        $(window).on('load', function(){console.log('BlaBla'); preloader && preloader.off();});
        preloader.on();
        setTimeout(preloader.off,9000);
    });
    </script>
    Ответ написан
    33 комментария
  • Z-index. Как подвинуть элемент повыше, если у родителя тоже задан z-index?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Убирай все z-index - они лишние у неактивных элементов. И ставь на .wrapper:hover вот такой стиль:
    .wrapper:hover .wrap,.image:hover {
        z-index:1;
    }

    Решение на Jsfiddle

    Изначально не правильно построена концепция. У тебя для каждой картинки должен быть свой текст. Абсолютное позиционирование как картинок так и враперов не уместно. Враппер для каждой картинки нужно ставить в нутрь блока .image - Перед тегом img, или задать z-index если картинка в background. А синий блок "Посмотреть" создавать через :after.
    Ответ написан
  • Почему блок не выделяется при наведении на его родителя?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Блок - position:fixed или absolute;

    Или любым другим способом выдернут из потока Body;

    Что бы решить твою проблему забери у ссылок float и сделай их
    display:inline-block;

    Смотри пример jsfiddle
    Ответ написан
  • Как в js поменять событие click?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    /* Устанавливаем */
    $('.spoiler_links').on('click.spoiler1', function(){ ... });
    /*   Меняем on click.spoiler1 на on click.spoiler2 */ ;
    $('.spoiler_links').off('click.spoiler1').on('click.spoiler2',function(){ ... });
    /* Убираем все*/
    $('.spoiler_links').off('click');


    Поробуй переделать код
    function SpoilerDef(){
      $(this).nextAll('.clsbody').toggle(0);
      $(this).nextAll('.spoiler_body').toggle(0);
      return false;
    }
    function SpoilerUniq(){
      ...
    };
    $('.spoiler_links').on('click.spoiler',SpoilerDef);
    
    $(document).ready(function(){
      $("#te").toggle(   
        function () {       
          $("#te").text('Заголовки');   
          $('.clsbody').hide(0);
          $('.spoiler_body').show(0);
          $('.spoiler_links').off('click.spoiler').on('click.spoiler',SpoilerUniq);
     }, 	    	    
        function () {
         $('.spoiler_body').hide(0);
         $('.clsbody').show(0); 
         $("#te").text('Свернуть');	
         $('.spoiler_links').off('click.spoiler').on('click.spoiler',SpoilerDef);
    });
    });


    Но по идее должно быть по другому, значительно проще:
    $(document).ready(function(){
     function SpoilerLink(e){
        ...
        e.stopPropagation();
        e.preventDefault();
     };
     $("#te").toggle(      // Возможно здесь нужно добавить к селектору ',.spoiler_links'
        function () {       
          $("#te").text('Заголовки');   
          $('.clsbody').hide(0);
          $('.spoiler_body').show(0);
          $('.spoiler_links').on('click.spoiler',SpoilerLink);
        }, 	    	    
        function () {
         $('.spoiler_body').hide(0);
         $('.clsbody').show(0); 
         $("#te").text('Свернуть');	
         $('.spoiler_links').off('click.spoiler');
        });
    });

    Селектор добавь если .spoiler_links лежат вне спойлера и при первом клике по ним должен вызывается спойлер.
    Ответ написан
    4 комментария
  • Как с помощью стилей поместить "readmore" после текста не меняя разметки?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    .material-news {
    display: inline;
    font: 12px/2.5 "Arial";
    text-align: justify;
    color: #464646;
    }
    .material-news:before {
    display: block;
    content: '.';
    color: white;
    }
    .readmore-btn {
    display: inline;
    padding-left:1ex;
    font: 12px "Arial";
    }
    .text-list-item-dn>br {
    display: none;            /* Благодарю @laska */
    }

    P.S. Если у img-intro-left заменить float на Position:absolute то можно и заголовок поставить inline и не ставить залипуху с :before.

    P.S.S. По коментарию, предлагаю:
    .articleBody .material-news {
    padding: 15px;
    display: block;
    }
    Ответ написан
  • Как сверстать капчу в виде слайда?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Всегда делаю капчу через слайд, пока роботы не раздупливают, если собирать биометрию с пользователя.
    Но процес достаточно сложный: клиентская+серверная части. Если нужно могу прикурутить за вознаграждение...

    Но наверное для тебя проще ГООГЛОВСКОЙ рекапчей воспользоваться. Там просто клик по селекту. ReCAPTCHA
    Ответ написан
    Комментировать
  • Как реализовать горизонтальный скролл?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    В примере JSFiddle:
    • реализован переход между страницами через меню без JavaScript;
    • можно переключить галерею в режим справа на лево.


    Основное в примере это:
    .container { 
        position: absolute;
        top: 0; left: 0;
        bottom: 0; right: 0;
        overflow-x: scroll;
        
        -ms-writing-mode: tb-lr;
        -webkit-writing-mode: vertical-lr;
        -moz-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        writing-mode: vertical-lr;    
    }
    .items {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;
    
        -ms-writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
        -moz-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;				
        writing-mode: horizontal-tb; 
    }
    Ответ написан
  • Как сделать блок с фиксированным соотношением сторон на всю страницу на CSS?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Применяй единицы измерения vmin, vmax, vw, vh.

    Например: JSFiddle
    .proportionale {
        position:absolute;
        width: 100vmin;
        height: 66vmin;   /* соотношение всегда будет 3/2 */
    }
    @media orientation: portrait { 
    .proportionale {
        position:absolute;
        width: 66vmin;
        height: 100vmin;   /* при портрете соотношение всегда будет 2/3 */
    }  
    }


    Только соблюдать правила:
    • 100vmin указывать к той сороне которая должна быть ограничительной;
    • если указываете больше 100vmin быть готовым что контент будет вылазить за границы при пропорциях близких 1/1.


    Еще есть вариант с флексбоксом.
    main {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: stretch;
        align-items: center;
    
        width:90%;
        margin: auto;
    }
    section {
        order: 0;
        flex: 0 1 60vw;
        align-self: stretch;    
        
        outline:blue 1px solid;
    }
    Ответ написан
    Комментировать
  • Нужны ли миниатюры фотографий в галерее?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Задам несколько наводящих вопросов.

    • Галерея показывается только в админке?
    • Изображения на сайте используются только в полном разрешении?


    Если ответы "нет" - используйте скрипт автоматичекского ресайза и сохранения, с последующей выборкой. Например: phpthumb.
    Ответ написан
    Комментировать
  • Как не позволить роботам делать POST-запрос?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Роботы точно входят через сайт?
    Без КАПТЧИ они могут на пряму посылать запросы!

    У вас уникальный "тикет" в форме есть?
    Проверяете клиента при загрузке файла на присутствие на сайте?
    Ну и проверяйте сразу есть ли к чему привязывать (в смысле существует ли ТИКЕТ на создание объявления привязаный к ТИКЕТУ на загрузку).
    Ответ написан
    Комментировать