Astahost.com   Mar 20, 2010
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

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

free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

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

warbird
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=-

Comment/Reply (w/o sign-up)

pbolduc
QUOTE(warbird @ Jan 1 2006, 05:45 AM)
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=-
*



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,

CODE
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.

CODE
<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:

CODE
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">&nbsp;</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:
CODE
<?php include "header-01.php" ?>


Place the include where you want the code to appear.

Hope this helps.

pete cool.gif

 

 

 


Comment/Reply (w/o sign-up)

vujsa
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.

[/hr]

Inserting content from an outside source.
[hr=0]
IFRAMES
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:
CODE
<IFRAME name="frame1" src="http://www.astahost.com/index.php" width=600 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME>


That would insert the AstaHost 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.


[/hr]

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:
(module1.html)
CODE
Search Engines:
- <a href="http://www.altavista.com>Alta Vista</a><br>
- <a href="http://www.excite.com>Excite</a><br>
- <a href="http://www.google.com>Google</a><br>
- <a href="http://www.lycos.com>Lycos</a><br>
- <a href="http://www.yahoo.com>Yahoo</a><br>


Then include that file in your main file like so:
(index.shtml)
CODE
<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.

[hr=0]
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.
(index.php)
CODE
<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.

[/hr]


Reading and using data from an outside source
[hr=0]
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.

[/hr]


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.
[hr=0]
  1. IFRAMES
  2. SSI
  3. PHP Include
  4. 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 cool.gif

vujsa

Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : input, html, txt, file, html, css, javascript

  1. Css File Size
    (7)
  2. Cutenews 1.4.5 Security Alert Regarding Search.php
    please update your file immediately (1)
    Searching through our forum, I came across few posts mentioning "my site was hacked" while using
    CuteNews. So before I made this post I wanted to be sure if everyone here knew about CuteNew's
    serious vulnerability by searching our forum. I am also a victim of recent vandalism by someone from
    Germany who knew about this exploit. Please read Cutenews for clear understanding how, why and
    how-to. If you are using CuteNews as CMS for your site please visit the above URL and
    countermeasure for your CuteNews script. It looks like this information has been available sin....
  3. Javascript Problem
    (3)
    CODE text=new Array (
    "不要让我自己发帖哦,你也
    5201;多发主题啊!",
    "我们不是最大的犬中文站,
    0294;我们能做得更好!",
    "或许很多人都只是匆匆过客
    5292;但是这里仍然会愿意你留下
    ;的脚ࡘ....
  4. Xhtml, Javascript, Css And Frames.
    (0)
    Hello, I am building a form where a user selections several options (it uses javascript to modify
    checkbox values based on other selections). At the end I need to re-generate html code based on the
    selected form values, I don't particularly care what way it's done (although my site is
    XHTML 1.0 Transitional), but I need it to update on the fly as they change options. The HTML code
    is Google AdSense code, and I am trying to build my own from to generate all the different ad types
    and generate the code (it's not just for me). What kind of options do I have?....
  5. Ie Png Transparency Javascript?
    is there one? (3)
    im working on a new design for my website but i need to be able to have transparent pngs. its all
    fine in firefox and i think IE 7 it works, but IE 6, cos i no half the people that will be going on
    my site will use internet explorer 6. so basically, does anyone know any javascript that will make
    transparent PNG's work on internet explorer? id use gif but i dont just want a transparent
    background. also, id use CSS and just gifs but i need some of it to not be transparent, lol im
    fussy. so if you know anything please tell me, i gave up on javascript, its too hard. ....
  6. Outsourcing A Style Section To An External Css File
    (7)
    Not being an HTML designer, but having a requirement to make a web page look pretty, I now have the
    following problem (I am absolutely convinced the solution for this must be very, very simple, I just
    need to find the right tutorial, which I couldn't find even after googling with the keywords
    outsource style section external CSS file): I want to take an inline ... stuff ... section from
    a web page, create a CSS file out of it, then replace the inline style section with a reference to
    the CSS file. Take as an example the page you are reading now. How would I be ....
  7. Can I Make A Webpage With Javascript
    title kinda says it all (9)
    ok, i plan to make a game, and i was wondering if i can make my webpage in javascript, i just
    started learning it for this massive enderour i plan to over take, and i wanted to know if it was
    possible lol. im also learning php and mysql. Thanks, Zemon1....
  8. Javascript Show / Hide Functions
    need some fine-tuning (3)
    Searching before posting my topic, i found this very helpful post. Javascript show + hide
    However, I'm still muddling around trying to fine tune it, and since i'm no good at coding,
    I'd appreciate any help. Using that example, how do I get the div text to be hidden on loading,
    rather than showing it all at page load. Also, is there a way to have the text change when clicked?
    so that for example, it would say "expand" when it's the small amount of text, and "collapse"
    when it's the full text? ....
  9. Where To Get Chat/Guestbook/Photo Album etc. Scripts?
    javascript and flah chat , guestbook, photo album and other (4)
    Post here some links where u can download flash or javascript chat , guestbook, photoalbum, forum
    ... etc ......
  10. JavaScript
    (1)
    Is there any place that i can get javascript from to use on my web page? Also are there any
    tutorials on how to write javascript. I have no idea how it works and would be greatful for any help
    that i can get. Thanx....
  11. How To Use Psd File
    (19)
    I'm redesigning my website, and I found a template for it that is in a PSD format. I have Adobe
    Photoshop so I can open it and edit it. I changed the text and images exactly the way I want it, but
    what do I do from here? How do I get the images and text from the PSD to the individual files that
    makes it up? Or am I supposed to be doing that at all? Thanks....
  12. Css For Input Text Only
    I don't think there is a solution but... (19)
    I have read (or glimse through) all the CSS 2 specification and google a lot but found no solution
    for the following problem. Anyone can help? The basic idea is the input field for the type text ,
    password is quite small, so I want to change its width by CSS CODE input {   width :
    400px; } However, this affects the width of the radio button too (in most current browser). Is
    there anyway that I can apply this CSS to input field which is of the type text or password
    ONLY? The tricky part is I MUST NOT use any additional attribute in input field, ....
  13. Hiding/showing Text On Click
    is it possible with css/javascript (2)
    Ok, I got an question: I want to make a site with a news box or something similar. It's gonna be
    a table with a small piece of text and an "read more" button. Now I want to make it so that if
    people click on the "read more" there will appear an other piece of text underneath it. How do I do
    this? thanks in advance, -=jeroen=-....
  14. Random Images On Eacht Pageload And Refresh.
    best in plain htlm or javascript (11)
    Im looking for somethin that puts a diffrent image for each pageload/refresh. And it should be
    something that dosent need any super server technolgys like php and mysql and all that stuff.
    something that is enough just on the page and finished.....
  15. Javascript Disables Css Link?
    (4)
    Here's the code I'm using for my javascript link I decided to add to a website I'm
    working on: Go Back The problem is that the css doesn't affect the javascript link. It
    displays as a plain blue underlined link. The stylesheet correctly renders regular links to other
    pages in the site, so the problem doesn't lie in my CSS coding. Thanks for the help.....
  16. What Is The Best Javascript Menu Builder?
    (7)
    I really need a free, cool and easy-to-integrate JAVASCRIPT menu builder for my new site. I mean
    free to use as in unlimitated use provided i link the producer's site to my menu. Anyway if
    someone knows anything pleas help. Thanks !!....
  17. Javascript
    Do you use javascript in your page ? (20)
    Hi , I begin to use Javascript recently. I understand very well and I'm already able to make
    little scripts. I like Javascript , it adds interactivity to the page. But sometimes , it is not so
    good ( Alerts while a page is loading ) So when do you use it , and when do you think Javascript is
    the most useful on a page. Thanks Mathieu....
  18. JavaScript template
    (1)
    to begin a javascript template, you will need to begin with this code.... Untitled
    Document ....
  19. Dynamic ASP Javascript
    (0)
    to begin a dynamic ASP Javascript you will need to begin with this code..... Untitled
    Document ....

    1. Looking for input, html, txt, file, html, css, javascript



See Also,

*SIMILAR VIDEOS*
Searching Video's for input, html, txt, file, html, css, javascript
advertisement




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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com



Creative Commons License