Solved

CREATE A SINGLE HTML FILE SO THAT THE PAGE IS SPLIT INTO 2 REGIONS  (LIKE FRAMES) WITHOUT USING MULTIPLE HTML PAGES

Posted on 2004-09-21
3
167 Views
Last Modified: 2010-04-09
Id like a left side and a right side.  The left will be 25% of the right side. The left side will contain a javascript navigation tree (collapsible list with links) the right side will display a section of the page (via anchors) that is inferred by clicking one of the tree nodes.   I need everything in a self contained html file because i must save this file in a Lotus Notes database and unfortunately Lotus Notes does not resolve the html references when using several files that depend on one another (such as when you would use Frames) so I was thinking of creating the list on the top of the page and the data right below it. I want the frames because i want both the data and the navigator list displayed together.


Is this even possible??



0
Comment
Question by:const71
3 Comments
 

Expert Comment

by:daniel_jrm
ID: 12118776
If you have done HTML before, you will know where to put the links on the left, just replace thoselinkd with the Javascript. I hope that answers your first question...
0
 
LVL 4

Expert Comment

by:llcooljayce
ID: 12118791
If you don't want to use frames then the only thing you can do is use tables.

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <table width = "100%">
      <tr>
        <td width = "25%">Links go here</td>
        <td width = "75%">Content goes here</td>
     </tr>
   </body>
</html>

Gotta tell you though ... make it easier on yourself and use frames.  Much easier to edit later on.  Cheers.

Jayce
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 12120327
A solution which might work is using hiding/showing of divs. Although the crossbrowser issue makes it questionable.

You'd use the getElementByClassName function provided at http://blog.mooncalf.me.uk/archive/2003/03/25/RefinedClassFetching

Then you'd set up a website in a fashion like stated below

<body onload="showpage('p1');">
<div id="menu">
  <a href="#"onclick="return showpage('p1');">Page 1</a>
  <a href="#"onclick="return showpage('p2');">Page 2</a>
  <a href="#"onclick="return showpage('p3');">Page 3</a>
</div>
<script>
function showpage(pageid)
{
 var all_obj = document.getElementsByTagName('div');
 for(i = 0; i < all_obj.length; i++)
 {
    if(all_obj[i])
    {
      if(all_obj[i].className=="section")
         all_obj[i].style.display =
            (all_obj[i].id == pageid ? '' : 'none');
    }
 }
}
</script>
<div class="section" id="p1" style="display:none;">Page1</div>
<div class="section" id="p2" style="display:none;">Page2</div>
<div class="section" id="p3" style="display:none;">Page3</div>

Then using javascript (tested on IE6 and FireFox 0.8) you could dynamically hide and show the different sections on the page.

Regards -r-
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question