simple way to display data in a .txt file on a webpage? - html

Working on a project, one of the webpages will display a list of people (specifically, a list of people from a graduation class that haven't been located yet).
Instead of manually updating these lists in tables which is a boneheaded Web 1.0 way of doing it, I'd like to take the submitted list of names, convert them to a simple .txt list, and then display that list on the webpage.
So far, the easist way to do this is to use an iframe element... only thing is, I cannot (or don't know how to) apply any text styling to the contents of the iframe. I've published a sample of what I've been able to accomplish here: http://dongarber.com/test//helpus-iframetest.html
The default font is courier, and the client probably ain't gonna be too keen on it.
Is there a better way to do this, that's doesn't require ASP.NET or a database?
#list p {
font: arial;
font-size: 14px;
}
...
<p>Help us locate all of our classmates from the High School class of 1961. If you know where they live or their e-mail addresses contact the Reunion Committee.</p>
<p> </p>
<div id="list"><p><iframe src="missingmen.txt" width=200 height=400 frameborder=0 ></iframe></p></div>
</div>

Easy way:
Rename missingmen.txt to missingmen.html.
Add a single line to the top of missingmen.html:
<link href="txtstyle.css" rel="stylesheet" type="text/css" />
Create a file called txtstyle.css, and add to it a line like this:
html, body {font-family:Helvetica, Arial, sans-serif}

In more recent browsers code like below may be enough.
<object data="https://www.w3.org/TR/PNG/iso_8859-1.txt" width="300" height="200">
Not supported
</object>

I find that if I try things that others say do not work, it's how I learn the most.
<p> </p>
<p>README.txt</p>
<p> </p>
<div id="list">
<p><iframe src="README.txt" frameborder="0" height="400"
width="95%"></iframe></p>
</div>
This worked for me. I used the yellow background-color that I set in the stylesheet.
#list p {
font: arial;
font-size: 14px;
background-color: yellow ;
}

If you just want to throw the contents of the file onto the screen you can try using PHP.
<?php
$myfilename = "mytextfile.txt";
if(file_exists($myfilename)){
echo file_get_contents($myfilename);
}
?>

How are you converting the submitted names to "a simple .txt list"? During that step, can you instead convert them into a simple HTML list or table? Then you could wrap that in a standard header which includes any styling you want.

That's the code I use:
<?php
$path="C:/foopath/";
$file="foofile.txt";
//read file contents
$content="
<h2>$file</h2>
<code>
<pre>".htmlspecialchars(file_get_contents("$path/$file"))."</pre>
</code>";
//display
echo $content;
?>
Keep in mind that if the user can modify $path or $file (for example via $_GET or $_POST), he/she will be able to see all your source files (danger!)

You cannot style a text file, it must be HTML

Most easy and simple way to show file on your web page
Here is a screenshot. You can see here a pdf and txt file.
Sample Screenshot of TXT file rendered on HTML using iframe.
<iframe
src="full_file_path_here"
frameBorder="0"
class=""
scrolling="auto"
height="100%"
width="100%">
</iframe>

You can add it as script file.
save the txt file with js suffix
in the head section add
<script src="fileName.js"></script>

Related

Separating HTML page into 'objects'

So i have an HTML file my problem is i want to create an "About Me" section in one DIV section, the issue is the About Me section is rather long and contains a lot of text and as a result of that makes the code look untidy. I mean from a functionality point of view it works but i like making HTML files look as good as i can.
Is there someway i can link my about me section from a separate HTML file containing just that info, almost has is if it was a separate class in OOP and i am in essence just calling to an 'About Me' object?
You can simply use an <iframe> for that, pointing to your other HTML file.
<html>
<head>
..
</head>
<body>
...
<iframe src="link/to/your/file.html" scrolling="no" frameborder="0" ></iframe>
</body>
</html>

Stopping imported html content overriding CSS

I have a page on my site where I'm displaying HTML email.
Some of that email seems to come with CSS that overrides my site layouts such that certain things get misplaced...
e.g. I have a toolbar at the top of the page that on some mails covers the various header information from the email.
Is there a way of creating a div where I can put the html email with a layout that effectively says 'Stay in this div and don't bugger about with anything else'?
Worth noting that I have the html content as 'text' rather than referring to an external website. (It's actually a return from an API, but assuming the same restrictions apply)
%iframe{srccode: #mail.html}
Just gives me a blank iframe
Include your mail using an IFrame similar to this:
<iframe src="http://www.w3schools.com"></iframe>
This will keep the styles separate
see http://www.w3schools.com/tags/tag_iframe.asp for options to customize the IFrame
If using html as text (rather than referencing an existing page:
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
You may be able to incorporate the scoped style:
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>
worth noting: this feature is still experimental and is not widely supported by 2015 browsers, currently, only FireFox v21.0+ supporting this feature. (more info # w3school.com)
Reference: https://css-tricks.com/saving-the-day-with-scoped-css/
Dave's answer above
<iframe src="http://www.w3schools.com"></iframe>
is good for referencing an external site, or a page that exists as html.
If using html as text (rather than referencing an existing page):
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
And then formatting the iframe to suit does the trick.

Is there a tool to take css classes and make them inline?

This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.

How can I display the href as the text too?

I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>

Is there a way to compare the appearance and/or source HTML of 2 browser tabs?

I'm working on a web based application, and in order to test my changes, I'd like to be able to compare the visual rendering (perhaps by way of overlaying) and the source HTML (diff style) of 2 browser tabs (development vs production). I'm happy to use any browser to do this.
I've already got a couple of scripts that pull the HTML from 2 sites and compares them, but it's tedious outside of a browser and doesn't easily handle the situation where there are session based clickstreams to get to the pages that I'd like to compare. I've also copied and pasted the source into a comparison tool manually, but again this is quite tedious.
Any tips?
The Firefox PageDiff plugin looks like it might be of some help. It shows you the diff of the source of two tabs. Install the plugin, right click on the first page and select "Start DIFF", and right click on the second and select "Show DIFF". The diff is shown in a separate popup, and gives you a side-by-side of the generated source and a summary of line differences at the top.
Comparing page rendering seems like a useful enough task to warrant its own Firefox plugin. I'll keep an eye out for any that might be of service. If you're just worried about layout, the GridFox tool might be handy, but I haven't seen anything that does this automatically.
Would it be worth it to try some sort of GUI automation scripting?
Weird idea- I'm not a web guru, but if you need an overlay of two different pages on the same browser, why not create an HTML file with two overlaid iframes in divs, src attributes set to your two different pages, and lower the opacity of the top div? Put it on a local web server and you can have your favorite server-side tech give it to you in response to GET data containing the URLs. Heck, if anyone interested knows about writing Firefox extensions, it doesn't seem like it would be too difficult...
In fact, I just finished a demo of said overlaid iframes here. Just change the GET data and you can compare any pages you'd like. The PHP is painfully simple, though figuring out iframe opacity took some googling.
<html>
<body style="opacity:.5;">
<div style="opacity: 0.5;">
<iframe src="http://<?php echo $_GET["site1"];?>" style="position: absolute; width:100%; height:100%;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe src="http://<?php echo $_GET["site2"];?>" style="position: absolute; z-index: -1; width:100%; height:100%" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
While this seems pretty handy for layout, if you're worried about color differences- or, obviously, inter-browser differences- you'll have to try something else.
One cheap workaround, if you're using linux, is to use a window manager that lets you easily adjust the transparency of windows with a keyboard/mouse shortcut. Then overlay two windows, one with each version of your page open, and use the transparency adjustment shortcut to fade between them.
Of course, this doesn't address the html code comparison issue.
Sounds like your looking for Microsoft SuperPreview.
http://expression.microsoft.com/en-us/dd819431.aspx
I believe that it only a Beta/Preview but it looks really promising.
For code I think you can save the files on your local disk and use WinMerge tool to compare them.
For comparing the UI,
1. Please check Expression Web Super Preview. It is a standalone tool available for free download.
2. You can also use http://browsershots.org/ for the same purpose
I hope this helps. :-)
By using QtWebKit you can:
Load any page.
Navigate it from code or by evaluating some JavaScript in it. So you can fill-in login form and post it.
Access source and DOM of the page, including modifications done from JavaScript.
Take screenshot and save it as image.
See this blog post if you'd like to avoid real GUI running.
No need to code in low-level C++ since Qt has excellent Python binding - PyQt.
I've adapted Matt Luongo's accepted answer regarding the visual comparison of browser rendering into a static overlay page using jquery. It doesn't work in IE7, but works in firefox. It's pretty flexible, but I imagine it will need minor tweaks for use (start by pointing to your own jquery include)...
<html>
<head>
<script src="/javascripts/jquery/jquery-1.3.1.min.js" type="text/javascript" ></script>
<script>
$(window).load(function() {
$('#go').click(function() {
$('#f1').attr('src',$('#p1').val() + "/" + $('#url').val());
$('#f2').attr('src',$('#p2').val() + "/" + $('#url').val());
});
$('#opa').toggle(function() {
$('#transdiv').css("opacity","0.75");
},
function() {
$('#transdiv').css("opacity","0.25");
});
});
</script>
</head>
<body style="opacity:1;">
Prefix 1: <input id="p1" value="http://testsite.foo.com"/>
Prefix 2: <input id="p2" value="http://comparisonsite.foo.com"/>
URL: <input id="url" value="mypage.html" /> <button id="go">Go</button>
<button id="opa">Toggle opacity</button>
<div id="transdiv" style="opacity: 0.5;">
<iframe id="f1" src="about:blank" style="position: absolute; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe id="f2" src="about:blank" style="position: absolute; z-index: -1; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>