www.webdeveloper.com
Results 1 to 9 of 9

Thread: How Can I Highlight A Specific Area

  1. #1
    Join Date
    Mar 2014
    Posts
    47

    How Can I Highlight A Specific Area

    Quick question. I will try explain what I want to do and what I have in place so far in as much detail as I can.

    Ok I have an html page with a series of dropdowns and once one is selected the information is pulled from the javascript file which I have already added the values to which are then displayed in 6 boxes to the right of the dropdown.

    Now my question is how can I either in the javascript file or the html file highlight a particular box if it is greater than a certain value?

    Lets say for example I have a value in the javascript file that is 14 and I want highlight this, is there a line of code that I can add myself that will highlight the text box from the html file that houses this value?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Question

    Can you provide a brief example of the HTML code you are using? Any CSS info?

    Have you tried any JS coding yourself? Results?


  3. #3
    Join Date
    Jun 2014
    Posts
    27
    As JMRKER said try to post some code here to let us know what you worked on and how we can change to help what you want to achieve.

  4. #4
    Join Date
    Mar 2014
    Posts
    47
    Ok here is a small example from the first output for the html file.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Tracks</title>
       <script src="tracks.js"></script>
    </head>
    <body>
    <table>
    <thead>
       <tr>
    	<th colspan="3"></th>
    	<th>1</th>
    	<th>2</th>
    	<th>3</th>
    	<th>A</th>
    	<th>B</th>
    	<th>C</th>
    	<th colspan="2"></th>
       </tr>
    </thead>
    <tbody>
       <tr><td colspan="11"><hr /></td></tr>
       <tr>
    	<td style="text-align:right;">Trap 1:</td>
    	<td><select id="track" name="track" onchange="track(this,tr11,tr12,tr13,tr14,tr15,tr16,tr21,tr22,tr23,tr24,tr25,tr26,trp)">
    		<option value="">Choose one</option>
    		<option value="P A Tompsett">P A Tompsett</option>
    			    </select></td>
    	<td style="text-align:right;">1:</td>
    	<td><input type="text" size="3" readonly id="tr11" class="FTw1" /></td>
    	<td><input type="text" size="3" readonly id="tr12" class="FBw1" /></td>
    	<td><input type="text" size="3" readonly id="tr13" class="FTp1" /></td>
    	<td><input type="text" size="3" readonly id="tr14" class="FBp1" /></td>
    	<td><input type="text" size="3" readonly id="tr15" class="FTt1" /></td>
    	<td><input type="text" size="3" readonly id="tr16" class="FBt1" /></td>
    	<td style="text-align:right;">%:</td>
    	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
       </tr>
    Ok so basically I know this creates a dropdown box with an option called P A Tompsett.

    It then calls the javascript file where I have values loaded in order to fill the text boxes in the html.

    Here is the javascript.

    Code:
    function track(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case 'P A Tompsett':
    	oneone.value='0';
    	onetwo.value='21';
    	onethree.value='14';
    	onefour.value='5';
    	onefive.value='26';
    	onesix.value='19';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
         break;
       }
       total();
    }
    Ok so quick explanation is that once P A Tompsett is selected from the drop down the values in the boxes are filled as 0, 21, 14, 5, 26, 19

    Ok now that this is out of the way I would like to be able to highlight the text boxes that show the numbers 21,14,26,19

    How do I go about this?

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,405
    It is not clear what your objective is or why your data that appears to be static needs to populate an element that can be completed in HTML.

    What is it that you are trying to do?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb

    This fixes you initial errors (you can put in more if you want, just check the error console when you do )

    Note: Having only one drop-down selection limits the number of ways the current script can be tested.

    Since the text boxes to be highlighted (not currently defined as far as I can see) have different numbers from the filled boxes,
    how do you determine which text box (not currently defined) are to be selected?


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Tracks</title>
    </head>
    <body>
    <table>
    <thead>
       <tr>
    	<th colspan="3"></th>
    	<th>1</th>
    	<th>2</th>
    	<th>3</th>
    	<th>A</th>
    	<th>B</th>
    	<th>C</th>
    	<th colspan="2"></th>
       </tr>
    </thead>
    <tbody>
       <tr><td colspan="11"><hr /></td></tr>
       <tr>
    	<td style="text-align:right;">Trap 1:</td>
    	<td><select id="track" name="track" onchange="track(this,tr11,tr12,tr13,tr14,tr15,tr16,trp)">
    		<option value="">Choose one</option>
    		<option value="P A Tompsett">P A Tompsett</option>
    	    </select>
            </td>
    	<td style="text-align:right;">1:</td>
    	<td><input type="text" size="3" readonly id="tr11" class="FTw1" /></td>
    	<td><input type="text" size="3" readonly id="tr12" class="FBw1" /></td>
    	<td><input type="text" size="3" readonly id="tr13" class="FTp1" /></td>
    	<td><input type="text" size="3" readonly id="tr14" class="FBp1" /></td>
    	<td><input type="text" size="3" readonly id="tr15" class="FTt1" /></td>
    	<td><input type="text" size="3" readonly id="tr16" class="FBt1" /></td>
    	<td style="text-align:right;">%:</td>
    	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
       </tr>
    </tbody>
    
    <script type="text/javascript">
    function track(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
       switch(el.value){
         case 'P A Tompsett':
    	oneone.value='0';
    	onetwo.value='21';
    	onethree.value='14';
    	onefour.value='5';
    	onefive.value='26';
    	onesix.value='19';
         break;
         default:
    	oneone.value='';
    	onetwo.value='';
    	onethree.value='';
    	onefour.value='';
    	onefive.value='';
    	onesix.value='';
         break;
       }
    //   total();  // not defined yet!
    }
    function total() { alert('Not defined yet!'); }
    </script>
    
    </body>
    </html


    Note: There are better ways to pass parameters in your track function than listing un-available elements.

    Also, do you have your CSS classes defined to see what the actual format looks like?
    Last edited by JMRKER; 06-13-2014 at 03:16 PM.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb

    As with '\\.\', I'm confused about the usage, but here is an alternative to consider...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Tracks</title>
    <style type="text/css">
     .trk { width:3em; }
    </style>
    
    </head>
    <body>
    <table>
    <thead>
       <tr>
    	<th colspan="3"></th>
    	<th>1</th>	<th>2</th>	<th>3</th>	<th>A</th>
    	<th>B</th>	<th>C</th>	<th colspan="2"></th>
       </tr>
    </thead>
    <tbody>
       <tr><td colspan="11"><hr /></td></tr>
       <tr>
    	<td style="text-align:right;">Trap 1:</td>
    	<td><select id="track" name="track" onchange="track(this.value)">
    		<option value="Choose one:,,,,,,">Choose one</option>
    		<option value="P A Tompsett,0,21,14,5,26,19">P A Tompsett</option>
    		<option value="J Q Smith,19,26,5,14,21,0">J Q Smith</option>
    		<option value="I M Confused,A,B,C,D,E,F">I M Confused</option>
    	    </select>
            </td>
    	<td style="text-align:right;">1:</td>
    	<td><input type="text" readonly id="tr11" class="FTw1 trk" /></td>
    	<td><input type="text" readonly id="tr12" class="FBw1 trk" /></td>
    	<td><input type="text" readonly id="tr13" class="FTp1 trk" /></td>
    	<td><input type="text" readonly id="tr14" class="FBp1 trk" /></td>
    	<td><input type="text" readonly id="tr15" class="FTt1 trk" /></td>
    	<td><input type="text" readonly id="tr16" class="FBt1 trk" /></td>
    	<td style="text-align:right;">%:</td>
    	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
       </tr>
    </tbody>
    
    <script type="text/javascript">
    function track(info){
      var arr = info.split(',');
      var trks = document.getElementsByClassName('trk');
      for (var i=0; i<trks.length; i++) {
        trks[i].value = arr[i+1];
        if (Number(arr[i+1]) >= 14) { trks[i].style.backgroundColor = '#ff00ff'; }
                               else { trks[i].style.backgroundColor = '#ffffff'; }
      }
    //   total();  // not defined yet!
    }
    function total() { alert('Not defined yet!'); }
    </script>
    
    </body>
    </html
    Last edited by JMRKER; 06-13-2014 at 03:42 PM.

  8. #8
    Join Date
    Mar 2014
    Posts
    47
    Hey guys, I have got the script working now everything is great, I just need to know how to highlight those boxes specified

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410
    Quote Originally Posted by trifolium View Post
    Hey guys, I have got the script working now everything is great, I just need to know how to highlight those boxes specified
    Well that's great but usually forum members show how they solved their problems when they make changes or have their problem resolved.
    What did you do and did you notice the highlighting in my previous post?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles