If I don't specify the height of my iframe, the width will not automatically stretch to 100% of the

Seeking assistance with embedding an html5 animation in a WordPress website using an iframe. The issue is that the width reduces unless the height of the iframe is set.

Despite trying various solutions, I am unable to get the scroll to appear and maintain 100% width. It consistently reduces the width instead.

Check out the webpage here

Identified a possible conflict within my animation code:

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:960px; height:1615px">
    <canvas id="canvas" width="960" height="1615" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:960px; height:1615px; position: absolute; left: 0px; top: 0px; display: none;">
    </div>
</div>
<div id='_preload_div_' style='position:absolute; top:0; display: inline-block;  width: 960px; text-align: center;'>    <span style='display: inline-block; height: 100%; vertical-align: middle;'></span>  <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div>

Additionally, attempted to enable animation progression on scroll but encountered challenges in implementation!

csswordpresshtmliframehtml5-canvas

Answer №1

this belongs to you;

    #artkiframeHolder {
    height: 1000px;
    width: 100%;
    position: relative;
    overflow: scroll;
}

transform it into this

#artkiframeHolder {
    height: 1000px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

https://i.sstatic.net/5lPGD.png

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

Extract values from HTML IDs and store them in an array

Currently, I am working on a project where I need to capture a QR code and display it on the screen. After that, I want to iterate through the elements using a for loop and save the values in an array. Specifically, I am using the ID id="scanned-resul ...

javascripthtmlasp.net-mvc

having difficulty grasping the variable's scope within this code

Here we have a code snippet where the variable vid is initialized inside a function. The question arises on how this variable can be used outside the function, specifically in the context of vid.play(). How does the program know that vid was created usin ...

javascripthtml

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

jqueryhtmlangularjsajaxhighcharts

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

javascriptcssreactjsnext.jstailwind-css

Can anyone guide me on repositioning material ui tabs to appear below my content and ensuring that the content expands to full height

Is there a way to position the Material UI tabs from Material UI tabs below the content area instead of above it? I am currently using them in my project and would like this specific layout. <md-tab-group> <md-tab label="Tab 1"> Co ...

htmlcssangularangular-material2

I am hoping for the bootstrap collapse feature to automatically close one section when another is expanded

I tested this code and it worked for me, but when I try to use it in Angular, I encounter an error in jQuery stating that "collapse tag is not found in jQuery". Can anyone assist me in resolving this issue? $('.button-click').click( function(e ...

htmljquerycssangulartwitter-bootstrap

How can I assign a value other than a string to a placeholder or vue property?

As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...

htmlvue.jsinputpugnuxt.js

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

Tips for overriding ng-disable in AngularJSUnleashing the

This is a comment box using AngularJS: <tr> <td colspan="5"><br/>Comments* <div><textarea class="form-control" rows="3" cols="60" ng-model="final_data.drc_scope" placeholder="Add comments here" ng-disabled="is_team==0 || isDis ...

javascripthtmlangularjstwitter-bootstrap

Arrange Bootstrap Checkboxes in a horizontal layout instead of a vertical one

Excuse my lack of experience as I am just starting out. I need help in arranging the checkboxes on my website to be aligned horizontally instead of vertically. Even though they are within a row div, they still stack on top of each other. Here is the code ...

htmlbootstrap-4

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

Issue with implementing Pure CSS Masonry layout. Using position: relative for the boxes and position: absolute for the content inside each box is causing gaps below each box. Struggling to find a solution, view the code on this codepen: http://codepen.io/k ...

htmlcss

Animating numerous elements simultaneously during Vue component rendering

Take a look at this simple case in the following jsfiddle: https://jsfiddle.net/hsak2rdu/ I attempted to swap and animate two elements, but it didn't work as expected. When you click the toggle button in the playground, the second element quickly mo ...

javascripthtmlcssvue.jsvue-transitions

How to Keep Button Highlighted After Clicking

I've experimented with various methods like using :active, :focus, adding a class, and modifying CSS rules through jQuery to maintain the button highlight, but none of them have been successful. Please take a look at my code and point out any mistakes ...

jquerycsshtml

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks! .template-banner{ width: 100%; height: auto; margin: 0; } ...

htmlcss

CSS positional sequencing dilemma

I am having trouble with the layout in this particular scenario: . In the #boxOne div, I have a link followed by a div (#formloc) containing an input and another link. Even though the first link ("Appliquer une localisation") is placed before the #formlo ...

css

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

htmljquerycss

Retrieving the chosen option using a change event listener

Is there a way to retrieve the selected option using a change listener in TypeScript? I have come across JavaScript examples where the value is retrieved through event., but I am unable to locate any field that contains the selected option. <!DOCTYPE ...

htmltypescriptformsevent-listener

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

What is the process for adding data and attaching it to a URL using AJAX?

I am trying to integrate a data license variable into a URL within an AJAX function. Here is an example of what I am attempting: url: "localhost/test/index/license" Unfortunately, I am running into some issues with getting it to work as intended. The dat ...

phphtmlajaxappendlicensing