1

First of all, this might be a duplicate of Allowing responsive iframe of specific part of page - how?. and iframe to Only Show a Certain Part of the Page

But hear me out. Neither the answers or the comments helped me out there. I can't find ANYthing on google of the thing that I need and if it is even possible.

I'm having the following problem; For a website we need to get a few products from the site that you'll see below, on a page. I couldn't figure out how you could load multiple links in a single frame (don't think that's even possible), so we would need multiple frames. For the iframe we don't want to see the sidebar, header nor footer. In other words, just a specific place on the site.

I've used a div as wrapper with some max-width and height, and the iframe has a heigh+width of 100%.

.dn-frame-product-wrapper {
    max-width: 1280px;
    height: auto;
    overflow: hidden;
}
.dn-frame-product {
    width: 100%; 
    height: 100%;
}

The HTML is set up like this

<div class="dn-frame-product-wrapper">
     <iframe src="https://sledgehammerasia.com/cement-basket/cement-basket.html" class="dn-frame-product" scrolling="no"></iframe>
</div>

We want to show JUST this part: https://image.prntscr.com/image/y8a3NZftQp6wgJtmA6yN9Q.png

So, as I stated above, no header, sidebar nor footer. (I'll have to figure something out for the back to top button that starts showing when you scroll down too far)

Please let me know IF this is even possible to do with HTML/CSS, I don't mind ading javascript files if needed, but please give me som help with that code as well if there's a solution with it.

Thanks anyways!

stillNewToThis
  • 36
  • 4

0 Answers0