JavaScript - Row Highlighting

Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to.

I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it).

I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this?

PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF

Thanks a ton for your time, I really appreciate it!
-Joel

I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor.

This works fine for inputs and text areas using the following code:

Code:

function setCaretPos(obj, start, end)
{
	var range = obj.createTextRange();
	range.moveStart('character', start);
	range.moveEnd('character', end - obj.value.length);
	range.select();
}

But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes?

Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles).

Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar.

I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected.

How can I do this in JavaScript?

I'm trying to implement a syntax highlighter in my program, but jQuery 1.2.6 is giving me problems.

This line specifically: Code:

 parse: [/^(\[) *@?([\w-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/, /^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/, new RegExp("^([:.#]*)(" + chars + "+)")],

it messes with every javascript editor's syntax highlighting I've tried so far too. It looks like they're declaring a regex pattern without a delimiter. Can anybody make sense of this line?

I've implemented the Google CSE on my website and it works fine but I'd like to ask if there is a way to highlight the searched words on destination sites using javascript?

i.e.:
1. I type into the search form the word I need to find on my website --> 2. I get result site with links to subsites --> 3. After clicking one of the listed links I go back to my website, to certain subsite --> 4. The word I've been searching for is highlighted so I can easily find it.

Thanks in advance.

HI all,

I am new to this forum and really needs your help.
Please let me know how can I highlight a selected portion of an html document with javascript such that the selected portion is repeatedly shown highlighted on each and every page refresh.

Thanks & Regards,
Sumantra

Code:

// Code for alternating row colors on data tables, but NOT every table.... just ones with classname="altRows"
// Note: rowID comes from the JIT Variable: &&_sflalt 
// Note: This function is called in ovject group: *TR in the MLS Syntax File
function stripeRows(rowVar)
{
	// Need to create a var for uniquely identifying the highlighted rows
	var rowID = 0;
	
	// Begin the checking and writing of the HTML data
	if (rowVar == '')
	{	
		var html = "<tr>";
		document.writeln(html);
	}
	
	else if (rowVar == '0')
	{
		var html = "<tr class=\"rowEven\" id=\"evenRow"+rowID+"\" onmouseover=\"highlightRow('over', 'evenRow"+rowID+"');\" onmouseout=\"highlightRow('out', evenRow"+rowID+"');\">";
		document.writeln(html);
		rowID++;
	}
	
	else if (rowVar == '1')
	{
		var html = "<tr class=\"rowOdd\" id=\"oddRow"+rowID+"\" onmouseover=\"highlightRow('over', 'oddRow"+rowID+"');\" onmouseout=\"highlightRow('out', oddRow"+rowID+"');\">";
		document.writeln(html);
		rowID++;
	}
	
	else 
	{
		var alertText = "Something went wrong with alternating row color in datasets - The function broke. Please jot down a note as to what you were doing when this dialogue box poped up, and let American Health Care Software know \n\n\n ATTN: Pat Litke";
		parent.showDialog('Broken Function',alertText,'prompt');
	}
}

// Function for modifying class attrbutes for row highlighting..
// This function will allows the currently moused-over row to highlight a different color based on its ID
function highlightRow(option, theRowID)
{
	var row = document.getElementById(theRowID);
	
	if(option == 'over')
	{
		row.className = 'rowOver';
	}
	
	if(option == 'out')
	{
		row.className = 'rowEven';
	} else if(option == 'in')
	{
		row.className = 'rowOdd';
	} else { }
}

Can someone help? I can't figure out why this isn't working the way that I'm logically seeing it... The alternate rows highlight works fine, but the mouseover and mouseout events fail miserebly... When a page loads, regardless of where i mouse over, only the top two rows color in with the mouseOver color. They also don't revert to original coloring. Where am I going wrong?

Note: I apologize if it's something little that I'm missing... I'm still new to js

hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml

Hi all!

I'm using a multiselect box on my website, similar to this one:

<Select Name="multiselect[]" multiple="multiple">
<option>This is option 1</option>
<option>This is option 2</option>
<option>This is option 3</option>
<option>This is option 4</option>
</select>

Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this?

I tried something like this:
document.taakform.elements['multiselect[]'].selectedIndex = "1"
document.taakform.elements['multiselect[]'].selectedIndex = "2"
document.taakform.elements['multiselect[]'].selectedIndex = "3"

Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift.

Thanks in advance guys (and gals)!

Hey
Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others

Hello,
I have a regular expression that returns multiple matches. For e.g. If the user types a string "980ee,34223,werw" in a textbox, the regular expression match returns "ee" and "werw".
I would like to highlight both "ee" and "werw" in the textbox. How can I achieve this?
Thank you.

Hi all,

I have the following code in my html.

<form name="createaccount" action="" method="post">
<div class="formrow">
<label>Select an Avatar:</label>
<div class="fieldcontent">
<img src="images/avatar1.jpg" class="avatargal" id="Image1" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image1');" onblur="imageoff('Image1');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image2" />
<input type="radio" name="selectavatar" class="radiobtn" checked="checked" onclick="imageon('Image2');" onblur="imageoff('Image2');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image3" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image3');" onblur="imageoff('Image3');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image4" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image4');" onblur="imageoff('Image4');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image5" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image5');" onblur="imageoff('Image5');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image6" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image6');" onblur="imageoff('Image6');" />
<img src="images/avatar1.jpg" class="avatargal" id="Image7" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image7');" onblur="imageoff('Image7');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image8" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image8');" onblur="imageoff('Image8');" />
</div>
</div>
</form>

-----------

The javascipt is:

function imageon(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px blue";
}
function imageoff(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px white";
}

----------

When user clicks radio button near "Image1" then "Image1" is highlighted in blue color border, and previously selected image gets white border.

This works in firefox and internet explorer but not on chrome and safari.

Any help?

I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box.

So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists.

My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box.

I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked.

I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list.

I can post code if it is helpful.

Thanks,
Taylor

Hello,

I'm working on putting a partial lexicon of a language online and want to install a search bar at the top. The search should function sort of as "ctrl+f" by only picking up the entries that match with the search item. However, unlike an actual ctrl+f search, I don't want the matches to be highlighted one by one as the user has to continuously press "next." Instead, as soon as the user presses "search," all of the entries on the lexicon should disappear except those that match with the search term.

Further information: I've mostly been using HTML and CSS to build this lexicon. All of my entries are in individual div elements and have individual div class names.

Can anyone help, or refer me to an existing tutorial?

Thanks!

. . My website with "ideas for education" will have two sitemaps -- a diagram, and a text-outline -- each located in the left i-frame, with links opening in the right i-frame. My homepage promises that each sitemap will "show where where you've been (green links), where you are (red highlighting), and where you can go (blue links) in your explorations."
. . The diagram-sitemap uses "swap images" (with code written by Dreamweaver) and 14 gifs, each with a red rectangle behind one of the 14 main links. (But it doesn't have green visited-links to show "where you've been.")
. . In my text-sitemap, red-highlighting a visited link was easy, again by using DW's javascript tools. But this makes every visited link retain its red background, until the page re-loads. My goal is to red-highlight ONLY the last-visited link, to clearly show "where you are" in the sitemap.
. . In one attempt to remove the red, I tried forcing a page-reload onMouseDown (with DW's "Go to URL") but DW refuses to recognize the sitemap's iframe (named "left") so it can only load the text-sitemap into a top-frame instead of the left iframe of its frameset. And this reload would be an awkward solution anyway, especially if a user has scrolled the page so the cursor would have to be moved back to the link for the onMouseUp part of clicking a link.
. . A more elegant solution, found in a web-search, claims that "You can put an onclick event in all your links and then when the user clicks on a link, you can use the onclick event to call a function that changes that link's color to, say, green; and then uses the 'links' array to change all the other links to another color. The 'this' keyword can be used to identify the current link."
. . This sounds promising, and JS-experts will see the two bold steps -- to "put..." and then "use..." -- and say "this is easy." But for me, doing these steps is a mystery I haven't solved. Some clues are below, gathered from various sources, but I don't know how to put it all together. A solution requires that everything is coded exactly the way it must be, with no mistakes, and I don't know how to do this.
. . Here are some "pieces of the puzzle" that might be useful:

. . Each sitemap has three areas, symbolized by colored page-backgrounds -- light blue & light green & yellow -- DDEEFF, DDFFEE, and FFFFBB. The js-code below, made in DW, works to change a link with red-background (from a previous link-click) to blue-background (onMouseDown) and back to red-background (onMouseUp).
Code:

<a href="blue1.htm" target="self" 
onMouseDown=" MM_effectHighlight (this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)"
onMouseUp=" MM_effectHighlight (this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)">
blue, then red</a>

. . This works. But the challenge is to change OTHER links (not "this") from red to a color (blue, green, or yellow) that matches the page-background of the area where each link is. And for this I'm failing in two ways. First, I don't know how to make the link being clicked ("this") change the background-color of other links, by ""using the 'links' array to change all the other links to another color." Second, if I want to make three color changes (from red back to blue, or to green, or to yellow) the triple-change code below, which is the code above but with the onMouseDown line repeated 3 times, doesn't work in DW:
[a comment added January 7: I've now abandoned this triple-change idea, and instead I want all links changed (onMouseDown) to a GOLD background-highlighting in a link-rectangle that surrounds each of the 14 main-topic links, but not the 40 sub-topic links.]
Code:

<a href="blue1.htm" target="self" 
onMouseDown=" MM_effectHighlight (this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)"
onMouseDown=" MM_effectHighlight (this, 1, '#DDFFEE', '#DDFFEE', '#DDFFEE', false)"
onMouseDown=" MM_effectHighlight (this, 1, '#FFFFBB', '#FFFFBB', '#FFFFBB', false)"
onMouseUp=" MM_effectHighlight (this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)">
blue-green-yellow, then red</a>

. . Imagine that two links (blue0.htm, blue1.htm) are in a blue-background area of the text-sitemap, while two other links (2,3) are in a green-background area, and two links (4,5) are in a yellow-background area. By copying the code I found in another page, I think the code below might describe the links-array I want. But this raises two more problems: Third, the array probably contains errors or omissions. Fourth, even if it was correct, I don't know where to put it: in the head section? body section? inside the js-code for a link? if yes, would I have to repeat this code for each of the 14 main links, or should I write it once (with a name) and then "call up" this name for each of the 14 links. These are things an expert will know, but I don't.
Code:

<div class="box_broadstyle"><script>
var linksArray = new Array();
links[0] = "blue0.htm"; 
links[1] = "blue1.htm"; 
links[2] = "green2.htm";
links[3] = "green3.htm";
links[4] = "yellow4.htm";
links[5] = "yellow5.htm";
</script></div>

. . And I think the code below might be useful to make a "for loop" to control the triple-change by telling the browser which links (0 and 1) should have blue-highlighting (ending with #DDEEFF), and which (2,3) should end with green, and which (4,5) will be yellow. But... Fifth, I don't know if this code is correct or (a tougher challenge) where to put it so it will be functional.
Code:

for (y=0;y<=1;y++)
for (y=2;y<=3;y++)
for (y=4;y<=5;y++)

. . Thanks for your patience in reading through this question, which is long because I've tried to clearly describe my goals and what I think might be parts of a solution. Any help in solving these mysteries (first, ... fifth) will be greatly appreciated.
CraigR