JavaScript - Changing Text On Selection

I have 2 textareas, 1 which will be vissible, another that will be hidden. I have a function that mirrors (not in reversed lettering) the first textarea's input to the second.
Code:

function copy_data(val){ 
		var messageText = document.getElementById(val.id).value 
			document.getElementById('message').innerHTML = messageText;
}

So that copies from :
<textarea name="text_message" rows="4" id="text_message" style="direction:ltr;" onkeyup="copy_data(this)"></textarea><br/>
To:

<textarea name="message" rows="4" id="message" style="direction:ltr;"></textarea>


Then I have another function which when I select text in the "text_message" textarea will apply a tag to it, however I don't want this tag to be vissible in the "text_message" textarea but rather in the "message" textarea.

Code:

function formatText(el,tag){
	var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
		if(selectedText!=''){
		var newText=''+tag+''+selectedText+''+tag+'';
			el.value=el.value.replace(selectedText,newText)
	}
}

This effects from this checkbox:
<input type="checkbox" id="bold1" name="bold1" onclick="formatText(message,'#28D')" checked="checked" >

Could anyone please help me, I think I may have missed something somewhere, because it works if I point it back to "text_message"

Hi all,

I made up a little test program to grab the mouse X and Y coordinates and plan to use it to allow users to resize a window.

Anyway, the problem I'm having is that in MSIE-8, the mouse down and movement causes text to be selected (which I don't want).

Here's is a screenshot from MSIE:



And here is the test program live online: http://three-dog.homelinux.com/mouse/index.htm

Notice that the text in the box is selected ... I don't want that to happen.

Of course, it works just fine in Firefox, but not MSIE. I would appreciate if someone can tell me how to fix this (and if possible look at my code and see if I'm doing it right - I'm not very skilled at events yet).

Thank you.

-- Roger

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>

Is there anything out there that allows for a diagonal and vertical text capture in javascript or jQuery? I was not successful in finding anything. I have a game similar to word find that I've developed, but I need to be able to capture text vertically and diagonally. Otherwise, the only solution will be for me to do a by-click basis to capture items on the screen. I found the script below which handles horizontal capturing:

Code:

<script type="text/javascript">
document.body.style.cursor="url(3DArrow.cur), crosshair" ;

if (!window.Kolich){
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
var t = '';
if (window.getSelection){
t = window.getSelection();
}
else if(document.getSelection){
t = document.getSelection();
}
else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}

Kolich.Selector.mouseup = function(){
var st = Kolich.Selector.getSelected();
sel_text=st.replace(/\s/gi,"");
if(st!=''){
alert("You selected:\n"+sel_text);
}
}
$(document).ready(function(){  $(document).bind("mouseup", Kolich.Selector.mouseup);});
</script>

hello

im attempting to display the output of the radio selection into the textbox.
For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area.

i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue.

Code:

<html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
      {
  
         if (form1.agegroup[i].checked)
		     alert("you picked " + form1.agegroup[i].value);
      }
}
</script>
</head>
<body>
 What is your age group?<br>
 <form name="form1">
	 <input type="radio" name="agegroup" value="0-15" checked>0-15<br>
	 <input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
	 <input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
	 <input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
	 <input type="radio" name="agegroup" value="36 and up">36 and up<br>
	 <input type="button" value="submit" onclick="textbox();">
	 
<form name="form2"><textarea rows ="2">

</textarea>
</body>
</html>

btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert.

thanks

Hi all,

Could someone please tell me how to properly add some text content before and after a user's selection?

I am working with the TinyMCE editor, and I can get the following from it:

* User's selection as a W3C compatible range
* User's selection as a browser selection object
* User's selection as a node (element) that encompasses the user's selection

I also need the user's selection to remain selected after being wrapped.

I've looked all over the web and could find nothing (except running into my OWN previous questions about this).

Here's an example of what I'm trying to do:



First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected.

I will greatly appreciate some help here. I've been asking everywhere and nobody seems to know (or they don't bother to answer).

Thanks!

-- Roger

Okay, I have this code,

Code:

<script type="text/javascript">
function changeText2(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

A fairly simple one, and it is great, but I want to change it so that the text you type in stays there! Forever! For example, a person visits the site and types in "Hello" then the option of changing the text again disappears, and every visitor after that sees "Hello" (or whatever the first person types).

Is this possible? Can anyone help me out!

I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?

I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.

I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is:

<script type="text/javascript">
if (document.images) {image0 = new Image;
image0.src = "i/p0.png";
image1 = new Image;
image1.src = "i/p1.png";
image2 = new Image;
image2.src = "i/p2.png";
image3 = new Image;
image3.src = "i/p3.png";
image4 = new Image;
image4.src = "i/p4.png";
image5 = new Image;
image5.src = "i/p5.png";
image6 = new Image;
image6.src = "i/p6.png";
}</script>

and

<img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/>
<span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span>
<br clear="all"/>

<span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/>

Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful.

I'm building a template editor and need some help changing some of the variables.

Part 1.

Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s

I need to be able to fill out two fields to change DEALERNAME and 00/00/00.
I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.


Part 2.

I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.

Head
Code:

<script language="javascript" type="text/javascript">
        function detail1a(){
        document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
        }
        function detail1b(){
        document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
        }
		function detail1c(){
        document.getElementById("detail1").innerHTML = "Lube Chassis";
        }
		function detail2a(){
        document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
        }
        function detail2b(){
        document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
        }
		function detail2c(){
        document.getElementById("detail2").innerHTML = "Lube Chassis";
        }
		function detail3a(){
        document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
        }
        function detail3b(){
        document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
        }
		function detail3c(){
        document.getElementById("detail3").innerHTML = "Lube Chassis";
        }
        </script>

Body
Code:

					
<span style="font-weight: bold;">Offer Details</span><br />
					<p style="margin: 8px 10px">
					Detail 1<br />
					<input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 2<br />
					<input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 3<br />
					<input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br />
					</p>

Output
Code:

										
<ul>
<li><span id="detail1">Detail 1</span></li>
<li><span id="detail2">Detail 2</span></li>
<li><span id="detail3">Detail 3</span></li>
</ul>

Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!

Hello,
I'm learning javascript and made this little program that takes the price, qty, adds tax and gives you a total. I put in an if statement so that if qty is 0, it becomes 1 then does the calcs. However, if I put in say price 5 and qty 2, qty is changing to false and it doesn't calc. Here it is:

http://heresmary.com/test/Bought.html

I am looking for an input text that links to a iframe. . ?

To begin, we need some simple HTML elements:

A basic form;
An Input text that will contain the URLs we want to use;
An iFrame that will display the page we select from the input text.

Thanks in advance

Stickers

Hi all,

I hoping somebody can help me.

I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals.

The code below seems to be working but I can only get working links on the first line that appears.

Please can somebody help a gal out?

xo

[CODE]
<html>
<head>
<title>Rotating Text</title>
<script type="text/javascript">
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "why won't you work!?!?!?";
rotatingText[2] = "purdy please";
setInterval(rotateText, 5000);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
</script>
</head>
<body>
<span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span>
</body>
</html>

I work at a college radio station and our brand new website just went live, but we're having one particular issue...

We have a set list of shows that air each day, and on the site we have a marquee tag on the homepage that scrolls through showing each show and its broadcast time. Right now we're stuck changing this schedule each day by hand, but it's tough considering we're all college students ourselves and sometimes our own schedules simply don't allow the time.

Is there a code that would allow this kind of a daily update to happen automatically?

The format for the schedule is such:
4 - 5 pm // "Show 01"
5 - 6 pm // "Show 02"
6 - 8 pm // "Show 03"
8 - 10 pm // "Show 04"
10 - 12 am // "Show 05"

Any help would be very much appreciated!