Solved

How to highlight selected line with checkbox?

Posted on 2011-03-08
35
462 Views
Last Modified: 2012-05-11
Hi,
I have a greasemonkey script and I am modifying a web page. I managed to put checkboxes on the page for each pattern that matches.

Now, I want to highlight the entire line when the checkbox is selected.

Can you please let me know how I can make it?

Thanks,

0
Comment
Question by:Tolgar
  • 21
  • 14
35 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 35075065
We may start with your gm script and some HTML page
0
 

Author Comment

by:Tolgar
ID: 35075310
I attached the GM script to the attachment. You can focus on the do_checkbox function. This is where I create the checkboxes. Lines 42 and 51 are the most importantpart in my question.

Thanks,
myScript.user.txt
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35075715
Once you create all the checkboxes you may run something like this :


var tables = document.getElementsByTagName("table");
		for(var i=0;i<tables.length;i++) {
			var inputs = tables[i].getElementsByTagName("input")
			for(var j=0;j<inputs.length;j++) {
				if( inputs[j].type=="checkbox" && inputs[j].checked ) {
					var obj = inputs[j].parentNode;
					while( obj.tagName.toLowerCase() != "tr" ) {
						obj = obj.parentNode;
					}
					obj.style.backgroundColor = "red";
				}
			}
		}

Open in new window

0
 

Author Comment

by:Tolgar
ID: 35077613
Thank  for your quick response.

I embedded your code into my script. It highlights the background of the selected line only if I refresh the page after the checking the box. Is there a way to trigger it without refreshing the page?

Thanks,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35078248
You use it like this
 window.addEventListener("load", function() { do_checkbox();Now_Set_Rows_BackGround(); }, false);

Open in new window

?
0
 

Author Comment

by:Tolgar
ID: 35078362
Right but checkboxes are created when the page is loaded. However, highlighting should be done without reloading the page. Is there another eventListener that can trigger highlighting without reloading the page?

Thanks,
0
 

Author Comment

by:Tolgar
ID: 35078374
Btw, I already tried click and onclick...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35078406
> do_checkbox();Now_Set_Rows_BackGround();

and it don't work ??? Once your textboxes are in the page it should work. Try a timer too for testing purpose :  do_checkbox();setTimeout("Now_Set_Rows_BackGround()", 3000);
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35078438
Do you have a simple page to test the script ?
0
 

Author Comment

by:Tolgar
ID: 35078468
I put the following line and it does not work:

window.addEventListener("load", function() { do_checkbox(); setTimeout("do_highlight()", 3000) }, false);

Open in new window



Waiting for your reply.

Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35078507
I want to a page or a live link to test your script
0
 

Author Comment

by:Tolgar
ID: 35078512
This error would be useful from the error console in FireFox:

Error: do_highlight is not defined


0
 

Author Comment

by:Tolgar
ID: 35078531
But do_highlight function was defined and it works when I refresh the page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35078569
do you've frame in your page ? You did not limit the namespace
0
 

Author Comment

by:Tolgar
ID: 35078787
This is the general structure of the page. However, for some reason when I open up the page from a local drive on my machine, the GM script is not activated. I think you need to put it on a server. Or maybe there is a more intelligent way of doing it.

<HTML>
<BODY>
  <TABLE BORDER=0 CELLPADDING=1>
    <TR>
      <TH></TH>
      <TH></TH>
      <TH>aaaaaaa</TH>
      <TH NOWRAP>aaaaaaaaaaaa&nbsp;(s)</TH>
      <TH ALIGN=RIGHT NOWRAP>aaaaaaaaaaaa</TH>

      <TH ALIGN=RIGHT NOWRAP>aaaaaaaaaa</TH>
      <TH ALIGN=RIGHT>#</TH>
      <TH ALIGN=LEFT>aaaaaaaaaaaaaaa</TH>
      <TH ALIGN=LEFT NOWRAP>aaaaaaaaa&nbsp;(s)</TH>
    </TR>
      <TR><TD ALIGN=CENTER >FI</TD>

        <TD><FONT SIZE=1></FONT></TD>
        <TD ALIGN=RIGHT NOWRAP><</TD>
        <TD ALIGN=RIGHT><font color=000000>aaaaaaaaaaa</font></TD>
        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD NOWRAP>aaaaaaaaaaaaaaaaaaa</TD>

        <TD NOWRAP>aaaaaaaaaaaaaaaaaa</TD>
      </TR>
      <TR><TD ALIGN=CENTER >O</TD>
        <TD><FONT SIZE=1>1</FONT></TD>
        <TD ALIGN=RIGHT NOWRAP></TD>
        <TD ALIGN=RIGHT><font color=000000>aaaaaaaaaa</font></TD>

        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD ALIGN=RIGHT>1</TD>
        <TD NOWRAP><STRONG>aaaaaaaaaaaaa</STRONG> <font color=green>aaaaaa</font> </TD>
        <TD NOWRAP>aaaaaaaaa</TD>
      </TR>
</TABLE>
</BODY>
</HTML>

Open in new window


And here is the part that I add to my initial GM script.

function do_highlight() {
	mycave.log('CALL do_highlight');
	var tables = document.getElementsByTagName("table");
	mycave.log('TABLES ==>' + tables);
		for(var i=0;i<tables.length;i++) {
			var inputs = tables[i].getElementsByTagName("input");
			mycave.log('INPUTS ==>' + inputs);
			for(var j=0;j<inputs.length;j++) {
				if( inputs[j].type=="checkbox" && inputs[j].checked ) {
					var obj = inputs[j].parentNode;
					mycave.log('OBJ ==>' + obj);
					while( obj.tagName.toLowerCase() != "tr" ) {
						obj = obj.parentNode;
						mycave.log('OBJ.PARENTNODE ==>' + obj);
					}
					obj.style.backgroundColor = "red";
				}
			}
		}
	};

Open in new window



I call this function on line 69 in the initial code. I show a snapshot of this part.

	do_replace_html_itJob(window.document, _elementJob, _regexpJob, _repstrJob);
    }
		// Do the replacement of _regexp with _repstr. Also replace the checkbox ID wth the unique ID.
	do_restore_checkboxState("mybox");
	do_restore_checkboxState("myJobbox");
	do_highlight();

Open in new window


And here is the last part:

window.addEventListener("load", function() { do_nameAttr_script() }, false);
		
window.addEventListener("load", function() { do_cosmetic_script() }, false);

window.addEventListener("load", function() { do_AddImage_sbcheck_script() }, false);

window.addEventListener("load", function() { do_checkbox(); setTimeout("do_highlight()", 3000); }, false);

Open in new window



Thanks,
0
 

Author Comment

by:Tolgar
ID: 35078798
Yes  I have frames on the page. I just sent you the frame that I create checkboxes.

I have namespace as in this form.

// @namespace       myWork

Thanks,
0
 

Author Comment

by:Tolgar
ID: 35085292
Any idea??
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Expert Comment

by:leakim971
ID: 35085401
I tried with the HTML you give and get nothing (refrshing the page or not), I need to check what your code do currently to create a page
0
 

Author Comment

by:Tolgar
ID: 35085898
The code generates the checkboxes when there is <TR><TD or <tt>\n#

Then it keeps the state of the checkboxes by using cookies.

Also it renames some links as ">>>myruntests Report" and in addition to that it generates links with a specific name as ">>>Check Report"

And it add some images next to these links. Like pass of fail image.

Thanks,



0
 

Author Comment

by:Tolgar
ID: 35085920
If you can create a simple page that has

<TR><TD>

and/or
<tt>
# SOME TEXT

Then you will be able to see the behavior. But for some reason GM script does not work when the page on the local drive.

Thanks,
0
 

Author Comment

by:Tolgar
ID: 35090580
I am waiting for your reply.

Thanks,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35094634
No problem, I'm working on it!
0
 

Author Comment

by:Tolgar
ID: 35094985
Thank you !!!

Btw, there two functions in the beginning of my code which I have never called before:

reloadUpperFrame: function () {
        mycave.findFrame('top_right_frame').document.location.reload();
    },

    reloadLowerFrames: function () {
        mycave.findFrame('middle_frame').document.location.reload();
    }

And the frame that I would like to reload should be the "middle_frame". So I tried to call these functions "function do_checkbox()" and/or "function setCookie(c_name)" with no luck. Maybe i am doing something wrong. Can you please focus on this? This looks like a possible solution.

Thanks,
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35096111
Remove the do_highlight function everywhere and replace your current do_restore_checkboxState function with this one :

//This function is to restore the state of each checkbox
		function do_restore_checkboxState(checkboxName) {
			var checkboxes = document.getElementsByName(checkboxName);
			for(var i=0;i<checkboxes.length;i++) {
				var state = getCookie( checkboxes[i].id )
				if( state != null ) {
					if(state == "1") {
						checkboxes[i].checked = true;
						var obj = checkboxes[i].parentNode;
						while( obj && (obj.tagName.toLowerCase() != "tr") ) {
							obj = obj.parentNode;
						}
						if(obj && (obj.tagName.toLowerCase() == "tr")) obj.style.backgroundColor = "red";
					}
				}
			}
		}

Open in new window

0
 

Author Comment

by:Tolgar
ID: 35096312
Well I tried it but did not work again. In addition to that, the restore checkbox state function for some cases does not work correctly anymore.

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35096494
And with the following ?
<html>
<head>
<title></title>
</head>
<body>
<table border="0">
	<tr><td>CONTENT ROW 1</td></tr>
	<tr><td>CONTENT ROW 2</td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:Tolgar
ID: 35096599
I saved your html code as exampleCode.html in my desktop.

Changed the GM script to include anything with

// @include         *

Open in new window


Uplload the script.

Opened it in FireFox.

Even the checkboxes did not show up.

Even I copy my hmtl page on my desktop the script does not work as I explained in my previous scripts. But it works when the page is on the server where the adress starts with something http.

How did you test this script by using the html you sent me?

Thanks,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35096631
Always with a web server
0
 

Author Comment

by:Tolgar
ID: 35096700
Ok. So I can't test your html code on my side. But even it works for it it does not work for original page.

The reason can be the frames on the page. Do you have any idea regarding this?

Thanks,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35097367
currently if the code is able to check or not the checkboxes, it should be able to highlight the row if the checkboxes are in rows.

>How did you test this script by using the html you sent me?
Yes :
leakim971-420723.flv
0
 

Author Comment

by:Tolgar
ID: 35097913
But in this video, the line is bot highlighted as  soon as you check the box. You go to yahoo page then come back to this page and it is highlighted.

This is what happens on my machine as well. But I want it to be highlighted as soon as you check the box.

Thanks,

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35098029
I apologies
A new setCookie function (it work fine for me) :

function setCookie(c_name) {
	    var date = new Date();
		// The cookie will be active for 7 days
		date.setTime(date.getTime()+(7*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();

		var checkbox = document.getElementById(c_name);
		var c = c_name + "=" + (checkbox.checked?"1":"0") + ";expires="+expires+"; path=/;";
		document.cookie = c;

		var obj = checkbox.parentNode;
		while( obj && (obj.tagName.toLowerCase() != "tr") ) {
			obj = obj.parentNode;
		}
		if(obj && (obj.tagName.toLowerCase() == "tr")) obj.style.backgroundColor = (checkbox.checked)?"red":"white";
	}

Open in new window

0
 

Author Comment

by:Tolgar
ID: 35098439
It works perfect for the <TR><TD> matches however, it does not work the case for <tt>\n# matches.

I am sending you an example page for this case:

<html>
<head>
<title>
SOMETEXT
</title>
</head>
<body bgcolor="white">
<form>
SOMETEXT
<a name="Top">&nbsp;</a>
</form>
<tt>SOMETEXT <a href="SOMELINK">SOMETEXT</a> SOMETEXT </tt><br>
<tt>
# SOMETEXT (SOMETEXT)    SOMETEXT     SOMETEXT
</tt>
<br><tt>
# SOMETEXT (SOMETEXT)    SOMETEXT     SOMETEXT 
</tt>
<br><tt>
SOMETEXT<a href='SOMETEXT'  title='SOMETEXT'>SOMETEXT</a>

</tt>
<br>
<p>
</body>
</html>

Open in new window


I really appreciate for your help
0
 

Author Comment

by:Tolgar
ID: 35103134
Do you have any idea why it does not work or how it can be fixed?

Thanks,
0
 

Author Comment

by:Tolgar
ID: 35110892
I am closing this because I have opened a new question for the rest of my question.

Thank you so much for your help!!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now