?
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
Medium Priority
?
171 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

777 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