Unable to automatically adjust the height of object elements

Hey there! I'm attempting to incorporate a flash game into an HTML web page.

.gameplace{
    padding: 10px;
    background-color: #ffffff;
    border: dashed #c4b470 1px;
    height: 100%;
    min-height: 100%;
}
.gameplace object{
    width: 853px;
    height: 100%;
}
<div class='main-filler'>
<div class='main-info'>  
    <div class='gameplace'>
        <object data='test.swf'></object>
    </div>
</div>
</div>

I am struggling to dynamically adjust the height of the swf file within the container. The swf file displays correctly when I manually set a specific height, but it doesn't show up when I try to make the height dynamic based on the actual content. How can I achieve this? Apologies for any language barriers :)

htmlcss

Answer №1

Swapping out the image element for an swf object should function properly.

$("#getHeight1").click(function() {
  alert($("#swfobject1").height());
});

$("#getHeight2").click(function() {
  alert($("#swfobject2").height());
});
  .gameplace {
    padding: 10px;
    background-color: #ffffff;
    border: dashed #c4b470 1px;
    height: 100%;
    min-height: 100%;
  }
  .gameplace img {
    width: 100%;
    height: auto;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main-filler'>
  <div class='main-info' style='width: 200px;'>
    <div class='gameplace'>
      <img src="http://lorempixel.com/400/200" id="swfobject1"/>
    </div>
  </div>
</div>

<div class='main-filler'>
  <div class='main-info'>
    <div class='gameplace'>
      <img src="http://lorempixel.com/400/200" id="swfobject2"/>
    </div>
  </div>
</div>

<p>
  <button id="getHeight1">Determine height of object 1</button>
  <button id="getHeight2">Determine height of object 2</button>
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining multiple divs with identical class names within a specific container

If we have the following HTML code: <div id='m1'> <div class="c"></div> <div class="c"></div> <div class="c"></div> </div> <div id='m2'> <div class="c"></div> <div ...

javascripthtml

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

htmlcss

Enabling or Disabling CSS Background Clip Support for Internet Explorer

Applying background-clip to text is effective on most browsers, except for IE! .main-menu .nav li a { font-family: freight-big-pro, serif; font-size: 4rem; font-weight: 400; color: #0f0e0e; text-decoration: none; -webkit-background ...

htmlcssinternet-explorer

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

javacssjavafx

PHP table not displaying data

I am brand new to this and currently enrolled in a class with an unhelpful professor. I am attempting to read data from a file into a table, but for some reason the data is not displaying. I have tried multiple approaches, but I am feeling quite lost. Any ...

phphtml

Utilize Bootstrap for EF Core pages with pre-designed scaffolds - text will remain neatly displayed within textbox without the need for inline CSS word-wrap styling

After generating CRUD pages using EF core, I am now attempting to make edits to one of the cshtml files. The default Bootstrap CSS file that I am using includes various CSS class definitions: .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: ...

cssbootstrap-4

Utilize the dropdown menu value within a PHP function

My understanding is that PHP is server side, while Javascript is client side. I am currently attempting to dynamically update a table on the screen when a user selects a different value in a dropdown menu without causing a page reload. Here is the form se ...

javascriptphpjqueryhtml

Struggling to achieve evenly separated DIV's with this method

The other day, I encountered something completely new to me and decided to embark on a quest for answers. I had a menu with various items inside it, and I wanted these items to span the full width of their parent element. After trying out different soluti ...

htmlcss

Creating an angular div with rounded corners in the bottom right corner is a simple and stylish way to enhance the look

I've been attempting to design my div to resemble this example, but unfortunately, I haven't had much luck. I experimented with the polygon method to achieve the desired look, but all I managed to create was an angled line that didn't align ...

htmlcsssass

How can I automatically adjust the size of images and icons for mobile screens in Ionic?

Hello everyone, I recently started working with Ionic and I have created an application that includes some static content. However, I noticed that while the content appears responsive in the browser, the image sizes and icons become very large when I build ...

androidhtmlcssangularjsionic-framework

Tips for designing a unique CSS ellipse effect for text styling

Hey there! I have a list of titles in a drop-down menu as strings, for example: "Bharat Untitled offer #564", "Bharat Untitled offer #563" The titles are quite long, so we want to display the first eight characters, followed by '...' and then ...

javascriptcss

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI a ...

javascriptcssmaterial-uinext.jsstyles

Get rid of the upgrade button feature from TinyMCE editor

Recently, I started using tinymce in inline mode and it's a new tool for me. I have managed to adjust the text field input to my liking with just a few editing buttons. However, I am stuck trying to figure out how to get rid of the "Upgrade" button fr ...

javascriptphphtmltinymcewamp

Only one ID is recognized by jQuery

I have a group of three checkboxes set up like this: <input id="image_tagging" class="1" type="checkbox" value="1" checked="checked" name="data[image_tagging]"> Now, I've created an AJAX function (which is functioning correctly), but it seems ...

javascriptjqueryhtml

Enhancing the appearance of a dropdown menu in HTML

Hello, I am looking to customize the appearance of a dropdown menu in HTML, specifically focusing on the option tags. While Firefox displays the desired style, Internet Explorer and Google Chrome are not rendering it correctly. Currently, the padding only ...

htmlcssinternet-explorergoogle-chromefirefox

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead. I have a couple of questions. Why isn't my code functionin ...

jqueryhtmlcss

Navigation bar with submenus using Bootstrap 3

I'm currently facing a challenge in setting up a submenu for my Bootstrap navigation. To demonstrate the issue, I have prepared a jsfiddle at this link: http://jsfiddle.net/ho6ggmge/ It's worth mentioning that this was my first time using JSfid ...

jqueryhtmlcsstwitter-bootstrap-3

Webpage displays varying border styles at distinct zoom levels

Something strange is happening with our company's website. It appears perfectly normal when viewed on a desktop computer or laptop using any browser. However, when accessed on a mobile device, borders start showing up around the page elements in both ...

androidhtmlioscsswebpage-rendering