hi fellas
Description: This script uses Ajax to enable you to load external pages into a DIV without having to reload the browser or use IFRAMES. If your external pages reference any external .css or .js files for styling, this script can also load and apply them to the page on demand.
Note: Due to security limitations, the external pages loaded must be from the same domain as the encompassing page. Any external .css and .js files associated with these pages, however, can be from any domain.
Demo (Load an external page or style/javascript file associated with them) Download demo. :
Porsche Page Ferrari Page Aston Martin Page
Dynamic PHP page: DD Forum archives
Load CSS & JS files Load "style.css" and "tooltip.js"
Choose a page to load.
The "Forum Archives" link illustrates how you're not limited to just loading html pages, but also dynamically generated pages (ie: php). The last link shows how you can invoke external .css and .js files on demand to the page, such as when loading an external page, to style and provide functionality to it.
Directions
Step 1: Insert the below script to the HEAD section of your page:
Select All
Step 2: Once that's done, simply create links that will load an external page into the desired DIV or container using one of the below syntax:
Normal link:
<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
<div id="contentarea"></div>
In the above case, "test.htm" is the file on your server that you want to load, and "rightcolumn", the ID of the container that this content will be loaded into. You can even load an external page without requiring the click of a link, by calling the function directly:
<script type="text/javascript">
ajaxpage('test.htm', 'rightcolumn') //load "test.htm" into "rightcolumn" DIV
</script>
Load absolute URL link:
Here's a different link syntax that references an absolute URL to the file on your server:
<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a>
<div id="contentarea"></div> This will load "http://www.mydomain.com/mydir/index.htm". Here the important thing to note is the "rootdomain" variable. Instead of specifying literally the domain of your server, such as "http://www.mydomain.com", you should instead use "rootdomain" and let the script dynamically determine this domain. The reason for this is due to the two possible ways your domain can be entered, either with or without the "www" prefix. This variation creates a problem in that if you hard coded your domain inside the link using one version ("http://www") and the user is viewing your site using the other ("http://"), to Ajax, the two domains don't match, triggering the security limitation mentioned above, and the file is not loaded for that user. The "rootdomain" variable takes care of this by dynamically determining your current domain name as the user is using inside his/her browser to construct a full URL to the file to load.
Using a drop down menu to load the links
Some people have asked how to use a drop down menu instead to select and load a link. You can use the following code:
<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)
}
</script>
<form>
<select id="ajaxmenu" size="1">
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
<input type="button" onClick="ajaxcombo('ajaxmenu', 'contentarea')" value="Go" />
</form>
<div id="contentarea"></div>
where "ajaxmenu" is the ID
Regards
Chronis Tsempelis
Marketraise Corp.
Suite 200 and 400,
41-A East Merrick Rd.,
Valley Stream,
NY 11580
Cell: 516-398-0996
Tel: 516 887 1929.
CSS Codes
Reply With Quote
Bookmarks