alex242 Posted August 31, 2010 Share Posted August 31, 2010 In the below, I try and be lazy by trying to use two functions to style multiple table elements by using the 'this' keyword. Only problem is, it doesn't work. What did I do wrong? I'm pretty sure I am misusing the 'this' keyword, so how does one use it correctly? Or am I just being an idiot by forgetting something obvious? <html><head><script type="text/javascript">function navon(this){this.style.background = 'gray';}function navoff(this){this.style.background = 'transparent';}</script></head><body><table><tr id='nav'><td onmouseover='navon(this)' onmouseout='navoff(this)'>link1</td><td onmouseover='navon(this)' onmouseout='navoff(this)'>link2</td><td onmouseover='navon(this)' onmouseout='navoff(this)'>link3</td><td onmouseover='navon(this)' onmouseout='navoff(this)'>link4</td><td onmouseover='navon(this)' onmouseout='navoff(this)'>link5</td></tr></table></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted August 31, 2010 Share Posted August 31, 2010 this is a reserved keyword (but you knew that) so you can't use it as a variable name. Try using a different name for your variable like: function navon(elem){elem.style.background = 'gray';} Link to comment Share on other sites More sharing options...
thescientist Posted August 31, 2010 Share Posted August 31, 2010 technically, you aren't using this in the way you think you are in your functions. this is in the context of your javascript functions is just referring the argument being passed in (you could name it anything). it is often used to scope variables, functions, and methods to classes, functions, or objects in which they are being called in. The reason why it isn't working for you is not because of this though, but rather because you are incorrectly setting CSS styles with javascript. I'm sure a quick Google search would give you an example of how to actually set background color or opacity. (neither of which you are doing correctly)edit: also, Shadowmage is correct about it being a reserved word, but the javascript inside the functions itself is still wrong, but using this in the function calls within the <td> tags is an example of its correct usage, though. Link to comment Share on other sites More sharing options...
alex242 Posted August 31, 2010 Author Share Posted August 31, 2010 Ah, it is working now, thank you Shadow! (btw, your image is sweet) And sorry for angering you Scientist, I am new to most of this. I guess I could use <td onmouseover='this.class = "turngray";'> to avoid the use of javascript... Or is that not what you meant? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 31, 2010 Share Posted August 31, 2010 The reason why it isn't working for you is not because of this though, but rather because you are incorrectly setting CSS styles with javascript. I'm sure a quick Google search would give you an example of how to actually set background color or opacity. (neither of which you are doing correctly)I'm not so sure about that. I just tried the following code in a Try It example and it worked just fine.<html><head><script type="text/javascript">function setStyle(){document.body.style.background="grey";}function setStyle2(elem){elem.style.background="transparent";}</script></head><body><input type="button" onclick="setStyle()" value="Set background style" /><div style='height: 300px; width: 200px; background-color: blue;' onclick='setStyle2(this);'>This is a test div</div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted August 31, 2010 Share Posted August 31, 2010 background is one of those shorthand properties, so technically it works this way. But consider the possible interpretation if the stylesheet defined rules for background-repeat, but JavaScript defined a shorthand rule that didn't include a repeat specification? Would the browser continue to honor the repeat rule, or would it get clobbered? Does the W3C have a guideline for this? I don't remember. Link to comment Share on other sites More sharing options...
thescientist Posted August 31, 2010 Share Posted August 31, 2010 Ah, it is working now, thank you Shadow! (btw, your image is sweet) And sorry for angering you Scientist, I am new to most of this. I guess I could use <td onmouseover='this.class = "turngray";'> to avoid the use of javascript... Or is that not what you meant?I was only pointing out the greater definition/context of this. Like I said you were using it correctly within the HTML and when making function calls. Aside from it being a reserved word, I was pointing out that perhaps the wrong properties were being used to achieve the effect you desired, which apparently ShadowMage disproved.edit: or apparently which DD proved? I'm not sure now. I've seen multiple ways for setting backgrounds, so I'm not sure which one would be considered official or best practice. I know that its not a literal translation from CSS to Javascript or vice-versa as far as property names go.well, apparently this is what W3(C/Schools) advocates, so I'm sticking by my post! http://www.w3schools.com/jsref/dom_obj_style.asp Link to comment Share on other sites More sharing options...
jeffman Posted August 31, 2010 Share Posted August 31, 2010 FWIW, onmouseover='this.class = "turngray";' is JavaScript, even if it is placed in the tag. Best practice generally keeps script out of HTML tags. Link to comment Share on other sites More sharing options...
alex242 Posted August 31, 2010 Author Share Posted August 31, 2010 But some things can not be achieved without it, like what I am attempting to do. I was in need to do all of this 'this' stuff because for some reason, you can't put a link onto a table cell. Or if you can I was doing it wrong... Link to comment Share on other sites More sharing options...
justsomeguy Posted August 31, 2010 Share Posted August 31, 2010 You can't put a link on a table cell, but you can create a link that takes up the entire cell. Link to comment Share on other sites More sharing options...
alex242 Posted August 31, 2010 Author Share Posted August 31, 2010 really? How would you go about doing this? With <div>s or just resizing the <a>s? Link to comment Share on other sites More sharing options...
jeffman Posted August 31, 2010 Share Posted August 31, 2010 This whole project would work better anyway using the CSS :hover pseudo-class. For example:#nav td {background-color: transparent;}#nav td:hover{background-color: #aaa;}You must use a strict doctype for this to work correctly in IE. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 31, 2010 Share Posted August 31, 2010 really? How would you go about doing this? With <div>s or just resizing the <a>s?You can just use <a> tags and give them display: block to make resizable. Link to comment Share on other sites More sharing options...
alex242 Posted August 31, 2010 Author Share Posted August 31, 2010 I will try that Deidre's. I did not think ':hover' worked for things other than links, thank you. It will be less code as well...I will also try your idea, Shadow, and see which one suites my needs better. There is more to my page than just the code I provided, and what I have so far is kinda sloppy. I will see what I can do with this, thanks for the help! Link to comment Share on other sites More sharing options...
ShadowMage Posted August 31, 2010 Share Posted August 31, 2010 I did not think ':hover' worked for things other than links,...It doesn't unless you use a Strict DTD like DD said. (In IE that is, it works just fine in other browsers) Link to comment Share on other sites More sharing options...
thescientist Posted August 31, 2010 Share Posted August 31, 2010 I will try that Deidre's. I did not think ':hover' worked for things other than links, thank you. It will be less code as well...I will also try your idea, Shadow, and see which one suites my needs better. There is more to my page than just the code I provided, and what I have so far is kinda sloppy. I will see what I can do with this, thanks for the help!all it takes is a quick trip down tutorial lane...http://www.w3schools.com/css/css_pseudo_classes.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2010 Share Posted August 31, 2010 You must use a strict doctype for this to work correctly in IE.No! you must not, you guys have been seriously misinformed, just try it. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 31, 2010 Share Posted August 31, 2010 In IE7 you must use a strict doctype to have it apply :hover to non-link elements (at least originally, an update may have changed that). IE6 doesn't support it at all. I'm not sure how IE8 handles it. Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. http://msdn.microsoft.com/en-us/library/ms530766.aspx Link to comment Share on other sites More sharing options...
alex242 Posted August 31, 2010 Author Share Posted August 31, 2010 all it takes is a quick trip down tutorial lane...http://www.w3schools.com/css/css_pseudo_classes.asp Actually, I read through that tutorial just the other day. It doesn't say that ':hover' is meant to be used on things other than links. It seems to hint that it can't, but never explicitly said it, so I just assumed. Anyway, thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2010 Share Posted August 31, 2010 well i must have a buggy IE7 IE7/IE8 cause it works fine in both, I know it IE6 won't work as you must use an anchor or javascript, i tested in html, html then xhtml transitional and strict, and they worked as they should in html and xhtml using transitional and stirct, maybe it did not work on early versions of IE7, but it certainly works now. Link to comment Share on other sites More sharing options...
thescientist Posted September 1, 2010 Share Posted September 1, 2010 Actually, I read through that tutorial just the other day. It doesn't say that ':hover' is meant to be used on things other than links. It seems to hint that it can't, but never explicitly said it, so I just assumed. Anyway, thanks.really, if you read the table at the bottom it makes it pretty clear that its not exclusive to links.:hover | Adds a style to an element when you mouse over itdoesn't say anything about it being only for links. certain psuedo class do however only apply to links, and are cited appropriately in said table. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 1, 2010 Share Posted September 1, 2010 well i must have a buggy IE7As opposed to what? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 The posting here state you MUST use strict doctype to use :hover on other elements for it to work, not including IE6. Where as, on doctype transitional it works perfectly fine as well. Now either IE7 and IE8 on my O/S, have been getting it on with firefox, and now become hybrid browsers which accepts :hover in transitional, or we have been misinformed.I went to your link, and tried out their example, plain html, html and xhtml in transitional and strict, all worked except for pain html page, which i expected.Anyone else getting the same result? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 1, 2010 Share Posted September 1, 2010 I don't even have IE7 to test, I only have IE8. I would imagine that in IE8 even under compatibility mode for IE7 it may still do things that IE7 wouldn't.For me in IE8, this works as expected: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"><html><head><style type="text/css"> body:hover { background-color: #E0E0E0 } h1:hover { color: red; } img { vertical-align: middle; } .zoom img { zoom: 0.5; } img:hover { zoom: 1.0; cursor: hand; } img.spacer { width: 0px; height: 30px; }</style></head><body><h1>Hover Here</h1><img class="spacer" src="blank.gif"><span class="zoom"><img src="A.gif"><img src="B.gif"><img src="C.gif">. . .<img src="X.gif"><img src="Y.gif"><img src="Z.gif"></span></body></html> Without the doctype, this does not do any hover effects: <html><head><style type="text/css"> body:hover { background-color: #E0E0E0 } h1:hover { color: red; } img { vertical-align: middle; } .zoom img { zoom: 0.5; } img:hover { zoom: 1.0; cursor: hand; } img.spacer { width: 0px; height: 30px; }</style></head><body><h1>Hover Here</h1><img class="spacer" src="blank.gif"><span class="zoom"><img src="A.gif"><img src="B.gif"><img src="C.gif">. . .<img src="X.gif"><img src="Y.gif"><img src="Z.gif"></span></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 2, 2010 Share Posted September 2, 2010 Where as, on doctype transitional it works perfectly fine as well. Now either IE7 and IE8 on my O/S, have been getting it on with firefox, and now become hybrid browsers which accepts :hover in transitional, or we have been misinformed.You have only done two thirds of my suggested test. The whole point of the test, was the 'you must use STRICT doctype' statement, test the example in Transitional doctype.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">#nav td {background-color: transparent;}#nav td:hover{background-color: #aaa;} body:hover { background: url("wlbigielogo.gif") no-repeat center center; } h1:hover { color: red; } img { vertical-align: middle; } .zoom img { zoom: 0.5; } img:hover { zoom: 1.0; cursor: hand; } img.spacer { width: 0px; height: 30px; }</style></head><body><table width="500" border="1"> <tr id="nav"> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table><h1>Hover Here</h1><img class="spacer" src="blank.gif"><span class="zoom"><img src="A.gif"><img src="B.gif"><img src="C.gif"><img src="X.gif"><img src="Y.gif"><img src="Z.gif"></span></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.