Jump to content

selFont - WYSIWYG Editor

lilman

By lilman
in Javascript Help

 Share

Recommended Posts

lilman Regular Member

lilman

Posted
Posted

I am working on this WYSIWYG Editor, now it works perfectly in Internet Explorer, but not FireFox.  I have been working at getting it be compatible with both browsers. So far it has been a cake walk, but the toggle function (which displays either the WYSIWYG box or the HTML) isn't working at all. This is the entire code from a to z.

 

<html>
<head>
<title> Browser Based HTML Editor </title>
<script language="JavaScript">

  var viewMode = 1; // WYSIWYG
  var broswer;
  browser = navigator.appName;
  
  function Init()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.designMode = "on";
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.designMode = 'On';	
}
  }
  
  function selOn(ctrl)
  {
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';	
  }
  
  function selOff(ctrl)
  {
ctrl.style.borderColor = '#D6D3CE';  
ctrl.style.backgroundColor = '#D6D3CE';
  }
  
  function selDown(ctrl)
  {
ctrl.style.backgroundColor = '#8492B5';
  }
  
  function selUp(ctrl)
  {
    ctrl.style.backgroundColor = '#B5BED6';
  }
    


  function doBold()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('bold', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('bold', false, null);
}

  }

  function doItalic()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('italic', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('italic', false, null);
}  
  }

  function doUnderline()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('underline', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('underline', false, null);
}   
  }
  
  function doLeft()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifyleft', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifyleft', false, null);
}  
  }

  function doCenter()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifycenter', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifycenter', false, null);
} 
  }

  function doRight()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifyright', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifyright', false, null);
} 
  }

  function doOrdList()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('insertorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('insertorderedlist', false, null);
} 
  }

  function doBulList()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('insertunorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('insertunorderedlist', false, null);
} 
  }
  
  function doForeCol()
  {
    var fCol = prompt('Enter foreground color', '');
    
if(browser == "Netscape")
{
	if(fCol != null)
		document.getElementById('iView').contentDocument.execCommand('forecolor', false, fCol);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fCol != null)
		iView.document.execCommand('forecolor', false, fCol);
} 	
  }

  function doBackCol()
  {
    var bCol = prompt('Enter background color', '');

if(browser == "Netscape")
{
	if(bCol != null)
		document.getElementById('iView').contentDocument.execCommand('backcolor', false, bCol);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(bCol != null)
		iView.document.execCommand('backcolor', false, bCol);
}     
  }

  function doLink()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('createlink');
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('createlink');
} 
  }
  
  function doImage()
  {
    var imgSrc = prompt('Enter image location', '');

if(browser == "Netscape")
{
	if(imgSrc != null) 
		document.getElementById('iView').contentDocument.execCommand('insertimage', false, imgSrc);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(imgSrc != null)    
     		iView.document.execCommand('insertimage', false, imgSrc);
}     
  }
  
  function doRule()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('inserthorizontalrule', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('inserthorizontalrule', false, null);
} 
  }
  
  function doFont(fName)
  {
if(browser == "Netscape")
{
	if(fName != '')
		document.getElementById('iView').contentDocument.execCommand('fontname', false, fName);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fName != '')
      		iView.document.execCommand('fontname', false, fName);
} 
  }
  
  function doSize(fSize)
  {
	if(browser == "Netscape")
{
	if(fSize != '')
		document.getElementById('iView').contentDocument.execCommand('fontsize', false, fSize);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fSize != '')
      		iView.document.execCommand('fontsize', false, fSize);
} 
  }
  
  function doHead(hType)
  {
	if(browser == "Netscape")
{
	if(hType != '')
	{
		document.getElementById('iView').contentDocument.execCommand('formatblock', false, hType);
		doFont(selFont.options[selFont.selectedIndex].value);
	}
}
else if(browser == "Microsoft Internet Explorer")
{
	if(hType != '')
	{
      		iView.document.execCommand('formatblock', false, hType);
		doFont(selFont.options[selFont.selectedIndex].value);
	}
} 
  }
  
  function doToggleView()
  {  
    if(viewMode == 1)
    {
	if(browser == "Netscape")
	{
		iHTML = document.getElementById('iView').innerHTML;
		document.getElementById('iView').innerText = iHTML;

		// Hide all controls
		document.getElementById('iView').tblCtrls.style.display = 'none';
		document.getElementById('iView').selFont.style.display = 'none';
		selSize.style.display = 'none';
		selHeading.style.display = 'none';
		document.getElementById('iView').focus();
		  
		viewMode = 2; // Code
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iHTML = iView.document.body.innerHTML;
		iView.document.body.innerText = iHTML;
		  
		// Hide all controls
		tblCtrls.style.display = 'none';
		selFont.style.display = 'none';
		selSize.style.display = 'none';
		selHeading.style.display = 'none';
		iView.focus();
		  
		viewMode = 2; // Code
	} 
    }
    else
    {
	if(browser == "Netscape")
	{
		iText = document.getElementById('iView').innerText;
		document.getElementById('iView').innerText = iText;

      		// Show all controls
	    tblCtrls.style.display = 'inline';
	    selFont.style.display = 'inline';
	    selSize.style.display = 'inline';
	    selHeading.style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iText = iView.document.body.innerText;
     		iView.document.body.innerHTML = iText;
      
      		// Show all controls
	    tblCtrls.style.display = 'inline';
	    selFont.style.display = 'inline';
	    selSize.style.display = 'inline';
	    selHeading.style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	} 
    }
  }

</script>
<style>

  .butClass
  {    
    border: 1px solid;
    border-color: #D6D3CE;
  }
  
  .tdClass
  {
    padding-left: 3px;
    padding-top:3px;
  }

</style>

<body onLoad="Init()">
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">	
<tr>
	<td class="tdClass">
		<img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
		<img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
		<img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">

		<img alt="Left" class="butClass" src="left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
		<img alt="Center" class="butClass" src="center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
		<img alt="Right" class="butClass" src="right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">

		<img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
		<img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">

		<img alt="Text Color" class="butClass" src="forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()">
		<img alt="Background Color" class="butClass" src="bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()">

		<img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
		<img alt="Image" class="butClass" src="image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()">
		<img alt="Horizontal Rule" class="butClass" src="rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">

	</td>
</tr>
</table>
<iframe id="iView" style="width: 415px; height:205px; display: block;">
	<table>
		<tr>
			<td>dsds</td>
		</tr>
	</table>
</iframe>
    <table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">	
    <tr>
  <td class="tdClass" colspan="1" width="80%">
	  <select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
	    <option value="">-- Font --</option>
	    <option value="Arial">Arial</option>
	    <option value="Courier">Courier</option>
	    <option value="Sans Serif">Sans Serif</option>
	    <option value="Tahoma">Tahoma</option>
	    <option value="Verdana">Verdana</option>
	    <option value="Wingdings">Wingdings</option>
	  </select>
	  <select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)">
	    <option value="">-- Size --</option>
	    <option value="1">Very Small</option>
	    <option value="2">Small</option>
	    <option value="3">Medium</option>
	    <option value="4">Large</option>
	    <option value="5">Larger</option>
	    <option value="6">Very Large</option>
	  </select>
          <select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">
            <option value="">-- Heading --</option>
            <option value="Heading 1">H1</option>
            <option value="Heading 2">H2</option>
            <option value="Heading 3">H3</option>
            <option value="Heading 4">H4</option>
            <option value="Heading 5">H5</option>
            <option value="Heading 6">H6</option>
          </select>
</td>
	<td class="tdClass" colspan="1" width="20%" align="right">
	  <img alt="Toggle Mode" class="butClass" src="mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doToggleView()">
	     
	</td>
    </tr>
    </table>
</body>
</html>

 

The function that is giving me problems is: 

function doToggleView()
  {  
    if(viewMode == 1)
    {
	if(browser == "Netscape")
	{
		iHTML = document.getElementById('iView').innerHTML;
		document.getElementById('iView').innerText = iHTML;

		// Hide all controls
		document.getElementById('iView').tblCtrls.style.display = 'none';
		document.getElementById('iView').selFont.style.display = 'none';
		selSize.style.display = 'none';
		selHeading.style.display = 'none';
		document.getElementById('iView').focus();
		  
		viewMode = 2; // Code
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iHTML = iView.document.body.innerHTML;
		iView.document.body.innerText = iHTML;
		  
		// Hide all controls
		tblCtrls.style.display = 'none';
		selFont.style.display = 'none';
		selSize.style.display = 'none';
		selHeading.style.display = 'none';
		iView.focus();
		  
		viewMode = 2; // Code
	} 
    }
    else
    {
	if(browser == "Netscape")
	{
		iText = document.getElementById('iView').innerText;
		document.getElementById('iView').innerText = iText;

      		// Show all controls
	    tblCtrls.style.display = 'inline';
	    selFont.style.display = 'inline';
	    selSize.style.display = 'inline';
	    selHeading.style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iText = iView.document.body.innerText;
     		iView.document.body.innerHTML = iText;
      
      		// Show all controls
	    tblCtrls.style.display = 'inline';
	    selFont.style.display = 'inline';
	    selSize.style.display = 'inline';
	    selHeading.style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	} 
    }
  }

 

FireFox is saying:

 

Error: document.getElementById("iView").tblCtrls has no properties

Source File: file:///C:/Users/ltsf/Documents/WYSIWYG/editor.html

Line: 274

 

If anyone has any ideas I would be appreciate hearing them. Thank you.

Link to comment
Share on other sites
gurroa Newbie

gurroa

Posted
Posted

You have to pick elements by their ID not refer them directly.

Like selFont select. I've changed it to have ID value set to "selFont" instead of Name value. And the same with other select boxes.

Try it.

<html>
<head>
<title> Browser Based HTML Editor </title>
<script language="JavaScript">

  var viewMode = 1; // WYSIWYG
  var broswer;
  browser = navigator.appName;
  
  function Init()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.designMode = "on";
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.designMode = 'On';	
}
  }
  
  function selOn(ctrl)
  {
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';	
  }
  
  function selOff(ctrl)
  {
ctrl.style.borderColor = '#D6D3CE';  
ctrl.style.backgroundColor = '#D6D3CE';
  }
  
  function selDown(ctrl)
  {
ctrl.style.backgroundColor = '#8492B5';
  }
  
  function selUp(ctrl)
  {
    ctrl.style.backgroundColor = '#B5BED6';
  }
    


  function doBold()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('bold', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('bold', false, null);
}

  }

  function doItalic()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('italic', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('italic', false, null);
}  
  }

  function doUnderline()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('underline', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('underline', false, null);
}   
  }
  
  function doLeft()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifyleft', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifyleft', false, null);
}  
  }

  function doCenter()
  {
    if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifycenter', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifycenter', false, null);
} 
  }

  function doRight()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('justifyright', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('justifyright', false, null);
} 
  }

  function doOrdList()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('insertorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('insertorderedlist', false, null);
} 
  }

  function doBulList()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('insertunorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('insertunorderedlist', false, null);
} 
  }
  
  function doForeCol()
  {
    var fCol = prompt('Enter foreground color', '');
    
if(browser == "Netscape")
{
	if(fCol != null)
		document.getElementById('iView').contentDocument.execCommand('forecolor', false, fCol);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fCol != null)
		iView.document.execCommand('forecolor', false, fCol);
} 	
  }

  function doBackCol()
  {
    var bCol = prompt('Enter background color', '');

if(browser == "Netscape")
{
	if(bCol != null)
		document.getElementById('iView').contentDocument.execCommand('backcolor', false, bCol);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(bCol != null)
		iView.document.execCommand('backcolor', false, bCol);
}     
  }

  function doLink()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('createlink');
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('createlink');
} 
  }
  
  function doImage()
  {
    var imgSrc = prompt('Enter image location', '');

if(browser == "Netscape")
{
	if(imgSrc != null) 
		document.getElementById('iView').contentDocument.execCommand('insertimage', false, imgSrc);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(imgSrc != null)    
     		iView.document.execCommand('insertimage', false, imgSrc);
}     
  }
  
  function doRule()
  {
if(browser == "Netscape")
{
	document.getElementById('iView').contentDocument.execCommand('inserthorizontalrule', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
	iView.document.execCommand('inserthorizontalrule', false, null);
} 
  }
  
  function doFont(fName)
  {
if(browser == "Netscape")
{
	if(fName != '')
		document.getElementById('iView').contentDocument.execCommand('fontname', false, fName);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fName != '')
      		iView.document.execCommand('fontname', false, fName);
} 
  }
  
  function doSize(fSize)
  {
	if(browser == "Netscape")
{
	if(fSize != '')
		document.getElementById('iView').contentDocument.execCommand('fontsize', false, fSize);
}
else if(browser == "Microsoft Internet Explorer")
{
	if(fSize != '')
      		iView.document.execCommand('fontsize', false, fSize);
} 
  }
  
  function doHead(hType)
  {
	if(browser == "Netscape")
{
	if(hType != '')
	{
		document.getElementById('iView').contentDocument.execCommand('formatblock', false, hType);
		doFont(document.getElementById('selFont').options[document.getElementById('selFont').selectedIndex].value);
	}
}
else if(browser == "Microsoft Internet Explorer")
{
	if(hType != '')
	{
      		iView.document.execCommand('formatblock', false, hType);
		doFont(document.getElementById('selFont').options[document.getElementById('selFont').selectedIndex].value);
	}
} 
  }
  
  function doToggleView()
  {  
    if(viewMode == 1)
    {
	if(browser == "Netscape")
	{
		iHTML = document.getElementById('iView').innerHTML;
		document.getElementById('iView').innerText = iHTML;

		// Hide all controls
		document.getElementById('tblCtrls').style.display = 'none';
		document.getElementById('selFont').style.display = 'none';
		document.getElementById('selSize').style.display = 'none';
		document.getElementById('selHeading').style.display = 'none';
		document.getElementById('iView').focus();
		  
		viewMode = 2; // Code
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iHTML = iView.document.body.innerHTML;
		iView.document.body.innerText = iHTML;
		  
		// Hide all controls
		tblCtrls.style.display = 'none';
		document.getElementById('selFont').style.display = 'none';
		document.getElementById('selSize').style.display = 'none';
		document.getElementById('selHeading').style.display = 'none';
		iView.focus();
		  
		viewMode = 2; // Code
	} 
    }
    else
    {
	if(browser == "Netscape")
	{
		iText = document.getElementById('iView').innerText;
		document.getElementById('iView').innerText = iText;

      		// Show all controls
	    document.getElementById('tblCtrls').style.display = 'inline';
	    document.getElementById('selFont').style.display = 'inline';
	    document.getElementById('selSize').style.display = 'inline';
	    document.getElementById('selHeading').style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	}
	else if(browser == "Microsoft Internet Explorer")
	{
		iText = iView.document.body.innerText;
     		iView.document.body.innerHTML = iText;
      
      		// Show all controls
	    tblCtrls.style.display = 'inline';
	    document.getElementById('selFont').style.display = 'inline';
	    document.getElementById('selSize').style.display = 'inline';
	    document.getElementById('selHeading').style.display = 'inline';
	    iView.focus();
	  
	    viewMode = 1; // WYSIWYG
	} 
    }
  }

</script>
<style>

  .butClass
  {    
    border: 1px solid;
    border-color: #D6D3CE;
  }
  
  .tdClass
  {
    padding-left: 3px;
    padding-top:3px;
  }

</style>

<body onLoad="Init()">
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">	
<tr>
	<td class="tdClass">
		<img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
		<img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
		<img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">

		<img alt="Left" class="butClass" src="left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
		<img alt="Center" class="butClass" src="center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
		<img alt="Right" class="butClass" src="right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">

		<img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
		<img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">

		<img alt="Text Color" class="butClass" src="forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()">
		<img alt="Background Color" class="butClass" src="bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()">

		<img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
		<img alt="Image" class="butClass" src="image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()">
		<img alt="Horizontal Rule" class="butClass" src="rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">

	</td>
</tr>
</table>
<iframe id="iView" style="width: 415px; height:205px; display: block;">
	<table>
		<tr>
			<td>dsds</td>
		</tr>
	</table>
</iframe>
    <table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">	
    <tr>
  <td class="tdClass" colspan="1" width="80%">
	  <select id="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
	    <option value="">-- Font --</option>
	    <option value="Arial">Arial</option>
	    <option value="Courier">Courier</option>
	    <option value="Sans Serif">Sans Serif</option>
	    <option value="Tahoma">Tahoma</option>
	    <option value="Verdana">Verdana</option>
	    <option value="Wingdings">Wingdings</option>
	  </select>
	  <select id="selSize" onChange="doSize(this.options[this.selectedIndex].value)">
	    <option value="">-- Size --</option>
	    <option value="1">Very Small</option>
	    <option value="2">Small</option>
	    <option value="3">Medium</option>
	    <option value="4">Large</option>
	    <option value="5">Larger</option>
	    <option value="6">Very Large</option>
	  </select>
          <select id="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">
            <option value="">-- Heading --</option>
            <option value="Heading 1">H1</option>
            <option value="Heading 2">H2</option>
            <option value="Heading 3">H3</option>
            <option value="Heading 4">H4</option>
            <option value="Heading 5">H5</option>
            <option value="Heading 6">H6</option>
          </select>
</td>
	<td class="tdClass" colspan="1" width="20%" align="right">
	  <img alt="Toggle Mode" class="butClass" src="mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doToggleView()">
	     
	</td>
    </tr>
    </table>
</body>
</html>

Link to comment
Share on other sites
lilman Regular Member

lilman

Posted
  • Author
Posted

That got part of the toggle function to work as it should.  It now looks like it should when you change your mode from viewing the code to viewing what it will look like.  The only problem is, it doesn't display the HTML in FireFox still.  It just displays what the code will look like when it's ran.  Any suggestions, or thoughts as to why this would be?

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.