Solved

How to highlight selected line with checkbox?

Posted on 2011-03-08
35
465 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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
 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

813 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

14 Experts available now in Live!

Get 1:1 Help Now