Задать вопрос
sftutukov

Сергей Тутуков

Комментарии

  • Как получить ближайший h2 для каждой img?

  • Как получить ближайший h2 для каждой img?

    sftutukov
    @sftutukov
    Это правильный ответ?
    Код Bukinator: будет работать только при структуре:
    <h2>
  текст
  <img src="" alt="">
</h2>

    Ваш, Даниил Сугоняев:. работает только при структуре:
    <h2>текст</h2>
<img src="" alt="">
    Написано

  • Как получить ближайший h2 для каждой img?

    sftutukov
    @sftutukov
    если такая структура будет, то сработает))
    <h2>
	текст
	<img src="" alt="">
</h2>
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    Станислав Ботев: Ладно и так сойдет:) уже намного лучше)
    Все последний совет. Не делай так никогда, и вообще зачем это?
    $(document).ready(function() {
            $('.slide-1').focus();
        });

    Представь такую ситуацию:
    - сайт огромный (много css, js)
    - слабый интернет
    - много картинок
    Пока у тебя вся страница не погрузится, у тебя фокус не сработает. Да и почему тебя фокус!?!? Фокус нужно использовать у input, textarea...
    Тебе в верстке нужно было сразу добавить класс .active к первому .slide, чтобы даже без js у тебя все нормально прогрузилось.
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    Вот этот код у тебя вообще не работает)))
    $('.all').scroll(function() {
            var ratio = $('.all').scrollTop() / (($('.all').height() - $('.all').height()) / 100);
            $("#progress").width(ratio + "%");
      });

    скролиться .object-container. Можешь проверить в консоли
    $('.object-container').scroll(function() {
 console.log($(this).scrollTop());
});
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    Пункт 2 должен сократиться на что-то универсальное:). Что-то типо этого
    $('.rofas-nav li a').on('mouseover',function () {
    var index = $(this).parent().index();
    $('.slide').removeClass('active').eq(index).addClass('active');
});
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    Станислав Ботев: давай я тебе только по js объясню...
    1. Вот это у тебя на 50 строк
    $('.slide-1').click(function () {
        $(this).addClass('active').removeClass('passive');
        $('.main-text-1').css('display', 'flex');
        $('.slide-2').addClass('passive').removeClass('active');
        $('.slide-3').addClass('passive').removeClass('active');
        $('.slide-4').addClass('passive').removeClass('active');
        $('.slide-5').addClass('passive').removeClass('active');
        $('.slide-6').addClass('passive').removeClass('active');
    });

    Задаешь один класс, на все слайды и пишешь (50 строк сократилось в 3)
    $('.slide').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
});

    Не совсем понимаю зачем класс .passive. Почему нельзя сразу написать свойства этого класса контейнеру и .active'ом изменять нужный контейнер.
    Зачем вот это $('.main-text-1').css('display', 'flex');? Нельзя ли написать в css свойствах, что-то типо этого
    .slide.active .main-text-1{
	display:flex;
}
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    Прости, но верста находится еще в более плачевном состоянии:((
    Нет ни одного правильного момента(((
    Написано

  • "Оцените вёрстку" или всё ли я делаю правильно?

    sftutukov
    @sftutukov
    1. Ужасный весь файл <script src="js/custom-slider.js"></script>
    $(function () {
    $('.slide-1').click(function () {
        $(this).addClass('active').removeClass('passive');
        $('.main-text-1').css('display', 'flex');
        $('.slide-2').addClass('passive').removeClass('active');
        $('.slide-3').addClass('passive').removeClass('active');
        $('.slide-4').addClass('passive').removeClass('active');
        $('.slide-5').addClass('passive').removeClass('active');
        $('.slide-6').addClass('passive').removeClass('active');
    });
...
});

    1.2. Прости, но ты не знаешь, что такое focus(), blur().
    1.3. И на мобильных устройствах нет событие mouseover:(
    $('.roofl').mouseover(function () {
        $('.slide-1').focus();
        $('.main-text-1').css('display', 'flex');
        $('.arrow-1').css('display', 'block');
    });
    $('.fasadl').mouseover(function () {
        $('.slide-2').focus();
    });
    $('.designl').mouseover(function () {
        $('.slide-3').focus();
    });
    $('html').blur(function () {

    2. Лишних 3 раза обращаешься к DOM
    $('.all').scroll(function() {
            var ratio = $('.all').scrollTop() / (($('.all').height() - $('.all').height()) / 100);
            $("#progress").width(ratio + "%");
      });

    3. Посмотри, что такое return
    $(".lang").on("click", function() {
    $(this).text(function(e, t) {
        return e = $.inArray(t, messg),
        messg[++e % messg.length]
    })
});
    Написано

  • Как реализовать такой эффект на CSS?

  • Как правильно сделать условие наличие в ID нужного класса?

    sftutukov
    @sftutukov
    У тебя неверная запись.
    .free_domain вложен в #resp1.
    Написано

  • Как правильно сделать условие наличие в ID нужного класса?

    sftutukov
    @sftutukov 
    if($('#resp1 .free_domain').length){
  $('#resp1').css('cursor','pointer');
  $('#resp1').on('click',function(e){
    window.open(..);
    return false; // я не знаю зачем ты пишешь return, если это div блок. И лучше тогда писать e.preventDefault(); место return
  });
}else{
  console.log('нет класса .free_domain')
}
    Написано

  • Как упростить запись Jquery?

    sftutukov
    @sftutukov
    1.
    $('.slide-1').focus(function () {
        $('.number-1').css('font-weight', 'bold');
        $('.number-1').css('color', 'rgb(255, 255, 255)');
        $('.number-1').css('margin-left', '3.5vw');
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-2').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 'bold');
        $('.number-2').css('color', 'rgb(255, 255, 255)');
        $('.number-2').css('margin-left', '3.5vw');
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-3').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 'bold');
        $('.number-3').css('color', 'rgb(255, 255, 255)');
        $('.number-3').css('margin-left', '3.5vw');
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-4').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 'bold');
        $('.number-4').css('color', 'rgb(255, 255, 255)');
        $('.number-4').css('margin-left', '3.5vw');
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-5').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 'bold');
        $('.number-5').css('color', 'rgb(255, 255, 255)');
        $('.number-5').css('margin-left', '3.5vw');
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-6').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 'bold');
        $('.number-6').css('color', 'rgb(255, 255, 255)');
        $('.number-6').css('margin-left', '3.5vw');
    });

    $('.slide-1'), ..., $('.slide-6') - задай один класс и добавляй класс и удаляй у всех остальный этот класс
    $('.slide').focus(function () {
    $(this).addClass('active').siblings().removeClass('active');
});

    2. Слишком много однообразной писанины)
    нужен пример
    Написано

  • Как создать timeline для сайта?

    sftutukov
    @sftutukov
    Mixa_007: напиши внутри функции 
    setTimeout(function(){
   TimeLine(currectTime, timeFrom, timeTo);
},интервал);
    Написано

  • Как создать timeline для сайта?

    sftutukov
    @sftutukov
    что-то типо этого должно быть:
    https://codepen.io/STutukov/pen/LLVVxo?editors=1010
    коррекцию по минутам, стили и все остальное сам сделаешь
    Написано

  • Как сократить код?

    sftutukov
    @sftutukov
    Rich: я это понимаю, но как уже говорил:
    id не может повторятся на странице.

    у тебя после клика на id="b1", станет 3 бока с одинаковым id, если конечно они присутсвуют на странице
    Написано

  • Как сократить код?

    sftutukov
    @sftutukov
    Rich: 
    $('#tits_click_a1').attr("id", "tits_click_a3");
$('#tits_click_a2').attr("id", "tits_click_a3");
$('#tits_click_a3').attr("id", "tits_click_a3");

    id="tits_click_a1" меняется id на tits_click_a3
    id="tits_click_a2" меняется id на tits_click_a3
    id="tits_click_a3" меняется id на tits_click_a3
    Написано

  • Как сократить код?

    sftutukov
    @sftutukov
    Rich: скажи, что тебе нужно сделать.
    id не может повторятся на странице.
    $('#tits_click_a1').attr("id", "tits_click_a3");
$('#tits_click_a2').attr("id", "tits_click_a3");
$('#tits_click_a3').attr("id", "tits_click_a3");
    Написано

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

    sftutukov
    @sftutukov
    partyzanx: 
    var switchClass = function(list){
  var el = list.filter('.in');
  el.toggleClass('in out');
  if (el.next().length){
    el.next().toggleClass('in out');
  }else{
    el.prevAll().last().toggleClass('in out');
  }
  setTimeout(function(){
    switchClass(list)
  },1000);
}
switchClass($('ul li'));
    Написано

  • Почему функция click не добавляет необходимые классы?

    sftutukov
    @sftutukov 
    $('.menu__link').on('click', function(){
  $(this).parent().addClass('active').siblings().removeClass('active');
});
    Написано