Menu
Community /Pin to ProfileBookmark
@NogDogMay 09.2005 — #I'm not 100% positive, but I think this...
...needs to be...
http://www.webdeveloper.com/forum/showthread.php?t=65090 ?as posted in that link:
my jsp page will not compile with this javascript code, I get the following error on the 'for' line:
oA.length must be followed by either attribute specification, ">" or "/>"..
Edit/Delete Message NogDog,
I tried that and the lin stays highlighted after I click it, but once I click anywhere else, it is not highlighted anymore. In Firefox, it does not stay highlighted at all. You will have to be this with JavaScript or rewrite the page server-side.
Doesn't JavaScript need to be included fron an external file in jsp? no, I have some javascript in this page that is not included form an external file.
I put your code in an external file and it iw working the same way I described above. Will your code work without using tables and using a div like this:
The link does not stay highlighted once I click anywhere else, and in firefox, it does not stay highlighted at all.The code changes the class of all links in the document. It doesn't matter if the are in a table or a div.
Have you included the css?
CSS:
HTML:
MAIN.js:
Thanks for all the help.
btw both classes have the same color?I changed the colors, thanks.
I have 2 more questions about this. If I have a link somewhere on my site that may link to a particular program/service, and I want to display this page:
Programs-------------Services
------------Detail------------
How can I have the program/service already highlighted when the page(s) display? The services page only shows services that pertain to the program that was selected, but if they are coming from an external link, they are not clicking on a program in the programs iframe, so I'm not sure what I am asking is possible?? Let me know if this is confusing.
Also, if my services page is set up with tables instead ov using <div>, how do I get the whole table row to change colors when the link is highlighted and stay highlighted when clicked? I have it working the original way you suggested, but that only highlights the link, not the entire row.
Thanks for all your help!!!
This shows you how it works. In your page the onload would be in the iframe page.
profile_welcome.jsf page:
Do i have to use the body onload to call the onload function?
This also doesn't highlight the whole table row.The code I gave works correctly. You have to adapt it to your document structure.
The body onload is used to highlight the link when the page is loaded. If you want the highlighting at a later time or after a particular event, you can change it.
The code you gave does work, I agree. I have everything working in a div, but how would I get the entire row to highlight and stay highlighted if I were using a table to show my links:
Again, thanks for all your help!!The function is fired by onload in a script, not body onload.
The function highlights the row when you click on the link. the function does not highlith the entire row for me, it just highlights the background of the text for the link, not the entire row.
If I don't fire the onload event from the body onload, then how do I fire it when the page loads up?
The onload is in the script at the end of the body. Note: you can not have an onload in the body tag and another fired from a script!
link background colors
I have a site that has 3 iframes on it:
programs services
info
The programs page is nothing but links that update the services/info iframes. When the programs page loads up, I want the first link to be highlighted. When you hover over the other links, they become highlighted. When you select a link, that link now becomes the highlighted one and stays highlighted. I have this sort of working in IE (FireFox will not keep the link highlighted when clicked). Once I click anywhere (either outside the iframe, or within the same iframe) the highlight goes away. Below is part of my CSS and HTML code. Could someone please help me. I am kind of new to CSS. Thanks!!
CSS:
[code]
#programlinks a{
padding-left: 4px;
display: block;
width: auto;
text-decoration: none;
border: 1px solid white;
}
#programlinks a:hover, a:active, a.current{
border: 1px solid black;
background-color: lightyellow;
}
HTML:
[code]
<script language=”javascript”>
function loadTwo(iframe1URL, iframe2URL) {
parent.ifrmServices.location.href=iframe1URL
parent.ifrmDetails.location.href=iframe2URL
}
</script>
<div id=”programlinks”>
<a href=”javascript:loadTwo(‘blank.jsp’,’profile_welcome.jsf’)”>About My Programs</a>
<a href=”javascript:loadTwo(‘services.jsf’,’program1_details.jsf’)”>Living More</a>
<a href=”javascript:loadTwo(‘services.jsf’,’program3_details.jsf’)”>Program 3</a>
</div>
Sign in
to post a comment20 Comments(s) ↴
0
@NogDogMay 09.2005 — #I'm not 100% positive, but I think this...#programlinks a:hover, a:active, a.current{...needs to be...
#programlinks a:hover, #programlinks a:active, #programlinks a.current{reply?
0
@FangMay 09.2005 — #What was wrong with the method given here: reply?
0
@jrthor2authorMay 09.2005 — #my jsp page will not compile with this javascript code, I get the following error on the 'for' line:
oA.length must be followed by either attribute specification, ">" or "/>"..
Edit/Delete Message
reply?
0
@jrthor2authorMay 09.2005 — #I tried that and the lin stays highlighted after I click it, but once I click anywhere else, it is not highlighted anymore. In Firefox, it does not stay highlighted at all.
reply?
0
@FangMay 09.2005 — #Doesn't JavaScript need to be included fron an external file in jsp?
reply?
0
@jrthor2authorMay 09.2005 — #reply?
0
@jrthor2authorMay 09.2005 — #Fang,I put your code in an external file and it iw working the same way I described above. Will your code work without using tables and using a div like this:
<i>
</i><div id="programlinks">
<a href="javascript:highlight(this);loadTwo('blank.jsp','profile_welcome.jsf')">About My Programs</a>
<a href="javascript:highlight(this);loadTwo('services.jsf','program1_details.jsf')">Living More</a>
<a href="javascript:highlight(this);loadTwo('services.jsf','program3_details.jsf')">Program 3</a>
</div>
The link does not stay highlighted once I click anywhere else, and in firefox, it does not stay highlighted at all.
reply?
0
@FangMay 09.2005 — #Have you included the css?
reply?
0
@jrthor2authorMay 09.2005 — #Here is what I am using right now and this is how it is working. When my iframe witht he links in it loads, they do not have a highlight. When I click one of the links, it updated my 2 other iframes, and all the links now have a background color. I only want the one we selected to have a highlight color. My code is below.CSS:
<i>
</i>#programlinks a{
padding-left: 4px;
display: block;
width: auto;
text-decoration: none;
border: 1px solid white;
}
#programlinks a:hover{
border: 1px solid black;
background-color: lightyellow;
}
.off {
background:lightyellow;
}
.on {
background:lightyellow;
}
HTML:
<i>
</i><script language="Javascript" type="text/javascript" src="scripts/main.js"></script>
<script language="javascript">
function loadTwo(iframe1URL, iframe2URL) {
parent.ifrmServices.location.href=iframe1URL
parent.ifrmDetails.location.href=iframe2URL
}
</script>
<div id="programlinks">
<a href="javascript:highlight(this);loadTwo('blank.jsp','profile_welcome.jsf')">About My Programs</a>
<a href="javascript:highlight(this);loadTwo('services.jsf','program1_details.jsf')">Living More</a>
<a href="javascript:highlight(this);loadTwo('services.jsf','program3_details.jsf')">Program 3</a>
</div>
MAIN.js:
<i>
</i>function highlight(obj) {
oA=document.getElementsByTagName('a');
for(i=0; i<oA.length; i++) {
oA[i].className='off';
}
obj.className='on';
}
reply?
0
@jrthor2authorMay 09.2005 — #[B]UPDATE[/B]: i got it working by changing the link to use the onclick and changing the href to "#". There are 2 issues left. When I click the link (in IE) it now scrolls the page down to the top of that iframe. Is there a way to not scroll down the page when clicking the link? Viewing this in Opera 8, when I click a link, it does not highlight the link the first time, but if I click it again, then it highlights the link. Any idea how to fix this?Thanks for all the help.
reply?
0
@FangMay 10.2005 — #<div id="programlinks">
<a href="#" class="off" onclick="highlight(this);loadTwo('blank.jsp','profile_welcome.jsf'); return false;">About My Programs</a>
<a href="#" class="off" onclick="highlight(this);loadTwo('services.jsf','program1_details.jsf'); return false;">Living More</a>
<a href="#" class="off" onclick="highlight(this);loadTwo('services.jsf','program3_details.jsf'); return false;">Program 3</a>
</div>
btw both classes have the same color?
reply?
0
@jrthor2authorMay 10.2005 — #I have 2 more questions about this. If I have a link somewhere on my site that may link to a particular program/service, and I want to display this page:
Programs-------------Services
------------Detail------------
How can I have the program/service already highlighted when the page(s) display? The services page only shows services that pertain to the program that was selected, but if they are coming from an external link, they are not clicking on a program in the programs iframe, so I'm not sure what I am asking is possible?? Let me know if this is confusing.
Also, if my services page is set up with tables instead ov using <div>, how do I get the whole table row to change colors when the link is highlighted and stay highlighted when clicked? I have it working the original way you suggested, but that only highlights the link, not the entire row.
Thanks for all your help!!!
reply?
0
@FangMay 10.2005 — #<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>link highlight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function highlight(obj) {
var oA=document.getElementsByTagName('a');
for(var i=0; i<oA.length; i++) {
oA[i].parentNode.parentNode.style.backgroundColor='white';
}
if(typeof(obj)=='string') {
for(var i=0; i<oA.length; i++) {
if(obj==oA[i].firstChild.data) {
obj=oA[i];
break;
}
}
}
obj.parentNode.parentNode.style.backgroundColor='lightyellow';
}
onload=function() {
highlight('About My Programs'); // testing
//parent.highlight('About My Programs'); // in the iframe
}
function loadTwo() {} //for testing
//-->
</script>
<style type="text/css">
<!--
#programlinks a{
padding-left: 4px;
display: block;
width: auto;
text-decoration: none;
border: 1px solid white;
}
#programlinks a:hover{
border: 1px solid black;
background-color: lightyellow;
}
a.off {
background:#9cf;
}
a.on {
background:yellow;
}
td {padding:3px; }
-->
</style>
</head>
<body>
<table id="programlinks" border="1" cellpadding="0" cellspacing="0" summary="">
<tbody>
<tr><td><a href="#" onclick="highlight(this);loadTwo('blank.jsp','profile_welcome.jsf'); return false;">About My Programs</a></td></tr>
<tr><td><a href="#" onclick="highlight(this);loadTwo('services.jsf','program1_details.jsf'); return false;">Living More</a></td></tr>
<tr><td><a href="#" onclick="highlight(this);loadTwo('services.jsf','program3_details.jsf'); return false;">Program 3</a></td></tr>
</tbody>
</table> <br/>
</body>
</html>
This shows you how it works. In your page the onload would be in the iframe page.
profile_welcome.jsf page:
<script type="text/javascript">
<!--
onload=function() {
parent.highlight('About My Programs');
}
//-->
</script>
reply?
0
@jrthor2authorMay 10.2005 — #Well, when I used this code, all my links loade dup with lightyellow backgrounds and don't ever show white??? I changed oA[i].parentNode.parentNode.style.backgroundColor='white'; to oA[i].style.backgroundColor='white'; and I changed obj.parentNode.parentNode.style.backgroundColor='lightyellow'; to obj.style.backgroundColor='lightyellow', and that seems to work. Is that ok to change it to that?Do i have to use the body onload to call the onload function?
This also doesn't highlight the whole table row.
reply?
0
@FangMay 11.2005 — #The body onload is used to highlight the link when the page is loaded. If you want the highlighting at a later time or after a particular event, you can change it.
reply?
0
@jrthor2authorMay 11.2005 — #The problem I have with doing it in the body as an onload event is that our body tag is in an included file, and if I put it in there, then it is loaded with every page, which I don't want.The code you gave does work, I agree. I have everything working in a div, but how would I get the entire row to highlight and stay highlighted if I were using a table to show my links:
<i>
</i><table>
<tr>
<td>
<a href="link">link</a>
</td>
</tr>
</table>
Again, thanks for all your help!!
reply?
0
@FangMay 11.2005 — #The function highlights the row when you click on the link.
reply?
0
@jrthor2authorMay 11.2005 — #If I don't fire the onload event from the body onload, then how do I fire it when the page loads up?
reply?
0
@FangMay 11.2005 — #The same page with extra cells that have their background color highlighted.The onload is in the script at the end of the body. Note: you can not have an onload in the body tag and another fired from a script!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>link highlight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
// All this can be in an externally loaded script file
function highlight(obj) {
var oA=document.getElementsByTagName('a');
for(var i=0; i<oA.length; i++) {
oA[i].parentNode.parentNode.style.backgroundColor='white';
}
if(typeof(obj)=='string') {
for(var i=0; i<oA.length; i++) {
if(obj==oA[i].firstChild.data) {
obj=oA[i];
break;
}
}
}
obj.parentNode.parentNode.style.backgroundColor='lightyellow';
}
function loadTwo() {} //for testing
//-->
</script>
<style type="text/css">
<!--
#programlinks a{
padding-left: 4px;
display: block;
width: auto;
text-decoration: none;
border: 1px solid white;
}
#programlinks a:hover{
border: 1px solid black;
background-color: lightyellow;
}
a.off {
background:#9cf;
}
a.on {
background:yellow;
}
td {padding:3px; }
-->
</style>
</head>
<body>
<table id="programlinks" border="1" cellpadding="0" cellspacing="0" summary="">
<tbody>
<tr><td>another cell</td><td><a href="#" onclick="highlight(this);loadTwo('blank.jsp','profile_welcome.jsf'); return false;">About My Programs</a></td></tr>
<tr><td>another cell</td><td><a href="#" onclick="highlight(this);loadTwo('services.jsf','program1_details.jsf'); return false;">Living More</a></td></tr>
<tr><td>another cell</td><td><a href="#" onclick="highlight(this);loadTwo('services.jsf','program3_details.jsf'); return false;">Program 3</a></td></tr>
</tbody>
</table> <br/>
<script type="text/javascript">
<!--
// onload in the iframe
onload=function() {
highlight('About My Programs');
}
//-->
</script>
</body>
</html>
reply?