Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Rendering <object> elements

Posted on 2006-11-21
3
Medium Priority
?
242 Views
Last Modified: 2010-04-09
I have a webpage with several <object> elements -- references to other .htm web pages that I want to embed in my primary page. However, when they render on my browser, they always render at the same size -- it looks like 200x200. I could adjust their size by adding height and width attributes, but what I really want is for the browser to render these objects to a reasonable size given the size of the browser window. I thought I could do something like this:

<div style="border: 1px solid black;">
     <object data="mydata.htm" id="myobj">
</div>

Here, the <div> element expands to a good size, but rather than occupying the entire box enclosed by the <div> element, the <object> is still the same 200x200. Is there any way to get the browser to dynamically choose an appropriate size for the <object> element -- particularly, is there any way to do it without Javascript? (I already have Javascript code that does what I want to do, but I'm having cross-browser compatibitility problems, especially with Opera and the Mac browsers.)

Thanks,

Jay
0
Comment
Question by:tjgquicken
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 12

Expert Comment

by:jessegivy
ID: 17993916
What size do you want the objects to be?
0
 
LVL 13

Accepted Solution

by:
jmundsack earned 400 total points
ID: 17994907
You could use an IFRAME with its width and height both set to 100%, then place it inside a DIV and configure the widths and heights of all the DIVs on your page as you like (perhaps with widths and heights relative to page dimensions?).

<div style="border: 1px solid black; width: 500px; height: 400px;">
<iframe src="http://www.experts-exchange.com/" id="myobj" style="width: 100%; height: 100%;">
</div>

Or...

<div style="border: 1px solid black; width: 80%; height: 50%;">
<iframe src="http://www.experts-exchange.com/" id="myobj" style="width: 100%; height: 100%;">
</div>

It's not really clear what you mean by "get the browser to dynamically choose an appropriate size"--if you mean you want it to interpret the overall dimensions of the HTML contained in the embedded page, then I think there's no way to escape Javascript.

0
 

Author Comment

by:tjgquicken
ID: 18009273
Silly me... <object id="myobj" src="mysrc.htm" width="100%" height="100%">
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question