Events (OnMouseOver, OnMouseOut) для DIVа (и вложеных елементов)

Wed, 06 May 2009 09:43:57 +0200

Если просто отобразить див по МаусОвер, то при наведении мыши, на любой из его внутренних елементов, он сразу исчезнет, а нам это не нужно ;)

Для того что бы этого небыло, используем простой код:

//Обьявляем ивент для всех браузеров и Експлорера	
function addHandler(node, evt, func) {
    if (node.addEventListener) {
        node.addEventListener(evt, func, false); 
    } else {
        node.attachEvent('on' + evt, func);     
    }
};
//Получаем список парент елементов обьекта - рекурсивно
function isParent(child, parent) {
    if (!child || !parent) {
        return false;
    }
    while (true) {
        if (child == parent) {
            return true;
        }
        if (child.parentElement) {
            child = child.parentElement;
        } else if (child.parentNode) {
            child = child.parentNode;
        } else {
            return false;
        }
    }
}
// Простой текст-заготовка
var preperedText = "<div style='position: absolute; width: 300px; background: #ccc;'>
<h1>Cool Popup</h1>\
<p>Here the sample Text (<b>in paragraph</b>)\
with <i>some</i> <u>styling</u> and picture above<br/>\
<img src='Astronaut.gif' title='Picture'></p></div>";
function zaatachim(container) {
	var injection = document.getElementById(container);
	// Вставляем в контейнер приготовленный текст
	// Текст можно получить и через Ajax ;)
	injection.innerHTML = preperedText;
	// Цепляем ивент на контейнер с Айди container
	addHandler(injection, 'mouseout', function(e) {
	    var target = e.relatedTarget || e.toElement;
	    if(!isParent(target, injection) ) {
	       	injection.innerHTML = '';
	    }
	});
	// если текст цепляем через Ajax, не забываем о задержках ;)
}

Комментарии к заметке

Теги:
javascript > event > OnMouseOver
html > tags > div

Как получить список определённых тегов внутри div с помощью javascript

Fri, 27 Jun 2008 14:02:24 +0200

<script type="text/javascript">
function getTagsIdList (id){
  //получаем div id через id.parentNode
  //и с помощью getElementsByTagName собираем все элементы с тегом "а"
  var tagaelm = id.parentNode.getElementsByTagName('a');
  //в цыкле выводим название элемента(объекта, тега) и его содержимое
  for(var i=0; i < tagaelm.length; i++) 
  alert(tagaelm[i].id + "\n" + tagaelm[i].innerHTML);
}
</script>
<div>
  <a id="a1" onClick="getTagsIdList(this);" href="#">link1</a>
  <a id="a2" onClick="getTagsIdList(this);" href="#">link2</a>
  <a id="a3" onClick="getTagsIdList(this);" href="#">link3</a>
</div>

Комментарии к заметке

Теги:
javascript
html > tags > div

Deerua about Coding: последние заметки с тегом «div»

Events (OnMouseOver, OnMouseOut) для DIVа (и вложеных елементов)

Как получить список определённых тегов внутри div с помощью javascript