473,695 Members | 3,031 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

<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><st yle>
#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.docume ntElement.inner HTML

function display(L){
L.innerHTML+="< code>"+a+"<\/code>"
}
</script></head>
<body onload="display (document.getEl ementById('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 2648
ddailey <dd*****@zoomin ternet.netwrote :

....

I'm using :
<html><head><sc ript>
window.onload=f unction(){
document.getEle mentById('sourc e').appendChild (
document.create TextNode(
document.getEle mentsByTagName( '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...@zoomin ternet.netwrote :

...

I'm using :
<html><head><sc ript>
window.onload=f unction(){
* document.getEle mentById('sourc e').appendChild (
* * document.create TextNode(
* * * document.getEle mentsByTagName( '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...@zoomin ternet.netwrote :

...

I'm using :
<html><head><sc ript>
window.onload=f unction(){
* document.getEle mentById('sourc e').appendChild (
* * document.create TextNode(
* * * document.getEle mentsByTagName( '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
13438
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? E.g. I want <p>Hello World</p>
22
3063
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 then moved to CSS and the white-space property, but I can't seem to get it to work either. white-space: pre does the same as <preand white-space: pre-wrap doesn't seem to be supported by any browsers I've tested with. I tried word-wrap:...
1
1865
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
3154
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 a global array. I am trying to access the sites one at a time and acquire the data using a for loop saving each value into an array that was declared as a global variable. I am trying to access the site from Body of the html and place each value...
0
8640
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8582
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8832
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6498
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5841
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4348
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4587
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2281
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1984
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.