Challenges arise when adjusting frame size for mobile and desktop devices

I am trying to achieve an auto-resize feature for my frame's height when the screen width is smaller than a certain value. I want it to behave like Sketchfab, as demonstrated in this video: http://www.youtube.com/watch?v=_y5ckVFGHKU&feature=youtu.be

Currently, here is my progress:

// JavaScript code goes here

To embed it on my webpage, I use an iframe:

<iframe src="/full/1.html" width="80%" height="450" allowfullscreen="allowfullscreen" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

The issue I'm facing is that when I resize the frame's height smaller, it leaves a gap.

Here is a screenshot of the problem:

https://i.sstatic.net/IEOz2.jpg

Can anyone guide me on how to resize the frame's height smaller when the width reaches a limit without leaving any empty space like Sketchfab does?

Thank you!

javascriptmobileiframeresizethree.js

Answer №1

The reason for this issue is that you have set the height of your iFrame to 450px in the HTML code:

<iframe src="/full/1.html" width="80%" height="450"....

However, in your onResize function, you are only updating the viewport height and not the frame height.

To fix this, you can add an id to your frame like so:

<iframe id="myFrame" src="/full/1.html" width="80%" height="450"....

Then, in the onResize function, you can update the height of your frame using a call like this:

document.getElementById("myFrame").style.height = 200px; ...

By making these changes, you should be able to resolve the issue.

I hope this solution helps!

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

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Suppose I have fetched a list of objects from a database: [{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...]; and want to display this data using the dynatable plugin: data : JSON.stringify(data) success: function(data,status){ $( ...

javascripthtmlcssjsondynatable

What steps can I take to resolve this issue when encountering an error during npm install?

As a newcomer to programming, I am embarking on the creation of a Discord bot using node and discord.js. My current hurdle involves the installation of a library named canvas, which seems to be causing issues. After developing and testing my application o ...

javascriptnode.jslinuxnpmnode-canvas

Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

Is there a way to utilize adal.js within AngularJS to obtain a bearer token for the audience https://management.azure.com through JavaScript? I have created a client application in Azure AD and configured its permissions to allow access to the "Windows Az ...

javascriptangularjsazureazure-active-directoryadal.js

Having difficulty with delaying the loading of a div layer and javascript after the page has initially loaded

I've been struggling to make this script wait a few seconds after the page has loaded, but I haven't been successful so far. Despite trying some solutions from similar questions here, nothing seems to be working. Any help you can provide would b ...

javascriptjquerydelaysettimeout

Encountering issues when adding information to a React table

Every time I try to submit data, I encounter an error message. Line 53: Expected an assignment or function call and instead saw an expression no-unused-expressions I am attempting to add user-submitted data onto a table as td elements. Could someon ...

javascriptreactjs

Getting the value of a JSON object in CodeIgniter can be easily achieved by using the appropriate

My current project involves using the codeigniter framework to build a website. I am making an AJAX request with jQuery to retrieve data from the server. I have experimented with two different methods of receiving the data: one in a PHP associative array a ...

javascriptjqueryajaxcodeigniter

Validation of Regular Expressions in Javascript

I am trying to implement control validation using Javascript. The validation criteria states that the number should consist of a maximum of 12 digits, with the first 7 being '9900000' followed by either a '0' or a '1', and en ...

javascriptregexvalidationcontrols

How can I remove the script from Response.Write?

Instead of using Response.Write to test some values in code with an alert box, I tried writing dynamic javascript directly into the page. Even after reverting the code, rebuilding, and clearing all temp data from IE, the alert still pops up. I followed a ...

javascriptasp.netresponse.write

Should I retain a duplicate of the js library in the lib or vendor directory even if it has already been installed using npm?

Query 1 : As I install my project dependency libraries using npm, they are saved in the npm_modules folder. I wonder if it's necessary to also duplicate the library files like angular.js, angular-route.js in a separate lib or vendor folder for permane ...

javascriptangularjsnode.jsnpmsingle-page-application

Combining Arrays in AngularJS for ng-repeat Iteration

I store my posts in a .json file, while the likes for each post are saved in a separate php file connected to my database. let likesList = []; $http({ method: 'GET', url: 'data/get_likes.php' }).then(function(response) { ...

javascriptphpangularjsarraysjson

What is preventing this setTimeout from triggering?

My experience with Knockout js has left me puzzled, as I seem to be missing a key concept. Despite no error messages, it's challenging for me to pinpoint where exactly the issue lies. All I want is to periodically fetch data and update my table using ...

javascriptjqueryajaxknockout.js

Encountering issue with Konva/Vue-Konva: receiving a TypeError at client.js line 227 stating that Konva.Layer is not a

I am integrating Konva/Vue-Konva into my Nuxtjs project to create a drawing feature where users can freely draw rectangles on the canvas by clicking the Add Node button. However, I encountered an error: client.js:227 TypeError: Konva.Layer is not a constr ...

javascriptvue.jsnuxt.jskonvavue-konva

"Automatically insert a new row into the table if the cell loses focus and is not left

Can someone assist me with adding a table row dynamically when a cell is filled and the input focus is lost? My JavaScript skills are not strong. Here is a link to the form: JSFIDDLE <table class="table table-timesheet" ng-controller="TimesheetCtrl"> ...

javascriptjquery

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

javascripthtmlangularformstypescript

Experience the Power of Vue.js in Your Shopify Store

I have encountered an issue while attempting to integrate 3 custom modals into Shopify. Upon implementing them, I received the following error in the console (not originating from my Vue files, but rather from the Shopify template): [Vue warn]: Error comp ...

javascriptvue.jsshopify

Utilizing the Vuetify Dialog Component in a repetitive manner to confirm the deletion of an event

In a project I'm working on, there's a 'datatable.vue' file that loops through data and displays it in a table. Within this loop, I want to implement a reusable dialog component from Vuetify (v-dialog) that will load upon interaction wi ...

javascriptvue.jsvuetify.js

Invoke the componentDidMount() method in a React Component that is not a subclass of React.Component

I have a react component that I render later in my index.js file index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> ...

javascriptreactjsreact-native

Is it possible to utilize a variable as a column name in MySQL when working with Express?

At the moment, I am encountering an issue where the table name is surrounded by quotation marks as it is a string. This causes the server to crash. const update = 'the name of my column'; const UpdateQuery = `UPDATE scores SET ${mysql.escap ...

javascriptmysqlnode.jsexpress

Creating specific CSS classes for individual slides in a basic slider framework

So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is ...

javascriptjqueryhtmlcss