Member Avatar for hatrickwah

I'm in the process of working on a page that uses layers and iFrames in conjunction with javascript and <div> layers. The problem I'm hoping to solve with your help is that I implemented

onclick="this.className='stylesheetstyle'"

in the <a href> tag and so therefore when users click the links, the text becomes bold. However since I'm using multiple frames on a page, this makes it look odd when the user back tracks and clicks a different link in the frame. Is it possible using JavaScript to have a users input on click of link unbold the previously clicked link?

In short:

Click link -> link goes bold
move forward....
click another link (different frame) -> go forward
... back up 2 previous frame...
click a different link and go forward.. but this time the bold text changes to highlight the new choice only rather than both the original choice and the new.

Please help me here, eliminating the multi-bold would help my users out immensely.

Thanks for any help.

  • 2 Contributors
  • 7 Replies
  • 139 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for fxm

If each IFRAME is responsible for toggling its own text, the solution is almost trivial. I have posted examples of toggling properties in two other current threads in the last 24 hours.

Note: manipulating classes (instead of toggling properties) can get complicated. For starters, 'className' [as opposed to 'class'] is supported only by certain versions of IE. Code can be written to be compatible with 'all' browsers, of course, but there may be other problems. For example, your code fragment simply overwrites whatever is already assigned to the given element. In the general case that may have too many side-effects; it may instead be necessary to add or remove class(es) (or edit existing rules), possibly even on parent nodes.

If you want all IFRAMEs (and possibly also the parent) to update when a click occurs in any of them, solutions on the client side get far more complex, and iffy. Googling for iframe communicate domain will turn up solutions [hacks :)] of varying degrees of effectiveness. This reference http://msdn.microsoft.com/en-us/architecture/bb735305.aspx is arguably the clearest presentation of the issues involved.

Member Avatar for hatrickwah

I like the sound of trivial. This case, yes, only the individual frames are necessary to change. I'm trying to make it so the user makes a choice, it highlights it, and goes on to the next step. Most cases there are far too many steps, but this is a very custom calculator I'm working on. The user needs to be able to make their choice, but go backwards and still see his specific selection, not all of their selections. I tried looking at the other applications you mentioned, but I could only understand the span code you wrote, is there a way to implement using Javascript and CSS styles? I have over 50 pages I'll have to go back in and edit (mostly asp driven, so short work).

Member Avatar for hatrickwah

An update, using your samples, I dissected the code from http://www.daniweb.com/forums/thread295335.html and came up with a solution, but maybe you can help me take it a step further.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../scripts/blpcalc.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
function highlightIt(that){
 
    var cAs = document.getElementById('term').getElementsByTagName('a');
	
    for (j = cAs.length, i = 0; i < j; i++) {
 
        if (cAs[i] === that) {
            cAs[i].className = 'calclinkClick'
        } else {
            cAs[i].className = 'calclink'
        }
    }
}
</script>

<body onload="highlightIt()">
<div align="center">
<table width="215" height=80" border="0">
    <tr>
    	<td bgcolor="#CCCCCC" valign="top">
        <div id="term">
        <a onClick="highlightIt(this);" href="admin/00-user.asp" target="buffer3">Add/Edit/Remove Users</a><br />
        <a onClick="highlightIt(this);" href="admin/00-origin.asp" target="buffer3">Wire Rope Cost</a><br />
        <a onClick="highlightIt(this);" href="admin/01-dia.asp" target="buffer3">Wire Rope Fittings Costs</a><br />
        <a onClick="highlightIt(this);" href="admin/01-dia-chain.asp" target="buffer3">Chain Fitting Costs</a><br />
        <a onClick="highlightIt(this);" href="admin/update-flat.asp" target="buffer">Synthetic Webbing Cost</a>
        </div>
        <br />
        <br />
        <br />
        <br />
        </td>
    </tr>
</table>
</div>
</body>
</html>

This does what I want for one frame, the question is, is it possible to have each page have a different DIV Id other than Term and have the javascript identify that and move on. The reason I ask is, my iFrames are loaded into the page in such that they become one with the page, and therefore they inherit the scripts from the parent page. This allows the frames to grow with my content, or shrink with less content. Thanks for all the help so far.

Member Avatar for fxm

user needs to be able to make their choice, but go backwards and still see his specific selection, not all of their selections.

The function here http://www.daniweb.com/forums/post1272081.html#post1272081 is the one that demonstrates how a single function can highlight one element onclick= while at the same time it unhighlights [or otherwise changes the appearance of] 'related' elements.

Member Avatar for hatrickwah

Forget I asked the last question. Figured it out while the dog was wasting my time.

Javascript now looks like such:

function highlightIt(group,that){
 
    var cAs = document.getElementById(group).getElementsByTagName('a');
	
    for (j = cAs.length, i = 0; i < j; i++) {
 
        if (cAs[i] === that) {
            cAs[i].className = 'calclinkClick'
        } else {
            cAs[i].className = 'calclink'
        }
    }
}

And then I went and changed the following in the HTML

<body onload="highlightIt('term')">
<div id="term">
        <a onClick="highlightIt('term',this);" href="admin/00-user.asp" target="buffer3">Add/Edit/Remove Users</a><br />
        <a onClick="highlightIt('term',this);" href="admin/00-origin.asp" target="buffer3">Wire Rope Cost</a><br />
        <a onClick="highlightIt('term',this);" href="admin/01-dia.asp" target="buffer3">Wire Rope Fittings Costs</a><br />
        <a onClick="highlightIt('term',this);" href="admin/01-dia-chain.asp" target="buffer3">Chain Fitting Costs</a><br />
        <a onClick="highlightIt('term',this);" href="admin/update-flat.asp" target="buffer">Synthetic Webbing Cost</a>
        </div>
Member Avatar for hatrickwah

The function here http://www.daniweb.com/forums/post1272081.html#post1272081 is the one that demonstrates how a single function can highlight one element onclick= while at the same time it unhighlights [or otherwise changes the appearance of] 'related' elements.

That was the code I used. Thanks for all your help.

Member Avatar for fxm

possible to have each page have a different DIV Id

Just change these two lines of code

var cAs = document.getElementById(divID).getElementsByTagName('a');
<body onload="divID='anyname';highlightIt()">

The first line is constant; the second may be different on each page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.