JavaScript - Dynamic Row Highlighting.

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.

Alright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted.

At the moment I'm just using some css:

Code:

div.code
{
	font:1em "Courier New";
	margin: 10px auto 10px auto;
	background-color: #FFFFFF;
	border: thick solid #555555;
	color: #000000;
	white-space: pre;
	font-size: 12;
}

So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc :

Code:

<div class="code">float TimerTicksPerSecond = 0;
float TimerTicksPerMillisecond = 0;
int value = 0;
std::string s = "hello world";
</div>

and can format it so float and int is blue, "hello world" is red etc. Be a great help if someone can point me in the right direction. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above.

Cheers Myth.

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've spent some time trying to find a decent syntax highlighting javascript that will work in Firefox/Chrome and will work on <textarea> or at least act like a <textarea>.

Bespin was working really well until I found out that I can only have 1 bespin div per page unless I use iframes (which wont work with my project)

Codepress was really flakey and would sometimes show up as readonly in chrome.

Syntax Highlighter doesn't say that it will work with a textarea (and I couldnt get it too)

codeMirror also uses iframes.

Anyone have some good suggestions?

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

Hi All,
i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

For what i need that :

i have my user inserting information on the level 1. let say Copagny info
2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
and so on...

3- those sub level ( subforms ) can also call their respective subforms..



Any idea how to design this ?


thanks

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

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.

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

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

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

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

I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total.

Here is the bit that does the calculation:
Code:

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

The bit that adds a new row of fields is:
Code:

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}

The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc.

It isn't working for any other fields added but I can't see what is wrong