onmouseover but not if over this?

[wongadob]

Imagine a list of facebook posts. Within those post are a number of elements that are clickable - lets say like and reply for example. I am using a cursor based system so i need to be able to highlight the main message, then the like and then the reply. But the like and the reply are contained in the same div as the actual message (a big container div) I need to change the background of each element as it passes over, I have to use onmouseover as they are not form input elements so I believe I can't use onfocus. But when I put the cursor over the like icon I want the background colour of the main message to become unhighlighted. Currently I have onmouseover and onmouseout events on each element. Is there any way to say on mouse over this element, unhighlight that element (even though the mouse is technically still over it) and still have it return to being highlighted when the mouse is off the like element? Any help much appreciated etc... wongadob

Edited May 18, 2012 by wongadob

[eTianbun]

Give the "big container" a default background color (e.g gray) and then an ID (eg 'bigOne'), then do something like this or use a function instead.

<a href="#" onmouseover="document.getElementById('bigOne').style.backgroundColor='#ccc'" onmouseout="document.getElementById('bigOne').style.backgroundColor='gray'">Like</a>

Edited May 18, 2012 by CodeName

[Ingolme]

Can you use the :hover pseudo-class?

[wongadob]

I will try to change it using the ID, but I thought maybe the system would auto change it back since technically the mouse is still over it. I can't use hover as it does not work with the system I am using Webworks for Blackberry web apps Thanks Wongadob

[wongadob]

Also not sure how to access the ID as it is in a knockout.js for each tempate. i.e. it generates many items of the same div. I tried adding an ID thinking it might add a number suffix but it doesn't. I tend to use class to identify for CSS but that does not matter because they all have the same CSS rules, but of course the onmouseover is specific to the one div. Wongadob

[wongadob]

if it is any help it is 2 'parents' up how could I change this document.getElementById('bigOne').style.backgroundColor='#ccc'" to select the item that is its 'grand-parent' so to speak?

[Ingolme]

If you have access to the current node, just move up two parent nodes:

element.parentNode.parentNode.style.backgroundColor = "#ccc"

[wongadob]

so I guess using this.parentNode.parentNode.style.backgroundColor = "#ccc" would work ?

[eTianbun]

so I guess using this.parentNode.parentNode.style.backgroundColor = "#ccc" would work ?

sure!

[Ingolme]

As long as you can ensure that "this" is refering to the element you want. I'm always wary of using "this" in any context.Normally in an event, you'll pass the event object as a function parameter and access the current element as [eventobject].target or [eventobject].srcElement for Internet Explorer. Internet Explorer has a global window.event object rather than a function parameter.

[wongadob]

Hmm not working - Here is my code

<div class = "messageitem" id = "thrdmes" x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" >	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())" x-blackberry-focusable="true" onmouseover="style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';" onmouseout="style.color='#16509e';this.parentNode.parentNode.style.backgroundColor='#880000';"><p data-bind = "text: user"></p></div>	   <div data-bind = "html: readicon" ></div>

I did not put the rest of the div in here because it goes on to do all sorts of other fields I did not want to confuse things., This is the definition from the div I want to access - messageitem to the element I want to highight, but unhighlight main messahe Thanks

[wongadob]

I think the 'this' in this instance should be OK should it not as it is inline actually IN the element.

[eTianbun]

You have some attributes that i dont even understand. <div ...onmouseover="style.color='#****'; this.parentNode..."...></div> What is the use of the part marked with red? Are you trying to refrence the element itself or what? If no reason, then it should not be there in both onmouseover/onmouseout in the first place, but if you are trying to refrence the element itself, then add "this" to it (e.g. this.style.color='#444444').

Edited May 18, 2012 by CodeName

[wongadob]

Yeah I was missing the 'this.' But that does not solve the problem. Interestingly the missing this. did not seem to make any difference. Maybe it assumes this. if it is part of element. Yes I am accessing the element itself in this instance. I make the element itself have a red background (this is test to show navigation is working) but I also want to access the 'parent.parent' element to switch its red background off! Thanks

[eTianbun]

go back again, checK all onmouseout/onmouseover and make sure the value of each properties are closed properly with apostrophe.

Edited May 18, 2012 by CodeName

[wongadob]

From the color coding of the code I posted above it would appear they are ?

[Ingolme]

Putting "this" matters. If you do not put it, the program will look for a global variable called "style" and won't find it. Try this again and show the exact code you're using in the event handler. I can't see how it could fail unless it was implemented wrong.

[eTianbun]

Ok, post your NEW code!

Edited May 18, 2012 by CodeName

[wongadob]

OK here it is

	 <div class = "messageitem"  x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread())">	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())"	    x-blackberry-focusable = "true"	    onmouseover = "this.style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';"	    onmouseout = "this.style.color='#16509e'; this.style.backgroundColor='transparent'; this.parentNode.parentNode.style.backgroundColor='#880000';">	    <p data-bind = "text: user"></p>	   </div>

[eTianbun]

i tought i told you to use 'this' to reference the element itself?

[wongadob]

Ah never noticed the ones on messageitem.

[wongadob]

Ah never noticed the ones on messageitem.

[wongadob]

OK so made that change and do difference

<div class = "messageitem"  x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#880000';" onmouseout="this.style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread())">	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())"	    x-blackberry-focusable = "true"	    onmouseover = "this.style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';"	    onmouseout = "this.style.color='#16509e'; this.style.backgroundColor='transparent'; this.parentNode.parentNode.style.backgroundColor='#880000';">	    <p data-bind = "text: user"></p>	   </div>	   <div data-bind = "html: readicon" ></div>	 	  	   <div class = "groupline" data-bind="html: viagroup"></div>

same deal the main message always stays highlighted.

[Ingolme]

Since it's not working there must be an error somewhere. Have you looked at the error console?

[eTianbun]

Note that some <div> closing tags (</div>) are MISSING... Check for those without closing tags, then fix THEM.