Очень нужна помощь! JavaScript-Scrollbar нужно установить на движок?

Здравствуйте!

Есть такой движок в стиле metro: metro-webdesign.info

Идея в том, чтобы большие страницы типа этой прокручивались JavaScript-Scrollbar'ом. Примерно так.

Нужно написать плагин (в самом движке есть такая возможность) который бы все это организовывал. Плагины пишутся просто, но уже несколько дней бьюсь и не могу подружить этот скролл-бар с движком. Мыслей уже не осталось…

Помогите написать этот несчастный плагин, пожалуйста. Бесплатная версия движка тут, скрипт склоллбара тут.

В качестве благодарности могу поделиться полной версией движка.
  • Вопрос задан
  • 5464 просмотра
Решения вопроса 1
g1t5
@g1t5
Вам нужно подключить скрипты и стили (в шаблоне или с помощью движка):
  • jquery.mCustomScrollbar.css
  • jquery-ui.js
  • jquery.mousewheel.min.js
  • jquery.mCustomScrollbar.js


У элемента #content указать нужную высоту и overflow: 'auto', например:
#content {height: '300px'; overflow: 'auto';}


Каждый раз при обновлении контента вызывать:
$("#content").mCustomScrollbar();

Результат.
пример для консоли
$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "http://www.enin.tpu.ru/1/xx/css/jquery.mCustomScrollbar.css"
}).appendTo("head");
$.getScript('http://code.jquery.com/ui/1.9.2/jquery-ui.js').done(function(script, textStatus) {
  $.getScript('http://www.enin.tpu.ru/1/xx/js/jquery.mousewheel.min.js').done(function(script, textStatus) {
    $.getScript('http://www.enin.tpu.ru/1/xx/js/jquery.mCustomScrollbar.js').done(function(script, textStatus) {
      $("#content").css({height: '300px', overflow: 'auto'});
      $("#content").mCustomScrollbar();
    });
  });
});

Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@kotia
зачем внутри хендлера «документ реди» писать хендлер «виндоу онлод»?
Ответ написан
dpigo
@dpigo
Front-end developer
Похоже проблема в асинхронном подключении jquery. Если руками после загрузки страницы подключить и инициализировать плагин — все работает.
Ответ написан
beliyadm
@beliyadm
because open source matters
Не знаю как у этого скроллбара, но у jquery.tinyscrollbar есть функция tinyscrollbar_update(), вызывается после ajax запроса к нужному элементу, пример
$('.menu li').click(function() {
	$.ajax({
		// params,
		success: function(response){
			$('#content').html(response).tinyscrollbar_update();
		}
	});
});
Ответ написан
Комментировать
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
попробуй этот dargon.deparadox.com
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы