Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Location
    SoCal
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Object Element Improperly Resizing

    Howdy folks. This is my first post on this forum, so I'll share a little bit about myself before going on to my problem. If you want to skip the irrelevant material, hop down to the HR break (not sure if that works on this forum).

    I am an avid member of another unrelated forum (Infinity Blade Forum), so you can see all of my posts on there as "grantnoe." As a result of my experiences there, I am quite familiar with how most forums work, and how annoying new members can be.

    Beyond that, I am new to any sort of coding entirely. I have been doing the W3C classes, doing courses on Lynda.com, and reading misc articles. Any advanced code is something that I have found online that I have attempted to understand.

    Coding, for me, is just a "side hobby" of a sort. I am quite willing to learn, but if you post a response, please appropriately comment the code, or explain it afterwards so that I will be able to comprehend it, and further learn from it.

    So, without further adeu:




    My problem is that the "object" tag is not properly resizing to 100% height.

    HTML code:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Site View</title>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="description" content="Where the site will be viewed">
            <link rel="icon" type="image/ico" href="favicon-1.png"/>
            <link rel="stylesheet" type="text/css" href="PortalStyle.css">
            <script src="jquery.js"></script>
        </head>
        <body>
        	<div id="placeholder"></div>
    		<div id="superduper">
    			<object type="text/html" id="site_content" data="http://www.example.com"></object>
    		</div>
    	</body>
    </html>
    Here is the attached CSS:

    Code:
    #superduper	{
    width: 100%;
    height: 100%;
    }
    
    #site_content	{
    width: 100%;
    height: 100%;
    }
    
    #placeholder	{
    width: 20px;
    height: 100%;
    float: left;
    }
    
    *	{
    margin: 0;
    padding: 0;
    }
    I am currently using the firefox browser for code testing.
    I am coding on a Mac with "textwrangler."

    So you can run the files if you would like, and toy around with the site url in the object tag. My problem is that I want the object to take up the entire window, with the exception of the 20px "placeholder" div, and I am encountering two obstacles:

    1- The placeholder div is nowhere to be seen. I want to eventually replace this with grey vertical bar that, upon hoverover, will have a slide-out drawer menu.
    2- the site_content object takes up 100% of the width of the browser, but the height does not seem to be working properly.

    I chose to avoid iframes since I have heard that they are generally looked down upon
    Eventually I would like to affect the target of the object with javascript, based upon what a user places into a field (but this is a problem for another day in another thread).

    So can my first two problems be solved?

    Thanks for the assistance! You'll be seeing me around here often, learning from you pros.
    #im_a_n00b

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I personally dislike using names that are used for other things such as placeholder. I just think it's a bad habit to cultivate.
    And put the
    Code:
    *	{
    margin: 0;
    padding: 0;
    }
    at the top of the css section. Where you have it it deletes any padding or margins you establish above it.

    When using 100% as a size we need to base that on something, 100% of WHAT? With width we have the browser but not so with height. In what follows I removed the <div id="placeholder"></div>; at 100% height it just ruins everything.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Site View</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Where the site will be viewed">
    <link rel="icon" type="image/ico" href="favicon-1.png"/>
    
    <style type="text/css">
    *{
    	margin: 0;
    	padding: 0;
    }
    html, body{
    	height: 100%;
    	width: 100%;
    }
    #superduper{
    	width: 100%;
    	height: 100%;
    }
    
    #site_content{
    	width: 100%;
    	height: 100%;
    }
    #placeholder{
    	width: 20px;
    	height: 100%;
    	float: left;
    }
    </style>
    <script src="jquery.js"></script>
    </head>
    
    <body>
    <!--<div id="placeholder"></div>-->
    <div id="superduper">
    <object type="text/html" id="site_content" data="http://www.example.com"></object>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Location
    SoCal
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made the changes in the code, but the problem of the object not resizing to full height is not yet solved. Thanks for the feedback.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by DaRkNeSs View Post
    I made the changes in the code, but the problem of the object not resizing to full height is not yet solved. Thanks for the feedback.
    I don't think it will be. I have a page with an object and I tried some things. If you don't give it a width and height it's a little box with a 'natural' size. You can give it a width of 100% and it will fill whatever container it's in. You can give it a specific size and it will obey. But height 100% only makes it go to it's natural height. So maybe you can use javascript to determine the correct height, and set it..
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there DaRkNeSs,

    and a warm welcome to thes forums.

    Here is the basic coding for the "object element" that is required...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    html,body {
        height:100%;
        margin:0;
     }
    #container {
        height:100%;
     }
    #container object {
        display:block;
        width:100%;
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <object type="text/html" data="http://www.codingforums.com/showthread.php?t=298927"></object>
    </div>
    
    </body>
    </html>
    coothead

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by DaRkNeSs View Post
    So you can run the files if you would like, and toy around with the site url in the object tag. My problem is that I want the object to take up the entire window, with the exception of the 20px "placeholder" div, and I am encountering two obstacles:

    1- The placeholder div is nowhere to be seen. I want to eventually replace this with grey vertical bar that, upon hoverover, will have a slide-out drawer menu.
    2- the site_content object takes up 100% of the width of the browser, but the height does not seem to be working properly.
    This can be accomplished with absolute positioning:

    Code:
    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<link rel="icon" type="image/png" href="favicon-1.png">
    		<link rel="stylesheet" href="PortalStyle.css">
    		<style>
    			* { margin: 0; }
    			#placeholder, #superduper { position: absolute; top: 0; bottom: 0; }
    			#placeholder { left: 0; width: 20px; background: gray; }
    			#superduper { left: 20px; right: 0; }
    			#site_content { display: block; width: 100%; height: 100%; }
    		</style>
    		<script src="jquery.js"></script>
    	</head>
    	<body>
    		<div id="placeholder"></div>
    		<div id="superduper">
    			<object id="site_content" type="text/html" data="http://www.example.com/"></object>
    		</div>
    	</body>
    </html>
    You can also use the previous posters' methods. You just specify a percentage-based height on the target element (#site_content) and every ancestor element of the target element back to the root element (html).

    As for your other code:
    • The correct media type for PNG images is image/png.
    • <meta charset="..."> should always appear at the top of the head element.
    • You don't need to specify type attribute for CSS style sheets since that's the default type.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Location
    SoCal
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the input guys! So far, though, it seems that DrDOS is correct.
    Perhaps there is an alternative to the object element?

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by DaRkNeSs View Post
    Thanks for the input guys! So far, though, it seems that DrDOS is correct.
    Perhaps there is an alternative to the object element?
    I got arbitrators code to work, I'll get back in a bit and show you what I did.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •