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.
1 answers
solution1
0 ACCPTED 2016-07-26 17:20:34
(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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.