Ok, here's my situation. I'm looking for a way to display content in a column style w/o using frames (or iframes). Is there a way (with php, javascript, etc.) to 1) call to other files to add data to a page?(from looking at the php in my forums this appears to be the case) and 2) be able to "change" that call so I don't have to copy my popup menu's (which are quite extensive) onto every page of my website?
Any help would be appreciated.
| Shike wrote: |
Ok, here's my situation. I'm looking for a way to display content in a column style w/o using frames (or iframes). Is there a way (with php, javascript, etc.) to 1) call to other files to add data to a page?(from looking at the php in my forums this appears to be the case) and 2) be able to "change" that call so I don't have to copy my popup menu's (which are quite extensive) onto every page of my website?
Any help would be appreciated. |
| Code: |
| <?php include('file.php') ?> |
...places the content of the file file.php where that code was placed...
Note that the file you place it in has to be saved as .phpThat's what I thought. Now, when I use my menu's can I "Target" that script?
| Shike wrote: |
| That's what I thought. Now, when I use my menu's can I "Target" that script? |
oh...you want JUST THAT AREA to change when you click, without the rest reloading...
Well...the only way to do that is AJAX, which I can only recommend if your a javascript savvy, and don't care about search engine optimization
Better: Allow all of the site to reload when someone clicks something, but include all of the reoccurring elements in the way I showed you above...I'm fine with having the entire page to relode, but I don't want to have to re enter my menu information on every page I write. So, if I can have PHP or something change the value of 'file.php' that would be wonderful.
Next question. when using inlclude('file.php') does the file have to be a php file, or can it be a html file?
I dont think you've quite understood what the php stuff does - let me give you an example...
Lets say we have a page (example.html) which looks like this:
| Code: |
<html>
<head>
<title>example</title>
</head>
<body>
<div id="menu">
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
</div>
<div id="content">
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
</div>
</body>
</html>
|
The menu div needs to be the same on many other similar pages.
So instead of writing the menu, I write this:
| Code: |
<html>
<head>
<title>example</title>
</head>
<body>
<?php include('menu.html'); ?>
<div id="content">
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
<p>df godfigj eoi jcvbkjer lgkdfvj blkerj glfk bjcvlb khqj</p>
</div>
</body>
</html>
|
I now make the file menu.html and put the menu in it:
| Code: |
<div id="menu">
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
<a href="something.html">link</a>
</div>
|
...and once i view the page it will look exactly like the original! - as long as the main file has a php extension (example.php)
Better? Ok, I guess I can't do it the way I want to w/o using frames. Thanks.
| Shike wrote: |
| Ok, I guess I can't do it the way I want to w/o using frames. Thanks. |
No...seriously - I'm certain you can! Send me a pm/e-mail with the files & stuff and I will do it for you!
email = luke [dot] aka [dot] danish [at] gmail [dot] comLuke I would greatly appreiciate it if you dont make this matter private and post your results in this thread for us to view.
heres how i load content dynamically
| Code: |
<html>
<head>
<script type="text/javascript">
function = embedContent(url) {
document.getElementById("menu").innerHTML="<object> <embed src="+ url +"> </object>";
}
</script>
</head>
<body>
<div id="menu" onload="embedContent(menu.html); return false">
</div>
</body>
</html>
|
problems. I use this to load .swf files with links and onclicks. I'm not sure how to use an onload so thats up to you. I'm just laying ou the ideas. anothe problem is embed'ing .html files. some browsers will allow it while others won't. I'm sure someone has a workaround for this.
another idea. maybe within the fuction before the equals sign you could place something else other than innerHTML that will allow the use of quotations so that you could just directly copy paste your menu into the fuction instead of having it load from seperate html file. then you could place the javascript external with the menu built into it. does javascript automacitically convert single quotes into double quotes?? Ok, here is my total situation. I was looking for a frames work around (so I didn't have to use frames), and not have to completely re-do 100+ html/php pages. My CSS popup menus are written in nested lists (which i don't want to have to reproduce).
I have been uisng an iframe for the main content of my website, but I'm beginning to think that I'd rather have the whole page scroll instead of just the frame.
I am not that well versed in Javascript and am still very much a beginner in PHP. I was hoping someone could walk me through it (actually looking to learn how to do it instead of someone doing it for me) as well as have cross-browser/cross-platform compatability
even if you dont want to use the iframe you can still make only on portion of the site scroll using double divs...
have
| Code: |
<div id="div1">
<div id="div2">
some content goes here
</div>
</div>
|
then have some css like this
| Code: |
#div1 {width:100%; height:75%; overflow:scroll;}
#div2 {width:500%; height:500%}
|
now your 2nd div schould scroll inside the first.
the problem with this is you have to set the width of div2. if you set it to auto it will just wrap the content and make the height larger. also if you cant use just overflow-x:scroll or overflow-y:scroll so you only have 1 scroll bar instead of 2 because Opera9.x will display the scroll bar incorrectly. and i think if you set the overflow to overflow:auto then IE 7 wont work properly. not positive about that one I just remember having trouble with it somewhere.
now back to your problem
http://www.w3schools.com/js/tryit.asp?filename=tryjs_text
we will be basing your javascript on this code
make an external javascript file call it something like menu.js and link to it in your <head> like this
| Code: |
<script type="text/javascript" src="menu.js"> </script>
|
then in your <body> call the function we will be using in the .js file
| Code: |
<body>
<div onclick="loadMenu(); return true">
</div>
|
now open the menu.js file for editing. We will start by declaring the fucntion
| Code: |
function loadMenu() {
}
|
then we will add the coding so it ends up looking like this
| Code: |
function loadMenu() {
document.write("<ul><li><a href='page1.html'>Page1</a></li><li><a href='page2.html'></a></li></<ul>")
}
|
there you go. just make sure that youchange all your doublequotes (") to single qoutes (') in the loadMenu function. notice how I wrote my <a href='page1.html'>. javascript will automatically convert these to double quotes but they have to be written in the function as singles to work.
i didn't test this so if it doesn't work let me know. but i relaly dont recomend even using this because if the users browser doesn't support javascript or they ahve it disabled then he/she will not be able to navigate the site.
you could just <embed> a html file without using any java just have
| Code: |
<body>
<div>
<object data="menu.html" width="100%" height="auto">
<param src="menu.html" />
<embed src="menu.html" width="100%" height="auto"> </embed>
</object>
</div>
</body> |
but this will not work in IE. it does work in Opera and Firefox. anybody know how to make this work in IE?? I think I've got it. After some research I found this page.
http://joliclic.free.fr/html/object-tag/en/object-text.html
The very first example shows how to load an external html document. I'm gonna play it. It seems to work fine though.
Well so far I've noticed one problem that could be large or small depending on your layout. You can only set the width and height using pixels, no percents or ems. This sucks for me but it might not for you.
Nevermind, I found a workaround. It gets a little complicated.
heres the code to place the external html file in your site
| Code: |
<body>
<div id="obdiv">
<object id="ob" data="test.html" type="text/html">
</object>
</div>
</body> |
Next you need to modify your css.
| Code: |
#obdiv {
width:100%;
background:blue;
}
#ob {
width:100%;
} |
Now we will create the external html file that will be loaded. I named it text.html in my example but thats not important.
| Code: |
<html>
<head>
<!--Link to your external CSS stylesheet or place internal styles here like a normal page-->
<link rel="stylesheet" type="text/css" href="style.css" media="all" title="main" />
</head>
<body>
<!-- you can modify any of the content in the div in your css stylesheet just like any other page-->
<div id="test">
test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</body>
</html> |
just place your menu in the <div id="test"> and change the id to whatever your old menu used (if it used one). and there you go.
problems I couldn't find a workaround for. IE7 displays a border and vertical scrollbar. the site i mentioned above mentions a workaround for this but it doesn't weem to work in IE7 but maybe it does in IE6? Ok, this stuff is great, but It will have to wait till I'm not at work.
Now, how Can I set it up so that I don't have to re write each of my pages? (i.e. target the data="" part of the object tag so that when i click on a link from my menu, it loads the page with new link instead of the original link.) ?
Like I said earlier, I'm using an iframe for the main content, but I want to move from the layout I have to a 3 column layout without having to completely re write my web pages (as it took me quite a long time to write them as it is 
).
I also have some pages that are being accessed by a couple of different "main" pages and I don't want to have to have 2 copies of the same information on the server.
Thanks for all of the help. I hope I'm not too late to save you a lot of trouble. After your form submit, you can use code to change the "innerHTML" defined by the HTML tag ID:
An example is on this page: http://www.untwistedvortex.com/javascript-snippets/
It can also be used with onclick(), but I haven't needed that yet. Anyway, the point is, it can be used to to directly replace frames/iframes. Shike i think what you are wanting to do is turn the data="variable" basically? but doing this will definilty require javascript because html and css can not handle variables. you can do this combing the .write or the (or .innerHTML if you are using Xhtml) javascript code with the object tag. You use and onclick like this
| Code: |
| <a onclick="embedContent(example.html); return false" href="example.html">Example</a> |
you still need to include the href in case their browser does not support javascript or its disabled
now have a javascript like this preferably external
| Code: |
function embedContent(url) {
document.getElementById("content").innerHTML="<div id=embeded align=center> <object> <embed src=" + url + "> </object> </div>";
} |
notice the getELementByID("content")
this assumes you already have a div on your page with id="content". It will write the following code within that div. | mothmann wrote: |
Shike i think what you are wanting to do is turn the data="variable" basically? but doing this will definilty require javascript because html and css can not handle variables. you can do this combing the .write or the (or .innerHTML if you are using Xhtml) javascript code with the object tag. You use and onclick like this
| Code: | | <a onclick="embedContent(example.html); return false" href="example.html">Example</a> |
you still need to include the href in case their browser does not support javascript or its disabled
now have a javascript like this preferably external
| Code: | function embedContent(url) {
document.getElementById("content").innerHTML="<div id=embeded align=center> <object> <embed src=" + url + "> </object> </div>";
} |
notice the getELementByID("content")
this assumes you already have a div on your page with id="content". It will write the following code within that div. |
Now, does it have to be a div tag, or can it be, say a td tag?It doesn't matter which tag it is as long as the tag has an ID.
Next question. I've been toying around witht he object tag, and it has been acting as a frame (and using a scroll bar) and not resizing with the newly loaded content. Is there a way to not have this happen?
You have to remember that frames and iframes display from the source, not from what you've loaded them with. Nothing within the frame will be different than if you loaded the particular page separately.
Ok, I guess I didn't explain myself. I understand how frames work. What I don't quite understand is how the <object> tag works. When I tried to work with it, I had to put in a width and height (I usually use css for this) otherwise the loaded content would load with a very "short" "window". This would act, (at least in appearance) exactally like the iframe did with out a fixed height. What I really wanted was to Not have to redesign all of my pages be able to have all the content fully loaded (w/ reloading the page) and not have to scroll w/in a frame like context and just scroll the normal scroll bar of the parent window. I think the way to go will be using the <?php include('file.php') ?> and change all of my file extentions to .php. My next question, however, is how do I use my already extensive menus (all with <a href="..." target="frame">) to chage the file.php.
Is this possible keeping in PHP or using the Javascript mentioned earlier, or would I just be better off redesigning all of my webpages, or would it just be easier to continue to use the frame?
(btw my current version is at http://shike.frih.net) After I looked at your website, I understood what you wanted to do. You can make this completely dynamic and it wouldn't take a lot of work, but you're going to lose something in the process. It appears you want to keep the page static and change only the contents in the middle.
You can do it two ways, one with the innerhtml method and one with the php include method. With the innerhtml method, all of your changed pages would have to be made to be the same size (for display purposes). With the php include method, your footer is not going to be in the same place with every page, but the layout will be clean and fluid.
I wrote an article a few months ago which basically covers the last method... see if it helps you:
http://www.untwistedvortex.com/2006/06/06/a-dynamic-website/
Then take a look at http://humor.untwistedvortex.com/ and see how I applied it. I made some changes in the backend, but none that would invalidate the article.
Thank you, thank you, thank you.
This is exactally what I wanted. | RT Cunningham wrote: |
| 1. I created a “contents.txt” file with the display and link contents for each menu link. Each line in the file is in the format of “Main Page|main” (without the quotation marks). I left out the extension because each page would end with the .php extension. |
Could you give me an example of how you did this?
is it possible to do this w/o using the contents.txt file? I do have an extensive nested <ul> list for my menus. Can I just manually put this in?
If you could take a look at the source of my main page (shike.frih.net) and give me advise on how to "specifically" adjust this to my current setup, I would be greatful.
Shike
Cheers
Okay, I'd love to give you an example, but I'm not using it myself like that anymore. Now, I just have the directory contents read and parsed. Tell you what, send me your email address in a PM and I'll copy out some of the pages from the website, zip it up and send it to you. How's that?
The best example is a working example, I always say.
| RT Cunningham wrote: |
Okay, I'd love to give you an example, but I'm not using it myself like that anymore. Now, I just have the directory contents read and parsed. Tell you what, send me your email address in a PM and I'll copy out some of the pages from the website, zip it up and send it to you. How's that?
The best example is a working example, I always say. |
I quite agree and I appreciate you working with me so I can learn how to do this stuff. My email is in my profile.
Shike
Cheers
Duh. I forgot about the email address in the profile. Shows you how little I frequent forums!
