Adjustable height within embedded object tag

I've been struggling to adjust the height of the content on my site automatically. I have attempted using iframes as well, but nothing seems to work despite trying numerous code examples from various sources including CSS and JS scripts.

Any help would be greatly appreciated, thank you in advance Dan.

Here is the code I am currently using:

<object type="text/html" data="https://iloapp.learningknots.com/blog/blog?Home#niceURL" style="width:850px; height:2100px;">
<embed src="https://iloapp.learningknots.com/blog/blog?Home#niceURL"></embed>
Error: Embedded data could not be displayed.</object>

To see how it appears on my website, please visit: my website

javascriptcsshtml

Answer №1

Create a div to act as a container and assign id's.

HTML

<div class="responsive-object">
  <object id="objid" type="text/html" data="https://iloapp.learningknots.com/blog/blog?Home#niceURL">
    <embed id="thissite" src="https://iloapp.learningknots.com/blog/blog?Home#niceURL"></embed>
    Error: Embedded data could not be displayed.</object>
</div>

CSS

.responsive-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#thissite {
  height: 100%;
  width: 100%;
}

#objid {
  height: 100%;
  width: 100%;
}

Fiddle

.responsive-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#thissite {
  height: 100%;
  width: 100%;
}

#objid {
  height: 100%;
  width: 100%;
}
<div class="responsive-object">
  <object id="objid" type="text/html" data="https://iloapp.learningknots.com/blog/blog?Home#niceURL">
    <embed id="thissite" src="https://iloapp.learningknots.com/blog/blog?Home#niceURL"></embed>
    Error: Embedded data could not be displayed.</object>
</div>

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

The height of the multicell generated by fpdf is inconsistent

After writing the code below, everything seems to be working fine except for the multicell row heights which are not displaying correctly. I encountered this issue several times while testing it out. $x=$pdf->GetY(); $pdf->SetY($x+1); include_once( ...

phpcssrowfpdf

Ajax UpdateProgress not functional

How can I resolve the issue where my AJAX UpdateProgress bar in ASP.NET is not running when executing a query in the correct format upon button click? Any solutions or help would be greatly appreciated. <html xmlns="http://www.w3.org/1999/xhtml"> ...

javascriptasp.netajax

Is it feasible to make an ajax request to fetch data and then send it to a PHP file via a post

Trying to send an ajax GET request to an external controller when a button on the form is clicked in order to use the returned data to dynamically generate "results" using PHP/HTML. The ajax code being used (using jQuery() instead of $() due to wordpress& ...

javascriptphpjqueryajaxwordpress

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

javascripthtmliosobjective-cuiwebview

A guide on immediately invoking a method when a class is initialized in JavaScript

I'm having some trouble with a class I created to handle user information. When I try to add an init() function to the class so that it runs as soon as the class is initialized, I keep getting a SyntaxError. I've tried following the advice from ...

javascriptclass

Is there anyone who can provide a straightforward solution (code) for < something basic?

I have learned a lot about programming, but I'm stuck on one thing. How can I make an image stay in place when clicked on? What I mean is that when you click and hold on the image, then move the cursor, the image moves with the cursor. What I want is ...

phphtmlcss

Adjust the Appearance of Highcharts Legend Post-Rendering

After a Highchart is rendered, is it possible to modify the display settings without redrawing the chart? For instance, I would like to relocate the legend box from the right to the bottom upon screen resize, as illustrated in this image: --Example Pictur ...

javascriptangularjshighcharts

utilizing a spacemouse in conjunction with autodesk forge

Recently, I acquired a 3dconnexion spacemouse and have been attempting to configure it to work with the forge viewer. Fortunately, I came across some JS samples in the SDK for three.js that worked flawlessly. It seems both forge and three.js utilize webgl ...

javascriptthree.jswebglautodesk-forgeautodesk-viewer

External JS file not executing function in AJAX response (only runs when function is directly included in AJAX response)

My issue involves an AJAX response not executing a simple jQuery function that is located in an external JS file. The function only runs when its code is directly placed within the AJAX response view. The page containing a link for dynamically loading AJA ...

javascriptjqueryajax

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation

Multiple ngFor loops causing only the final item to be displayed in the inner loop

Can someone assist with my code where I loop through firebase RTDB reference to retrieve a list and then use those results in a subsequent firestore query? The console logs the correct data, but my code only displays the last item in the loop inside ngFor. ...

javascriptangularionic-frameworkfirebase-realtime-databaseangularfire2

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

javascripthtmlgoogle-api

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

tableData consists of an array containing PDO objects. Each PDO object may have zero or more advocacy (pdo_advocacies), and each advocacy can contain zero or more programs (pdo_programs). For example: // Array of PDO object [ { id: 1, ...

javascriptangulartypescript

A guide on navigating to a different component in Vuejs using a link

<div class="enterprise-details" style="margin-top: 20px"> Already signed up? <a href="#"> LOGIN</a></div> <!-- Component for redirection --> <b-button v-if="!registeredUser" class="button-self" v-b-modal.modal-x>Lo ...

javascriptvue.js

The search button is malfunctioning after I submit search data and generate dynamic HTML using axios

When a user clicks on the search button, I retrieve the input value and then use axios to send a GET request with the search data. Everything works fine, but when I query the database and dynamically create data from the mongoose data, the page reloads w ...

javascriptnode.jsweb

Bookshelf.js has implemented a new feature where it automatically encrypts passwords with bcrypt every time data is updated

My User Model is var Bookshelf = require('../../db').bookshelf; var bcrypt = require('bcrypt'); var Promise = require('bluebird'); var Base = require('./../helpers/base'); // Custom user model var Custom_User_Mod ...

javascriptnode.jsexpressbcryptbookshelf.js

Tips for accelerating the loading of data retrieved through ajax requests

At present, data is being fetched in array form from a PHP script. I have noticed that when retrieving 40 sets of data, it takes approximately 20 seconds for the data to load. This delay may be due to ajax having to wait until all the results are gathered. ...

javascriptphpjqueryajax

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

I want to monitor my Streamlit UI in Google Analytics. To achieve this, Google Analytics requires the following code snippet to be inserted into the <head> section of the HTML file. <script async src="https://www.googletagmanager.com/gtag/js? ...

pythonhtmlgoogle-analyticsfastapistreamlit

JavaScript's functionality akin to PHP's exec() function

I am searching for a way to run a shell command through javascript, similar to the functionality of PHP's "exec()" function. I understand that executing shell commands in javascript may not be recommended due to security concerns. However, my javascri ...

javascriptphp

Having trouble accessing PDF files on Electron framework

Despite following the advice provided in similar questions' answers, such as including webPreferences: { plugins: true } in the options when creating a BrowserWindow instance, I am still encountering issues. Every attempt to open or view a PDF ...

javascriptnode.jspdfelectronchromium