JavaScript and Firefox

Batman · December 9th, 2005, 01:09 PM

Hey there

I'm an ASP coder and I'm building a web portal that involves a lot of user submissions. I made a text formatting toolbar in javascript which was basedon an oreillynet tutorial, but now I'm having problems. It appears that it works fine in IE, but refuses to work at all in Firefox. I've spoken to a few people on my usual ASP forum and they tell me that's because the code is "non standard" and firefox does not support non standard code. Anyway I'm here, basically to beg for help on making my code Javascript 'standard' Can anyone help?

My JavaScript functions are;

Code:

<script>
function format_sel(v) {
  var str = document.selection.createRange().text;
  document.form1.strMessage.focus();
  var sel = document.selection.createRange();
  sel.text = "[" + v + "]" + str + "[/" + v + "]";
  return;
}

function format_sml(v) {
  var str = document.selection.createRange().text;
  document.form1.strMessage.focus();
  var sel = document.selection.createRange();
  sel.text = v;
  return;
}

function insert_link() {
  var str = document.selection.createRange().text;
  document.form1.strMessage.focus();
  var my_link = prompt("Enter URL:","http://");
  if (my_link != null) {
    var sel = document.selection.createRange();
    sel.text = "[link]" + my_link + "[name]" + str + "[/name][/link]";
  }
  return;
}

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>

And its called like this (example creates "bold" text)

Code:

<img class="button" 
 onMouseOver="mouseover(this);" 
 onMouseOut="mouseout(this);" 
 onMouseDown="mousedown(this);" 
 onMouseUp="mouseup(this);" 
 onClick="format_sel('b');" 
 src="../images/bold.gif"  
 align="middle" 
 alt="click to make your selection bold">

Any help would be very appreciated.

steenh · December 15th, 2005, 09:34 AM

Hey Batman,
I am just a novice working my way through 'Beginning Javascript' (and far from being a programmer yet). Having just started on chapter 12 I have tried to use the techniques from this chapter on (part of) your problem. At first I thought I could use the following

[code]
<script type="text/javascript" language="Javascript">

function setHTML(v)
{
    var str = div1.innerHTML;
    str = "<"+v+">"+str+"</"+v+">";
    div1.innerHTML = str;
}
</script>
[code]
<body>
<DIV ID="div1">
    <P>Here is some text.<br>
    The attribute(s) of this text<br>
    can be changed....
    </p>
</DIV>
<input type="button" name="bttn" value="Click to change text to BOLD"
    onclick="return setHTML('B')">
</body>
[code]

This works as expected, but if I tried to use the same concept (i.e. calling setHTML)on a FORM with an TEXTAREA field for user-input, I could not change the attributes of the text. However using the STYLE-object directly is perhaps the way out:

[code]
<script type="text/javascript" language="Javascript">
function setHTML(v,s)
{
    s.style.fontWeight=v;
}
</script>
[code]
<body>
<p>Type in som text....</p>
<br>
<form name="form1">
<textarea id="text1" name="userText1" cols=20 rows=5>
</textarea>
<br>
<input type="button" name="bttn" value="Click to change text to BOLD"
    onclick="return setHTML('Bold',form1.text1)">
</form>
<br>
<DIV ID="div1">
    <P>Here is some text.<br>
    The attribute(s) of this text<br>
    can be changed....
    </p>
</div>
<input type="button" name="bttn" value="Click to change text to BOLD"
    onclick="return setHTML('Bold',div1)">
</body>
[code]

I am not sure if this is what you are looking for, but anyway
SteenH