var div = document.querySelector('div');
document.querySelector('button').addEventListener('click', function() {
var cl = div.cloneNode(true);
cl.style.cssText = 'height: auto; position: absolute; left: -100500px;';
document.body.appendChild(cl);
div.style.height = cl.offsetHeight + 'px';
cl.parentNode.removeChild(cl);
}, false);
<div data-hint="Какой-то текст к div-у 1">1</div>
<div data-hint="Какой-то текст к div-у 2">2</div>
<div data-hint="Какой-то текст к div-у 3">3</div>
<div id="hint"></div>
div[data-hint] {
display: inline-block;
width: 150px;
height: 150px;
margin: 15px;
border: 1px solid #900;
}
#hint {
display: none;
position: absolute;
padding: 5px;
margin: -15px auto auto 10px;
border-radius: 5px;
box-shadow: 0 0 1px 2px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100500;
}
var hint = $('#hint');
$('div[data-hint]').on({
mouseenter: function(){
hint.text($(this).data('hint')).show();
},
mouseleave: function(){
hint.hide();
},
mousemove: function(e){
hint.css({top: e.pageY, left: e.pageX});
}
});
<ul class="menu">
<li>
<a href="#" class="parrent">item 1</a>
<ul>
<li>submenu item 1</li>
<li>submenu item 1</li>
</ul>
</li>
<li>
<a href="#" class="parrent">item 2</a>
<ul>
<li>submenu item 2</li>
<li>submenu item 2</li>
</ul>
</li>
<li>
<a href="#" class="parrent">item 3</a>
<ul>
<li>submenu item 3</li>
<li>submenu item 3</li>
</ul>
</li>
</ul>
Ну и JS:$(function () {
var links = $('.menu a.parrent');
links.click(function (e) {
links.not(this).siblings('ul').slideUp(300);
$(this).siblings('ul').slideToggle(300);
});
});
Пример в песочнице var elH = horizontal.offsetHeight,
elTop = horizontal.offsetTop,
winH = window.innerHeight,
factor = horizontal.scrollWidth / (elH * 2 + winH);
window.addEventListener('scroll', function (e) {
var elPosTop = horizontal.getBoundingClientRect().top + elH,
elPosBot = horizontal.getBoundingClientRect().bottom - elH;
if ((elPosTop >= 0) && (elPosBot <= winH)) {
var dE = document.documentElement,
top = (this.pageYOffset || dE.scrollTop) - (dE.clientTop || 0);
horizontal.scrollLeft = Math.abs(elTop - winH - top) * factor;
}
}, false);
var wheelEvt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';
document.querySelector('.port').addEventListener(wheelEvt, function (e) {
var evt = e.originalEvent ? e.originalEvent : e,
delta = evt.detail ? -evt.detail : evt.wheelDelta;
this.scrollTop += (delta < 0 ? 1 : -1) * 40;
e.preventDefault();
}, false);
<!-- Элемент, перед которым необходимо добавить произвольный html-код -->
<div id="target">Target</div>
// новый html-контент
var newHtml = '<div><span>Span 1.1</span><span>Span 1.2</span></div><div><span>Span 2.1</span><span>Span 2.2</span></div>';
// вставляем перед целевым элементом
document.getElementById('target').insertAdjacentHTML('beforeBegin', newHtml);
Пример в песочнице - jsfiddle.net/krfwuksy $(function () {
$({saturate: 0}).animate({saturate: 100}, {
duration: 2000,
easing: 'swing', // linear
step: function () {
$('.block').css({
'-webkit-filter': 'saturate(' + this.saturate + '%)',
'filter': 'saturate(' + this.saturate + '%)'
});
}
});
});
<p>Pomodoro</p>
<div id="Mytimer">
<p><a href="" id="timer">count!</a>
</p>
<p>
<input type="text" id="volume" value="3" />vol</p>
</div>
<input type="button" value="+">
<input type="button" value="-">
var d = document;
d.addEventListener('DOMContentLoaded', function () {
var inp = d.getElementById('volume'),
out = d.getElementById('timer'),
min = 0, seconds = inp.value * 60, timer;
[].forEach.call(d.querySelectorAll('[type=button]'), function (but) {
but.addEventListener('click', function () {
inp.value -= -(this.value + '1');
(inp.value <= 0) && (inp.value = 0);
}, false);
});
out.addEventListener('click', function (e) {
e.preventDefault();
seconds = inp.value * 60;
clearTimeout(timer);
tiktak();
}, false);
function tiktak() {
seconds--;
if (seconds <= 0) {
out.textContent = 'Finish!';
clearTimeout(timer);
return false;
}
min = Math.floor(seconds / 60);
out.textContent = ('0' + min).slice(-2) + ':' + ('0' + (seconds - min * 60)).slice(-2);
timer = setTimeout(tiktak, 1000);
}
}, false);
<p class="info"></p>
<img alt="mashyna_taksy_nakleika_1_.jpg" src="http://i.piccy.info/i9/af7fb3ee41ec62c9160e3d6e8aec99c6/1445302105/40502/962048/mashyna_taksy_nakleika_1_.jpg" usemap="#myMap" width="459" height="459" />
<map name="myMap" id="myMap">
<area shape="circle" coords="104,273,35" data-info="переднее колесо" />
<area shape="circle" coords="351,272,36" data-info="заднее колесо"/>
<area shape="poly" coords ="100,207,132,191,174,175,207,172,265,172,318,175,365,189,379,194,373,211,108,212" data-info="стекло"/>
</map>
var output = $('.info'); // куда выводим
$('area').on({
mouseenter: function(){
output.text('Навели на ' + $(this).data('info'));
},
mouseleave: function(){
output.text(''); // если надо...
}
});
row.parentNode.insertBefore(row, row.parentNode.rows[0]);
var data = [
['load miha.dat... Creating file!', 2000],
['[Connect] User miha, IP 78.25.120.131', 2500],
['Connect Ok', 1500],
['Uploading virus', 3000],
['Uploading Ok', 1500],
['Read the personal data', 4000],
['Credit Card Number Ok', 1500],
['Password Ok', 1500],
['Goodbye, money!', 1500],
['[Disconnect] User miha', 1000],
['Disconnect Ok!', 0]
],
i = 0,
cons = $('#console'),
consH = cons.outerHeight(),
cursor = $('<span id="cursor"> </span>');
function addString() {
if (typeof data[i] != 'undefined') {
$('<p>' + data[i][0] + '</p>').appendTo(cons).append(cursor);
if (cons[0].scrollHeight > consH) {
$('p:first-child', cons).remove();
}
setTimeout(addString, data[i][1]);
i++;
}
}
addString();
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.wrapper {
display: flex;
}
.wrapper > div {
flex: 1 100%;
}
.wrapper > div:nth-child(2) {
flex: 1 0 1024px;
}
var urls = [
'url(google.com)',
'url(yandex.ru)'
];
if( urls.indexOf($(this).css('background-image')) !== -1 ) {
// есть
}
Только надо учитывать, что отличие даже в одном символе, может привести не к тому результату, на который надеетесь. Например, если в одном случае протокол прописан, а в другом нет. появились проблема, как указать с тегами "li ul"Этот момент я что-то не совсем понял; уточняйте. Но может такой вариант подойдёт без уточнений:
[].forEach.call(document.querySelectorAll('.MenuBlock_1_panel'), function (el) {
el.addEventListener('mouseenter', function () {
this.previousElementSibling.style.backgroundColor = '#F5F5F5';
}, false);
el.addEventListener('mouseleave', function () {
this.previousElementSibling.style.backgroundColor = '';
}, false);
});