Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Newbie: Changing frame content based on submenu selection

    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 :-)

    Sub
    Attached Files Attached Files

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.

    aa

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 :-(

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    You can do this using iframes as explained, then on the links you set the target of the links to the iframe...

    Code:
    <iframe src ="default_content.html" width="100%" height="300" name="frame"></iframe>
    Then for the links in your navbar you set them like this:
    Code:
    <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..

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:
    http://www.entheosweb.com/website_de...e_includes.asp

    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.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 :-)

    Sub

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to be honest, iFrames are a bit oldschool. have you looked at some simple ajax?

    maybe check out one of these

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

  • #8
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    BadSubwAy (06-13-2010)

  • #10
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 :-(

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That page tells you how to implement it. Try it and ask questions if you get stuck.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 :-)

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Australia - Perth
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 :-)

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!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">
    <head>
    <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 {
    	color:#414958;
    	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 {
    	background:transparent;
    }
    .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;
    }
    -->
    </style>
    <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){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    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)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    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=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    </head>
    
    <body>
    <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>
    		<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>
    		</ul>
    		<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>
    	<div align="center" class="footer"><!-- end .footer --><a href="mailto:test@test.com.aunorrish@matrixengineers.com.au">Email Admin</a></div>
    	<!-- end .container --></div>
    </body>
    </html>
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •