HTML/CSS/JavaScript Html page in another html page scrollbars issue

Question

I have a problem when I'm trying to load another HTML file into my existing one. I am doing that with JavaScript with this fuction inside my html code

<script>
        function load_home(){
                document.getElementById("content").innerHTML='<object type="type/html" data="New folder\home.html" ></object>';
        }
    </script>

Q1: This code does not find the "home.html" when it is in the folder if I move it to the same folder and change it to data="home.html" it works as it should . Can it be solved ?

Q2: Even when the code finds my "home.html" it loads in a box-type thing with scroll bars , to be able to see the full content of the page ( the scroll bars can be vertical or horizontal depending on the content inside the loaded page )

The "index.html" and it's "style.css" file :

/* Font to left and change text type*/
body{
 margin : 0;
 padding : 0;
 font-family : 'Arial',serif;
 min-width:1200px;
}

a{
 text-decoration : none;
}
/*NAV CLASS  */
#menu >.nav {
 
 background-color : #87CEEB;
 color: white;
 list-style : none; 
 
 padding : 4px 0 12px 0;
 margin : 0px;
}
/*CONTENTS RIGHT*/

.nav  > .nav-contects{
 text-align : right;
}
#menu >.nav  > .nav-contects > li {
 display : inline-block;
 padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
 
 font-size: 16px;
 margin : 0;
 position : relative;
 bottom : 10px; /*align width center */
 
}
/*a tag inside a li tag inside a .nav class*/
#menu >.nav  > .nav-contects > li > a { 
 color: #f79963;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
#menu > .nav > .nav-contects > li > a:hover {
 color : #ffffff;
 padding : 0 0 0 0 ;
 /*margin : 0px;
 background-color : #888888;*/
}

<DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>
  my title
 </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body onload="load_home()">

 <nav id="menu">
  <ul class="nav">

   <div class="nav-contects"> 

    <li><a href="#Home" onclick="load_home">Home</a></li>
   </div>
  </ul>
 </nav>
   
 <div id="content" align = "center">
  
 </div>
 <script>
  function load_home(){
    document.getElementById("content").innerHTML='<object type="type/html" data="New folder\home.html" ></object>';
     }
 </script>
 <div class="footer" align = "center">
  <p align = "center"> <i>an awesome business</i> </p>
 </div>
</body>

</html>

the "home.html" file

<DOCTYPE html>
<html lang="en">

<body>
        Some random long text
        dasfda gsdwgdsgd
        sgsdgsdgdsf sadddad     asddddddddddddddddddddddddddddddddddddddddddddddd
</body>

</html>

PS : this may be all wrong , maybe I'm trying to do everything using the wrong way

PSS : this is not the full code of my documents , I removed a lot of my code to be sure that there were no bug with it , including style and other

EDIT#1: I want the "restricted" box to disappear and open the "home.html" like it should if I open it from my computer directly"

I really appreciate any help you can provide.

`data="New folder\home.html"` - try a _proper_ path instead - no (unencoded) white space, and forward slashes. — CBroe, Jul 26 '16 at 17:20
Can you please clarify point (2)? Are you trying to simply prevent the scrollbars from appearing, should the popup dynamically resized based on the content, what are the expected rules behind the popup? — Hodrobond, Jul 26 '16 at 17:21
@Hodrobond no it does not resize based on the content is stuck on the size not matter what content is inside it . I don't know if the spaces can be an issue but I've tried it without like a simple 'new' and still does not work — ehem, Jul 26 '16 at 18:05
@ehem _should_ it resize dynamically though? What is the _expected_ behavior? — Hodrobond, Jul 26 '16 at 18:08
@Hodrobond thank you for your help . but how to resize it dynamically it does not resize if its filled with a hundred lines nor if its empty — ehem, Jul 26 '16 at 18:19
@ehem It's probably because you're putting a 'body' inside of a 'body' and the following style is applied `min-width:1200px;`. You can alter your styles with CSS, it would be much easier to assist further if there was a jsFiddle =) — Hodrobond, Jul 26 '16 at 18:25

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

(1) This issue is likely caused by the space in your url. It should be escaped using encodeURI(src) or src.replace(/ /g, '%20') CSS and JQuery: spaces inside image name break code of url()

(2) If you would simply like the scrollbars to disappear, add the style overflow: hidden to your popup. Be warned however that if any content spills out of the box it will not be visible/salvageable.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 26 '16 at 17:20

Hodrobond

1,665
17
18

2)yeah sorry if I haven't been clear enough I don't want the box I want it to fill the page as it should if I just open the home.html directly 1) with and without the spaces the result is the same – ehem Jul 26 '16 at 18:13
I believe you may additionally be using the wrong slash in your url. try `/home.html` – Hodrobond Jul 26 '16 at 18:15
As for the page loading, I believe you're misunderstanding what you're doing. the `document.getElementById("content").innerHTML=` is replacing the contents of the element with id "content". If you'd like to redirect the page, I'd say try `window.location.href = "http://stackoverflow.com";` or `window.location.replace("http://stackoverflow.com");` (http://stackoverflow.com/questions/503093/how-to-redirect-to-another-page-in-jquery) Apologies, it sounded like you were attempting to open a popup of the new page. – Hodrobond Jul 26 '16 at 18:20
1) you are "damn" right , I got very confused with the windows location bar . 2) I want the index.html that contains the menu bar which when it load it loads the home.html below it to remain in the same location in every html document. Because I want a static menu bar and apply animation slide effect to other pages while navigating – ehem Jul 26 '16 at 18:23
Ok. I changed the body of the "home.html" to `` it looks like it works perfectly now . With min-width set in 1200px could it screw me over again for something else ? ~ marked as solved – ehem Jul 26 '16 at 18:29
I would advise against writing inline styles like ``. It remedies the pain but doesn't treat the illness. You shouldn't have multiple body tags in an html page, I'd advise restructuring your home.html file. It looks like you're attempting to dynamically load content onto the page (I'm guessing multiple times). May I suggest looking into iFrame? (example: http://stackoverflow.com/questions/2979860/how-can-use-iframe-in-html) – Hodrobond Jul 26 '16 at 18:32

HTML/CSS/JavaScript Html page in another html page scrollbars issue

1 Answers1