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

Михаил Горячкин

Ответы пользователя по тегу JavaScript

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

    abaddon65
    @abaddon65
    Можно кое что придумать если воспользоваться свойством styleSheets объекта document:
    HTML:
    <div class="wrapper"></div>
    CSS:
    .wrapper {
  color: red;
  width: 100%;
  margin-top: 10px;
}

    function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            (classes[x].cssText) ? alert(classes[x].cssText) : 		alert(classes[x].style.cssText);
        }
    }
} 

getStyle('.wrapper');

    Результатом будет строка:
    .wrapper { color: red; width: 100%; margin-top: 10px; }

    Рабочий пример.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать ajax ленту совместно с mFilter2?

    abaddon65
    @abaddon65
    Все довольно просто. mFilter пишет значения для фильтрации в url в виде get - параметров, а в качестве сниппета для пагинации используется pdoPage. Запросы при фильтрации и пагинации mFilter шлет на коннектор assets/components/msearch2/action.php.
    В итоге вам надо взять любой js - плагин, который реализует бесконечный скролл, или написать его самому. При достижении конца страницы вы берете url разбиваете его на параметры (можно использовать ф-ю mSearch2.Hash.get() она является частью js api mSearch) и скармливаете их скрипту. Вот и все.
    Когда-то я писал подобную реализацию для скроллинга использовал свой плагин miniScroll. Для него реализация будет выглядеть так:
    var ms = $('.catalog_lattice');
var params = mSearch2.Hash.get();
params['action'] = 'filter';
params['pageId'] = mse2Config.pageId;
params['key'] = mse2Config.key;

ms.miniScroll({
    limit: 5,
    controllerUrl: 'assets/components/msearch2/action.php',
    responceType: 'json',
    dop: params,
    preloderPath: 'assets/templates/ikeds/img/loader.gif',
    success: function (responce, elm) {
        if (responce.data.results) {
            elm.find('.pager').before(responce.data.results);
        }
    }
});

    Плагин писался давно и сейчас есть более достойные реализации. Сниппет mSearch вызываете как обычно, только скрываете ссылки с пагинацией.
    Ответ написан
    Комментировать
    Комментировать

  • Как сменить фон у DIV через определённый промежуток времени?

    abaddon65
    @abaddon65
    Вот по быстрому накидал:
    HTML:
    <div class="wrapper"></div>
    CSS:
    body,html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  transition: background 1s;
  background: none;
}

    JS:
    (function (w, d) {
	w.onload = function () {
		var wp = d.querySelector('.wrapper'),
        colors = ['yellow', 'red', 'green', 'blue'],
        ln = colors.length;
    
    var changeColor = function (i) {
      if (i < ln) {
        setTimeout(function () {
          wp.style.cssText = "background: " + colors[i] +";"; 
          i++;
          changeColor(i);
        }, 2000);
      } else {
        changeColor(0);
      }
    };
    
    changeColor(0);
  };
}(window, document));

    Это на чистом js, его легко можно заменить на jQuery.
    Рабочий пример.
    Ответ написан
    5 комментариев
    5 комментариев

  • Возможно ли сделать бекграунды не стандартной формы в адаптивном дизайне? Стоит ли вообще?

    abaddon65
    @abaddon65
    Можно попробовать сделать при помощи трансформаций.
    Вот по быстрому пример набросал:
    <div class="treangle">
  <div class="treangle--left"></div>
  <div class="treangle--right"></div>
</div>

    CSS:
    body, html {
  height: 100%;
  width: 100%;
}
.treangle {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
  
  [class*='treangle--'] {
    width: 100%;
    height: 50%;
    position: absolute;
    background-color: yellow;
  }
  
  .treangle--left {
    float: left;
    left: -50%;
    transform: rotate(20deg);
    transform: matrix(-1, -0.2, 0, 1, 0, 0);
  }
  
  .treangle--right {
    float: right;
    right: -50%;
    transform: rotate(-20deg);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
  }
}

    Все будет ресайзиться как надо. Вопрос только в поддержке браузеров.

    Рабочий пример.
    Ответ написан
    2 комментария
    2 комментария

  • Есть какой нибудь туториал по созданию подобного эффекта?

    abaddon65
    @abaddon65
    Это обычная css трансформация, не чего сложно там нет, единственное что при анимации используются функции плавности.
    easings.net/ru
    Подберите нужную и будет вам счастье.
    Ответ написан
    Комментировать
    Комментировать

  • Почему undefined и как получить дочерний элемент?

    abaddon65
    @abaddon65
    Ответ на первый ваш вопрос вы можете посмотреть вот тут first-child. Вы не к тому применяете селектор :first-child.
    Надо так:
    $("div#" + thisColID + " div:first-child").attr('id');


    Можно сделать попроще. Рабочий вариант будет выглядеть примерно так:
    var getBlockInColumn = function() {
	var thisColID = $(this).attr('id'), children = $("div#" + thisColID).children();
        if (children.length) {
            alert($(children[0]).attr('id'));
        }
};

$(document).ready(function(){
	$(".column").on("click",getBlockInColumn);
});
    Ответ написан
    1 комментарий
    1 комментарий