HTML loaded in a DIV tag only appears partially

Question

I have the following code

CSS

.photo_types {
    position:relative;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:gray;
    text-align:left;
    font-weight:bold;
    margin:0% auto;
}

HTML

<div id="photo_types" class="photo_types">
<img src="images/ystone_burnt_tree.jpg" />

That code above is loaded via Javascript in the code below

CSS

  .mySelfStyle {                          
    position:absolute;       
    top:3.5%;                                         
    left:1%;                                                                                  
    width:80%;                                                                                
    height:90%;                               
    background-color:black;
    text-align:center;                                 
  }

  .photogMainStyle {                                                    
    position:absolute;                                 
    top:3.5%;                                
    left:1%;                                        
    width:80%;                                      
    height:90%;                     
    background-color:black;                             
  }

HTML

   <div id="myself_panel">                                                                      
   <img id="myself_panel_img" src='images/ystone_burnt_tree.jpg' />
   <p style="color:white;"> The Most Beautiful Place I have been To </p>             
   </div>                                       

   <div id="photo_panel">      
   </div>

JS

   function showMyPhotography() {                  
     itemObj = document.getElementById('myself_panel');
     itemObj.className = 'hiderStyle';                          
     itemObj = document.getElementById('photo_panel');                                          
     itemObj.className='photogMainStyle';                                                       
     /*             
     itemObj.load("photo_panel.html");
     */                                                            
     itemObj.innerHTML='<object type="text/html" data="photo_panel.html"> </object>';
   }

The problem I am having is that the photo_panel.html which is loaded does not use all of the space in the div photo_panel. It only uses the space partially.

Why don't you prefer this one. http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript — Manish J, Sep 01 '14 at 05:25

score 0 · Answer 1 · answered Sep 01 '14 at 05:40

0

You need to set the height and width of the object tag you are adding

#photo_panel object
{
  height:100%;
  width:100%;
}

Plunker Sample

answered Sep 01 '14 at 05:40

Martin

2,411
11
28
30

score 0 · Answer 2 · answered Sep 01 '14 at 16:23

Thanks for your responses everyone. The following solved my problem.

  .hiderStyle                                                                                   
  {                                                                                             
    clear : both;                                                                               
    display : none;                                                                             
  }

Earlier I did not have "clear:both" in my hiderStyle and I changed the function as follows

function showMyPhotography()

   {                                                   
   /*                                                  
     itemObj = document.getElementById('myself_panel');                                         
     itemObj.className = 'hiderStyle';                                                          
     itemObj = document.getElementById('photo_panel');                                          
     itemObj.className='photogMainStyle';                                                       
     itemObj.load("photo_panel.html");                                                          
     itemObj.innerHTML='<object type="text/html" data="photo_panel.html" style="width:100%; heig
     */                                                                                         

     $("#myself_panel").className = 'hiderStyle';                                               
     $("#myself_panel").load("photo_panel.html");                                               
   }

score 0 · Answer 3 · answered Oct 06 '15 at 05:36

I also had a similar problem. I was using <object> instead of using jquery. The following approach solved my problem.

html

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-7.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="load_page()">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
</html>
<script>
    function load_page()
    {
        document.getElementById("d1").innerHTML='<object type="text/html" data="page1.html" ></object>';
        document.getElementById("d2").innerHTML='<object type="text/html" data="page2.html" ></object>';
        document.getElementById("d3").innerHTML='<object type="text/html" data="page3.html" ></object>';
    }
</script>

css

html,body
{ 
    height:100%;
    width:100%;
}

div
{
    height:100vh;
    width:100vw;
}

div object 
{
    height:100vh;
    width:100vw;
}

Hope this helps :)

HTML loaded in a DIV tag only appears partially

3 Answers3