[Site Home] [Forum Home] [Articles] [File DB] [News Archives]

IceTeks Articles -> Javascript Tutorial


(View original topic)


we_undertaker - May-19-2008 server time
i looke at http://www.iceteks.com/articles.php/javascript/1
i really like this text editor

but i dont know how to use it, cos i just new in PHP
could you please tell me how to use that with SQL , cos i want to have this text editor.

and in your html code :
<form action="bbcode.php" method="post" name="editform" onsubmit="return checkForm(this)">
i also dont know how to create bbcode.php , to run the form ...

please , please help me, i really need it
Thank you, Thank you so much

AdRock - Aug-20-2007 server time
I have followed the article and have noticed there are errors that I don't know how to fix.

I have used the exact code as provided in the article.

The first error I was able to fix which was a backslash in <textarea> which was missing but this is the main error.

When I type a word in the text area and I want to do some formatting such as bold or italic, th ewhole word is not highlighted with the start and end tags such as some words (supposed to be the [b] tags in there) but instead it just does some words[b].

One other question which is probably really stupid but is the second article the php file which is called when you preview what you have written?

Red Squirrel - Aug-12-2007 server time
Force be with you, always!

AltaGid - Aug-10-2007 server time
Hello! Help solve the problem.
Very often try to enter the forum, but says that the password is not correct.
Regrettably use of remembering. Give like to be?
Thank you!

sgreeny12 - Apr-15-2007 server time
Hey great tutorial. Really works except I have 1 question if you dont mind. I want to add an align right button similar to the one on devshed forms where the image is the classic microsoft alight right button. When I click on the bottom it automatically submits the script. Does anyone have any fixes? Thanks

I could make it into a smile but i wouldnt know how to have it give the close option. Can someone help me with that. Thanks


The first 3 work because they arnt images. The 4th which is the image doesnt work.
CODE
               <input type="button" src="images/icons/justifyleft.gif" class="button" value="left" name="left" onclick="java-script tag('left', '[left]', 'left*', '[/left]', 'left', 'left');"

onMouseOver="helpline('left')" />
               <input type="button" src="images/icons/justifycenter.gif" class="button" value="center" name="center" onclick="java-script tag('center', '[center]', 'center*',

'[/center]', 'center', 'center');" onMouseOver="helpline('center')" />
               <input type="button" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

               <input type="image" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

wtd - Sep-13-2006 server time
Any particular reason this:

CODE
eval("window.document.editform."+name+".value = newbut;");


Cannot be:

CODE
window.document.editform[name].value = newbut;


And why:

CODE
var post = window.document.editform.post.value;
window.document.editform.post.value = post + tagclose;


Cannot be simplified to:

CODE
var post = window.document.editform.post;
post.value += tagclose;

jim_bo - Sep-11-2006 server time
Hi,

Is this thread still active?

The code seems to work fine once you tidy up the html on the first page.

Im after a basic editor with bold, underline, italics and link.

With the functionality that it adds the tags to the selected words as it does in this forum when posting to a topic.

Could the code here be easily alterd to have that function?


Thanks

rovingcowboy - Mar-04-2006 server time
this whole javascript and java codeing error's thing can be fixed by any none coding moron including my self which am a huge non coding moron.

what you need to do is go get the new eversoft firstpage 2006 program they updated their old 1st page 2000 html text editor

it still has all the help for all the web page coding script languages you can find the program at snapfiles.com or at download.com which ever you want to use. it might also be at majorgeeks.com by now?
xyxthumbs.gif

sam - Mar-04-2006 server time
thx but select ( color + size ) errors


woozyking - Dec-03-2005 server time
now i'm just trying to solve everything about 3 things:

1. js compatibility in firefox
2. html and css (later css) compatibility with xhtml and css standards
3. Codes' shortcut keys, like the ones here and with phpBB, but should be accordant to the function that is accomplished (i'm talking about the part where i edited to solve art's problem)

again, can someone please help before i finish it myself, lol sagrin.gif

Guest - Dec-02-2005 server time
by the way, can someone please change the html part to formal xhtml (using div tags i suppose)

WoOzY KinG - Dec-02-2005 server time
lol

shortly after i posted that reply, i figured out the problem...

the problem isn't anyone's but my and whoever that have that same problem - that we all have a common ground - didn't read through the article but simply copy & paste... i really apologize to you Streety!!!

to whom that wants to know why the message box doesn't work, please honestly read through the article, it's a respect to the author and a responsibility to yourself.

and, for art's problem, i have a simple solution by using createRange()

change
CODE
function tag(v, tagadd, newbut, tagclose, oldbut, name)
{
if (eval(v)%2 == 0)
{
 eval("window.document.editform."+name+".value = newbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value =  content + tagadd;
 window.document.editform.content.focus();
}
else
{
 eval("window.document.editform."+name+".value = oldbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value = content + tagclose;
 window.document.editform.content.focus();
}

eval(v+"++;");

}

to
CODE

function tag(v, tagadd, newbut, tagclose, oldbut, name)
{


var r = document.selection.createRange().text;

rr = tagadd + r + tagclose;

if(r)
{
 document.selection.createRange().text = rr;
}
else
{
 if (eval(v)%2 == 0)
{
 eval("window.document.editform."+name+".value = newbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value =  content + tagadd;
 window.document.editform.content.focus();
}
else
{
 eval("window.document.editform."+name+".value = oldbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value = content + tagclose;
 window.document.editform.content.focus();
}

eval(v+"++;");
}
}


this perfectly solves art's problem xyxthumbs.gif

WoOzY KinG - Dec-02-2005 server time
i have the same problem with the help box

there are several errors that have been reported from ie:

including "'v' is not defined", and all the helpbox messages are not defined...

so, please fix the problem xyxthumbs.gif

Guest - Sep-16-2005 server time
[U][/U] wink.gif tongue.gif smile.gif

Streety - Jul-18-2005 server time
Well it should definitely work so I'm not sure what the problem is. Can you post a link to the files you are working on so I can take a look?

Guest - Jul-18-2005 server time
btw i tried both firefox and ie

Chad - Jul-18-2005 server time
Im absolutly having a problem getting the help box to work , tried blending it into the text box i already had, then , i tried copying and pasting your html directly and it didnt work still, and your html btw need a </textarea> at the end .. but i couldnt figure it out, i dont know javascript, only php, but i was able to follow your code, and it logically makes sense. so i dunno if im jsut stupid.

Streety - Jun-29-2005 server time
Hi art,

I'm glad you liked the article. You're absolutely right in that some functionality is missing though, not applying bbcode to highlighted text and not autocompleting tags on submission are the two major issues in my opinion. They'll both throw a lot of new users.

To be honest though I haven't looked in detail at either issue though I do remember phpBB used a workaround from reading through the code when I wrote the article. I would like to think that this is just a segment of code from an earlier version (why fix it if it isn't broken?) that still works but isn't needed with more modern browsers. Changing the user agent to IE breaks the functionality in firefox but thats to be expected using IE specific code. I'm not sure how to change the user agent in IE and don't really have the time at the moment to mess around with the code.

If you do have the time to play around and report back though that would be great.

art - Jun-29-2005 server time
QUOTE
The opening tag and closing tag are both supplied as variables to the function and all that happens is they are both tacked onto the end of the users post. In some bbcode editors (certainly phpBB and probably others) highlighting text and then using this function will wrap the highlighted text in the appropriate bbcode tags. This editor doesn't have this functionality. If this is something you feel your users will need it should be possible to reconstruct this functionality by looking at the source html for an editor that allows this.


These articles are great! Thanks a million for taking time to write them up.

There are two problems with the method you've presented, as I'm sure you're aware. One is that if you want to add bold (as an example) to text that isn't at the end of what has been typed in, you're out of luck. Some might not figure out that they have to type in the [b] code manually. The other is that many users will try to highlight the text and then click the bold button (because they've learned to do that in word processors). So I think we need a little more functionality, especially if it's not too hard to do.


When I looked at phpBB's bbcode, it looked like they had to create workarounds for the javascript capabilities of different browsers. In particular it seemed like they needed alternatives for the arrayname.length, arrayname.pop(), and arrayname.push(value) properties.

I'm wondering if it's possible to work around those problems? Is it even a problem if you're using 6th generation browsers?


Do you have any thoughts on how to go about solving the problem?

Thanks, Jonathon!

rip_phreaker - May-07-2005 server time
since i am not too great with java i will do the basic form of applet i was taught

CODE
import java.awt.*


public class applet
{
  public static void main (String[] args)
  {
     System.out.println ("Hello World")
  }
 
}
this program would then be compiled
then you would need an html file with like
CODE

[html]
[import java class = applet.class]  % not too sure about this coding
[/html]


not too sure about the html but then you would just open the .html file and it would show "Hello World" in the window

so basically how i was taught was free running java programs and applet java are both the same coding and so forth i am not too great with html tho

Streety - May-07-2005 server time
I'll take your word for it as I've never used Java.

However a javascript file would be something like this:

CODE

<html>
<head>
<title>Basic Hello, World Javascript file</title>
</head>
<body>
<script LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

document.write("Hello, World!")

</SCRIPT>

</body>
</html>

rip_phreaker - May-07-2005 server time
ya javascripting would be like:
CODE
import java.awt.*
-codes of the program




and then u must creat and html file to call the .class file of the java program u ust wrote





Streety - May-07-2005 server time
Ok, script written in java could be called java script but that isn't the same as 'JavaScript'.

Java is a programming language, you can use it to produce complete programs. Javascript is a scripting language and so can only be used inside browsers.

To use javascript inside a website you include the code within SCRIPT tags, to use java via applets in a browser I believe you use applet of object tags.

rip_phreaker - May-07-2005 server time
actually BOB (the original form of java) was produced by netscape

javascripting is the name for coding and java is just the common name for running javascripting if u do not program it... java scripting is just the name for programming java

it was originally programmed for use in handheld devices (not palmpilots) but for the original lcd remotes, because it was versatile then they figured out that it was a much more dynamic way to get live animation over the web (at the time most websites where static and this was pre-flash and before .gif's where big)

if you would like i can post the link for the history of java

Streety - May-07-2005 server time
QUOTE (rip_phreaker @ May 6 2005, 10:36 PM)
well javascript is the name for java...they are the same thing really java scripting is just used by java programmers really... and the files are huge (the doc file is like 60 Mb) plus u really need to look on the sites for proper downloading types...also my schools programming site is AMAZING for learning the java....some great links and excersise there

Java is NOT the same as javascript. The fact they have a similar name is just some messed up marketing gimic. Javascript was originally put out by Netscape as LiveScript around the same time that Java was getting a lot of attention as 'the next big thing'. When Netscape then started supporting java applets they changed the name of LiveScript to JavaScript hoping some of the success of Java would rub off on their offering.

In summary, they're totally different.

rip_phreaker - May-06-2005 server time
well javascript is the name for java...they are the same thing really java scripting is just used by java programmers really... and the files are huge (the doc file is like 60 Mb) plus u really need to look on the sites for proper downloading types...also my schools programming site is AMAZING for learning the java....some great links and excersise there

Red Squirrel - May-06-2005 server time
Oh are you talking about java or javascript? Get's confusing but java is different then javascript. Well I think they're the same it's just that java is for applications while JS is for client side web, but I think the syntax is the same. May be wrong though. If you want you can actually post that app in the download section. Not much in there so we need more stuff. em320.gif

rip_phreaker - May-06-2005 server time
well if u want me too i will find the links and stuff for getting the programs that i described above? i will tell ya now java scripting is a pain in the a$$ i do not like it very much, but it is more versatile then turing and delphi and c and c++ and python and cobalt...lol what other lingo's do i use? i forget but ya java is great cus it is multi=platformed and will work on sooo many different os'es or else i would not touch it

Red Squirrel - May-06-2005 server time
I need to get into javascript, you can do neat stuff with that to make a site more interactive. We sort of "learned" it in our html class, but we did not really learn it. It was more like "copy this code here, and here's what it does". laugh.gif

rip_phreaker - May-06-2005 server time
hey, i would suggest getting the jsdk from sun java (version 1.4.2 i believe not 1.5) and getting either j-creator or eclipse...it is all open source and is some of the best java scripting software out there right now....with j-creator all u need is the sdk and the doc files no need for setting up your eutoexic.bat file for running programs and it is just an over-all great program i use it like almost everyday (when i am not using the mighty turing)

Streety - Apr-30-2005 server time
javascript is client side (although there is a server side - don't think i'll go there though) so that isn't a problem but a bbCode editor is fairly useless without running scripts on the server.

There are free hosts that allow you to use php (and MySQL). I used lycos tripod for a while before deciding to pay for a decent host.

Red Squirrel - Apr-28-2005 server time
Yeah php only works on hosts that you pay for. Really, not sure why free ones don't allow php since it's not really all that hard to do. I guess it's a security issue.

rovingcowboy - Apr-28-2005 server time
unsure.gif did not read the article red but since most places dont let you post to the
site servers on the free hosts javascript posting does not work. some places let you use a cgi folder for which you can use the posting that way. but not many.

sad.gif

Red Squirrel - Apr-27-2005 server time
Not sure why the hits on this article are so low though, I did the mailing a few days ago. ohmy.gif Maybe I should try slashdot.

Streety - Apr-27-2005 server time
Well spotted guest . . . needless to say I put that in just to make sure you're all still awake. wink.gif

Red Squirrel - Apr-27-2005 server time
This section does not parse html, that, for example, would be disasterous if parsed. (text areas, tables, etc can be lethal for the layout)

Guest - Apr-27-2005 server time
<textarea rows="10" cols="50" name="post" class="form_elements_text"><textarea>

<textarea rows="10" cols="50" name="post" class="form_elements_text"></textarea>

Red Squirrel - Apr-15-2005 server time
Allowing visitors to post content to your website is a great way to keep those visitors coming back and a great way to attract new visitors.bbCode is a simple way to give your visitors the ability to jazz up their plain text without leaving yourself open to the risks of html.

http://www.iceteks.com/articles.php/javascript/1

(Showing 50 last posts, newest on top)