Jump to content

Frame Simulation - Least Code for outside columns


GunNam

Recommended Posts

I currently have a page with 3 columns. The left & right columns will contain data that may or may not change often.The center column is the content area.In the type of frame simulation I am trying to create, I want all menus or column links to open up in the context area (center column).I know I can copy the same thing for each page and have different content sections to reflect what has been clicked on the page. However, if data on the side columns are changing, that would require me to change all the pages...I would like it so I would only have to change the side column data in just 1 sheet and have the changes auto update themselves.Am I misunderstanding something here?How is this supposed to be done correctly?1 more question. I will be converting my floating layout to min/max layout with negative margins. Any advice as to which I should go with? The side columns will retain their size while the center column will grow with the size of the window.

Link to comment
Share on other sites

I know what you're trying to do and I've done it successfully myself. The only thing is that I used PHP along with CSS to make my site. Basically all my links were in the form:

<div id="rightcolumn"><a href="?link=1">Page 1</a></div>

and I had a div called content which displayed different content based upon which link was clicked in such a fashion:

<div id="content"><?php$link = $_GET["link"];switch ($link) {case 1:	include('page1.php'); 	break;case 2:	include('page2.php'); 	break;	case 3:	include('page3.php');	breakdefault:	include('page0.php'); 	break;	}?></div>

There are probably other ways to do this but I found this the most efficient and easiest (for me). You do need to know basic php in addition to css.

Link to comment
Share on other sites

I am a php noob... so I'll have to do some reading if I decide to go this route. Makes perfect sense though. Thank you very much for the response.I guess there is no pure CSS version?
I think there is, but I'll have to think it over tonight. (11:25 pm here). So I'll try to remember to post here in the morning. No guarantees though - I have a poor memory.
Link to comment
Share on other sites

Actually I've thought about it long enough. There's not pure css method like you're thinking of. CSS is for form, but you want to modify content. You can dictate how you content will look, but not make the content itself (using css). You're going to have to use some sort of php or frames to do this.Hope I've been helpful. :)

Link to comment
Share on other sites

Actually I've thought about it long enough. There's not pure css method like you're thinking of. CSS is for form, but you want to modify content. You can dictate how you content will look, but not make the content itself (using css). You're going to have to use some sort of php or frames to do this.Hope I've been helpful. :)
Thank You for your logic and knowledge on the subject. I've never been fond of understanding theory and whatnot, but you are definitely making perfect sense. CSS is for form/style.Whenever you get a chance... could you shed some light on what you think is the fastest, efficient way? You used php, and I imagine there are other ways to do it, but what are the heavier ones and which are the lighter ones.I am making an attempt to trim weight where I can on this site to preserve as much bandwidth as possible. Unfortunately some aesthetics have been sacrificed, but that's alright.g'nite to you mate.
Link to comment
Share on other sites

I've been reading quite abit about php over the past couple hours...Unless there are test websites, it looks like I need to run a webserver and install the php software on my local machine to test if the php thing you mentioned is working?

Link to comment
Share on other sites

I've been reading quite abit about php over the past couple hours...Unless there are test websites, it looks like I need to run a webserver and install the php software on my local machine to test if the php thing you mentioned is working?
For the most part, I'm afraid you're right. However there is a fantastic completely free webhost at http://dhost.info and although you would need to upload your file time and again to test the code, you won't need to install Apache, php, or a SQL server on your home/work computer.Check out the host. I did install Apache and php and MySQL on my computer but never really got them working together...
Link to comment
Share on other sites

dhost doesn't seem to be accepting anymore free signups..I couldn't find it.
They have periodic closings of their sign up availability because they receive so many bogus applications. I'd check the forums for the new sign up date. Although they sometimes have extensive downtime (on avg once per year there is a big downtime) I've found Deluxe Host to be the best free host.
Link to comment
Share on other sites

aquatsr,for the first example of the PHP you gave me, does that require MySQL? Thanks for the recommendation on free sites. Looks like the site I'm using has PHP available...
Sorry, I haven't visited this page in a few days... been coding. Uhhh first example... no. For any code I've posted in this topic you do not need a SQL database, but I recommend having one at your disposal - you can do a lot of neat stuff with a database.
Link to comment
Share on other sites

You can get the desired result if you use AJAX. The code may not be super-clean looking (but you could (and should) link to an external file for the javascript), and requires a moderately current browser, but it works without any server-side scripting and won't require reloading any code/assets in the side bars.As stated above, I'm pretty sure there is no pure CSS solution, sorry.

<html><head><title></title><script>function GetXmlHttpObject(handler) { 	var objXmlHttp=null			if (window.XMLHttpRequest) {		objXmlHttp=new XMLHttpRequest()		objXmlHttp.onload=handler		objXmlHttp.onerror=handler 		return objXmlHttp	} else if (window.ActiveXObject) { 		var strName="Msxml2.XMLHTTP"		if (navigator.appVersion.indexOf("MSIE 5.5")>=0) {		strName="Microsoft.XMLHTTP"		} 		try { 			objXmlHttp=new ActiveXObject(strName)			objXmlHttp.onreadystatechange=handler 			return objXmlHttp		} 		catch(e) { 			alert("Error. Scripting for ActiveX might be disabled") 			return 		} 	} } function updateContent(contentPage) {	xmlHttp=GetXmlHttpObject(showContent)	xmlHttp.open("GET", contentPage , true)	xmlHttp.send(null)	return false;}function showContent() {	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 		cart = document.getElementById("contentArea").innerHTML=xmlHttp.responseText;	}}</script></head><body onLoad="updateContent('content1.htm');"><div>  <a href="#" onclick="updateContent('content1.htm'); return false;">Page 1</a>  <a href="#" onclick="updateContent('content2.htm'); return false;">Page 2</a></div><div id="contentArea"></div></body></html>

Link to comment
Share on other sites

You can get the desired result if you use AJAX. The code may not be super-clean looking (but you could (and should) link to an external file for the javascript), and requires a moderately current browser, but it works without any server-side scripting and won't require reloading any code/assets in the side bars.As stated above, I'm pretty sure there is no pure CSS solution, sorry.
<html><head><title></title><script>function GetXmlHttpObject(handler) { 	var objXmlHttp=null			if (window.XMLHttpRequest) {		objXmlHttp=new XMLHttpRequest()		objXmlHttp.onload=handler		objXmlHttp.onerror=handler 		return objXmlHttp	} else if (window.ActiveXObject) { 		var strName="Msxml2.XMLHTTP"		if (navigator.appVersion.indexOf("MSIE 5.5")>=0) {		strName="Microsoft.XMLHTTP"		} 		try { 			objXmlHttp=new ActiveXObject(strName)			objXmlHttp.onreadystatechange=handler 			return objXmlHttp		} 		catch(e) { 			alert("Error. Scripting for ActiveX might be disabled") 			return 		} 	} } function updateContent(contentPage) {	xmlHttp=GetXmlHttpObject(showContent)	xmlHttp.open("GET", contentPage , true)	xmlHttp.send(null)	return false;}function showContent() {	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 		cart = document.getElementById("contentArea").innerHTML=xmlHttp.responseText;	}}</script></head><body onLoad="updateContent('content1.htm');"><div>  <a href="#" onclick="updateContent('content1.htm'); return false;">Page 1</a>  <a href="#" onclick="updateContent('content2.htm'); return false;">Page 2</a></div><div id="contentArea"></div></body></html>

Thank your for you input! I have yet to decide on what I'm using yet. I've been just reading alot of tutorials... I should probably just do it instead of trying to get a good idea of the topic at hand... just my personality I guess. Question: By "does not require server side scripting," I assume that I do not need certain software loaded on the server? Are there any benefits to this opposed to having for example, PHP loaded on the server running php? I've done as much research as I could to try and cut down as much bandwidth I can.
Link to comment
Share on other sites

Thank your for you input! I have yet to decide on what I'm using yet. I've been just reading alot of tutorials... I should probably just do it instead of trying to get a good idea of the topic at hand... just my personality I guess. Question: By "does not require server side scripting," I assume that I do not need certain software loaded on the server? Are there any benefits to this opposed to having for example, PHP loaded on the server running php? I've done as much research as I could to try and cut down as much bandwidth I can.
Server-side means that the code is interpreted by the server before it is sent to the browser. An example of server-side code is php or alternatively, asp.Browser, also known as "client-side" code is interpreted by your browser and does not need interpretation by the server it is sent from. Examples include Javascript and HTML/XHTML.A note on bandwidth: If your site is moderately size and you get average traffic, you should have no problems keeping bandwidth usage under control. Typically 1GB of bandwidth can supply 5300 page views.
Link to comment
Share on other sites

I know what you're trying to do and I've done it successfully myself. The only thing is that I used PHP along with CSS to make my site. Basically all my links were in the form:
<div id="rightcolumn"><a href="?link=1">Page 1</a></div>

and I had a div called content which displayed different content based upon which link was clicked in such a fashion:

<div id="content"><?php$link = $_GET["link"];switch ($link) {case 1:	include('page1.php'); 	break;case 2:	include('page2.php'); 	break;	case 3:	include('page3.php');	breakdefault:	include('page0.php'); 	break;	}?></div>

There are probably other ways to do this but I found this the most efficient and easiest (for me). You do need to know basic php in addition to css.

I'm not sure if I'm not understanding the concept here... but I can't seem get connect the link (1st set of code) to link with the Switch (2nd set of code).i.e. my menu has "<li id="about"><a href="#">About Us</a></li>"When I click the about button, I want it to update in the div "middleColumn"I'm confused as to what I need to replace "#" with in the navigation menu to get something (I assume some variable" in the middleColumn to run.What am I not seeing here? Sorry, I'm a bit frustrated... finally got some of my php scripts to work yesterday by just changing my index.html to index.php - which was like 3 hours after messing around with this file that file, re-reading tutorials, going step-by-step, many cigarettes, etc...Thanks for all your help. This is definitely a learning process... I would pull my hair out if I didn't shave it all of the other day.
Link to comment
Share on other sites

I'm not sure if I'm not understanding the concept here... but I can't seem get connect the link (1st set of code) to link with the Switch (2nd set of code).i.e. my menu has "<li id="about"><a href="#">About Us</a></li>"When I click the about button, I want it to update in the div "middleColumn"I'm confused as to what I need to replace "#" with in the navigation menu to get something (I assume some variable" in the middleColumn to run.What am I not seeing here? Sorry, I'm a bit frustrated... finally got some of my php scripts to work yesterday by just changing my index.html to index.php - which was like 3 hours after messing around with this file that file, re-reading tutorials, going step-by-step, many cigarettes, etc...Thanks for all your help. This is definitely a learning process... I would pull my hair out if I didn't shave it all of the other day.
Hmmm. So as I understand it, you have a part of your page that is static (i.e. the links) and you want to have the middleColumn change upon clicking a link. If that is so, you will want to switch in php files where say file1.php contains the data for about, file2.php is for home etc.Oh I might see what your frustration is. You're wondering what to put as your "About" URL. OK. First you must have a page, say, content.php that contains the material you want shown when you click "About" For your about URL put ?link=1. Then in your switch statement, change the page1.php under case 1 to about.php.Do likewise for your other links (changing each in the includes in the different cases in the switch statements and the corresponding URL in your list).If you're not getting it right away don't despair. It took me quite a while to understand this concept.
Link to comment
Share on other sites

Hmmm. So as I understand it, you have a part of your page that is static (i.e. the links) and you want to have the middleColumn change upon clicking a link. If that is so, you will want to switch in php files where say file1.php contains the data for about, file2.php is for home etc.Oh I might see what your frustration is. You're wondering what to put as your "About" URL. OK. First you must have a page, say, content.php that contains the material you want shown when you click "About" For your about URL put ?link=1. Then in your switch statement, change the page1.php under case 1 to about.php.Do likewise for your other links (changing each in the includes in the different cases in the switch statements and the corresponding URL in your list).If you're not getting it right away don't despair. It took me quite a while to understand this concept.
Does the switch statement go in the index.html/index.php file? I'll be trying a bunch of things tonight to try and get it to work.
Link to comment
Share on other sites

Hey thanks! I have the switch statement working! gonna try to iron out a couple things.In the files I'm using to fill the content area, i.e. about.php. Can you insert HTML in this file? For example, if I'd like for it to read from a CSS file so not every page looks so similar?

Link to comment
Share on other sites

Hey thanks! I have the switch statement working! gonna try to iron out a couple things.In the files I'm using to fill the content area, i.e. about.php. Can you insert HTML in this file? For example, if I'd like for it to read from a CSS file so not every page looks so similar?
Yes, you can use HTML as if it were an html page. However I like to use echo to show html... i.e.
echo ("<center>This is shown using echo()</center>");

In order to show html w/o using echo() you need to close the php tag i.e.

html stuff here<?php?>more html here

Link to comment
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...