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

    trushka
    @trushka
    я так понимаю, лучше не через img делать, а если jQuery, то
    <div class="img" data-link-1="/link1.html" data-link-2="/link2.html" ></div>
    var svg=$('div.img').load("file.svg",  function(){
      $('a:eq(0)', this).attr('xlink:href', $(this).data('link-1'))
      $('a:eq(1)', this).attr('xlink:href', $(this).data('link-2'))
    });

    Исправил, лучше контейнер сделать какой-нить div, может, даже с inline-block, чтоб размеры и пропорции были те, что прописаны в svg
    Ответ написан
  • Почему не ищется элемент по getElementsByName?

    trushka
    @trushka
    надо document.getElementsByName('test')[0] использовать. Ну или document.querySelector('[name="test"]').
    А если инпут с name="inputname" внутри формы c name="formname", то можно его получить так: document.formname.inputname
    Ответ написан
    1 комментарий
  • Бритва Оккама: лишние обертки. Как понять нужен ли оборачиающий блок или нет?

    trushka
    @trushka
    Ну, я вот стараюсь всегда максимально упростить (писал в коменте выше, почему), тут бы вполне можно было бы вот так:
    <header class="header page__header justify">
              <a href="../index.html" class="header__logo logo__link">
                <img src="../img/big-logo.png" class="logo__pic">
                <img src="../img/logo.png" class="logo__pic-small">
              </a>
          <nav class="nav">
            <button class="toggl-menu"><span></span></button>
            <a href="#" class="nav__link">О нас</a>
            <a href="#" class="nav__link">Абонементы</a>
            <a href="#" class="nav__link">Контакты</a>
          </nav>
    </header>
    Отступы в header'e можно сделать с помощью padding: 0 20px (а box-sizing: border-box уже и так для всех элементов у вас задан). Вот нащот списков внутри nav вроде довольно много копий уже сломано, но я вот считаю, что nav по определению уже список и можно тупо прямо в него ссылки лепить, без зазрения совести) В общем, как-то так)) А, да, и для раскрытия меню (да ивообще интерактивных элементов, не предполагающих переход по ссылке) лучше кнопку или просто span ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах
    Ответ написан
    Комментировать
  • Как при клике на ссылку добавлять в урл название?

    trushka
    @trushka
    Если я правильно понял, нужно менять адресную строку браузера? Тут лучше не предотвращать переход, а hashchange использовать, а якоря отдельно поставить, причём скрытые, чтоб при клике к ним не прокручивалось. Тогда даже будут кнопочки вперёд-назад в браузере работать и при открытии ссылки в новой вкладке скролиться к нужному блоку
    <a id="about_us" style="display:none"></a>
    <section class="medoff-about  module "></section>
    $(window).on('hashchange', function(){
        var id = location.hash, targ=$(id+'+section.module'); //запоминаем в targ нужный блок
        if (!targ[0]) return // выходим, если "левый" хэш, например, ввели вручную
        var top = targ.offset().top;
        $(".header__list a").removeClass(('active'));
        $('.header__list a[href="'+id+'"]').addClass('active');
        }
        //
        // if (windowRes <= 1024) {
        // 	$('body,html').animate({scrollTop: top})
        // }
        
        $('body,html').animate({
          scrollTop: top + 3
        }, 1500);
      });
    }).on('load', function(){$(window).hashchange()}) // переходим к нужному разделу, если, напрмер, ссылку в новой вкладке открыли
    Ответ написан
    8 комментариев
  • Есть готовое решение или нужно писать?

    trushka
    @trushka
    Та ну, там в принципе особо и писать много не надо.. Просто если даже какое-то готовое решение можно притянуть за уши, то там скорее всего будет дофига незадействованных возможностей, из-за которых прибавится тормозов. Я вот сделал бы генерацию козявки в случайном месте, потом перемещение на случайное расстояние Δx и Δy, причём с помощью transform для меньшей нагрузки на процессор. можно это делать плавно за счёт transition, а на transitionend повесить следующее перемещение. Положение можно кэшировать в каких-то внутренних переменных или в свойствах самого элемента, если козявка выползает за пределы экрана - удалять её и генерировать новую, или проверять следующие Δx и Δy, чтоб она вернулась в видимую область. Ну а в transform писать translate(x+=Δx, y+=Δy), где x и y - закешированные координаты. А для самих козявок - поискать анимированные картинки тупо в гугле, чтоб там крылышками типа помахивали и т.п. Можно их перед перемещением разворачивать в нужную сторону для большей реалистичности
    Ответ написан
    Комментировать
  • Как загрузить разное содержимое в зависимости от id ссылки?

    trushka
    @trushka
    А зачем такие сложности? просто открывать ссылку в iframe и всё..
    <!-- Ссылки -->
    <a href="https://www.youtube.com/embed/aaaaaaaa1"  target="videoframe" onclick="$('#show_video_window').arcticmodal();">Посмотреть видео 1</a>
    <a href="https://www.youtube.com/embed/aaaaaaaa2"  target="videoframe"  onclick="$('#show_video_window').arcticmodal();">Посмотреть видео 2</a>
    
    <!-- Модальное окно -->
    <div style="display:none;">
    <div class="box-modal" id="show_video_window">
    <iframe width="480" height="360" name="videoframe"></iframe>
    </div>
    </div>
    Ответ написан
    Комментировать
  • Как вытаскивать данные из текста?

    trushka
    @trushka
    Не очень понятен вопрос. Если всегда такой порядок (цена-товар-описатие), то можно типа
    var discription=str.split('\n'),
        price=discription[0],
        title=discription[1],
        comment=discription[2]
    Ответ написан
  • Как сделать у backgraund z-index больше чем img.src,то есть чтобы у тега img backgraund был главней?

    trushka
    @trushka
    Можно использовать просто div с двумя бэкграундами и двигать верхний
    Ответ написан
    Комментировать
  • Возможно ли на JavaScript/jQuery UI сделать масштабирование и поворот с помощью стилизированных контролов?

    trushka
    @trushka
    Погуглите, есть такой плагин на canvas - специально для этих целей
    Ответ написан
    Комментировать
  • Как оптимизировать прорисовку игры на чистом JS and CSS?

    trushka
    @trushka
    можно ещё в сторону Web Animations API посмотреть.. Хотя всё это ещё в состоянии разработки.. Опять же, по максимуму css-анимации надо использовать
    Ответ написан
    Комментировать
  • Как с помощью regexp удалить все ссылки из текста?

    trushka
    @trushka
    Тут можно и без regExp: если текст - это содержимое какого-то существующего элемента на странице, то просто берём element.innerText.. Если откуда-то "извне" нам эта строка с тэгами приходит, можно типа
    var el=document.createElement('div');
    el.innerHTML={наша строка со ссылками};
    {строка без ссылок}=el.innerText
    а на jQuery ещё компактнее
    $('</>{стока со ссылками}').text() // </> в начале строки, чтобы jQuery понял, что это фрагмент кода

    Так просто быстрее браузеры соображают, чем проходят большие строки regExp'ами
    Ответ написан
    Комментировать
  • "Заморозить" div и включить по клику?

    trushka
    @trushka
    Можно проверять положение прокрутки страницы при touchstart и touchend, если изменилось - устанавливаем блоку overflow: hidden (можно и по событию scroll делать, но оно обычно не сразу генерируется, а после того, как страница "остановилась") и задаём таймер на 300-500 мс по которому возвращается элементу overflow: auto. Ну, вообще, надо сделать clearTimeout предварительно для таймера заданного в предыдущем свайпе. То есть сначала задаём var swipeTimer например, потом.. в общем на jQuery приблизительно так:
    var swipeTimer, top;
    $(windiw).on('touchstart', function(){top=$(windiw).scrollTop()})
     .on('touchend', function(){
    if (top==$(windiw).scrollTop()) return;
    clearTimeout(swipeTimer);
    swipeTimer=setTimeout(function{$('.mydiv').css({overflow: ''})}, 500);
    $('.mydiv').css({overflow: 'hidden'})
    })
    То есть, блок "заморозится", как только мы оторвём палец, после того, как начали прокручивать всю страницу и останется замороженным в течении полсекунды
    Ответ написан
  • Как сделать появление Pop-up после отправки формы?

    trushka
    @trushka
    надо вешать обработчик не на клик кнопки, а на submit формы:
    $("form").submit(function(){
    // валидируем форму;
    // отправляем данные на сервер;
    // показываем попап;
    return false // предотвращаем отправку формы и перезагрузку страницы
    })
    Как вариант, можно показать попап при отправке, потом при ответе от сервера в том же попапе показать результат, типа данные успешно отправились или ошибка.

    Кстати, в обработчике сабмита в качестве this будет элемент формы, и очень просто получить доступ к полям: this.inputName.value - это значение содержащегося в форме <input name="inputName">

    и ещё, что это за каменный век .css({'filter' : 'alpha(opacity=80)'})? Если даже хочеться, чтоб ие8 показывал, достаточно написать .css({'opacity' :80)}) - jQuery сам разберётся, если это ИЕ8- и задаст фильтр. Или .fadeTo(0, 80) - тогда даже show() можно не писать..
    Ответ написан
  • Всё, на что может нажать пользователь должно быть ссылкой?

    trushka
    @trushka
    Ящетаю, что ссылками должно быть только то, что можно корректно открыть в новой вкладке. Если такое не подразумевается - то button в лучшем случае - ну, чтоб всяких неприятных сюрпризов от ойпадов всяких не было.. Хотя, где-то читал, что многие проблемы с несрабатывающим в iOs кликом решаются заданием для кликабельного элемента cursor: pointer
    Ответ написан
    Комментировать
  • Как сабмитить форму ajax без перезагрузки страницы?

    trushka
    @trushka
    Обработчик не та клик сабмита ставить надо, а на сабмит формы:
    $("#chatForm").submit(function(){
    .........
    return false
    })

    Всё, на кнопку никакого дополнительного обработчика вешать не нужно - форма и так отправится и по клику на неё, и по энтеру. Вернее, не отправится, а сработает ваш обработчик, и отправит аякс-запрос.
    Ответ написан
    1 комментарий
  • Как передать текущее время в бд при нажатии кнопки?

    trushka
    @trushka
    Можно сделать форму с одним submit'ом, и указать в качестве target скрытый iframe на этой же странице
    <form target="tgtframe" action="{адрес скрипта}">
    <button>я тут</button>
    </form>
    <iframe name="tgtframe" style="display:none">
    Как-то так
    Ответ написан
    Комментировать
  • Как сделать адаптивый видео фон для сайта?

    trushka
    @trushka
    video.bg {width: 10px; min-width: 100%; min-height: 100%}

    И jQuery никакого не надо))
    Ответ написан
  • Как ускорить обработку элементов в массиве JS?

    trushka
    @trushka
    Каждый раз append() вызывает тормоза, да и функция checkableItem() тоже весьма рессурсоёмкая. Да и сам по себе вызов функции весьма притормаживает выполнение. То есть, лучше прописать прямо в коде. Причём, именно добавлять в текстовую переменную сгенерированный html. А ховер-эффект с помощью css :hover сделать (а так же для :checked, чтоб отдельного класса не прописывать, ну и там ещё какой-то аттрибут my_type задаётся и при этом display:none - так тоже можно прописать в css .st-checkable-item[my_type] {display:none}).
    var ch = '', html='';            
                $.each(json.hotels, function(i) {
    
                    // Если итем присутствует в GET запросе.
                    ch =qs && qs.hotelId && qs.hotelId.length > 0 && $.inArray(json.hotels[i].id_extra, qs.hotelId) >= 0  // это выражение и так даст true или false
                   html+='<div class="st-checkable-item" unselectable="on"><input id="item_'+config.value+'" type="checkbox" value="'+json.hotels[i].id_extra+'" data-altvalue="+config.altValue+'"'+(config.ch?' checked':'')+'><label for="item_'+config.value+'" unselectable="on"><span>' + json.hotels[i].type + "&nbsp;" + json.hotels[i].name + '</span></label></div>'
                   // ну и т.д., я не все параметры тут вписал в код, но думаю, что ясно как остальные дописать.
                });
    $("#st-all-hotels-list .st-listbox-content").append(html)
    console.timeEnd('create list');
    Ответ написан
    Комментировать
  • Как убрать оформление скайпа в номере телефона?

    trushka
    @trushka
    Может, сделать ссылку прозрачной или visibility: hidden, а под неё уже подложить текст ссылки
    Ответ написан
    Комментировать
  • Как сделать адаптивный наклонный элемент?

    trushka
    @trushka
    Вместо процентов можно использовать vw иkb vh. Ну и в сочитании с calc() можно вообще очень много чего делать))
    Ответ написан
    Комментировать