Jump to content
xisto Community

Get Input From Html/txt File? with just html/css and maybe javascript?

Recommended Posts

I was just wondering if it's possible to retrieve text (and maybe images) from a .html or .txt file. So for example you get the header and footer from an external file. Is it possible with just html/css and maybe a little javascript or does it require server side scripting like php???-=jeroen=-

Share this post

Link to post
Share on other sites

I was just wondering if it's possible to retrieve text (and maybe images) from a .html or .txt file. So for example you get the header and footer from an external file. Is it possible with just html/css and maybe a little javascript or does it require server side scripting like php???




You can use javascript to bring in headers, footers, and just about anything you want.


Here is a javascript I use to bring in an image roll that changes the pic everytime the page loads,


function imgroll(){  var myimages=new Array()  //specify random images below. You can have as many as you wish  myimages[0]="images/imgrolls/140x350/140x350-01.jpg"  myimages[1]="images/imgrolls/140x350/140x350-02.jpg"  myimages[2]="images/imgrolls/140x350/140x350-03.jpg"  myimages[3]="images/imgrolls/140x350/140x350-04.jpg"  myimages[4]="images/imgrolls/140x350/140x350-05.jpg"  myimages[5]="images/imgrolls/140x350/140x350-06.jpg"  myimages[6]="images/imgrolls/140x350/140x350-07.jpg"  myimages[7]="images/imgrolls/140x350/140x350-08.jpg"  myimages[8]="images/imgrolls/140x350/140x350-09.jpg"  myimages[9]="images/imgrolls/140x350/140x350-10.jpg"    var ry=Math.floor(Math.random()*myimages.length)     document.write('<img src="'+myimages[ry]+'" align="right" border=0>')}  imgroll()

Whatever is between single quotations in the:


document.write('<img src="'+myimages[ry]+'" align="right" border=0>')


line will print on your page when called in by a script tag.


<script language="" src="js/imgRoll.js"></script>

Just place the script tag where you want it to appear on yor page. In this example the javascript is saved as: imgRoll.js in the js folder and the above tag calls it in.


The problem here is the code between the single quotations must be optimized which makes it difficut to make quick changes when required because the code runs together and is not spaced.


Here is a sample code I use to call in some html code on my recommendation page:


recommendCode = '<table class="mcOuterTable" height="100%"cellpadding="0" cellspacing="0" align="center"><tr ><td style="height: 1%"><img id="mcHeader" src="images/headers/recommendus-550x50.JPG" border="0" width="550" height="50" alt=""></td></tr><tr><td style="height: 385; border: 1px solid #CCCCCC"> </td></tr><tr><td style="height: 1%"><img src="images/footers/ffapb-550x35.jpg" border="0" width="550" height="35" alt="" align="middle"></td></tr></table>';  document.write(recommendCode)

The file is saved as: recCode.js and is called in by the tag: <script language="" src="js/imgRoll.js"></script>



If you are calling in a large piece of code such as a page header or footer it is better to use php. You to not really have to understand php to take advantage of it include capabilities.


If you have php available on your server simply save the page you want to bring text or code into with a php extention. Then create your header or footer file with whatever extention (.html, .js, .htm etc.). You call it in with with a simple php include tag:

<?php include "header-01.php" ?>

Place the include where you want the code to appear.


Hope this helps.


pete :D

Share this post

Link to post
Share on other sites

Assuming that what you whant to do in insert the contents of one file into your webpage, I have several options I'll discuss. Additionally, if what you want to do is select certain content out of another file and insert it in to your webpage I have very few options I can discuss with you.


Inserting content from an outside source.



The <iframe> tag can be used to insert a file's content into your webpage. It will insert the entire file so you can actually show another website's page in your page.


The following code is the correct use of the <iframe> tag:

<IFRAME name="frame1" src="http://forums.xisto.com/index.php&; width=600 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME>
That would insert the Xisto forum index page into your page whereever you inserted the tag.


The IFRAME acts as a seperate entity inside your webpage and requires additionally coding to allow thw user to interact with the frame contents. The frames contents can't control the parents content so an IFRAME is not usable as a means of navigation of the website. Basically, you can't create a single link menu file for your website and use an IFRAME to insert it into you webpages.



SSI (Server Side Includes)

A server side include can be used to insert content into you webpage and gives much more control over what is displayed and how. Unlike the IFRAME, the SSI will directly insert the content into your webpage. As a result, the included content is a part of the main page and wil act like any other part of the webpage. Works great for headers, footers, menus, and advertisements.


An SSI is used like this:

First, create the content to be included:


Search Engines:- <a href="http://search.yahoo.com/?fr=altavista Vista</a><br>- <a href="http://www1.excite.com/security/0,17167,,00.html;- <a href="https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl;- <a href="http://www.lycos.com/;- <a href="http://yahoo.com/;
Then include that file in your main file like so:


<html> <head>  <title>This is an SSI test</title> </head> <body>Some Content Here!<!--#include file="module1.html" -->More Content Here! </body></html>
The downside to using SSI is that not all servers have the option availible. As a result, there isn't a lot of information about the command because most people that would have wanted to use the feature didn't have access to it on their host. Another downside to using SSI is that you usually need to tell the server when you want to use it by using the .shtml file extention instead of the .html extention. So to add SSI to your entire website, you would need to change all of your HTML files to SHTML files and of course change all of your internal links. You would also need to update your url at any other websites that link to your website. I would suggest revamping the entire website and leave your index.html intact with a redirect to the index.shtml. This will reduce the number of broken links on your website.



PHP (PHP Hypertext Preprocessor)

Using the PHP include() or even require() functions is similar to the SSI option. The real difference is that PHP will work on any host that has PHP enabled. It doesn't matter what version of PHP you have, this will work. Since PHP is so widely offered these days, it will be easy to use this command.


The PHP include function will include the contents of the entire file being included into the main PHP file. Like the SSI option, the content of the included file is inserted in raw form into the mainpage. So the file can include code bits, text, or html. The end user will have no idea that the page was put together from more than one file.


To use the include function you'll first need to write the file to be included. For today just reuse the module1.html file from the SSI section.

Since PHP will not interpret the contnents of the included file, you can give the file any extention that you want. It will just open the file and dump the contents into youe page where ever you insert the command.


Here is your PHP file.


<html> <head>  <title>This is a PHP include test</title> </head> <body>Some Content Here!<?php include("module1.html"); ?>More Content Here! </body></html>
This will result in the same output as the SSI option.


Although there is wide support for PHP, you will still have the same setback as SSI in that you will need to tell the server when you want to use PHP by using the .php extention.



Reading and using data from an outside source


By no means should this process be considered easy considering the number of PHP functions you would need to learn before starting. I'll try to give a basic rundown of how this works.


First you'll need to know exactly what it is that you want from the remote file. This is used for displaying the user's weather on your website or even displaying your favorite stock quotes on your site. You'll need to figure out a way to identify that data only and ignore all of the rest of the files content. You'll need to used a number of regular expressions to filter the data. This is not an easy task and I couldn't begin to try and explain it all.


Next, you'll need to actaully read the file. To do this, you'll need to use the PHP get_file_contents() function. Once you have the contents you'll apply whatever method you came up with to filter out the unwanted data. Now all you need to do is output the data you retrieved.


Since this requires so much coding in PHP prior to even beginning to create your page, I don't recommend it for new PHP users.



Here is a list of related resources that you may find helpful in deterimining which option to use or how to do use more advanced commands.






PHP Include



Remote File Reading


I hope that this information will be useful to you. If you have more questions regarding any of these options, please feel free to post them here or in a forum category that is directly related to the topic. I as well as many others will be happy to answer any further questions.


Good Luck :D



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | 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.