HTML - Text Maniuplation

sanders720 · Sep 23, 2004

I have some symbols in an html file, which upon clicking moves down on the page to a text description.

When the item is selected, I would like the particular text description to convert to bold. The reason is because it is in a list, and needs to stand out accordingly. When I click off the symbols, the bold feature should go away. If I click on a different symbol, the bold feature should move to the retaled text description,

Any direction is much appreciated.

SYMBOLS:

<a href="ManualP4.htm#voltagespec"><img src="defaultgraphics/voltage208V.jpg" alt="Voltage Rating 208V" width="75" height="50"></a>
<a href="ManualP4.htm#elcshk-moreonepower"><img src="defaultgraphics/elcshk-moreonepower.jpg" alt="More than One Power Supply Required" width="75", height="50"></a>

TEXT DESCRIPTION:

<a name = "voltagespec" id = "voltagespec"> </a>
Voltage specification to ensure that only compatible voltage components and accessories are used.
<a name = "elcshk-moreonepower" id = "elcshk-moreonepower"> </a>
Multiple power sources are feeding a particular control panel. The scope of power sources should be understood prior to performing any related system changes or electrical work.

cLFlaVA · Sep 23, 2004

Not entirely sure what you mean, but try the following:

In your "symbol" [tt]<a>[/tt] tag, do this:

Code:

<a href="ManualP4.htm#voltagespec" [b]onclick="MakeBold('text_desc1', 'text_desc2');"[/b]><img src="defaultgraphics/voltage208V.jpg" alt="Voltage Rating 208V" width="75" height="50"></a>
<a href="ManualP4.htm#elcshk-moreonepower" [b]onclick="MakeBold('text_desc2', 'text_desc1');"[/b]><img src="defaultgraphics/elcshk-moreonepower.jpg" alt="More than One Power Supply Required" width="75", height="50"></a>

Give your [tt][/tt] tags ids that match the ids above:

Code:

<a name = "voltagespec" id = "voltagespec"> </a>
    <p [b]id="text_desc1"[/b]>Voltage specification to ensure that only compatible voltage components and accessories are used.</p>
    <a name = "elcshk-moreonepower" id = "elcshk-moreonepower"> </a>
    <p [b]id="text_desc2"[/b]>Multiple power sources are feeding a particular control panel.  The scope of power sources should be understood prior to performing any related system changes or electrical work.</p>

And finally, between your [tt]<head>[/tt] tags, place this code:

Code:

<script language="javascript">
<!--
function MakeBold(on, off) {
    on.style.fontWeight = 'bold';
    off.style.fontWeight = 'normal';
}
-->
</script>

*cLFlaVA
----------------------------
Breaking the habit...

sanders720 · Oct 1, 2004

After looking at this, I'm a little unclear on what it is doing. How do the onclick statements in the <a href section relate to the script. I can see they both have the name MakeBold, but I'm not understanding the text_desc1, text_desc2 items, which are text_desc2, text_desc1 in the next example.

There are 15 or so images, so should I have 15 id's in the <a name section? Basically, after pointing to the image, the HTML document pages down to the item relating to the item. It is in a list, and I want to bold that item in the list so it stands out.

Thanks for the help - and I think a little more direction will do it.

cLFlaVA · Oct 3, 2004

The onclick event of the anchor tag calls a function that I wrote above, named MakeBold. It also passes the function two parameters: the id of the paragraph to make bold, and the id of the paragraph to make non-bold.

Since you have 15 images, we should change the function slightly. If your paragraph ids are text_desc1 through text_desc15, the following function should do the trick:

Code:

<script language="javascript">
<!--
function MakeBold(on) {
    for (var i = 1; i < 16; i++) {
        document.getElementById('text_desc' + i).style.fontWeight = 'normal';
    }
    on.style.fontWeight = 'bold';
}
-->
</script>

You would then call the function like this:

Code:

<a ... onclick="MakeBold('text_desc1')">

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

sanders720 · Oct 4, 2004

It still woorks, but does not boldface the text...Any thoughts, and thanks again for the help.

<script language = "javascript">

</script>
</head>

---

<a href="ManualP4.htm#highvoltagearea" onclick="Makebold('text_desc1')"><img src="defaultgraphics/highvoltagearea.jpg" alt="High Voltage Area" width="75" height="50"></a>
<a href="ManualP4.htm#groundcoonnection" onclick="Makebold('text_desc2')"><img src="defaultgraphics/groundconnection.jpg" alt="Ground Connection" width="75" height="50"></a>
<a href="ManualP4.htm#voltagespec" onclick="Makebold('text_desc3')"><img src="defaultgraphics/voltage208V.jpg" alt="Voltage Rating 208V" width="75" height="50"></a>
<a href="ManualP4.htm#elcshk-moreonepower" onclick="Makebold('text_desc4')"><img src="defaultgraphics/elcshk-moreonepower.jpg" alt="More than One Power Supply Required" width="75", height="50"></a>
<a href="ManualP4.htm#pinchpoint" onclick="Makebold('text_desc5')"><img src="defaultgraphics/pinchpoint.jpg" alt="Pinch Point" width="75" height="50"></a>
<a href="ManualP4.htm#needlestick" onclick="Makebold('text_desc6')"><img src="defaultgraphics/needlestick.jpg" alt="Needle Stick" width="75" height="50"></a>
<a href="ManualP4.htm#surfacehot" onclick="Makebold('text_desc7')"><img src="defaultgraphics/surfacehot.jpg" alt="Surface Hot" width="75" height="50"></a>
 
<a href="ManualP4.htm#camcrush" onclick="Makebold('text_desc8')"><img src="defaultgraphics/camcrush.gif" alt="CAM Motion Crushing" width="63" height="54"></a>
<a href="ManualP4.htm#dialcrush" onclick="Makebold('text_desc9')"><img src="defaultgraphics/dialcrush.gif" alt="Dila Crushing" width="63" height="54"></a>
<a href="ManualP4.htm#needlepuncture" onclick="Makebold('text_desc10')"><img src="defaultgraphics/needlepuncture.gif" alt="Needle Puncture" width="63" height="54"></a>
<a href="ManualP4.htm#driveentangle" onclick="Makebold('text_desc11')"><img src="defaultgraphics/driveentangle.gif" alt="Drive Entanglement" width="63" height="54"></a>
<a href="ManualP4.htm#rackpinch" onclick="Makebold('text_desc12')"><img src="defaultgraphics/rackpinch.gif" alt="Rack Pinch" width="63" height="54"></a>
<a href="ManualP4.htm#overheadcrush" onclick="Makebold('text_desc13')"><img src="defaultgraphics/overheadcrush.gif" alt="Overhead Crushing" width="63" height="54"></a>
 
<a href="ManualP4.htm#safetycaution" onclick="Makebold('text_desc14')"><img src="defaultgraphics/safetycaution.jpg" alt="General Safety Precautions" width="250"></a>
<a href="ManualP4.htm#elcshk-moreoneenergy" onclick="Makebold('text_desc15')"><img src="defaultgraphics/elcshk-moreoneenergy.jpg" alt="Unit Fed by More than One Source" width="225"></a>
<a href="ManualP4.htm#elcshk-discincomplete" onclick="Makebold('text_desc16')"><img src="defaultgraphics/elcshk-discincomplete.jpg" alt="Disconnect does not Remove all Power from Panel" width="175"></a>
 
<a href="ManualP4.htm#highvoltagedanger" onclick="Makebold('text_desc17')"><img src="defaultgraphics/highvoltagedanger.jpg" alt="High Voltage Danger" width="200"></a>
<a href="ManualP4.htm#remotecontroldanger" onclick="Makebold('text_desc18')"><img src="defaultgraphics/remotecontroldanger.jpg" alt="Remote Control Startup Danger" width="175"></a>
---

<a name = "highvoltagearea" id = "highvoltagearea"> </a>
The area is high voltage. In addition to general user precautions, chemical and/or explosive precaution should be taken.
<a name = "groundconnection" id = "groundconnection"> </a>
A system ground connection is denoted.
<a name = "voltagespec" id = "voltagespec"> </a>
Voltage specification to ensure that only compatible voltage components and accessories are used.
<a name = "elcshk-moreonepower" id = "elcshk-moreonepower"> </a>
Multiple power sources are feeding a particular control panel. The scope of power sources should be understood prior to performing any related system changes or electrical work.
<a name = "pinchpoint" id = "pinchpoint"> </a>
System or product pinch point can cause minor injury.
<a name = "needlestick" id = "needlestick"> </a>
An area of the machine where needles can stick is noted. Note that if a needle sticks, the needle must be properly disposed of to avoid potential blood born contamination.
<a name = "surfacehot" id = "surfacehot"> </a>
The surface is hot, and should not be touched.
<a name = "camcrush" id = "camcrush"> </a>
Potential for crushing around a CAM operation.
<a name = "dialcrush" id = "dialcrush"> </a>
Potential for pinching or crushing at a dial intersection point.
<a name = "needlepuncture" id = "needlepuncture"> </a>
Potential for needle to puncture (more major than needle stick). Note that id a needle punctures, the needle must be properly disposed of to avoid potential blood born contamination.
<a name = "driveentangle" id = "driveentangle"> </a>
Potential for drive entanglement (usually under the equipment).
<a name = "rackpinch" id = "rackpinch"> </a>
Potential rack pinch point.
<a name = "overheadcrush" id = "overheadcrush"> </a>
Potential for overhead crushing.
<a name = "safetycaution" id = "safetycaution"> </a>
General safety precautions are affixed variously on the equipment, applicable to all areas of the equipment.
<a name = "elcshk-moreoneenergy" id = "elcshk-moreoneenergy"> </a>
Voltage specification to ensure that only compatible voltage components and accessories are used.
<a name = "elcshk-discincomplete" id = "elcshk-discincomplete"> </a>
Disconnect does not remove all power from the control panel.
<a name = "highvoltagedanger" id = "highvoltagedanger"> </a>
Danger of high voltage usually mounted at the control panel. In addition to general user precautions, chemical and/or explosive precaution should be taken.
<a name = "remotecontroldanger" id = "remotecontroldanger"> </a>
Danger - system components may start moving without notice, due to remote control.

chessbot · Oct 4, 2004

Change the function:

Code:

function MakeBold (on) {
    for (var i = 1; i < 19; i++) {
        document.getElementById('text_desc' + 1) .style.fontWeight = 'normal';
    }
    document.getElementById(on).style.fontWeight = 'bold';        
}

The function is passed a string, not an object.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

sanders720 · Oct 4, 2004

This does nothing either. Do I need to define .getElementById somewhere?

Thanks.

chessbot · Oct 4, 2004

getElementById is a built-in method of document.

Use this code (for debugging purposes):

Code:

function MakeBold (on) {
    alert("On is: "+on);
    for (var i = 1; i < 19; i++) {
        document.getElementById('text_desc' + 1) .style.fontWeight = 'normal';
    }
    document.getElementById(on).style.fontWeight = 'bold';        
}

Tell us what on is. Is it an "[object]"? text?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

sanders720 · Oct 5, 2004

Something must not be installed. Adding the alart does nothing. Is there something else I need to do to tell my HTML document to use Javascript?

sanders720 · Oct 5, 2004

I added the top line to my code. Is there something else that needs to be setup on my system?

Thanks for all the help thus far.

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="2col_leftNav.css" type="text/css">
<style type="text/css">

</style>
<script language = "javascript">

</script>
</head>

<body>
<div id="masthead">
<img src="defaultgraphics/Logo - Sq721 BdEx BT.gif" alt="Metro Machine & Engineering Corp." width="300">
<h1 id="siteName">Operation and Maintenance Manual</h1>
</div>

<div id="content">
<h2 id="pageName">99999 - Metro Job Name / Description</h2>
<div class="feature">
<a name = "Safeguards" id = "Safeguards"> </a>
<h3>6. Safeguards </h3>

Your safety and the safery of others is extremely important. The following safety alert symbols alert you to hazards that can injure or kill anyone coming into contact with the equipment. 

<img src="defaultgraphics/caution.jpg" alt="Caution" width="250">
You can be injured if you don't follow instructions.

 

<img src="defaultgraphics/warning.jpg" alt="Warning" width="250">
You can be seriously injured or killed if you don't follow instructions. 
 

<img src="defaultgraphics/danger.jpg" alt="Danger" width="250">
You will be seriously injured or killed if you don't follow instructions. 
 

Additionally, there are other warning labels posted on the machine as specified below to provide additional warnings not covered in this manual. Click on any label to be directed to its description.
<a href="ManualP4.htm#highvoltagearea" onclick="Makebold('text_desc1')"><img src="defaultgraphics/highvoltagearea.jpg" alt="High Voltage Area" width="75" height="50"></a>
<a href="ManualP4.htm#groundcoonnection" onclick="Makebold('text_desc2')"><img src="defaultgraphics/groundconnection.jpg" alt="Ground Connection" width="75" height="50"></a>
<a href="ManualP4.htm#voltagespec" onclick="Makebold('text_desc3')"><img src="defaultgraphics/voltage208V.jpg" alt="Voltage Rating 208V" width="75" height="50"></a>
<a href="ManualP4.htm#elcshk-moreonepower" onclick="Makebold('text_desc4')"><img src="defaultgraphics/elcshk-moreonepower.jpg" alt="More than One Power Supply Required" width="75", height="50"></a>
<a href="ManualP4.htm#pinchpoint" onclick="Makebold('text_desc5')"><img src="defaultgraphics/pinchpoint.jpg" alt="Pinch Point" width="75" height="50"></a>
<a href="ManualP4.htm#needlestick" onclick="Makebold('text_desc6')"><img src="defaultgraphics/needlestick.jpg" alt="Needle Stick" width="75" height="50"></a>
<a href="ManualP4.htm#surfacehot" onclick="Makebold('text_desc7')"><img src="defaultgraphics/surfacehot.jpg" alt="Surface Hot" width="75" height="50"></a>
 
<a href="ManualP4.htm#camcrush" onclick="Makebold('text_desc8')"><img src="defaultgraphics/camcrush.gif" alt="CAM Motion Crushing" width="63" height="54"></a>
<a href="ManualP4.htm#dialcrush" onclick="Makebold('text_desc9')"><img src="defaultgraphics/dialcrush.gif" alt="Dila Crushing" width="63" height="54"></a>
<a href="ManualP4.htm#needlepuncture" onclick="Makebold('text_desc10')"><img src="defaultgraphics/needlepuncture.gif" alt="Needle Puncture" width="63" height="54"></a>
<a href="ManualP4.htm#driveentangle" onclick="Makebold('text_desc11')"><img src="defaultgraphics/driveentangle.gif" alt="Drive Entanglement" width="63" height="54"></a>
<a href="ManualP4.htm#rackpinch" onclick="Makebold('text_desc12')"><img src="defaultgraphics/rackpinch.gif" alt="Rack Pinch" width="63" height="54"></a>
<a href="ManualP4.htm#overheadcrush" onclick="Makebold('text_desc13')"><img src="defaultgraphics/overheadcrush.gif" alt="Overhead Crushing" width="63" height="54"></a>
 
<a href="ManualP4.htm#safetycaution" onclick="Makebold('text_desc14')"><img src="defaultgraphics/safetycaution.jpg" alt="General Safety Precautions" width="250"></a>
<a href="ManualP4.htm#elcshk-moreoneenergy" onclick="Makebold('text_desc15')"><img src="defaultgraphics/elcshk-moreoneenergy.jpg" alt="Unit Fed by More than One Source" width="225"></a>
<a href="ManualP4.htm#elcshk-discincomplete" onclick="Makebold('text_desc16')"><img src="defaultgraphics/elcshk-discincomplete.jpg" alt="Disconnect does not Remove all Power from Panel" width="175"></a>
 
<a href="ManualP4.htm#highvoltagedanger" onclick="Makebold('text_desc17')"><img src="defaultgraphics/highvoltagedanger.jpg" alt="High Voltage Danger" width="200"></a>
<a href="ManualP4.htm#remotecontroldanger" onclick="Makebold('text_desc18')"><img src="defaultgraphics/remotecontroldanger.jpg" alt="Remote Control Startup Danger" width="175"></a>


</div>
<div class="feature">
 
<a name = "highvoltagearea" id = "highvoltagearea"> </a>
The area is high voltage. In addition to general user precautions, chemical and/or explosive precaution should be taken.
<a name = "groundconnection" id = "groundconnection"> </a>
A system ground connection is denoted.
<a name = "voltagespec" id = "voltagespec"> </a>
Voltage specification to ensure that only compatible voltage components and accessories are used.
<a name = "elcshk-moreonepower" id = "elcshk-moreonepower"> </a>
Multiple power sources are feeding a particular control panel. The scope of power sources should be understood prior to performing any related system changes or electrical work.
<a name = "pinchpoint" id = "pinchpoint"> </a>
System or product pinch point can cause minor injury.
<a name = "needlestick" id = "needlestick"> </a>
An area of the machine where needles can stick is noted. Note that if a needle sticks, the needle must be properly disposed of to avoid potential blood born contamination.
<a name = "surfacehot" id = "surfacehot"> </a>
The surface is hot, and should not be touched.
<a name = "camcrush" id = "camcrush"> </a>
Potential for crushing around a CAM operation.
<a name = "dialcrush" id = "dialcrush"> </a>
Potential for pinching or crushing at a dial intersection point.
<a name = "needlepuncture" id = "needlepuncture"> </a>
Potential for needle to puncture (more major than needle stick). Note that id a needle punctures, the needle must be properly disposed of to avoid potential blood born contamination.
<a name = "driveentangle" id = "driveentangle"> </a>
Potential for drive entanglement (usually under the equipment).
<a name = "rackpinch" id = "rackpinch"> </a>
Potential rack pinch point.
<a name = "overheadcrush" id = "overheadcrush"> </a>
Potential for overhead crushing.
<a name = "safetycaution" id = "safetycaution"> </a>
General safety precautions are affixed variously on the equipment, applicable to all areas of the equipment.
<a name = "elcshk-moreoneenergy" id = "elcshk-moreoneenergy"> </a>
Voltage specification to ensure that only compatible voltage components and accessories are used.
<a name = "elcshk-discincomplete" id = "elcshk-discincomplete"> </a>
Disconnect does not remove all power from the control panel.
<a name = "highvoltagedanger" id = "highvoltagedanger"> </a>
Danger of high voltage usually mounted at the control panel. In addition to general user precautions, chemical and/or explosive precaution should be taken.
<a name = "remotecontroldanger" id = "remotecontroldanger"> </a>
Danger - system components may start moving without notice, due to remote control.
</div>
</div>

<div id="navBar">
<div id="sectionLinks">
<ul>
<li><a href="index.html#TOC">Table of Contents</a></li>
<li><a href="ManualP1.htm#CompanyPro">1. Company Profile</a></li>
<li><a href="ManualP1.htm#Introduction">2. Introduction</a></li>
<li><a href="ManualP1.htm#QAPolicy">3. Manufacturing Quality Assurance Policy</a></li>
<li><a href="ManualP2.htm#SystemDesc">4. System Description</a></li>
<li><a href="ManualP3.htm#Suppliers">5. List of Overall System Suppliers</a></li>
<li><a href="ManualP4.htm#Safeguards">6. Safeguards</a></li>
<li><a href="ManualP5.htm#Installation">7. Installation and Precheck Procedures</a></li>
<li><a href="ManualP5.htm#Air">7.1. Air</a></li>
<li><a href="ManualP5.htm#Storage">7.2. Storage and Uncrating</a></li>
<li><a href="ManualP6.htm#Storage">7.3. Machine Breakdown</a></li>
<li><a href="ManualP7.htm#Startup">8. Startup and Operation Procedures</a></li>
<li><a href="ManualP7.htm#OnOff">8.1. Emergency on/off Switches</a></li>
<li><a href="ManualP7.htm#PreStartup">8.2. Pre-Startup Checklist</a></li>
<li><a href="ManualP7.htm#SeqOp">8.3. Sequence of Operation</a></li>
<li><a href="ManualP8.htm#Autorun">8.4. Automatic Running</a></li>
<li><a href="ManualP8.htm#Shutdown">8.5. Shutdown</a></li>
<li><a href="ManualP9.htm#Adjustment">9. Adjustment</a></li>
<li><a href="ManualP9.htm#Adjustment1">9.1. Adjustment Area 1</a></li>
<li><a href="ManualP10.htm#Maintenance">10. Maintenance</a></li>
<li><a href="ManualP10.htm#Lockout">10.1. Lockout and Tagout Locations</a></li>
<li><a href="ManualP10.htm#Lubricant">10.2. Recommended Lubricants</a></li>
<li><a href="ManualP10.htm#CompLub">10.3. Component Lubrication</a></li>
<li><a href="ManualP11.htm#DailyCheck">10.4. Daily Checks</a></li>
<li><a href="ManualP11.htm#500Hours">10.5. 500 Hours</a></li>
<li><a href="ManualP11.htm#5000Hours">10.6. 5,000 Hours</a></li>
<li><a href="ManualP12.htm#Spares">11. Spare Parts</a></li>
<li><a href="ManualP13.htm#Removal">12. Removal and Replacement of Parts</a></li>
<li><a href="ManualP14.htm#Troubleshoot">13. Troubleshooting</a></li>
<li><a href="ManualP15.htm#ControlsRef">14. Controls Reference</a></li>
<li><a href="ManualP15.htm#AlarmCodes">14.1. Alarm Code Decsriptions</a></li>
<li><a href="ManualP15.htm#SensorDesc">14.2. Sensor Descriptions</a></li>
<li><a href="ManualP15.htm#MotorDesc">14.3. Motor Descriptions</a></li>
<li><a href="ManualP15.htm#AirDesc">14.4. Air Regulator Descriptions</a></li>
<li><a href="ManualP15.htm#VacDesc">14.5. Vacuum Regulator Descriptions</a></li>
<li><a href="ManualP15.htm#ElecDesc">14.6. Electrical Connection Descriptions</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Quick Reference</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>

<div id="siteInfo">
<a href="

http://www.metromachine.com/">About

cLFlaVA · Oct 5, 2004

The reason you're having a problem is that JavaScript is Case Sensitive. You're calling a function "Makebold" which doesn't exist. The function is, in fact, [tt]Make[red]B[/red]old[/tt]. Change your function calls to the proper case and your problem will disappear.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

chessbot · Oct 5, 2004

Also, you do not need the top line. I believe that it is an ASP command and will not be evaluated by the HTML.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

sanders720 · Oct 6, 2004

That does it! Thanks a lot for all the help. This should also get me started in understanding Javascript a little.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

HTML - Text Maniuplation

sanders720

Programmer

cLFlaVA

Programmer

sanders720

Programmer

cLFlaVA

Programmer

sanders720

Programmer

chessbot

Programmer

sanders720

Programmer

chessbot

Programmer

sanders720

Programmer

sanders720

Programmer

cLFlaVA

Programmer

chessbot

Programmer

sanders720

Programmer

Similar threads

Part and Inventory Search

Sponsor