DaveS
(DaveS)
July 31, 2018, 4:37pm
#1
asking this here, as I have searched the world over and found nothing that points a direction that seem to work
My Xojo app is writing a dynamic website
It consists of an INDEX.HTML that is made up of 5 iFrames… one is named “container” another is named “sidebar”
Sidebar is loaded with a “menu” made of of UL/LI/ and anchors. the idea being that you click on a link, and that page (all local) is loaded into container via a short Javascript
function navigate(goto) {
alert(goto); // this alert shows
document.getElementsByID('container')[0].src = goto; // nothing happens,
alert("ok"); // this one does not
}
sample link [this is inside an unordered list]
<a onClick="navigate('../classes/index.html')">Classes</a>
I realize this is not Xojo related (other than an Xojo app is writing the code for me ), but hoped that someone here could help…
getElementsByID is not a thing. You want getElementById(), and YES THE CASING MATTERS (lowercase d).
DaveS
(DaveS)
July 31, 2018, 4:49pm
#3
true… typo… but even fixing that … still nothing
document.getElementById('container')[0].src = goto;
document.getElementById('container').href = goto;
Is container
the iframe? StackOverflow says that you should use the .src
property.
Does document.getElementById('container').src = goto;
do anything?
The developer console can be handy with debugging Javascript, it’ll give you the errors instead of just silently failing.
DaveS
(DaveS)
July 31, 2018, 5:19pm
#5
The debugger is returning
TypeError: null is not an object (evaluating 'document.getElementById('container').src = goto')
‘goto’ has a value, as the Alert is displaying it to me
So what that’s telling us is that document.getElementById('container')
isn’t giving an object to work with (so it has no src property either). Is the id of the iframe “container” ?
<iframe id="container" src="something.html"></iframe>
DaveS
(DaveS)
July 31, 2018, 5:26pm
#7
and if I try this method
<a href="/sidebar.html" target="container">link1</a>
I get unable to load local resource …
but doing this
<a href="../../sidebar.html" target="container">link1</a>
does load the page, but NOT in the iframe, it does it full screen
DaveS
(DaveS)
July 31, 2018, 5:34pm
#8
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head><title></title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<style type='text/css'>
html, body {position:absolute; left:0;top:0;height:100%;width:100%;
margin:0; overflow : hidden; padding:0;}
div { padding:0; margin:0; border:none;}
#header,#ref {position:fixed; height:35px; width:100%; overflow : hidden;}
#header {position:fixed; top:0px; }
#ref {position:fixed; top:36px; }
#sidebar,#container {position:absolute; top:72px; height:calc(100% - 114px); overflow-y: auto;overflow-x: auto; scrolling='auto';}
#sidebar {left:0px; width:300px; }
#container {left:301px; width:calc(100% - 301px); }
#footer {position:fixed; left:0px; bottom:0px; height:35px; width:100%; overflow : hidden;}
#sidebar {background-color:cyan;}
</style>
</head>
<body bgcolor=red>
<iframe id='header' src='support/topbar.html/'></iframe>
<iframe id='ref' src='support/refbar.html/'></iframe>
<iframe id='container' name 'container' src=''></iframe> //<----------------
<iframe id='sidebar' src='support/sidebar.html/'></iframe>
<iframe id='footer' src='support/botbar.html/'></iframe>
</body>
</html>
I’m not trying to be rude with this, it should be name='container'
and I would also try a more unique name, just in case . You would then not need javascript, and could use the target=""
capabilities.
Stripping away a bunch of the stuff for illustration:
index.html
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title></title>
</head>
<body bgcolor=red>
<iframe id='headerFrame' src='support/topbar.html'></iframe>
<iframe id='refBarFrame' src='support/refbar.html'></iframe>
<iframe id='mainContentFrame' name='mainContent'></iframe>
<iframe id='sideBarFrame' src='support/sidebar.html'></iframe>
<iframe id='footerFrame' src='support/botbar.html'></iframe>
</body>
</html>
sidebar.html
<a href="../classes/index.html" target="mainContent">Classes</a>
Does that work for you?
(have not tested this locally, but see it working by example here )
DerkJ
(DerkJ)
July 31, 2018, 8:52pm
#10
Html5 doesnt support the name= attributes.
Try getElementById(theid) with the double quotes.
[quote=398726:@Derk Jochems]Html5 doesnt support the name= attributes.
Try getElementById(theid) with the double quotes.[/quote]
Dave defined the document type as HTML 4
DaveS
(DaveS)
July 31, 2018, 9:05pm
#12
rude is say “Hey Moron… you forgot the equal sign”… otherwise your response was part of what I was looking for , as in “Hey you missed this”
DaveS
(DaveS)
July 31, 2018, 9:28pm
#13
not HTML5… notice the first line…
Thanks… that made it work using “TARGET=” which I prefer
But I did notice, it only works, if the original IFRAME had a blank “SRC=’’” specified… otherwise it did not replace it
but if it started blank, then my links switched the content as desired…