3 мая 2012 в 11:26
Здравствуйте!
Отказывается работать меню в D7. Точнее оно-то работает, но сам javascript (оформление) никак не хочет функционировать. Остальные jQuery плагины работают. Я так понимаю, что нужно сделать определенные замены в самом javascript, но, к сожалению, в этом я слаб. Огромная просьба помочь.
page.tpl:
<?php<div class="lavalamp" >
<?php if ($main_menu): ?>
<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')))); ?>
<?php endif; ?>mainMenu.js:
$(document).ready(function () {
//найти текущую позицию активного элемента
var dleft = $('$main_menu').offset().left - $('$main_menu').offset().left;
var dwidth = $('$main_menu').width() + "px";
//присвоить эту позицию элеметку с подсветкой
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});
})(jQuery);
Заранее благодарю!
Комментарии
скрипты подключены ?
нормально загружаются ?
В том-то и дело, что скрипты работают. Другие плагины нормально работают. Я так понимаю, что дело в том, что скрипт этот привязан к системному главному меню и в самом этом скрипте нужно что-то изменить...
Никто не может помочь?
откуда стащили исходники ?
http://ruseller.com/lessons.php?rub=29&id=539
ссылку на ваше творение предоставьте
Да я бы с удовольствием, но только все на локальном сервере....
Тогда сами или начните с более простого .
Надеюсь вы стили не забываете подключать ?
С какого простого? У меня в верстке все прекрасно работает. Меню в том числе. Тут в javascript нужно изменить некоторые параметры, которые ссылаются на системное меню друпал. Вы знаете javascript?
Покажите html код который у вас генерируется .
Та бодяга которая по вашей ссылке , работать в большинстве браузеров не будет .
Проделайте все что указано по ссылке , которую размещал выше .
То есть, Вы хотите сказать, что верстка работает на всех браузерах, а после темизации на друпал может работать не во всех браузерах???
Я же просил помощи по существу.
а в вашем меню вообще есть классы lavalamp и floatr ?
Мне кажется, в них-то и дело. Потому как в верстке эти классы были, а при адаптиции к друпалу я их заменил на пхп
здесь
http://svobodakoda.net/drupal/theme-menu-drupal-7/есть как темизировать меню и привести его к любому виду .Какая к черту верстка , вы ни строчки не показали .
var dwidth = $('$main_menu').width() + "px";
$main_menu - это вы сами додумались туда переменную из шаблона засунуть ?
это такой новый селектор , который вибирает все меню полностью .
а вообще там по идее должно быть $('.active'),
хотя переменная var dleft = $('$main_menu').offset().left - $('$main_menu').offset().left;
в любом случае равна нулю .
видимо что-то упустил , можно ссылку с документацией ?
в шаблон надо вставить
<?php if ($main_menu): ?>
<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')))); ?>
<?php endif; ?>
<div class="floatr"></div>
</div>
а в скрипт
$(document).ready(function () {
//найти текущую позицию активного элемента
var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";
//присвоить эту позицию элеметку с подсветкой
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});
})(jQuery);
и не забыть про css
Сделал. Не работает. В меню не работают ссылки, а скриптовый ползунок на активном пункте меню не двигается. Скриншот прикрепил.
а шаблон случайно не в артистире сделан?
Если да ,то и врядли будет работать , попробуйте на каком-нибудь стандартном шаблоне .
Нет. Шаблон делал лично. С нуля. В блокноте))
а код можете показать , который в
.......
<div class="floatr"></div>
</div>
у вас выводится ?
<ul>
<li class="active"><a href="">Главная</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Ближайшие события</a></li>
<li><a href="">Фото</a></li>
<li><a href="">Полезные материалы</a></li>
<li><a href="">Контакты</a></li>
</ul>
<div class="floatr"></div>
</div>
должно работать ,может неправильно подключаете .js файл ?
Подключаю правильно. Все остальные скрипты работают.
Залейтесь на хостинг , посмотрим .
http://t40189.testdrive.hvosting.net/
так в вашем же примере на ruseller.com/lessons/les539/example/index.html
в демо ссылки то тоже не нажимаются- что же вы хотели .все точно так как и там .
Я уже запутался совсем. Смотрите, в примере меню, понятное дело, что нажиматься пункты не будут. Но когда я это меню интегрировал в свою верстку все нажималось и работало! А вот в друпале почему-то не работает...
возможно конфликт версий jquery . попробуйте установить модуль jquery update - может заработает , если будет другая версия библиотеки jquery .
Не работает. Я думаю, тут дело в том, что меню друпала как-то не состыковывается с jQuery.
$(document).ready(function () {
//найти текущую позицию активного элемента
var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";
//присвоить эту позицию элеметку с подсветкой
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});
})(jQuery);
чето лишнее
$(document).ready(function ()
(function ($) {.......нужный код
})(jQuery);
ничего лишнего
а с какой нибудь стандартной темой друпала пробывали ?
ага, поглядел. noConflict
firebug выдает вот это:
Uncaught TypeError: Cannot read property 'left' of null
google says
http://api.jquery.com/position/ ???
Я это гуглил, только вообще ничего не понял - ни из текста, ни из примера. К сожалению.
Стара тема, но тоже с этой проблемой столкнулся. Надо в конце javascript'a заменить false на true:
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return true;
});
Теперь кнопочки нажимаются, но после перехода по ссылке нет результата этой части кода
$(this).addClass('active');
и, соответственно, класс active опять у первого элемента меню. Теряется присваивание класса active. Как этого избежать?