Converting Frame Layout

Question

I am attempting to convert a layout that is currently using frames that works perfectly having a fixed header (this section needs to be named Banner) and a frame on the bottom that scrolls whenever a user posts something in the chatroom (named Body). This works great for frames. I was looking at another conversion post here on stack and trying to use it.

The frame coding is:

<html>
  <head><title>$main:roomname$</title></head>

  <frameset cols="100%"><frameset rows="120,*">

  <frame name="BANNER" src="$BASE$/BANNER?$CONFIG$" scrolling="AUTO" marginheight="1">
  <frameset cols="*,140" FRAMEBORDER=YES FRAMESPACING=2 BORDER=2>
  <frame name="BODY" src="$BASE$/BODY?$CONFIG$" scrolling="YES">
  <noframes>
    <body>
      Frames are required, sorry folks.
    </body>
  </noframes>
  </frameset></frameset>
</html>

What I'm trying to do is below. The room name pulls and shows as it should for the browser, but it doesn't pull any of the other information. It just shows a white screen.

edit Trying out more coding when I view the page source after trying to load it, it shows the full url pulled from $BASE$/BODY?$CONFIG$ , it just doesn't display it inside the Div like I want it to.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
<title>$main:roomname$</title>
<script>
$(document).ready(function(){
$("#BANNER").load("$BASE$/BANNER?$CONFIG$");
});
</script>
<script>
$(document).ready(function(){
$("#BODY").load("$BASE$/BODY?$CONFIG$");
});
</script>
<style>
.BANNER {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
}

.BODY {
position: absolute;
top: 150px; /* 140px (header) + 10px top padding */
left: 10px; /* 10px padding */
right: 10px; /* 10px padding */
bottom: 10px; /* 10px padding */
overflow: auto;

}
</style>
</head>

<body>
<div id="BANNER"></div>
<div id="BODY"></div>    
</body>    
</html>

edit 2** with suggestions from below.

Not sure if this is what you mean. http://jsfiddle.net/17hmr6a5/ collaboration link: http://jsfiddle.net/17hmr6a5/#&togetherjs=jOMFSxoTkK — Robert Ettinger, Feb 05 '15 at 08:40
I have including a few other things in the fiddle you helped me with. Same outcome. When I try and load into that page, white screen. If I view the source, I can see each individual link for the config files, and if I click on those it takes me there, but it does not display as is in the div, both files on the same page — Robert Ettinger, Feb 05 '15 at 09:34
check this out : http://embed.plnkr.co/f7LatqNW5hxY2K781edV/preview — Dipali Vasani, Feb 05 '15 at 09:51
`
` – that makes no sense, `div` does not have a `src` attribute. Looks like basically you have just replaced `frame` with `div`, and expect that to work the same way (which of course it doesn’t.) — CBroe, Feb 05 '15 at 10:04
I am now aware that it does not work the same way and is at the crux of what I'm trying to figure out, is how to show the information called from that file inside of that div. — Robert Ettinger, Feb 05 '15 at 10:19

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

1

Preview : http://embed.plnkr.co/f7LatqNW5hxY2K781edV/preview

HTML main:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div id="BANNER"></div>
<div id="BODY"></div>    
  </body>    
</html>

HTML : 1.html(file that you are trying to embed) :

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

JS:

$(document).ready(function(){
    $("#BANNER").load("1.html");
});

If the file is not in your local server then may be you need to do some workaround as described here

edited May 23 '17 at 12:12

Community

1
1

answered Feb 05 '15 at 09:56

Dipali Vasani

2,526
2
16
30

The file is on the local server. I have input the information that you showed me (hopefully right) and it still does not display that information in the Div. I also updated my coding in my post so it can be seen how I have it on the server – Robert Ettinger Feb 05 '15 at 18:45
can you share your code ? as it is not possible to debug or figure out what's the actual problem. load() will work in this scenario. – Dipali Vasani Feb 06 '15 at 04:50

Converting Frame Layout

1 Answers1