473,437 Members | 1,665 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,437 software developers and data experts.

<xmp> with innerHTML to display source code

The code which follows is something I cobbled together quite hastily
to display to students a way of illustrating HTML source code
(including CSS and JavaScript) alongside a page as rendered. I've done
this a dozen different ways for slightly different purposes and rather
can't remember what the various outcomes of my inquiries have been.

In the following I use <xmpas a way of displaying source code. It
works in IE, Opera, and FF, but I recall hearing that <xmpis to be
deprecated and that it provides no functionality that cannot otherwise
be performed without it. Whence the question: how does one do the
following without <xmp>? [aa identical approach using <codeseems to
do utterly zilch]

thanks in advance
dpd

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><style>
#left{
position: absolute;
top: 0;
left: 0;
width: 55%;
background: #fe8;
color: #018;
}
#right{
position: absolute;
top: 0;
left: 55%;
}
..text{
margin: 15px;
}
</style>
<script>
var a = document.documentElement.innerHTML

function display(L){
L.innerHTML+="<code>"+a+"<\/code>"
}
</script></head>
<body onload="display(document.getElementById('left'))">
<div id="left">
<div class="text">
<b>Here, in the div with id="left", we see the mechanics of the page.</
b>
</div>
</div>
<div id="right">
<div class="text">
<h2>Two column layout using CSS</h2>
<p>Here in the div with id="right", is where ordinary web stuff goes.</
p>
</div>
</div>

</body>
</html>
Jun 27 '08 #1
3 2618
ddailey <dd*****@zoominternet.netwrote:

....

I'm using :
<html><head><script>
window.onload=function(){
document.getElementById('source').appendChild(
document.createTextNode(
document.getElementsByTagName('script')[0].text));
}
</script></head>
<body>
<dl>
<dt>Source code:</dt>
<dd>
<pre id="source"/>
</dd>
</dl>
</body></html>

tested on Mac OS X with Firefox, Opera and Safari.

--
Une Bévue
Jun 27 '08 #2
Lee
On Jun 3, 12:03*am, unbewusst.s...@weltanschauung.com.invalid (Une
Bévue) wrote:
ddailey <ddai...@zoominternet.netwrote:

...

I'm using :
<html><head><script>
window.onload=function(){
* document.getElementById('source').appendChild(
* * document.createTextNode(
* * * document.getElementsByTagName('script')[0].text));}

</script></head>
<body>
* <dl>
* * <dt>Source code:</dt>
* * <dd>
* * * <pre id="source"/>
* * </dd>
* </dl>
</body></html>

tested on Mac OS X with Firefox, Opera and Safari.

--
Une Bévue
Try textarea instead of the code tags.
Jun 27 '08 #3
Lee
On Jun 3, 12:03*am, unbewusst.s...@weltanschauung.com.invalid (Une
Bévue) wrote:
ddailey <ddai...@zoominternet.netwrote:

...

I'm using :
<html><head><script>
window.onload=function(){
* document.getElementById('source').appendChild(
* * document.createTextNode(
* * * document.getElementsByTagName('script')[0].text));}

</script></head>
<body>
* <dl>
* * <dt>Source code:</dt>
* * <dd>
* * * <pre id="source"/>
* * </dd>
* </dl>
</body></html>

tested on Mac OS X with Firefox, Opera and Safari.

--
Une Bévue
Try the textarea tag instead of the code tag.
Jun 27 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Martin Ernst | last post by:
Hello. I want to show HTML source code in my browser (for debugging purposes). Which tag/formatting di i have to use to tell the browser not to render the code but display it as pure text? ...
22
by: Brent | last post by:
I want to paste a lengthly text document into a web page and have it retain all of whitespace and line breaks. I first tried the <pretag but that didn't work because it doesn't wrap the text. I...
1
by: programmerboy | last post by:
I am trying to write html tags using <xmp> tag. However, it writes everything in one line only. Is there a way we can format it to look prettier (like an xml document)?
10
by: Remus | last post by:
Greetings, My first time on this forum. I hope someone can help me out. I am trying to get 11 values from several different identically structured webpages. I have the list of webpages saved as...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.