I am trying to update from frames to flexbox. Now i am trying to use jquery. I have succesfully been able to load the menu from the first div into the second. But sending files from the second div to load into the third nothing I try works. The first div holds a master menu. the second holds a submenu. The thrid div is for viewing files. Id like to actually have a fourth DIV for viewing files as well. This is a large educational tool I build in frames. With the target command I have no problem sending into the different frames. How do i accomplish this in jquery?
This also is running off-line. It has the ability to write notes and view articles vocab etc that a student will need in his or her studies. Its a hefty size of 64gb due to support learning files. The index/menus are about 2gb as its for every subject (LA/ELL has about 75% of these files). Began in html 2.0 and now switiching to html 5 flexbox
Am I "barking up the wrong tree" (looking in the wrong place {JQUERY} for an answer)?
Heres what I have tried so far
writing the jquery code inside both the container document and the sub-menu external file that Jquery The home page where everything loads has the main menu inside it and it loads the external submenu with no problem. But when I click on the submenu it says the file is not found and nothing shows in the 3rd div on the home page. IF I change the submenu to target="_blank" when I click the submenu inside the home page it opens the doc in a new tab with no problems. It then finds the page.
My goal is to have the menu open in a third div something the student needs to read and the if possible open the notes/quiz questions vocab etc in the fourth div so that what is read is next to the contenteditable page in div 4.
This is my flexbox home page
<style type="text/css">
.row1 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
min-height: calc(70vh); /* set min container height to viewport height */
}
.row2 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
min-height: calc(30vh); /* set min container height to viewport height */
}
.col-1 {
flex: 0 1 30%;
background: beige;
border: 1px solid black;
font-size: 2em;
padding: 4px;
overflow: hidden;
overflow: scroll;
box-sizing: border-box;
min-height: calc(70vh); /* set min container height to viewport height */
}
.col-2 {
display: flex;
flex: 0 1 auto;
margin-left: auto;
background: ;
border: 1px solid black;
padding: 4px;
text-overflow: ellipsis;
max-height: 70%;
overflow: hidden;
box-sizing: border-box;
min-height: calc(70vh); /* set min container height to viewport height */
}
.col-3 {
flex: 0 1 22%;
background: beige;
border: 1px solid black;
padding: 4px;
overflow: hidden;
overflow: scroll;
box-sizing: border-box;
min-height: calc(30vh); /* set min container height to viewport height */
}
.col-4 {
flex: 0 1 6%;
margin-left: auto;
background: #eee;
border: 1px solid black;
padding: 4px;
overflow: hidden;
overflow: scroll;
box-sizing: border-box;
min-height: calc(30vh); /* set min container height to viewport height */
}
.col-5 {
flex: 0 1 21%;
margin-left: auto;
background: #eee;
border: 1px solid black;
padding: 4px;
overflow: hidden;
box-sizing: border-box;
min-height: calc(30vh); /* set min container height to viewport height */
min-width: calc(10vw);
}
body {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {
display: block;
overflow: scroll;
overflow: hidden;
max-width: 100%;
max-height: 435px;
margin: 0 auto;
border: 0px solid black;}
li.en24-N
{ color: black;
font-family: arial, Sans-serif;
font-size: 24pt;}
p
{ color: black;
font-family: arial, Sans-serif;
font-size: 12pt;}
</style>
</head>
<body>
<section class="row2">
<div class="col-3" id="index-A">
</div>
<div class="col-4" id="menu-A">
</div>
<div class="col-3" id="index-B">
</div>
<div class="col-4" id="menu-B">
</div>
<div class="col-3" id="index-C">
</div>
<div class="col-4" id="menu-C">
</div>
<div class="col-5" id="toc">
</div>
</section>
<section class="row1">
<div class="col-1" id="file-A">
</div>
<div class="col-1" id="file-B">
</div>
<div class="col-1" id="file-C">
</div>
<div class="col-2" id="contents-menu">
<iframe src="0_netbook_loy__contents.html" scrolling="auto" frameborder="0"></ifraame>
</div>
</section>
an example of a submenu is
<body>
<div class="treehouse">
<ul>
<li><input type="checkbox" id="item-6-1" /><label for="item-6-1" class="green3"><span xml:lang="en" lang="en">A</span></label>
<ul>
<li><a href="_A-0/AI-eng__a-01__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-02__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-03__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-04__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-05__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-06__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-07__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-08__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-09__idx-A.html" target="content" class="green8"> A </a>
</li><li><a href="_A-0/AI-eng__a-10__idx-A.html" target="content" class="green8"> A </a>
</li>
</ul>
</li><li><input type="checkbox" id="item-6-26" /><label for="item-6-26" class="green3"><span xml:lang="en" lang="en">Z</span></label>
<ul>
<li><a href="_Z-0/AI-eng__z-01__idx-A.html" target="content" class="green8"> Z </a>
</li><li><a href="_Z-0/AI-eng__z-02__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-03__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-04__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-05__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-06__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-07__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-08__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-09__idx-A.html" target="content" class="green8"> Go </a> Z
</li><li><a href="_Z-0/AI-eng__z-10__idx-A.html" target="content" class="green8"> Go </a> Z
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I know the target does not work in jquery. If it did Id have this solved!
I am using the script commands suggested from this website.
<script type='text/javascript' src='jquery-3.3.1.js'></script>
<script type="text/javascript" src="lib/jquery-1.js"></script>
<script type="text/javascript">
$(function(){
$('#nav ul li a').click(function(e) {
$('#index').hide().load( $(this).attr('href') , function(){
$('#index').show()
})
return false
})
})
</script>
any suggestions?