|
HTML - Frames & Dynamic Content
Similar Tutorialshii, i'm using a 3 html frames in my web page, top, left and rite content frames. i'm using draggable frames, every thing is fine, but i want to show my user session time out in that main page(containing 3 framesets), below is the code. i dun know waht had happened, the content is not getting displayed except the title. can anyone please help me.. below is my code Code: <html dir='ltr'>
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; CHARSET=UTF-8">
<META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1">
<META HTTP-EQUIV="Refresh" CONTENT="1800;
URL=http://localhost/Project/sessiontimeout.php">
<link rel="shortcut icon" href="http://localhost/Project/images/trrlogo1.ico"/>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="http://localhost/Project/css/timer.css">
<script type="text/javascript" src="http://localhost/Project/scripts/timer-src.js" /></script>
<script type="text/javascript" src="http://localhost/Project/scripts/zdragdroplib.js"></script>
</head><body>
<script type="text/javascript">
document.write(getWarning());
</script>
<div id="warningDiv"></div>
<img src="http://localhost/Project/images/load.gif" onLoad="initTimer();">
<script language="JavaScript">
var frame = '<FRAMESET ROWS="117,*"><frame name="UniversalHeader" title="Portal Header" scrolling="no" frameborder="0" noresize src="http://localhost/Project/leftmenu.php"><FRAMESET COLS="238, *"><FRAME name="NAV" frameborder="0" framespacing ="0" scrolling="auto" marginheight="0" marginwidth="0" target="_blank" SRC="http://localhost/Project/leftnavigation.php"><FRAME name="TargetContent" scrolling="auto" frameborder="0" marginheight="0" target="_blank" SRC="http://localhost/Project/MainMenuframe.php"' ;
var pos = document.location.href.indexOf("?http://");
if (pos>0) {
frame += document.location.href.substr(pos+1);
} else {
frame += 'dc_toc.html';
}
frame += '"></FRAMESET></FRAMESET>';
document.write(frame);
</script>
</body>
</html>
i cannot see any content except the title.. please suggest me how to proceed.. Many Thanks. I am making a website and need to display some web content in several dozen parts of the page. The web content is made up of php scripts, and I don't really want to have to make copies of it all over the place, so I was hoping to use frames. A simplified example of what I want to do is this: I have a website at example.com, now I have a subdomain at a.example.com. I want a.example.com to look exactly the same as example.com (I want to be able to navigate through a.example.com exactly the same way I would through example.com). None of my links are absolute (ie. they're all /this/is/a/subdir), so I assume this is possible. Can someone point me in the right direction here please? I'm not new to html or php but have never used frames before. http://www.walterdecantelupe.co.uk/n...c-content.html I have been working on calling external html files into divs on another page and can't seem to get it right! I can't see what I am doing wring here! Please help. Cheers - Mas The original files are available here http://www.dhtmlgoodies.com/scripts/...ic-content.zip Html HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ajax dynamic content</title>
<style type="text/css">
/* This css is only needed for the demo */
body{
margin:10px;
font-size:0.9em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
background-color:#E2EBED;
height:100%;
}
a{
color:#F00;
}
#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
background-color:#FFF;
height:100%;
padding-bottom:10px;
}
#mainContainer .news{
margin:5px;
border:1px dotted #555;
background-color:#EEE;
padding:10px;
}
#mainContainer img{
float:left;
margin:2px;
}
div#header{
border:0px;
background-color:#FFF;
padding:0px;
margin:0px;
height:100px;
}
h2{
font-size:1.3em;
margin-bottom:5px;
}
p{
margin-top:0px;
}
.clear{
clear:both;
}
h2{
color:#000;
}
#news2{
height:150px;
}
.header{
padding-left:5px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax.js"></script>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax-dynamic-content.js"></script>
<script type="text/javascript">
ajax_loadContent('news1','http://www.walterdecantelupe.co.uk/new/external/externalfile1.html');
ajax_loadContent('news2','http://www.walterdecantelupe.co.uk/new/external/externalfile2.html');
ajax_loadContent('news3','http://www.walterdecantelupe.co.uk/new/external/externalfile3.html');
</script>
</head>
<body>
<div id="mainContainer">
<p class="header">The content of the three boxes below are loaded by Ajax(Asyncron Javascript And XML) from external files.</p>
<div class="news" id="news1"></div>
<div class="news" id="news2"></div>
<div class="news" id="news3"></div>
</div>
</body>
</html>
Introduction: Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain Note: Read the answers to Frequently Asked Questions in the next post! Hasn't this been done before? Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details. If your question is somewhere in the realm of one of these, you're in the right place: How do large websites manage their content? How do I make the same content appear in multiple pages without copy/pasting? How do I automatically update parts of different pages, without editing every file? How do I avoid duplicating code in multiple files? Is there an alternative to IFrames? The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below. Basic Concept: Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity): Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> </head> <body> <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> </body> </html> This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page. In order to avoid this, we separate our menu from the rest of the page like so: Code: <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> Save it in a file, and then place an include on every page where we want to display the menu: Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
code for including menu would go here
</body>
</html>
This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include. The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice. Note: The attached zip contains working examples of all three methods. PHP Includes: General Requirements: Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP. Required Filetypes: By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php). Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more. Syntax Here are two ways to include a file in PHP: PHP Code: <?php include('file_to_include.html');?> or: PHP Code: <?php include 'file_to_include.html';?> Note that you can also include full URLs if URL file-access is enabled in your server's configuration: PHP Code: <?php include("http://www.google.com/");?> Code Example: (some_page.php) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Include</title>
</head>
<body>
<?php include("menu.html");?>
</body>
</html>
Server Side Includes (SSI): General Requirements: Your web-hosting provider must support Server Side Includes, which most of them do. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml). Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more. Syntax Here are two ways to include a file using SSI: Code: <!--#include file="menu.ssi" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory. Code: <!--#include virtual="includes/menu.ssi" --> Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes Code Example: (some_page.shtml) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SSI Include</title>
</head>
<body>
<!--#include file="menu.ssi" -->
</body>
</html>
ASP Includes: General Requirements: Your web-hosting provider must support ASP. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp). Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more. Syntax Here are two ways to include a file using ASP (The syntax is exactly the same as SSI): Code: <!--#include file="menu.html" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory. Code: <!--#include virtual="includes/menu.html" --> Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes Code Example: (some_page.asp) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP Include</title>
</head>
<body>
<!--#include file="menu.html" -->
</body>
</html>
I've heard many times "don't use frames, there is better ways to accomplish it", and I was wondering, is this just referring to "invisible" frames, or any frames? For example, look at Kingdom of Loathing. They use frames (or what appears to be frames) and I can't see how they could successfully make that site without. If I had to have all the screens scroll as one rather than separate, and couldn't resize when I needed to, it would be extremely annoying. So, frames are bad, or just the invisible ones? Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe I'm wanting my website to not cover the entire screen. Like only be 85% of the width of screen so the a background would be visible around the edge of the actual content of the site. Can this be done with frames? I tried but couldn't get it to, but didn't know if there was some other way. I know it could be done with tables, I just thought it would be easier with frames...if possible. Thanks, Justin look i know that frames are bad but i have a good cause to use them XD all im wondering is - "For every one of the frames that i use, in the source file of the frame will i need to put the standard tags e.g. doctype, html, head, body, meta, title or can i just start with the code and it will work????" never used frames before so this is why im asking??? personally i think i will need to put in the standard tags because frames work differently to the PHP include function which practically copy and pastes the code into the file where you put your include function if im not mistaken??? Anyways thanks in advance Marcus =] hye, i just want to ask. using frames is secure or not?and how to fix it as secure. hopefully someone can answer my question, i really curious to know about that. tq~ Hey, I'm a html noob building a website for html. I have frames set up so that it is 3 columns. In the middle column there are three rows (Header, menu and content respectively). The problem I'm having is, although I've made the frames so that they can't be dragged to alter their size, when the user resizes the window the frames get resized and all the content (including banner, menu buttons etc.) get cut off or pushed into "no mans land". Id like one of the following to be possible: - How do i make the window so it opens at a specific size, and cant be resized. - Or if the window has to be resizable, can i set a minimum point the frames can be resized to. - Or how do i make the content so that it doenst go to the s***house. - Or how do i make the frames so they aren't resized when the window is... Bellow is a picture and my coding so you can see what's wrong: (in the picture you can see the banner being cut off, the buttons havent been cut off yet as the window is still big). <body properties="fixed"> <frameset border="3" bordercolor="#000000" rows="100%"> <frameset cols="20%,60%,20%"> <frame src="backdrop.html" name="lbackdrop" noresize scrolling="no"> <frameset rows="25%,10%,65%"> <frame src="header.html" name="header" noresize scrolling="no"> <frame src="menu2.html" name="menu" noresize scrolling="no" <frame src="main.html" name="mainwindow" noresize scrolling="no" </frameset> <frame src="backdrop.html" name="rbackdrop" noresize scrolling="no"> </frameset> </frameset> </body> Thanks in advance Hey, http://www.artistrichardcook.co.uk/src/ - here is the start to a website I am making for my art college which exists of two frames. A left (with the links) and the main frame (with the content). Simple. However, due to it being a frame and the obviously long list of links, when my browser is smaller than usual you can't see the bottom of the links. I know I could add a scrollbar to the frame but it looks pretty awful. My screen is a 17" laptop and the number of people at college viewing this will have smaller laptop screens and this is my problem. Basically, was there anyway to make both the left frame scroll as you scrolled the main frame as in linked? So the scrollbar would exist for both the frames rather than just one or the other? Sorry if this doesn't make sense but I'm not sure how else to put it. I would appreciate any help Thanks, Rich Hi I need a page that has six eqaually sized frames displaying different sites with a scroll bar on each and no border. How would i do this Thanks Lock n delete. My net is stuffing up n it double posted. Please read my other post... I've been struggling with this for a while now. I am trying to use framests to make a navbar and the mainpage. The frame for the navbar appears on the page, but the navbar doesn't. And the navbar says page cannot be diplayed. I am still in the early stages of learning html so I may not understand everything the first time around. This is what I have done so far. Code: <html> <head> <title>My Frameset</title> </head> <frameset cols="150,*"> <frame src= "navbar.html"> <frame src= "mainpage.html"> </frameset> </html> I have a page saved as navbar.html saved in the same folder also. Any suggestins. Thanx How to make such frames i can`t make it I have a page that has a few images with links to differnet sites and I want them to link to another page with a frame at the top that shows the same inages that are smaller and the page of the website below it. I know how to do frames but I dont want to create a different page per link. (In short I want to have a link to a website open in another page with frames) Here is a basic idea for the front page http://www.techmatefl.com/pcp/ Here is the second page with the icons and the blank area is where I want the different sites that you choose to show http://www.techmatefl.com/pcp/site.html So it will be like a google image search in a way. Let me know if there is a way to do this with HTML, JS, or anything else. Hello, I was just learned about frames and I just get a little bit curious why not so many websites use frames, is it, like, not great? Can you tell me pros and cons about it? Thank you. hi i was wondering with my site using frames if one of the pages is loaded in to a internet exploer is there any way i can make it redirect to the index page so it is back in the frame and the user has navagtion thanks Hello guys, im new here =) So.. I was trying to make a frame with a scrolling bar, like this site >> www.roxdownload.net take a look =) What should i do? Thank you very much =D |
|||||||