ehem ehem - 1 year ago 54
CSS Question

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

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

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

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
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 )

enter image description here

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

/* Font to left and change text type*/
margin : 0;
padding : 0;
font-family : 'Arial',serif;

text-decoration : none;
#menu >.nav {

background-color : #87CEEB;
color: white;
list-style : none;

padding : 4px 0 12px 0;
margin : 0px;

.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">

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

<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 id="content" align = "center">

function load_home(){
document.getElementById("content").innerHTML='<object type="type/html" data="New folder\home.html" ></object>';
<div class="footer" align = "center">
<p align = "center"> <i>an awesome business</i> </p>


the "home.html" file

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

Some random long text
dasfda gsdwgdsgd
sgsdgsdgdsf sadddad asddddddddddddddddddddddddddddddddddddddddddddddd


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.

Answer Source

(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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download