Jump to content
xisto Community
BuffaloHelp

Designing Index Page With Target - the table instead of using frame

Recommended Posts

I have been reading up on search engine's ability to cache one's site and I realized that FRAME is something these search engines don't really like. You can read it on Google's search FAQ and just recently my page was cached by Yahoo after taking down my frame index page to no frame page. So here is what I would like to do and I would like you super coders help.

 

PHP seems to be the best choice since when using INCLUDE command my index page includes not only my three separate pages in one, but it helps to have content rather than showing only

<FRAMESET name=topFrame rows=68,* frameBorder=0 framespacing="0" border="0">
<FRAME name=treetop src="EN_treeTop.htm" noResize target="mainpage" scrolling="no">
<FRAMESET name=mainFrame cols=200,*>
<FRAME name=contents src="EN_Tree.htm" target="mainpage" scrolling="no" noresize>
<FRAME name=mainpage src="EN_intro.htm" scrolling="auto" noresize>
</FRAMESET>

as a main page.

 

This is how I had my page laid out. I designed it this way to resemble your regular Windows help familiarity navigation.

Attached figure 1.

Posted Image

 

I had it this way so that the BOX 1 and BOX 2 were never reloaded when a selection from BOX 2 (a tree style expandable/collapsible menu) occurs and only BOX 3 will load the intended page. It was fine and it worked beautifully. But now, I would like to have this as PHP. This is how my index page's code is:

<html>
<?

include 'top.html' ;
include 'menu.php' ;
include 'main.html' ;

?>
</html>

I already have the PHP navigation menu made for BOX 2 but whenever I click on the link, it opens up in new page. Instead of using FRAME, I have those laid out as TABLE.

 

My questions are:

1)Is there anyway I can target the link to the BOX 3 using TABLE's command (like name="main") from menu click on BOX 2?

2)Could I still use JAVA coded menu.html (the original menu) instead of menu.php?

3)If TABLE isn't the answer, could you recommend me the right one?

 

For a working demo (not mine) please refer to http://forums.xisto.com/no_longer_exists/ page and see the concept that I have in my mind. Except that I would like to refrain from using FRAMEs.

 

Thank you.

Share this post


Link to post
Share on other sites

you mean 'it opens up in a new page' as in it loads a new page, or opens in a new *window*?

before we go on, a little pedantism : use <?php, not <?. <? is no longer supported.

Anyway, i believe the short answer is : no. Not without client-side scripting, like javascript, grabbing pages from your server and popping them into the 'content cell' of your template. If you still want to use javascript for you menu, btw, you can. You should be able to just whack the JS code into a separate file and include that, though i've never touched JS so i wouldn't know for sure. Google be thy friend and all that.

Anyway, the best you can do with a pure PHP layout/menu is to keep the state of your menu-tree alive using sessions, cookies, POSTdata or some combination of the above. Actually, this i cool because the menu keeps its state across browser sessions, if you like the idea of that.

Cookies aren't really hard (you just have to learn not to trust user data ;)) and the same applies for POSTdata.

As a further aside - why tables? You could instead use html DIVs and CSS for great justice, and so on. All you need is a little simple CSS even IE can understand. Try the following :

<style>	body {  font-family :verdana;	}		#header {  clear : both;  width : 100%;  border : 1px solid silver;  background : #EEEEEE;	}		#menu {  float : left;  width : 29%;    border : 1px solid silver;  background : #EEEEEE;	}		#content {  float : right;  width : 70%;    border : 1px solid silver;  background : #EEEEEE;	}</style><body><div id="header">	<h1>This be muh header, dook dook dook mook.</h1></div><div id="menu">	<h2>Menu</h2>	Menu Item <br>	Menu Item <br>	Menu Item <br>	Menu Item <br>	Menu Item <br>	Menu Item <br></div><div id="content">	Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.Hello, world. Lorem Ipsum.</div></body>

Share this post


Link to post
Share on other sites

i would have to agree no matter how you slice it using frames won't give the search optimization your looking for.


but to answer your question use the

target=main
in your url and that will open it in the same page without opening a new window.


but yeah its better to do it in window and not in frames, yeah it will be messy but if you use external php files you won't be dealing with all the coding in one editor.

Share this post


Link to post
Share on other sites

Lol i hate using DIV for make areas on whole page, this is always broke and doing strange things. I prefer tables ;) So try this

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head><body><table width="95%"  border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td colspan="2"><?php include('top.html'); ?></td>  </tr>  <tr>    <td width="30%"><?php include('menu.php'); ?></td>    <td width="70%">	<?php 	if ( isset($HTTP_GET_VARS['news'])) {include('main.html'); }	else if ( isset($HTTP_GET_VARS['page1'])) {include('page1.html');}    else {include('wrongpage.html');} 	?></td>  </tr></table></body></html>

and you can put to you navigation menu links like:

 

http://yourpage.com/?news

http://yourpage.com/?page1

Share this post


Link to post
Share on other sites

I recently tried to do the same thing with my site. Its still being tested (hence the name test.php), but it works by being based entirely off of the index page, calling other pages only when they are needed. For example, clicking the Mailing List link opens the mailing list page in the middle section, but nothing else reloads or changes.

I am using div's on the main page, with the central div containing some code to load the right files. If its the kind of thing you're looking for then I'll be happy to give you the code and help you out.

Share this post


Link to post
Share on other sites

If you look at a site I did - Pure GRiT - there is only actually one PHP page that calls in the rest of the content from includes (based on what is in the querystring) so it kinda mimics the way frames work (notice that the background & header never actually move).

Share this post


Link to post
Share on other sites

i think thats what buffalo is look for on the grit website,how could the <div> tag break up unless the CSS script doesn't load up properly thats all i could think of for that to happen.

Share this post


Link to post
Share on other sites

Heh - div's even behave at school in IE6.The only reasons div's shouldn' work are if you've done something funky with the nesting of tags, the stylesheet is lost in the mail or the browser you're on suxoring. Div's have been around for a long time though, so they should damn well work even in IE 4.

Share this post


Link to post
Share on other sites

If you look at a site I did - Pure GRiT - there is only actually one PHP page that calls in the rest of the content from includes (based on what is in the querystring) so it kinda mimics the way frames work (notice that the background & header never actually move).

180415[/snapback]

Hi Tyssen, just a question, is this site loading only content based on the querystring and leaving all data which has loaded alone, or you mean it actually reloads the exact same page, and places the content where it belongs? Couse if so (not loading the page again), could you point out how you manage to do that (which i think you must have fixed with JavaScript)?

Share this post


Link to post
Share on other sites

<div tags have been their that long WOW :):) , but you would thinking that they wouldn't work as well, because css was barely thought of back in IE4 days, (i think).i can only image what a website would have looked like in IE4 with using the div tags :(.

Share this post


Link to post
Share on other sites

I have been reading up on search engine's ability to cache one's site and I realized that FRAME is something these search engines don't really like. You can read it on Google's search FAQ and just recently my page was cached by Yahoo after taking down my frame index page to no frame page. So here is what I would like to do and I would like you super coders help.

 

PHP seems to be the best choice since when using INCLUDE command my index page includes not only my three separate pages in one, but it helps to have content rather than showing only

<FRAMESET name=topFrame rows=68,* frameBorder=0 framespacing="0" border="0">
<FRAME name=treetop src="EN_treeTop.htm" noResize target="mainpage" scrolling="no">
<FRAMESET name=mainFrame cols=200,*>
<FRAME name=contents src="EN_Tree.htm" target="mainpage" scrolling="no" noresize>
<FRAME name=mainpage src="EN_intro.htm" scrolling="auto" noresize>
</FRAMESET>

as a main page.

 

This is how I had my page laid out. I designed it this way to resemble your regular Windows help familiarity navigation.

Attached figure 1.

Posted Image

 

I had it this way so that the BOX 1 and BOX 2 were never reloaded when a selection from BOX 2 (a tree style expandable/collapsible menu) occurs and only BOX 3 will load the intended page. It was fine and it worked beautifully. But now, I would like to have this as PHP. This is how my index page's code is:

<html>
<?

include 'top.html' ;
include 'menu.php' ;
include 'main.html' ;

?>
</html>

I already have the PHP navigation menu made for BOX 2 but whenever I click on the link, it opens up in new page. Instead of using FRAME, I have those laid out as TABLE.

 

My questions are:

1)Is there anyway I can target the link to the BOX 3 using TABLE's command (like name="main") from menu click on BOX 2?

2)Could I still use JAVA coded menu.html (the original menu) instead of menu.php?

3)If TABLE isn't the answer, could you recommend me the right one?

 

For a working demo (not mine) please refer to http://forums.xisto.com/no_longer_exists/ page and see the concept that I have in my mind. Except that I would like to refrain from using FRAMEs.

 

Thank you.

180293[/snapback]


 

Your best bet would be to use <div> tags, and dynamically load the innerHTML. You could hold the html in a database, then when the main page loads, grab all your code from the database, throw it into javascript variables and use the links to call a load function. Or you could use an iframe to throw the other pages in.

 

Keep in mind the following example probably doesn't work. If you want a working example I'll try to finish the script this afternoon...

 


 

?>

 

 

<html>

<script>

 

//these variables have been echo'd with php, filled using a php query from the //database.

var page1 = "some html";

var page2 = "other html";

function loadContent(pagename){

 

if( pagename == "page1.html")

document.getElementById('content').innerHTML = page1;

//and so on, you could use a switch statement here as well.

 

}

 

</script>

<body>

<div name='content'></div>

</body>

</html> linenums:0'><?php//Your query would go here, and you would simply echo the results to javascript variables. I won't do all the coding in this example.?><html><script>//these variables have been echo'd with php, filled using a php query from the //database.var page1 = "some html";var page2 = "other html";function loadContent(pagename){if( pagename == "page1.html")document.getElementById('content').innerHTML = page1;//and so on, you could use a switch statement here as well.}</script><body><div name='content'></div></body></html>


Notice from cmatcmextra:
Use code tags for code

Edited by cmatcmextra (see edit history)

Share this post


Link to post
Share on other sites

mike_savoie, kick me if i'm wrong - but did you say pull all the content from the database at load? If the guy has any more than say, 500k of html in his site, that's going to be a little expensive. I've never used JS, but i'm sure they provide some functions to query a database - if so, i think a better solution would be to load the index page at load time, then get the JS script to ask for the other pages as needed.

Share this post


Link to post
Share on other sites

I've never used JS, but i'm sure they provide some functions to query a database

 

You can't query a database with javascript - it's all client side.

 

is this site loading only content based on the querystring and leaving all data which has loaded alone, or you mean it actually reloads the exact same page, and places the content where it belongs? Couse if so (not loading the page again), could you point out how you manage to do that (which i think you must have fixed with JavaScript)?

 

It is actually reloading the page each time you click on a link because the links all load up a different querystring. But I guess because the basic page layout isn't changing, it seems like the background never changes (well it seems like that for me - maybe people on slower connections will notice a reloading of the background).

 

The links look like this:

<ul id="links"><li id="news"><a href="?page=news" title="News"><span>news</span></a></li><li id="about"><a href="?page=about" title="About GRiT"><span>about</span></a></li></ul>
Then the main content area is like this:

<div id="text"><h1 id="<?echo$qString?>hd"><?echo$qString?></h1><?php include ("$path.inc"); ?></div>
I've used an if...else and a switch statement at the top of the page to work out what $path is based on the querystring. Each include then contains the HTML that is unique to each page. The links on the left are also generated the same way but they're a bit more complicated cos they're actually reading the directory and then printing the links based on which files it finds (and using the file names as the names for the links). This way the links are automatically generated each time you create a new include and the person who I did the site for doesn't have to worry about adding links into the HTML.

Share this post


Link to post
Share on other sites

The links on the left are also generated the same way but they're a bit more complicated cos they're actually reading the directory and then printing the links based on which files it finds (and using the file names as the names for the links). This way the links are automatically generated each time you create a new include and the person who I did the site for doesn't have to worry about adding links into the HTML.

183834[/snapback]

Wow, that is really cool... could you explain a little more that? how did you achieve that? i supose it has something to do with php file reading functions right?

 

And this threads question in the first place i think has not been completely answered, so is there a way to load content into divs or table cells without reloading the rest of the page? and without having to load all content into js the first time a user enters the site?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.