Динамика tooltip
Привет ребят помогите сделать скрипт работающим.
Меня задолбал уже этот jQuery не знаю в чем ошибка. HTML <!-- Главный блок --> <div class="one"> <div class="two">Блок/Полле ввода</div> <div class="info">Информация, (tooltip примерно как в фреймворке boostrap)</div> </div> Оригинал на чистом js:
var elem = document.getElementsByClassName( "two" );
for ( var i = 0; i < elem.length; i++ ) {
if ( elem[ i ].parentNode.getElementsByClassName( 'info' )[ 0 ] ) {
elem[ i ].onmouseenter = function () {
this.parentNode.getElementsByClassName( 'info' )[ 0 ].css.style.display = "block";
}
elem[ i ].onmouseleave = function () {
this.parentNode.getElementsByClassName( 'info' )[ 0 ].css.style.display = "none";
}
}
}
jQuery
var elem = $( ".two" );
for ( var i = 0; i < elem.length; i++ ) {
if ( elem[ i ].parentNode.getElementsByClassName( 'info' )[ 0 ] ) {
elem[ i ].onmouseenter = function () {
...
this.parent() // дальше parent'a ничего не читается
}
elem[ i ].onmouseleave = function () {
...
this.parent() // дальше parent'a ничего не читается
}
}
}
|
Гыгы а где там jquery )))
|
Цитата:
|
я не пойму как на jquery написать рабочий скрипт, заменить весь код оригинального на jquery
|
Phonixe, на чистом JS код лучше и производительней, зачем переписывать его на jQuery? Чтобы сэкономить пару-тройку символов?
|
я знаю что на jQuery хуже такой мелкий код, но мне нужно именно на jQuery посматреть как он будет написан.
уже два дня мучаюсь никак не могу написать |
Ruslan_xDD, а теперь смотрим на таблицу поддержки событий mouseenter/mouseleave и добавляем еще пачку строк некрасивого кода :)
|
Цитата:
|
danik.js, и чёрт с ними, лучше костыль написать, чем целую библиотеку ради пары ф-ций подключать. Просто большинство пользователей jQuery, подключают её ради использования 5-10% её функционала.
Видел даже личностей, которые подключают jQuery ради того, чтобы подключить плагин jQuery.cookie и использовать только getCookie. |
опечатка, скрипт оригинала рабочий, когда переписывл его для форума он несколько иной был, там все правильно работает ну разве что css там нет.
ну так что ребят поможете переписать на jquery? |
Phonixe, Ваш код можно нормально написать в ~5 строк на чистом JS.
|
Вроде есть полифил для mouseenter/leave
|
Ruslan_xDD, каким образом его можно сократить до 5 строк?
|
Цитата:
$(image).animate(
prop,
delay,
function(){
if(!stopped)
play();
}
);
это все ради чего, пока что, у меня подключен живерь моднейшей версии. То есть всего 32Кб кодов, а живери - вот столько. Пользуясь случаем замерил все min версии - охренеть, блин, экономия ажно 8Кб! У меня фотка no_image.png весит раз в пять больше. |
Phonixe,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.info {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $(".two");
s.on('mouseenter mouseleave',function() {
$('+ .info',this).fadeToggle("slow");
});
});
</script>
</head>
<body>
<div class="one">
<div class="two">Блок/Полле ввода</div>
<div class="info">Информация, (tooltip примерно как в фреймворке boostrap)</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:09. |