LinuxQuestions.org
View the Most Wanted LQ Wiki articles.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices

Reply
 
Search this Thread
Old 01-21-2008, 02:11 PM   #1
craig467
Member
 
Registered: Jun 2005
Location: Maine
Distribution: Red Hat 9
Posts: 65

Rep: Reputation: 15
View As HTML / View As Text button


I am trying to make example pages - when I come across something I have never done before, I like to make example pages that show me the code to do that specific task.

I thought a good way to do this would to create a web page listing examples. Then clicking on each example would produce the output of the item that I am examplifying. Then I would like to push a button at the top that says "View as HTML /View As Text". That way I can see the code and the output that produced it with out haveing to retype code ect.

How could I do this or does anyone have any other ideas? Thanks.
 
Old 01-21-2008, 04:21 PM   #2
rednuht
Member
 
Registered: Aug 2005
Posts: 239
Blog Entries: 1

Rep: Reputation: 30
not entirely sure what you are asking, but the web page bit can be done with CSS and JavaScript very easily.
You enter each component as a new <div> with a unique id then as onclick events from buttons use JavaScript to hide/unhide the divs
Code:
document.getElementById("id_of_div_to_hide").style.display = "none";
document.getElementById("id_of_div_to_show").style.display = "block";
are you asking for code to format source code on a web page ?
 
Old 01-21-2008, 04:40 PM   #3
boughtonp
LQ Newbie
 
Registered: Feb 2007
Location: South Croydon, UK
Posts: 20

Rep: Reputation: 0
You can use document.getElementById('id').innerHTML to access the contents of an element.

Unfortunately the browsers (particularly IE) will fiddle with your code behind the scenes, so innerHTML is not an exact replica of what you put in.
However, this is a quick example of how to achieve close to what you want...

Code:
<div id="example1">
	<strong>This is an example</strong>
</div>

<pre id="example1_code"></pre>

<button onclick="showHtml('example1')">Show HTML</button>

<script type="text/javascript">
function escape(text)
{
	var result = text.replace(/</g,'&lt;');
	result = result.replace(/>/g,'&gt;');
	result = result.replace(/"/g,'&quot;');
	return result;
}

function showHtml(id)
{
	var code = document.getElementById(id).innerHTML;
	document.getElementById(id+'_code').innerHTML =  escape(code);
}
</script>

You can use the already mentioned style.display to handle if you only want to show one or other at a time.
 
Old 01-21-2008, 04:43 PM   #4
craig467
Member
 
Registered: Jun 2005
Location: Maine
Distribution: Red Hat 9
Posts: 65

Original Poster
Rep: Reputation: 15
I am trying to show the source code and the results of the source code on a web page. I thought it would be nice to be able to look at a page to see if it is what I want to do, then be able to show the source code on the page so that I can swipe, copy and paste the code into whatever I am working on.

Is that any clearer?
 
Old 01-22-2008, 04:54 PM   #5
rednuht
Member
 
Registered: Aug 2005
Posts: 239
Blog Entries: 1

Rep: Reputation: 30
Quote:
is that any clearer ?
No

Are you talking about HTML, JavaScript, C, Perl, or other source code ?
Are you talking about code genterated output in realtime (either server side or client side) ?

is the source code to be styled (keywords highlighted etc).

The way I would think about this is to simple design and populate a complete web page containing all the data, then use JavaScript and CSS to hide the initialy unwanted parts and unhide them on command.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
KDE Konqueror View Mode Icons (Image Preview/Tree View) sadarax Linux - General 7 06-27-2006 12:45 PM
can't view html pages in IE thisObject Linux - Software 4 05-07-2006 10:55 AM
How to config a 'desktop view button' in Gnome guarriman Fedora 2 07-05-2005 02:24 AM
what happened to the 'view all posts from the beginning' button? veritas LQ Suggestions & Feedback 3 02-04-2004 08:15 PM
can't view apache index.html jefftrwmy Linux - Software 1 04-24-2002 08:57 PM


All times are GMT -5. The time now is 04:21 PM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration