login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[JS] weten of ik in een div zit (Opgelost)

Offline Wijnand - 13/02/2009 16:51 (laatste wijziging 13/02/2009 16:52)
Avatar van WijnandModerator Ik heb een div

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class='test'>
  2. <h3>test</h3>
  3. <a href='#'>doe iets</a>
  4.  
  5. </div>


Ik heb een functie geschreven die onmouseover (automatisch) een element toevoegt en onmouseout deze weer verwijderd. Dit werkt totdat ik over een ander elementa heen gaat (een h3, een a, of iets anders) wat ook in die div zit.

Ik hoorde dat het misschien te maken zou hebben met bubbling maar ben ermee bezig geweest en krijg niet het resultaat wat ik zoek.

Eigenlijk zoek ik gewoon een stukje code waarmee ik kan kijken of de mouse BINNEN of BUITEN zit. Dat zou op zich genoeg zijn.

Weet iemand iets hiervoor?

12 antwoorden

Gesponsorde links
Offline Stijn - 13/02/2009 17:53
Avatar van Stijn PHP expert Je zou een event moeten maken, wanneer de muis over de div gaat, dat de event dan een variabele op waarde 1 zet. Die 1 wijst dan op dat de muis zich daarin bevind. Wanneer de muis eruit gaat, zet je die op 0.
Offline Ibrahim - 13/02/2009 18:19
Avatar van Ibrahim PHP expert Nou, wat je ook kunt doen is het observen van de div in plaats van de elementen binnen de div.
Offline Wijnand - 14/02/2009 10:46
Avatar van Wijnand Moderator @stijn, ja maar hoe? Want je moet dan dus nogsteeds weten dat je in die div zit. Dat is dus hte probleem.

@ibrahim, observen van de div, wat bedoel je daarmee?
Offline Ibrahim - 14/02/2009 17:15
Avatar van Ibrahim PHP expert Nou, jQuery heeft een functie genaamd observe(); Ik raad je aan een framework te gebruiken, want dat lost veel problemen uit zichzelf op, zoals compatibiliteit.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#divId').observe('mouseover', function() {
  2.     // mouse over
  3. });
  4.  
  5. $('#divId').observe('mouseout', function() {
  6.     // mouse out
  7. });
Offline Wijnand - 16/02/2009 11:51 (laatste wijziging 16/02/2009 12:20)
Avatar van Wijnand Moderator Ok, ik heb jquery gedownload (liever niet gedaan, maar ok.. even proberen he), toegevoegd en ik denk dat het werkt.

Nu loop ik tegen dit probleem aan:

content[i].observe('onmouseover',function() { })

dat is wat ik wil doen. content[i] heeft geen id dus ik kan niet werken met $('#id'). content[i] is het element. Hoe kan ik er ervoor zorgen dat die observe toch werkt?

edit: de error is dat hij .observe niet kan vinden terwijl ik jquery heb toegevoegd en werkt. Hoe kan dat? Moet ik nog een 'plugin' downloaden ofzo?
Offline BramBo - 16/02/2009 16:34
Avatar van BramBo JS gevorderde content[i] is geen jQuery object, je kunt het eenvoudig tot jQuery element 'promoten', n.l.:

$(content[i]).observe('mouseover', function(){ });
Offline Wijnand - 16/02/2009 16:39
Avatar van Wijnand Moderator
Citaat:
Error: $(content[i]).observe is not a function
Offline vinTage - 16/02/2009 17:22
Avatar van vinTage Nieuw lid Zonder framework lukt het ook (als je dit bedoeld tenminste)

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.     function addListeners()
  3. 	{
  4.         var div=document.getElementById('hoverdiv');
  5.         div.addEventListener('mousemove',blaat,true);
  6. 		div.addEventListener('mouseover',over,true);
  7. 		div.addEventListener('mouseout',out,true);
  8. 	}
  9.  
  10.     function over()
  11. 	{
  12. 		document.getElementById('in_out').innerHTML = "je bevind je in de div";
  13. 	}
  14.  
  15. 	function out()
  16. 	{
  17. 		document.getElementById('in_out').innerHTML = "je bevind je niet in de div";
  18. 	}
  19.  
  20.     function blaat(event)
  21.     {
  22. 	    document.getElementById('info').innerHTML = "x pos "+event.screenX +"<br>y pos "+event.screenY;
  23.     }
  24. </script>
  25.  
  26. <body onload="addListeners()">
  27.  
  28. <div id="hoverdiv" style="border:solid 1px black; width:300px; height:300px;">
  29.  
  30.    <h1>DIK WOORD</h1>
  31.    <textarea name="" cols="3" rows="3"></textarea>
  32.  
  33. </div>
  34.  
  35. <span id="info"></span>
  36. <br />
  37. <span id="in_out"></span>
  38. </body>
Offline Ibrahim - 16/02/2009 23:14
Avatar van Ibrahim PHP expert Zou je wat meer informatie kunnen laten zien, zoals de for loop waarin content[i] zich in bevindt ?
Offline Wijnand - 17/02/2009 09:35 (laatste wijziging 17/02/2009 16:54)
Avatar van Wijnand Moderator @vintage, dat werkt, in FF. In IE niet. Ik heb even gezocht en kwam erachter dat je in IE met attachEvent moet werken.

Met de volgende aanpassing werkt het helemaal. Maar jij had de oplossing, thanks! 

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
  2. var div=document.getElementById('hoverdiv');
  3. if (isIE == 0) {
  4. 	div.addEventListener('mouseover',over,true);
  5. 	div.addEventListener('mouseout',out,true);
  6. } else {
  7. 	div.attachEvent('onmouseover',over);
  8. 	div.attachEvent('onmouseout',out);
  9. }



Edit: te vroeg gejuicht.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var teller = 0;
  2. function init() {
  3. 	if (document.getElementById('test')) {
  4. 		content = document.getElementById('test').childNodes;
  5. 		for (i = 0; i < content.length; i++) {
  6. 			var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
  7. 			obj2 = content[i];
  8. 			if (obj2.tagName == 'DIV') {
  9. 				teller += 1;
  10. 				obj2.setAttribute('id','test' + teller);
  11. 				if (isIE == 0) {
  12. 					obj2.addEventListener('mouseover',function() { editItem('http://www.lepel.nl',true,this);},true);
  13. 					obj2.addEventListener('mouseout',function() { editItem('http://www.lepel.nl',false,this);},true);
  14. 				} else {
  15. 					obj2.onmouseover = function () { editItem('http://www.lepel.nl',true,this) }
  16. 					obj2.onmouseout = function () { editItem('http://www.lepel.nl',false,this) }
  17. 				}
  18. 			}
  19. 		}
  20. 	}
  21. }
  22.  
  23. function editItem(link,aan,obj) {
  24. 	if (obj.id) {
  25. 		id = obj.id;
  26. 	}
  27. 	if (aan == true) {
  28. 		var aLink = document.createElement('A');
  29. 		aLink.setAttribute('href',link);
  30. 		aLink.setAttribute('id',id + '_link');
  31. 		aImg = document.createElement('IMG');
  32. 		aImg.setAttribute('src','img/test.gif');
  33. 		aLink.appendChild(aImg);
  34. 		css = ""
  35. 		aLink.setAttribute('style',css);
  36. 		aLink.style.cssText = css;
  37. 		if (document.getElementById(id)) {
  38. 			document.getElementById(id).appendChild(aLink);
  39. 		}
  40. 	} else {
  41. 		if (document.getElementById(id + '_link')) {
  42. 			document.getElementById(id + '_link').parentNode.removeChild(document.getElementById(id + '_link'));
  43. 		}
  44. 	}
  45. }


Als je eroverheen gaat werkt het. Hij doet alles. Maar weer als ik naar het linkje zelf ga (link met daarin een plaatje) dan gooit hij dat linkje weg. Terwijl ik dan nog in de div zit (heb een border om de div gezet zodat ik kan zien wat er aan de hand is). Ligt dat aan mijn javascript code? Doe ik iets fout?
Offline henver - 17/02/2009 18:52 (laatste wijziging 17/02/2009 18:54)
Avatar van henver HTML gevorderde
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function(){
  2.      links = document.get.elementById('idvandiv').getElementsByTagName('a');
  3.      for(var i=0; i<links.length; i++){
  4.           links[i].onclick = function(){
  5.                alert('Link');
  6.           }
  7.      }
  8. }


Op die manier wordt er automatisch aan elke <a> uit een bepaalde div een onclick functie toegewezen.
Offline Wijnand - 19/02/2009 09:23 (laatste wijziging 20/02/2009 15:01)
Avatar van Wijnand Moderator Ja, maar dat is niet het probleem he. Ik wil gewoon weten of ik in een bepaalde div zit of niet. Als ik erin zit (ongeacht of ik op een ander element binnen die div zit of niet) wil ik een bepaalde actie uitgevoerd hebben, als ik eruit gaat moet die weer weg gaan.

EDIT:
Hij werkt nu op zich goed. Hij kijkt niet meer naar de elementen BEHALVE het linkje en plaatje dat ik zelf toevoeg MET javascript (of een ander elementa, heb het ook geprobeerd met P).

Weet iemand hoe dat kan? 

EDIT2:
Ik heb nu de manier van werken andersgemaakt. Het komt erop neer dat ik onmousemove gebruik hiervoor. Daarmee kijk ik of in de parentnode van het element waar ik ben of in de parentnode van de parentnode etc daar de div maindiv voorkomt.

Als dat zo is, pakt hij die - 1 parentnode.

Dan weet ik waar hij in zit en wat ik ermee moet doen. Als hij erin zit maakt hij een variable aan met dat nummer waar ik in zit.

Als hij niet in die div zit, dan moet hij de laatste nummer die in die div zit verwijderen (als die er is).

beetje omweg, maar werkt wel goed. bedankt voor alle medewerking.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s