Incorporating an iframe seamlessly into a div element with scroll functionality

To start off, you can find the code in this JSFiddle link

I am attempting to include an iframe as if it were a div. I understand how to do this with a regular iframe, but the one I am using contains a slider, resulting in two vertical scroll bars appearing on the right side of the page.

Here is the HTML code:

<div class="container">
    <div class="h_iframe">
        <iframe  src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

And here is the CSS code:

html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Is there a way to make the behavior of the iframe mimic that of a div, so that the page only requires one scroll bar? Using overflow:none removes the scroll from the iframe, but I need a solution that retains functionality.

Any assistance on this matter would be greatly appreciated.

htmlcssiframe

Answer №1

Although the previous solutions are effective in this scenario, I want to emphasize the concept of making the outer frame "non-existent" rather than integrating the iframe seamlessly with the page. This approach is suitable when the inner iframe is meant to occupy the entire page.

Unfortunately, there is currently no straightforward method to seamlessly integrate an iframe like a div in general (at the time of writing).

An attribute <iframe seamless> exists that serves this purpose, but it is not supported by major browsers at present. For more information, refer to: http://caniuse.com/#feat=iframe-seamless. Nonetheless, there may be ways to simulate this using JavaScript. For instance, https://github.com/ornj/seamless-polyfill demonstrates a technique where the content within the iframe communicates its scrollHeight to the parent page through postMessage, allowing the parent page to adjust the iframe's height accordingly to display the entire content without scrolling.

Answer №2

If you are working with a full-page iframe, it is important to ensure that the margin of your body tag is set to 0:

html,body{
    height:100%;
}
body{
    margin:0;
}
.h_iframe iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
<div class="container">
    <div class="h_iframe">
        <iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Answer №3

To resolve the issue, simply include overflow:hidden in your CSS code. I tested it out on your fiddle and it resolved the problem.

html,body        {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Answer №4

It is not possible to write css that will impact the internal content of the iframe... however, you can apply the style overflow: hidden; to your body.

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 Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

phphtmlcss

Employ a separate function to extract HTML content from a jQuery target in an AJAX response

Initially, the HTML div is empty upon loading the page. However, clicking a button triggers jQuery AJAX to load new HTML content into the div. $("#control-list a#ms").click(function(){ var postData = "actionrequest=ms"; $.ajax({url:"SSSutility.php ...

jqueryhtmlajax

Designing draggable tags similar to those on LinkedIn, incorporating a parent div element containing an SVG image and text

Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image? Essentially, this outer tag consists of a div element th ...

htmlcssangularjs

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using: $(document).ready(function() { $('body').css('overflow', 'scroll'); var heightWithScrollBars = $(window).height(); $('body').css('overflow', 'auto') ...

jquerycss

Is there a way to verify the existence of an element based on its class name?

In the title of my question, I mentioned that my element lacks an id attribute. So how can I determine if it exists or not? Here is the HTML code: <div class="classname">something</div> Note1: If there was an id attribute like this: var el ...

javascriptjqueryhtml

Issue with AngularJS $http not responding to ng-click after first call

My landing controller uses a service that initiates the $http call by default when the App loads. However, I need to pass parameters based on click events, so I implemented an ajax call on ng-click. The issue is that I keep receiving the same data on ng-c ...

javascriptangularjsnode.jshtmlexpress

Why is the value of the select element in AngularJS an object?

Here is a JSON object: { "9000A": { "LOCname":"A Place", "LOCid":"9000A" }, "2700C": { "LOCname":"C Place", "LOCid":"2700C" }, "7600B": { "LOCname":"B Place", "LOCid":"7600B" } } To ...

javascripthtmljsonangularjs

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

How can I address multiple buttons with various events using jQuery?

I am new to learning jQuery and I'm currently working on some exercises. However, I've run into an issue with two buttons in the DOM that are supposed to perform different actions. I can't seem to figure out how to assign different functions ...

javascriptjqueryhtmlforms

Automatically displaying the navigation bar upon initial loading of the HTML page

Is there a way to adjust this code so that the side nav bar remains open when the page loads for the first time? I would like the side nav to be open by default. function openNav() { document.getElementById("mySidenav").style.width = "250px"; docum ...

htmlcss

Experiencing repeated triggering of ng-change on 'range' input in Chrome

When the range input is changed by sliding, the ng-change function continues to be triggered repeatedly until another element is clicked. This issue seems to occur only in the Chrome browser. You can view an example on this fiddle. Try sliding the element ...

angularjshtmlrangeangularjs-ng-change

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

javascriptjqueryhtmlarrayshtml-table

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

javascriptjqueryhtmlcss

Utilizing Bootstrap for Efficient Image Alignment

I'm encountering an issue with my code and I am unsure of how to fix it. The current state of my code is different from the desired outcome https://i.sstatic.net/Ti1kK.jpg As you can see, the image above does not match the appearance of the image I ...

htmlcsstwittertwitter-bootstrap-3

Using JavaScript to create circular shapes on canvas with paint circle

I need assistance in JavaScript to create a circle and update it while removing the previous one. My current code is: <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <ca ...

javascripthtml

Whenever I attempt to include additional drop-down lists, jQuery fails to function

My webpage features multiple drop down lists, with one populating based on the selection from another. Additionally, I have included a button at the bottom of the page. When this button is clicked, I need to add another column to the page. However, after ...

javascriptjqueryhtml

oj-select-one displays a comprehensive list of values in the dropdown

Typically, oj-select-one will only display the first 15 values before requiring the user to search for more. Is there a way to show all values in the dropdown list without needing to use the search function? I attempted to use minimumResultsForSearch as s ...

javascripthtmloracle-jet

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

javascriptjquerycss

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Looking for a gallery slider plugin that is responsive both horizontally and vertically. Have tried Flexslider1/2, Galleria, and others but they do not adjust to vertical resizing. Changing the CSS did not help. If you resize the browser horizontally with ...

javascriptjquerycssslidergallery

I'm encountering an issue where it appears that my ajax method may not be effectively communicating with my webservice

I am currently working on calling a webservice using an ajax request with the intention of retrieving clinical cases within a specific date range (for example, between 2015-01-01 and 2016-06-08). The webservice functions perfectly when tested individually. ...

jqueryhtmlsqljsonajax