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
169 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS style formatting? 2 37
Allow a tab area under the contents 1 26
Compute age Html 2 27
Why is my $_POST not going to results page 10 41
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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