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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
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 …
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…
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)

896 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

11 Experts available now in Live!

Get 1:1 Help Now