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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

760 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now