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

Question

[Дмитрий Петрик]

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

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

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

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

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

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

Comments

[Дмитрий Петрик]

Кстати, вот мои наработки по плагину. Нужно закинуть в корень сайта. Применяется к материалу который находится внутри div с классом content. Но не работает. Опера только ошибку выдает:

[Anton Bobylev]

Если перезальете свои наработки на jsfiddle.net будет значительно проще попытаться вам, чем возиться с рар архивами.

[Дмитрий Петрик]

Как это сделать? Отдельно без движка мои наработки работать не будут. А этот сервис не очень похож на хостинг чтобы туда движок залить

[Anton Bobylev]

У вас указаны категории javascript и jquery, значит вполне достаточно jsfiddle. Сохраните скомпилированные движком html, js и css и разместите их.

[Дмитрий Петрик]

www.enin.tpu.ru/1/#!/Typography
Исходный код этой страницы вставляю в ваш сервис, меняю пути до всех js скриптов и css. В итоге получаю вот эту страницу: www.enin.tpu.ru/1/ и до первой страницы которая нужна уже не добраться.
www.enin.tpu.ru/1/#!/Typography на этой странице должны быть JS скролл-бары, но их нет :(

Answer 1

[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();
    });
  });
});

Comments

[Дмитрий Петрик]

Во! Спасибо! Все работает!

Answer 2

[kotia]

зачем внутри хендлера «документ реди» писать хендлер «виндоу онлод»?

Comments

[Дмитрий Петрик]

Поясните подробнее, я не сильно хорошо разбираюсь в JavaScript

[kotia]

ой, я наверное спутал (function($){}) c $(function(){})

Answer 3

[Anton Bobylev]

Похоже проблема в асинхронном подключении jquery. Если руками после загрузки страницы подключить и инициализировать плагин — все работает.

Comments

[Anton Bobylev]

Работает если после загрузки страницы ввести в консоли поочередно (дождавшись сообщения о успешной загрузке):

$.getScript('js/jquery-1.7.2.min.js'); 
$.getScript('js/jquery-ui-1.8.21.custom.min.js'); 
$.getScript('js/jquery.mCustomScrollbar.js');

Answer 4

[Beliyadm]

Не знаю как у этого скроллбара, но у jquery.tinyscrollbar есть функция tinyscrollbar_update(), вызывается после ajax запроса к нужному элементу, пример

$('.menu li').click(function() {
	$.ajax({
		// params,
		success: function(response){
			$('#content').html(response).tinyscrollbar_update();
		}
	});
});

Answer 5

[Pretor DH]

попробуй этот dargon.deparadox.com