17 replies to this topic

[Deviatore]

Hey I need some help with this tutorial:
http://www.oreillynet.com/pub/a/javascript...js_toolbar.html
When i am done with everything, i get this error:

I think that i have to edit something there, DO I?
Please help me

[Vandalised]

The site is down for me, but that looks a lot like a tag hasn't been closed or something like that.

Edited by Vandalised, 06 September 2007 - 05:47 AM.

[Deviatore]

Maybe that.
I cant do anything there.I am not gud in javascript so looking for someone.

[.CJ]

If your using Dreamweaver CS3, just check the colour coding, if most of it is one colour more than the other... you may have missed something.

[Deviatore]

Not a single code is in another color.
ALl same.DUnno whats happening.

[Braunson]

Can you post Your code.?

[.CJ]

Are you putting it between <script> tags?

<script type="text/javascript">CODE</script>

You have Javascript enabled right?

[Deviatore]

Oh yes.I forgot to write </script> there.
Now it doesnt show the code in the browser but the buttons are still not clickable there.
Heres the code which i am using:

<script type="text/javascript">
function format_sel(v) {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var sel = document.selection.createRange();
  sel.text = "<" + v + ">" + str + "</" + v + ">";
  return;
}
function insert_link() {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var my_link = prompt("Enter URL:","http://");
  if (my_link != null) {
	var sel = document.selection.createRange();
	sel.text = "<a href=\"" + my_link + "\">" + str + "</a>";
  }
  return;
}
#toolbar 	{	
			margin: 0;
			padding: 0;
			width: 262px;
			background: buttonface;
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			text-align:right;
			  }
			
.button 	{
			background: buttonface; 
			border: 1px solid buttonface;
			margin: 1; 
			}
			
.raised		{ 
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			background: buttonface;
			margin: 1;
			}
			
.pressed	{
			border-top: 1px solid buttonshadow;
			border-left: 1px solid buttonshadow;
			border-bottom: 1px solid buttonhighlight;
			border-right: 1px solid buttonhighlight;
			background: buttonface;
			margin: 1;
			}
			function mouseover(el) {
  el.className = "raised";
}

function mouseout(el) {
  el.className = "button";
}

function mousedown(el) {
  el.className = "pressed";
}

function mouseup(el) {
  el.className = "raised";
}
</script>

<form name="my_form">
<div id="toolbar">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="format_sel('b');" 
 src="bold.gif" 
 width="16" height="16" 
 align="middle" 
 alt="click to make your selection bold">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="format_sel('i');" 
 src="italic.gif" 
 width="16" height="16" 
 align="middle" 
 alt="click to make your selection italic">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="insert_link();" 
 src="link.gif" 
 width="32" height="16" 
 align="middle" 
 alt="click to add a link"></div>
<textarea cols="30" rows="6" name="my_textarea"></textarea>
</form>

There maybe be many mistakes because i am not good in javascript.

Edited by Deviatore, 07 September 2007 - 03:33 AM.

[Matthew.]

You have the CSS within the script tag, you can't do that.

[Deviatore]

Matthew can u please explain clearly whats the problem there.
And can u modify it make the problem solve.

[.CJ]

You need to have your CSS in between:

<style type="text/css"></style>

So put it before or after the <script> tags.

[Demonslay]

In case you still have no idea what they are talking about, this block is CSS, not JavaScript, and thus should be in style tags, not script tags.

#toolbar     {    
            margin: 0;
            padding: 0;
            width: 262px;
            background: buttonface;
            border-top: 1px solid buttonhighlight;
            border-left: 1px solid buttonhighlight;
            border-bottom: 1px solid buttonshadow;
            border-right: 1px solid buttonshadow;
            text-align:right;
              }
            
.button     {
            background: buttonface;
            border: 1px solid buttonface;
            margin: 1;
            }
            
.raised        {
            border-top: 1px solid buttonhighlight;
            border-left: 1px solid buttonhighlight;
            border-bottom: 1px solid buttonshadow;
            border-right: 1px solid buttonshadow;
            background: buttonface;
            margin: 1;
            }
            
.pressed    {
            border-top: 1px solid buttonshadow;
            border-left: 1px solid buttonshadow;
            border-bottom: 1px solid buttonhighlight;
            border-right: 1px solid buttonhighlight;
            background: buttonface;
            margin: 1;
            }

It's not even valid CSS anyways, with all the 'buttonhighlight' and 'buttonshadow'. I assume those should be fixed up as comments, and proper CSS should be implemented.

[Deviatore]

Hey will the code be this:

<script type="text/javascript">
function format_sel(v) {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var sel = document.selection.createRange();
  sel.text = "<" + v + ">" + str + "</" + v + ">";
  return;
}
function insert_link() {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var my_link = prompt("Enter URL:","http://");
  if (my_link != null) {
	var sel = document.selection.createRange();
	sel.text = "<a href=\"" + my_link + "\">" + str + "</a>";
  }
  return;
}
</script>
<style type="text/css">
#toolbar	 {	
			margin: 0;
			padding: 0;
			width: 262px;
			background: buttonface;
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			text-align:right;
			  }
			
.button	 {
			background: buttonface;
			border: 1px solid buttonface;
			margin: 1;
			}
			
.raised		{
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			background: buttonface;
			margin: 1;
			}
			
.pressed	{
			border-top: 1px solid buttonshadow;
			border-left: 1px solid buttonshadow;
			border-bottom: 1px solid buttonhighlight;
			border-right: 1px solid buttonhighlight;
			background: buttonface;
			margin: 1;
			}
			</style>
			<script type="text/javascript">
			function mouseover(el) {
  el.className = "raised";
}

function mouseout(el) {
  el.className = "button";
}

function mousedown(el) {
  el.className = "pressed";
}

function mouseup(el) {
  el.className = "raised";
}
</script>
<form name="my_form">
<div id="toolbar">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('b');"
src="bold.gif"
width="16" height="16"
align="middle"
alt="click to make your selection bold">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('i');"
src="italic.gif"
width="16" height="16"
align="middle"
alt="click to make your selection italic">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="insert_link();"
src="link.gif"
width="32" height="16"
align="middle"
alt="click to add a link"></div>
<textarea cols="30" rows="6" name="my_textarea"></textarea>
</form>

Then i get the buttons clickable but not functioning.
Demonslay or anyone, can u please point out my mistakes there and post the right code

[Demonslay]

Now what I don't get, is why you are pretty much asking for the same thing you asked in a topic not too long ago.
I gave you the code you need, with an example, and it is cross-browser compatible, whereas the code in that tutorial isn't (I get a ton of errors in Firefox because document.selection only exists in IE).

http://www.pixel2lif...showtopic=37045

Here, I'll even incorporate it into the code you've given for you.

<script type="text/javascript">
// Borrowed from http://massless.org/mozedit/
// Written by Chris Wetherell - http://www.massless.org - chris [THE AT SIGN] massless.org
var mozWrap = function(txtarea, openTag, closeTag){
txtarea = document.getElementById(txtarea);
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2) selEnd = selLength;

var s1 = (txtarea.value).substring(0, selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1+openTag+s2+closeTag+s3;
}

var IEWrap = function(txtarea, openTag, closeTag){
strSelection = document.selection.createRange().text;
if(strSelection != '') document.selection.createRange().text = openTag + strSelection + closeTag;
else document.getElementById(txtarea).value += openTag + closeTag;
}

var wrapSelection = function(txtarea, openTag, closeTag){
if(document.all) IEWrap(txtarea, openTag, closeTag);
else if(document.getElementById) mozWrap(txtarea, openTag, closeTag);
document.getElementById(txtarea).focus();
return false;
}

var wrapSelectionWithLink = function(txtarea){
var my_link = prompt('Enter URL:', 'http://');
if(my_link == null) return false;
if(my_link.length < 6){
alert('This URL is not valid!');
return false;
}
return wrapSelection(txtarea, '[url='+my_link+']', '[/url]');
}

function mouseover(el) {
el.className = "raised";
}

function mouseout(el) {
el.className = "button";
}

function mousedown(el) {
el.className = "pressed";
}

function mouseup(el) {
el.className = "raised";
}

</script>
<style type="text/css">
#toolbar {
margin: 0;
padding: 0;
width: 262px;
background: buttonface;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
text-align:right;
}

.button {
background: buttonface;
border: 1px solid buttonface;
margin: 1;
}

.raised {
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
background: buttonface;
margin: 1;
}

.pressed {
border-top: 1px solid buttonshadow;
border-left: 1px solid buttonshadow;
border-bottom: 1px solid buttonhighlight;
border-right: 1px solid buttonhighlight;
background: buttonface;
margin: 1;
}
</style>

<form name="my_form">
<div id="toolbar">
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapSelection('my_textarea', '[b]', '[/b]');" src="bold.gif" width="16" height="16" align="middle" alt="click to make your selection bold">
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapSelection('my_textarea', '[i]', '[/i]');" src="italic.gif" width="16" eight="16" align="middle" alt="click to make your selection italic">
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="wrapSelectionWithLink('my_textarea');" src="link.gif" width="32" height="16" align="middle" alt="click to add a link">
</div>
<textarea cols="30" rows="6" id="my_textarea" name="my_textarea"></textarea>
</form>

I've tested it and it works just fine.

Edited by Demonslay, 08 September 2007 - 12:39 PM.

[Deviatore]

I asked because i thought that I may be wrong.
And second, the code you gave me, i searched for the main website too.I thought that theres something missing so i used it.
And demonslay, thanks for it.Its now working.
Hey can u please help me add more buttons? umm...we can also talk via eMail or messenger.
Are you having id's in any of these:
Live Messenger
Hotmail
FaceBook
ICQ?
These are the mains which I open regularly (Live messenger is having problems at my side now a days)

[Demonslay]

If you'd check my profile, you'd find all my contact information.

And adding more buttons is as simple as following this example.

<img onclick="wrapSelection('[tag]', '[/tag]', 'textareaID');" src="image.gif" alt="" />

As for special things such as prompts, you can follow the example for the wrapSelectionWithLink(), where it does the prompt, then calls wrapSelection() itself, or you could also make an optional 4th parameter for the wrapSelection() function for passing it a callback (which is what I might do if I have the need for the code for something else).

[Deviatore]

No no not just that ones.
That all i have added although i didnt know much about it.
When you reply to any topics here in the advance mod (not fast reply) u can see a "list" button.
That types of buttons.
Colour change etc.

[Demonslay]

All, well that's when it gets complicated; if you make it complicated that is.
It all depends on what kind of GUI you are making. IPB's is unique in using that color picker, where it simply has a pop-up (floating div) with multiple buttons like this, where they (I'm assuming, I don't feel like looking through the code) call a special exception function, passing it the color its choosing, which then does just like the wrapSelectionWithLink() function here, and simply passes the color to the actual base function, appending the color in there.
The list starts off by appending the '[ list ]' code, then merely enters an infinite loop of prompt boxes, where it runs a while loop, and for as long as the prompt() call does not return an empty set (the user cancels or enters a blank), then it keeps appending the '[ * ]' code; when the user funally exits the loop, it then finishes the list off with the '[ /list ]' markup.

Something like this would give you a similar result.

var makeList(txtarea){
  txtarea = document.getElementById(txtarea);
  txtarea.innerHTML += "[list]";
  while((p = prompt('Enter a list item:')) && p != ''){
	txtarea.innerHTML += "\n[*]"+p;
  }
  txtarea.innerHTML += "\n[/list]";
}

Then just call that function from the onclick handler of the button, passing it the textarea's ID, and you're good to go.
(I even tested this myself, works just fine.)