New Blog Format | Hosted on ServerDisk | Site Map
Search:
NewSourceMedia Popular Tutorials: PHP Javascripts Web Hosting
SoftwareTutorials
CATEGORIES
Scripts (2,2351) Podcast (video & audio)
 




Home / Javascripts / Productivaty

Source Include

Published by: Alexander Mclean III
Learn how to save time and money by using the javascript src() function to including local or remote document like headers, footers, css, images, and flash files.



Introduction:

With Javascript, you can save time and money by using the ("src") to include remote or local documents. For example, you may have a web site serving 20 web pages. All 20 pages display the same header and footer item like site name, logos and links. However, if you were to change the header text, you would have to apply those changes all 20 pages manualy. That's not fun. Here is a faster way (View the test page.)

Source Code of included header file (JS-IncludeB.js):

<!--
document.writeln('<center>');
document.writeln('<h2>Top: This was included by js</h2>');
document.writeln('</center>');
// -->

 

Source Code of included footer file (JS-IncludeB.js):

<!--
document.writeln('<center>');
document.writeln('<h2>Top: This was included by js</h2>');
document.writeln('</center>');
// -->

 

Source Code of main page:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="42" valign="top" bgcolor="#66CCFF">
<script language="JavaScript" src="JS-IncludeT.js">
</script>
</td>
</tr>
<tr>
<td valign="top" height="49" bgcolor="#FFFFFF">
<script language="JavaScript" src="JS-IncludeB.js">
</script>
</td>
</tr>
<tr>
<td height="175">
</td>
</tr>
</table>

 

Over View:

First we created two javascript files. Inside of both files we used the javascript's "document.writein()" function to display our html header and footer text.

Secondly we created the main html document that used javascript's "src" function to include our header and footer files. Now if we had to change our header copy, all we would have to do is edit one document, not 20 plus files. Sweeeeet!

Conclusion:

This technique can be applied to all types of situations. For example, instead of creating two websites (a flash site and an html site) we could just create one site using javascript function "src" to include a flash file if a flash plug-in is detected, otherwise it would just include the image file in place of the flash file. This would shorten the time it takes to develop and maintain a web site. The possibilities are endless.

    Comments

  1. KimberlyMon
    07.01.2008

    Thank you. Your tutorial helped me a lot.
  2. KimberlyMon
    07.01.2008

    Thank you for this tutorial. Sure it will help greatly.
  3. Alex
    07.19.2005

    The test view link is now fixed
  4. Ranjan
    07.19.2005

    How can i know the implementation of content management, because your demo page is not opening.

    thanking you.
  5. xulti
    01.15.2005

    Well, That's a very good idea but I have two questions.
    1) What are we supposed to do when we want to make the same thing with an image or with a flash?
    2)Is there a script with which we can keep the images and other stuff and only change the text in order to save time creating an HTML page for each? (i.e. lyrics of songs). Thanks!
  6. alex
    09.06.2004

    You could use loadVariablesNum("params.txt", 0); or loadVariables("params.txt", target_mc);

  7. sam
    09.04.2004

    i am using Swish to create a flash website, i can run Javascripts within the flash file that Swish creates.
    what code would i use to include a .txt file?

    thanks
  8. Alex
    03.12.2004

    As most developer understand that Javascript is not the most reliable tool for creating dynamic website for that reason you should consider using server side programs like PHP, CGI, ASP or Java... ect.

    Take a look at this PHP tutorial that talks about include functions:
    http://newsourcemedia.com/index_view.php?id=56
  9. Claude Gelinas
    03.11.2004

    What if the user visiting the page hasn't activated JavaScript in his browser, then what happens?

    Thanks,

Leave a Comment



Related Articles for Javascripts Productivaty:
Articale Source Include
Learn how to save time and money by using the javascript src() function to including local or remote document like headers, footers, css, images, and flash files.
Articale Telephon Check Box
Javascript code that automatically fills in the telephone number in all places needed after just once entering it and selecting a check box.
Articale Address Auto-Fill Ckeck Box
Javascript code that automatically fills in the address in all places needed on the page after just once entering it and selecting the check box.
Articale Popup Chromeless Window
An easy to use Javascript Popup Chromeless Window.
Articale List of Top Web Hosting sites with
UNLIMITED DISK SPACE





Hosting - List of top Web Hosting Services with FTP and Unlimited Disk Space