...

View Full Version : [b][/b], [quote][/quote] how?



gilgalbiblewhee
12-28-2010, 12:50 AM
I use Firefox and am wondering how to select a word and wrap [b] tags or [quote] tags around it? Any tutorials?

Old Pedant
12-28-2010, 12:59 AM
Select where? Anyplace on the page? Or only in a form field?

gilgalbiblewhee
12-28-2010, 04:02 AM
Select where? Anyplace on the page? Or only in a form field?
in the textarea of course just like this reply I'm typing in.

Krupski
12-28-2010, 04:10 AM
I use Firefox and am wondering how to select a word and wrap [b] tags or [q uote] tags around it? Any tutorials?

Check out this LINK (http://three-dog.homelinux.com/demo1.htm) (hint: look at the page source).

I got bored, so I made up a demo for you. Everything you need you can dig out of the one file. Do a "view source", then copy and paste it to your editor.

-- Roger

DJCMBear
12-28-2010, 05:34 AM
Goodish code Krupski but it has many bugs such as if you click any of the buttons after you fill the text area more than 1-2 times it messes up.

Krupski
12-28-2010, 05:38 AM
Goodish code Krupski but it has many bugs such as if you click any of the buttons after you fill the text area more than 1-2 times it messes up.

It's just a demo. The core code he needs is right there.

Oh and I fixed the bug... "overflow:auto". LOL! :)

DJCMBear
12-28-2010, 05:54 AM
Nooo I mean if you put a bold tag inside a bold tag it messed up, what happens if you quote someone's quote like people do on here it wouldn't work as it doesn't allow you to have the same code inside itself.

gilgalbiblewhee
12-28-2010, 06:07 AM
Check out this LINK (http://three-dog.homelinux.com/demo1.htm) (hint: look at the page source).

I got bored, so I made up a demo for you. Everything you need you can dig out of the one file. Do a "view source", then copy and paste it to your editor.

-- Roger
Ok Thanks.

Krupski
12-28-2010, 06:27 AM
Nooo I mean if you put a bold tag inside a bold tag it messed up, what happens if you quote someone's quote like people do on here it wouldn't work as it doesn't allow you to have the same code inside itself.

Oh I know. Originally I was just going to show how to insert stuff, then I decided to play with replacing the tags with HTML. I shouldn't have put in text replace stuff anyway... but I was bored! :)

Anyway, it's out now. Now it's just a demo of what the OP originally wanted.

-- Roger

Krupski
12-28-2010, 06:27 AM
Ok Thanks.

Did it help you out?

DJCMBear
12-28-2010, 06:31 AM
Lol nah I just thought I should tell you if you didn't know about it so you could fix it.

gilgalbiblewhee
12-28-2010, 07:25 AM
Did it help you out?
I'm still adjusting it to my codes. Why did you put the onload? Wouldn't it work to define it in the JS code?

Ok it works so far but why do the gif images look off?

Philip M
12-28-2010, 10:12 AM
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">



<script type="text/javascript">

//http://www.codingforums.com/showthread.php?t=134113 - Author Kor


function formatText(el,tag){
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.sel ectionEnd);// IE:Moz
if (selectedText == "") {return false}
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){ //IE
document.selection.createRange().text=newText;
}
else{ //Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value .length);
}
}
</script>
</head>

<body>
<form name="myForm">
<textarea name="myTextarea" style="font-family:arial; font-size = 12pt" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>

<input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
<input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
<input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
</form>


This works with all browsers. Author Kor.
</body>
</html>

"Insanity is doing the same thing over and over again, but expecting different results." - Rita Mae Brown

Krupski
12-28-2010, 02:59 PM
//http://www.codingforums.com/showthread.php?t=134113 - Author Kor

The code you posted is functionally almost identical to what I posted.

Only differences I see are:

(1) Mine will insert the tags even with no selection (so that a user can insert his/her own text later).

(2) I added "live view" to the demo (btw gilgalbiblewhee that's what the onload was for - to kick-start the live view updater - you don't need that for your application).

Or am I missing something?

-- Roger

Philip M
12-28-2010, 04:43 PM
The code you posted is functionally almost identical to what I posted.
Or am I missing something?

-- Roger

Well, mine works. :) And it gives the OP a choice. As we often say, there is more than one way to kill a cat! :)

DJCMBear
12-28-2010, 09:10 PM
Also It's best to move the cursor of the textarea to go between the new bbtags if no text was selected as this way if you add a tag then start typing the text will be typed with-in the new bbtags that have just been added and if you add underline then bold the tags will not become [b][/b ][u][/u ] but would become [u][b][/b ][/u ] with the spaces removed from the bbtag of course lol.

gilgalbiblewhee
12-29-2010, 02:03 AM
Also It's best to move the cursor of the textarea to go between the new bbtags if no text was selected as this way if you add a tag then start typing the text will be typed with-in the new bbtags that have just been added and if you add underline then bold the tags will not become [b][/b ][u][/u ] but would become [u][b][/b ][/u ] with the spaces removed from the bbtag of course lol.
How about the url/link part? if the link in the textarea goes to the url I think I will need the replace function right?
[.URL.=.".".]

function yourLink(){
var yourlinkbeg = document.getElementById('comments').value;
var yourlinkend = yourlinkbeg.replace('[./.U.R.L.]', '');
var yourlink = yourlinkend.replace('[.U.R.L="]', 'url=');
}
take away the dots in between. But when I'm calling the function in the href it says that yourlink is not defined:

Error: yourlink is not defined
Source File: javascript: yourLink(); var getKeywords = ''; for(i=0; i<document.getElementsByName('keywords').length; i++){if(i!==0){getKeywords +=' ';}getKeywords += document.getElementsByName('keywords')[i].value}; var file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink; emailThis(); alert(file);
Line: 1

DJCMBear
12-29-2010, 05:47 AM
How are you calling that line is in on a link or form input etc show the code.

gilgalbiblewhee
12-29-2010, 05:58 AM
How are you calling that line is in on a link or form input etc show the code.
It's in a link. It was all in a link until the replace function, which I added I realized can't be used because of the quotes. So I declared a variable in a script tag just above (not in the head of the page though) but now the link and the script tag are having difficulty communicating. The variable yourlink is not defined. I declared it in the script tag but the inline javascript doesn't recognize it. Maybe I should move the whole inline in the script.

By rule the script should be in the head tags but many big websites like this forum have scripts which are in the body tag.

DJCMBear
12-29-2010, 06:14 AM
<a href="javascript:var yourlink=(function(){return document.getElementById('comments').value.replace('[./.U.R.L.]', '').replace('[.U.R.L="]', 'url=');}),getKeywords=(function(){var getKeywords='';for(i=0; i<document.getElementsByName('keywords').length; i++){if(i!==0){getKeywords +=' ';}getKeywords+=document.getElementsByName('keywords')[i].value};return getKeywords;}),file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink; emailThis(); alert(file);">Demo Link</a>


UNTESTED

gilgalbiblewhee
12-29-2010, 06:19 AM
<a href="javascript:var yourlink=(function(){return document.getElementById('comments').value.replace('[./.U.R.L.]', '').replace('[.U.R.L="]', 'url=');}),getKeywords=(function(){var getKeywords='';for(i=0; i<document.getElementsByName('keywords').length; i++){if(i!==0){getKeywords +=' ';}getKeywords+=document.getElementsByName('keywords')[i].value};return getKeywords;}),file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink; emailThis(); alert(file);">Demo Link</a>


UNTESTED
Ok but the double quote will come in conflict with the double quote outside.

DJCMBear
12-29-2010, 06:36 AM
Just use a \ to escape it

example
<a href="javascript:var yourlink=function(){return document.getElementById('comments').value.replace('[./.U.R.L.]', '').replace('[.U.R.L=\"]', 'url=');},getKeywords=function(){var i,getKeywords='';for(i=0; i<document.getElementsByName('keywords').length;i++){if(i!==0){getKeywords+=' ';}getKeywords+=document.getElementsByName('keywords')[i].value;}return getKeywords;},file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink;emailThis();alert(file);">Demo Link</a>

gilgalbiblewhee
12-29-2010, 07:31 AM
I decided to put in a separate script tag in the body within a div brought up by AJAX.

All of a sudden it stop opening to the new url:

<script language="JavaScript" type="text/javascript">
function goToUrl(){
var yourlinkbeg = document.getElementById('comments').value;
var yourlinkmiddle = yourlinkbeg.replace('[/URL]', '--++');
var yourlinkend = yourlinkmiddle.replace('"]', '++--');
var yourlink = yourlinkend.replace('[URL="', '++');
var getKeywords = '';
for(i=0; i<document.getElementsByName('keywords').length; i++){
if(i!==0){
getKeywords +=' ';
}
getKeywords += document.getElementsByName('keywords')[i].value
}
var file="FormToEmail.php?yourname="+document.getElementById('yourname').value+"&youremail="+document.getElementById('youremail').value+"&theiremail="+document.getElementById('theiremail').value+"&subject="+document.getElementById('subject').value+"&passage="+document.getElementById('passage').innerHTML+"&keywords="+getKeywords+"&comments="+yourlink;
//alert(file);
emailThis(file);
}
</script>
...
<a href="JavaScript: goToUrl();" style="float: left; width: 40px; margin: 5px 5px 0px 0px; background-color: rgb(122, 16, 16); border: 1px solid rgb(122, 16, 16); color: rgb(255, 255, 255); text-decoration: none;">Send</a>

The AJAX emailThis(file); is in an external js file:

function emailThis(){
var req = createRequest();
if(req){
req.onreadystatechange = function(){
var c = document.getElementById('for_email');
if(req.readyState){
if(req.readyState == 4){
if(req.status == 200){
c.innerHTML = req.responseText;
}
}
}
}
req.open('GET', file ,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(null);
}
}
var file is never opened.
The worse part is that there are no errors.

DJCMBear
12-29-2010, 07:35 AM
Change this
function emailThis(){ to this
function emailThis(file){

gilgalbiblewhee
12-29-2010, 07:44 AM
Change this
function emailThis(){ to this
function emailThis(file){
It's still not working. I have this url:

foremail.php?type=foremail&btitle0=Genesis&btitle1=Exodus&username=gilgal&checkresult0=1+2&checkresult1=1581&txtarea0=god
Upon submitting I get:

foremail.php
and not:

var file="FormToEmail.php?yourname="+document.getElementById('yourname').value+"&youremail="+document.getElementById('youremail').value+"&theiremail="+document.getElementById('theiremail').value+"&subject="+document.getElementById('subject').value+"&passage="+document.getElementById('passage').innerHTML+"&keywords="+getKeywords+"&comments="+yourlink;

DJCMBear
12-29-2010, 07:49 AM
Try using this.



function goToUrl() {
var file,
yourlink = document.getElementById('comments').value
.replace('[/URL]','--++')
.replace('"]','++--')
.replace('[URL="','++'),
keywords = document.getElementsByName('keywords').value,
yourname = document.getElementById('yourname').value,
youremail = document.getElementById('youremail').value,
theiremail = document.getElementById('theiremail').value,
subject = document.getElementById('subject').value,
passage = document.getElementById('passage').innerHTML,
getKeywords = '';
for(i=0; i<keywords.length; i++) {
if(i!==0) {
getKeywords += ' ';
}
getKeywords += keywords[i].value;
}
emailThis("FormToEmail.php?yourname="+yourname+
"&youremail="+youremail+
"&theiremail="+theiremail+
"&subject="+subject+
"&passage="+passage+
"&keywords="+getKeywords+
"&comments="+yourlink);
return false;
}

gilgalbiblewhee
12-29-2010, 09:45 PM
Try using this.



function goToUrl() {
var file,
yourlink = document.getElementById('comments').value
.replace('[/URL]','--++')
.replace('"]','++--')
.replace('[URL="','++'),
keywords = document.getElementsByName('keywords').value,
yourname = document.getElementById('yourname').value,
youremail = document.getElementById('youremail').value,
theiremail = document.getElementById('theiremail').value,
subject = document.getElementById('subject').value,
passage = document.getElementById('passage').innerHTML,
getKeywords = '';
for(i=0; i<keywords.length; i++) {
if(i!==0) {
getKeywords += ' ';
}
getKeywords += keywords[i].value;
}
emailThis("FormToEmail.php?yourname="+yourname+
"&youremail="+youremail+
"&theiremail="+theiremail+
"&subject="+subject+
"&passage="+passage+
"&keywords="+getKeywords+
"&comments="+yourlink);
return false;
}
Ok it returned false. What does that mean?

Don't forget there is the AJAX code too in a separate js file:

function emailThis(){
var req = createRequest();
if(req){
req.onreadystatechange = function(){
var c = document.getElementById('for_email');
if(req.readyState){
if(req.readyState == 4){
if(req.status == 200){
c.innerHTML = req.responseText;
}
}
}
}
req.open('GET', file ,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(null);
}
}
Where the variable file is used. And if I take the false off the div which was activated by AJAX is shutting off instead off directing to the url assigned with the file variable. And when I had the javascript code inline it was working. The only reason I moved it in the script tags is because of the double quote issue which conflicted with the href double quotes. Maybe it's better to move it back in. Although I'm not sure if the \ would help but I'm going to try.

WHat if I put & # 3 4 ; instead of \"?

Krupski
12-29-2010, 10:30 PM
WHat if I put & # 3 4 ; instead of \"?

& # 3 4 ; (no spaces of course) is a way to describe a double quote in HTML. This is not the same thing as using the backslash to escape a character.

34 is the ASCII code for the double quote. Just like in Basic chr$(34).

Now, for Javascript (and PHP and C and lots of other programming languages), the second quote encountered usually means "end of string".

Look at this:

var string = 'I wonder if it's snowing today?';

Now, look how Javascript sees it:

'I wonder if it' plus "what the heck is s snowing today?';"? (and probably puke up an exception).

To fix that line, you need to tell Javascript "Look, this quote you're running into is not the end of the line, it's part of the string, so live with it" and you do this by escaping the character... that is, precede it with a backslash.

The final result is:

var string = 'I wonder if it\'s snowing today?';

And Javascript sees it like this:

var string = 'I wonder if it\ (ah that quote belongs...)'s snowing today?';

Same thing with double quotes:

var string = "Since when are you the "expert" here?"; (wrong)

var string = "Since when are you the \"expert\" here?"; (right)


Hope it makes sense.....

gilgalbiblewhee
12-29-2010, 10:41 PM
& # 3 4 ; (no spaces of course) is a way to describe a double quote in HTML. This is not the same thing as using the backslash to escape a character.

34 is the ASCII code for the double quote. Just like in Basic chr$(34).

Now, for Javascript (and PHP and C and lots of other programming languages), the second quote encountered usually means "end of string".

Look at this:

var string = 'I wonder if it's snowing today?';

Now, look how Javascript sees it:

'I wonder if it' plus "what the heck is s snowing today?';"? (and probably puke up an exception).

To fix that line, you need to tell Javascript "Look, this quote you're running into is not the end of the line, it's part of the string, so live with it" and you do this by escaping the character... that is, precede it with a backslash.

The final result is:

var string = 'I wonder if it\'s snowing today?';

And Javascript sees it like this:

var string = 'I wonder if it\ (ah that quote belongs...)'s snowing today?';

Same thing with double quotes:

var string = "Since when are you the "expert" here?"; (wrong)

var string = "Since when are you the \"expert\" here?"; (right)


Hope it makes sense.....
Yes I understand that.
I moved everything back inline:

<a href="JavaScript: var file,
yourlink = document.getElementById('comments').value
.replace('[/URL]','--++')
.replace('&#34;]','++--')
.replace('.value;
} file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink; emailThis(file);" style="float: left; width: 40px; margin: 5px 5px 0px 0px; background-color: #7A1010; border: 1px solid #7A1010; color: #ffffff; text-decoration: none;" >Send</a>
I'm getting:

Error: document.getElementById("comments") is null
Source File: javascript:%20var%20file,%20%20%20yourlink%20%20%20%20=%20document.getElementById('comments').value. replace(' (&#34;','++'),
keywords = document.getElementsByName('keywords'),
yourname = document.getElementById('yourname'),
youremail = document.getElementById('youremail'),
theiremail = document.getElementById('theiremail'),
subject = document.getElementById('subject'),
passage = document.getElementById('passage'),
getKeywords = '';
for(i=0; i<keywords.length; i++) {
if(i!==0) {
getKeywords += ' ';
}
getKeywords += keywords[i)','--++').replace('"]','++--').replace('[URL="','++'),%20%20keywords%20%20%20%20=%20document.getElementsByName('keywords'),%20%20yourname%20%20%20 %20=%20document.getElementById('yourname'),%20%20youremail%20%20%20=%20document.getElementById('your email'),%20%20theiremail%20%20=%20document.getElementById('theiremail'),%20%20subject%20%20%20%20%20 =%20document.getElementById('subject'),%20%20passage%20%20%20%20%20=%20document.getElementById('pass age'),%20%20getKeywords%20=%20'';%20%20for(i=0;%20i<keywords.length;%20i++)%20{if(i!==0)%20{%20%20getKeywords%20+=%20'%20';}getKeywords%20+=%20keywords[i].value;%20%20}%20%20file='FormToEmail.php?yourname='+document.getElementById('yourname').value+'&youremail='+document.getElementById('youremail').value+'&theiremail='+document.getElementById('theiremail').value+'&subject='+document.getElementById('subject').value+'&passage='+document.getElementById('passage').innerHTML+'&keywords='+getKeywords+'&comments='+yourlink;%20emailThis(file);
Line: 1

gilgalbiblewhee
12-29-2010, 11:42 PM
Well I tried the url in a separate page and the page is showing blank even though the file is there. I don't understand this but it isn't a javascript problem anymore but a php.

DJCMBear
12-30-2010, 01:36 AM
This works and has been tested by me.



<!DOCTYPE html>
<html>
<head>
<title>AJAX EMAIL</title>
<script type="text/javascript">
(function($){
$.emailThis = function(file){
var req = new createRequest(),
c = document.getElementById('for_email');
if(c){
req.onreadystatechange = (function(){
if(req.readyState == 4 && req.status == 200){
c.innerHTML = req.responseText;
}
});
req.open('GET', file ,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send();
}
};
})(window);
</script>
</head>
<body>
<div id="for_email"></div>
Your Name: <input type="text" id="yourname" /><br />
Your Email: <input type="text" id="youremail" /><br />
Their Email: <input type="text" id="theiremail" /><br />
Comments: <input type="text" id="comments" /><br />
Keywords: <input type="text" id="keywords" /><br />
Subject: <input type="text" id="subject" /><br />
Passage: <div id="passage">This is the passage.</div>
<a href='Javascript:var i,comments=((comments=document.getElementById("comments")))?comments.value.replace("[/URL]","--++").replace("\"]","++--").replace("[URL=\"","++"):"",yourname=((yourname=document.getElementById("yourname")))?yourname.value:"",youremail=((youremail=document.getElementById("youremail")))?youremail.value:"",theiremail=((theiremail=document.getElementById("theiremail")))?theiremail.value:"",subject=((subject=document.getElementById("subject")))?subject.value:"",keywords=((keywords=document.getElementsByName("keywords")))?keywords:"",passage=((passage=document.getElementById("passage")))?passage.innerHTML:"",getKeywords="";for(i=0;i<keywords.length;i++){if(i!==0){getKeywords+=" ";}getKeywords+=keywords[i].value;}emailThis("FormToEmail.php?yourname="+encodeURIComponent(yourname)+"&youremail="+encodeURIComponent(youremail)+"&theiremail="+encodeURIComponent(theiremail)+"&subject="+encodeURIComponent(subject)+"&passage="+encodeURIComponent(passage)+"&keywords="+encodeURIComponent(getKeywords)+"&comments="+encodeURIComponent(comments));'>Send Email</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum