href won't work when using frames and expandable lists

Question

I have a website that includes two frames. One on the left for Table of contents and one on the right. The table of contents on the left is an expandable list which I implemented using jquery. Each of the final children is a hyperlink for another html that will be opened in the frame on the right.

The code for the left frame is as follows

<html>

<head>
<meta http-equiv="Content-Language" content="en-us"/>
<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>User Manual</title>
<base target="mainFrame"/>
</head>

<body>

<h2>Table of Contents</h2>
<div class="listContainer">
<ul class="expList" id="expList">
<li><a href="intro.html">Introduction</a></li>
        
        <li>Main Screen
          <ul>
            <li>
              <a href="addInHouse.html">Add In-House Client</a>
            </li>

          </ul>
          </li>
         </ul>
</div>
<script>
function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();
  };
 
  $(document).ready( function() {
      prepareList();
  });
  </script>
</body>
</html>

The code of the parent html that contains the two frames is as follows

<html>
<head>

   <title>User Manual</title>
<head>
<frameset border="10" cols="20%,80%" frameSpacing="10">
<frame name="navFrame" src="contents.html">
<frame name="mainFrame" src="main.html">
</frameset>
</html>

The issue that I am having is with the Add in house href. The introduction href when clicked works perfectly. While on the other hand when I click on add in house it does not open on the right frame. If I choose open in a new window it opens perfectly. Any thoughts?

**EDIT To explain better what I am trying to do this link leads to apache ant user manual. I am trying to create a user manual for my application that works exactly the same way. The only difference between the two is that my table of contents is an expandable list while in the apache ant user manual click on a category reloads the table of contents with the contents of the category instead of expanding set category which is what I am trying to do. My issue is that the href links inside the inner list contents of the expandable lists do not actually work

The base target code works as the mainFrame does not need to be in the same document of the contents html. It's inside the parent frame from which the left frame is running

to keep the table of contents always visible no matter where the user is. The whole website is going to work as a user manual for an application I am developping. — John Demetriou, Sep 05 '14 at 09:00
what do you mean? the user will click in different links, opening up different html pages each documenting a certain part of the application. I am using frames so the different html pages will only open in the right frame and the table of contents html stays on the left — John Demetriou, Sep 05 '14 at 09:03

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

The answer: You are using a base tag to tell what frame target you are using for your links. But the frame with name "mainframe" is not available in the document.

BUT:

The real problem here is the usage of frames. IMsOP gives some good reasons.

There is no nead at all for frames here. What you actually want is a fixed sidebar and content that can be scrolled:

<div id="sidebar"></div><!-- should be fixed -->
<div id="content"></div><!-- should be scrollable -->

We can all do this with css

#sidebar {
    position: fixed;
    width:20%;

    height: 400px;
    background:#333;
}

#content {
    position: relative;
    width: 80%;
    float:right;

    height:2000px;
    background: #ddd;
}

I added height and bg to the elements as an example.

Now we can start adding some syntax sugar. For instance a collapsible sidebar:

<div id="container">
    <div id="sidebar"></div><!-- should be fixed -->
    <div id="content"></div><!-- should be scrollable -->
</div>

with the added css:

.small-sidebar #sidebar {
    width:5%;
}
.small-sidebar #content{
    width:95%;
}

and Javascript to toggle the smaller sidebar:

jQuery('#sidebar').on('click', function() {
    jQuery('#container').toggleClass('small-sidebar');
});

edited May 23 '17 at 12:29

Community

1
1

answered Sep 05 '14 at 09:24

Pinoniq

1,365
9
13

and this code will keep the sidebar there as a table of contents as the user navigates in the contents? – John Demetriou Sep 05 '14 at 09:36
I like the sidebar design yes. But what I am trying to do as I see cannot be done with a sidebar. I want to open different html files next to the sidebar. How can I do that? – John Demetriou Sep 05 '14 at 09:43
The base target code works as the mainFrame does not need to be in the same document of the contents html. It's inside the parent frame from which the left frame is running – John Demetriou Sep 05 '14 at 09:52
Instead of looking at it as opening different html files next to each other. Rewrite the user story as 'I want to show multiple pieces of content next to each other'. piece of cake. Frames is never the good answer. – Pinoniq Sep 05 '14 at 09:54
Did not get your last comment. What are you suggesting I do? By the way you are not answering a question, rather you are adapting the question to be in your field of knowledge and philosophy – John Demetriou Sep 05 '14 at 10:05
I'm simply pointing out that using frames is never a real solution. I am simply writing that you have a XY-problem. In the long run this will save you time. When using frames people will for instance not be able to bookmark the page they are on. Neither will they be able to send a page to a friend/colleague/... – Pinoniq Sep 05 '14 at 10:09
This has as much to do with 'my philosophy' as it is when a car-mechanic tells you to stop pooring sugar water in your engine. We don't go telling that car mechanic 'well, that might be just, like, your opinion, man'. to be able to answer your question better. Show us more code, for instance your code in the parent – Pinoniq Sep 05 '14 at 10:13

score 0 · Accepted Answer · answered Sep 05 '14 at 11:32

As it turns out the reason I was having this issue was the jquery code I had was messing with the href links. I replaced the jquery code for the expandable lists with simpler javascript code

            <li>
            <a href="#" onclick="swap('MainScreen');return false;">Main Screen</a>
            <ul id="MainScreen" style="display: none;">

            <li>
              <a href="addInHouse.html">Add In-House Client</a>
            </li>
          </ul>
          </li>

<script>
function swap(targetId){
  if (document.getElementById){
        target = document.getElementById(targetId);
            if (target.style.display == "none"){
                target.style.display = "";
            } else{
                target.style.display = "none";
            }

  }
}
  </script>

href won't work when using frames and expandable lists

2 Answers2