View Full Version : Newbie: Changing frame content based on submenu selection

06-12-2010, 08:30 AM
Hi guys,

First of all, I'd like to apologize for my writing skills as I'm from a non english-speaking country and I moved to Australia not long ago. Anyway, I'm trying to help a friend developing a website and I'm having some trouble getting the page to look like what he wants. I am an absolute rookie in website development and I'm discovering Dreamweaver as I speak. I managed to understand a few concepts based on what I know in VBA in Excel and tried to use some templates I found on the net. The last part didn't go really well and I decided to get rid of what I tried to make my explanations as clear as possible.

Basically, I have a drop down menu on the left side of the page that works quite well at the moment.Wwhat I want to do is : the user goes over the first link of the drop down menu (called "General for Sale" under the section "Buying") and when he clicks on it, he loads on the right side the content of another page called "generalforsale.html. All of this obviously without refreshing the whole page and with the option of clicking on another section from the drop down menu to load another page...
And all of this knowing that I'd like one specific page to be displayed on the right when the user first arrives on the website that would then be replaced by a page (generalforsale.html for example), depending on what he selects from the drop down menu.

I have honestly tried everything I found and could understand, unsuccessfully... I have attached a lighter version of what I'm trying to do in case one of you guys has the time to have a look.

I completely understand if this is not the policy of the forum and therefor apologize in advance.

Thanks for reading me and for your help :-)


06-12-2010, 02:58 PM
Well, I'm not the one to tell you the specific details, since I am barely past newbie rank but I've done something similar myself using iFrames, I believe it was...but I'm not good enough to tell you the specifics of how you would go about doing it.


06-12-2010, 03:12 PM
Thanks for the info. I'll work on this and see if I can work something out. I'm just afraid I'm gonna end up with the same errors as before :-(

06-12-2010, 10:56 PM
You can do this using iframes (http://www.w3schools.com/tags/tag_iframe.asp) as explained, then on the links you set the target of the links to the iframe...

<iframe src ="default_content.html" width="100%" height="300" name="frame"></iframe>

Then for the links in your navbar you set them like this:

<a href="file.html" target="frame">My Link</a>

Then when you click on the link file.html will replace default_content.html in the frame...

Your other option would be using JavaScript/Ajax to replace the content w/o refresh..

06-13-2010, 04:03 AM
Sounds like you could "include" the same menu, footer, etc. on every page (using server side includes of either html or php files to include your menu etc.). Then when you click on the menu the page will appear to be loading new content in the center but really it is loading the new page but the menu and header, etc. will look like it remains the same. But that would "refresh" the page. Why is refreshing the page a bad thing? I have the includes on my website and on Firefox it looks pretty static. I do admit on IE, it does kind of flash as it refreshes the page. I am not sure why.

On my website, the main page uses php includes and the other pages (except the blog) use (s)html includes. weavehouston.org

Here is a link on using server side includes in Dreamweaver:

It does say all the pages using Server Side Includes must be .asp or .shtml files, but from experience I know you can edit (VERY CAREFULLY) your htaccess file to parse all html pages as shtml so that your users don't have to remember shtml extensions on your file names. Whether this puts too big a burden on your processors would probably depend on your volume of hits, etc.

06-13-2010, 05:10 AM
Thanks for the info guys.

I tried Scriptet's solutions as it really looks like what I'm after. So now, rea lly stupid question... How can I place this frame on the right of my menu ? At the moment the frame appears below the menu (probably because I put the code you gave me after the coding for the menu) and I feel like I need to divide the page in two sections first. And unfortunately, I have no idea how to do that :-(

Thanks for your help :-)


06-13-2010, 05:41 AM
to be honest, iFrames are a bit oldschool. have you looked at some simple ajax?

maybe check out one of these (http://freeajaxcodes.blogspot.com/2009/05/7-ways-to-load-content-via-ajax.html)

it's all very basic if you look at the example code. If you're interested, I can elaborate and help ya!

06-13-2010, 06:43 AM
To be honest, I'm completely lost and I'm getting desperate. No matter what I try I keep getting errors on the page, and frames loading in the wrong spot, etc...

I'm really interested by what you just mentioned EricBenjamin, but I just have no idea what to do. I thought my english level was going to hold me back but it looks like it's my lack of knowledge in coding/developing that stops me :-(

I'd be more than happy to follow your orders/advice, anything actually :-D

06-13-2010, 06:56 AM
Don't use frames. Use something like this however be sure to make it degrade nicely for those non-js users meaning if the user's js is disabled they can still see the content.

06-13-2010, 08:05 AM
Thanks _Aerospace_Eng_, this website is actually the first one I started to read from. It is pretty much what I want to do but my (very) limited knowledge stops me from coding the page exactly the way I want :-(

06-13-2010, 08:10 AM
That page tells you how to implement it. Try it and ask questions if you get stuck.

06-13-2010, 01:03 PM
Alright guys, I'm getting there, slowly, really slowly :-) But hey, that's the only way to learn isn't it?

So I've upload a really really light version of what I want to do. No point to surcharge the page with extra coding and logos if I need to start over every hour :-D http://subway.comuf.com/

I still have a few questions:

. I believe I used the coding from http://dynamicdrive.com (link given by _Aerospace_Eng_, thanks by the way) properly but the second page doesn't load in the content area. I thought it was because I already had something loaded (so the user can already see something when he first arrives) but it did the same thing when I tried with no writing in it... Any idea?

. I have an image in the background and I'd like to see it behind the logo at the top. Any idea what part of the coding I have to change to do this?

. I'd like the sidemenu (on the left) to be slightly more on the right, so I can see more of the blue background.

. Finally, I'd like to have another background image just behind the left menu and the content area on the right... I haven't been able to do this yet only because in the css coding I've used, changing the background would affect the header and footer (maybe because I'm doing it in the body parameters of the css).

I'm pretty sure all of this is quite simple to fix, but I just don't have the knowledge to do so. Thanks again to everybody that spent time replying to my questions on this post and I hope you'll be able to help me again

Sub :-)

06-13-2010, 05:22 PM
I'm getting a website under review from that site. Guess we'll have to way. By the way there is better free hosting like freehostia that allows you to do so much more. I know you are just helping your friend but if he has a business that depends on his site being up or something then he may want to consider hiring a professional.

06-14-2010, 01:25 PM
Thanks for the info :-) I'll definitely look into freehostia.

In terms of hiring a professional, yes I completely agree, and eventually he will do it. He doesn't have a business that depends on this website, so he doesn't want to spend the money yet. He wants to have an idea of what's possible and then contact someone to develop something full on. But thanks for the advice anyway.

By the way, any idea why my links on the left don't load what I want into the content area?

Sub :-)

06-14-2010, 03:21 PM
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="menu_files/cbcscbindex.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #fbfcfe;
padding-left: 15px padding-right: 15 px margin: 0;
padding: 0;
color: #000;
background-image: url(images/test_background.jpg);
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
a:link {
text-decoration: underline;
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus {
text-decoration: none;
.container {
width: 95%;
background-image: url(images/gradient_bkg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
.header {
.sidebar1 {
float: left;
width: 30%;
padding: 10 px
.content {
padding: 10px 0;
width: 70%;
float: left;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
color: #000;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
.footer {
padding: 10px 0;
width: 100%;
background-color: transparent;
clear: both;
<script type="text/javascript">

* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
loadpage(page_request, containerid)
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

function loadobjs(){
if (!document.getElementById)
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref.setAttribute("src", file);
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
if (fileref!=""){
loadedobjects+=file+" " //Remember this object as being already added to page


<div class="container">
<div class="header"><img src="images/logo.png" alt="" width="567" height="140" /><!-- end .header --></div>
<div class="sidebar1">
<ul id="ebul_cbindex_1" class="ebul_cbindex" style="display: none;">
<li><a href="javascript:ajaxpage('generalforsale.htm', 'content');">General for Sale</a></li>
<ul id="cbindexebul_table" class="cbindexebul_menulist" style="width: 151px; height: 371px;">
<li class="spaced_li"><a><img id="cbi_cbindex_1" src="menu_files/ebbtcbindex1_0.gif" name="ebbcbindex_1" width="151" height="30" style="vertical-align: bottom;" border="0" alt="Buying" title="" /></a></li>
<script type="text/javascript" src="menu_files/cbjscbindex.js"></script>
<!-- end .sidebar1 --></div>
<div class="content" style="text-align:center" id="content">
<p>Text to be displayed when user first arrives on website<!-- end .content --></p>
<div align="center" class="footer"><!-- end .footer --><a href="mailto:test@test.com.aunorrish@matrixengineers.com.au">Email Admin</a></div>
<!-- end .container --></div>

You had your <div id="content"></div> inside of your menu. You had some CSS errors in your code, as well as html errors. Always use a validator. If that doesn't work then its the host.

06-17-2010, 11:45 AM
Thank you so much for your help _Aerospace_Eng_!!!!!

So I double checked the code and tried to understand what went wrong. I'm picking up more and more things everyday :-D

I have two quick questions remaining:

. would someone know how to shift the left menu a little bit more on the right? So I can have some blue on the left of the menu?

. what would be the best way to have a nice border (maybe rounded angles) around the page that appears in the content area?

Thanks all for your help and time :-)


06-17-2010, 12:02 PM
I'm trying to recode the page and make the changes I want, which mainly include adding more menu buttons and sub-menus. I now face a problem related to the ajax coding you made for me _Aerospace_Eng_. When I click on a link from the menu on the left, I believe t refers to this function:

<a href="javascript:ajaxpage('generalforsale.htm', 'content');">

There is obviously somewhere, a line that specifies where the page "generalforsale.htm is located. My problem is that this page is in a sub-folder (which is going to change for each main button) of one main folder that I don't want to change. So is there a way for me to specify in the code I quoted before the submenu and then the page?

Thanks guys :-)