I am trying to embed this in my site and make my site resize to fit the content so the container with the embedded content has no scroll bar, only the main page (hope this makes sense). Below is what I am doing now, however height 100% won't work
<embed src="https://shop.inventarnd.com/index.php?rt=product/product&product_id=124" style="width: 100%; height: 100%">
The width is working but height does not work.
I have already tried the following
Making parent tags such as html, body, etc... have height 100%
Here is a link to my site where i want to embed it.
https://www.inventarnd.com/test.html
I want to have this web page embedded on my site and have the scroll bar not be there. So have the web page automatically resize to fit the embedded content.
You could use an iframe, this might solve your problem.
embed {
position: absolute;
top: 0px;
left: 0px;
}
The background is clear, so the previous page will show through but the scrollbar and content are all ok. I would change the background to white as well, but I'm not sure what you are and aren't able to do.
Related
I have an iframe I want to add to my React.js website. The src of the iframe links to another responsive website (hereby known as "gallery"). This means the width and height of gallery will change depending on the website size. How do I adjust the width/height/styling of the iframe so that like gallery, the iframe also shows all of the webpage contents regardless of screen size?
I tried setting the width and height of the iframe to 100%. While the iframe did span the entire width of the device screen regardless of size, setting the height to 100% unfortunately did not do what I wanted it to. Only a small part of the iframe showed up and the rest was cut off with a scrolling bar. If I set scrolling to "no", the same small part of the iframe would still only show.
I also tried hardcoding the height of the iframe. If I set the height large enough to show all contents on larger screens, some of the content would still be cut off on smaller screens. If I set the height large enough for smaller screens like smartphones, there would be a ton of empty space at the bottom of my website on larger screens that I didn't want.
I am not sure what to do. Some of the things I tried (such as setting height to 100% and setting scrolling to no) were from stackoverflow itself, so I have tried looking at other posts. I'm not sure what to do.
I can share code if needed; this is a personal project, not a school project, so there aren't any consequences of sharing code.
Thanks in advance for the help!
My HTML CODE -
<div class = "container">
<iframe title = "gallery" class = "responsive" src="LINK" frameborder="0" allowfullscreen scrolling="no">
</iframe>
</div>
</div>
MY CSS CODE -
.container {
position: absolute;
width: 100%;
overflow: hidden;
padding-top: 66.66%;
}
.responsive {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
This problem is way more complex than it should be, at one point a solution was part of the HTML 4 spec, but it got dropped I expect due to being to hard to reliable work out the night of the content.
I wrote a library a while ago that tackles these problems, it is called iframe-resize-react and should work in most situations
See dropbox's site here: https://www.dropbox.com
Notice how the footer "Learn more" stays at the bottom until you click or scroll down, no matter how much you resize the window?
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
Above is CSS for the footer part but thats not causing the effect.
How can this effect be achieved, I cannot figure it out.
I assume you're talking about that front page that always fills the whole browser window with the "learn more" sticking to the bottom of the window?
There are multiple ways to do this, here's one:
Put your first page in a <div> (or any other container) and set it's height to 100vh, which will always resize to the height of your browser window (100% of the view height).
The link "Learn more" is then simply attached using position: absolute;.
The following pages can then take any height, although you can use the same technique to make pages you can scroll through (similar to a slideshow).
You can try it using this fiddle.
Position:fixed is what you want, not absolute.
I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.
I have this code I put together from various sources to allow embedding an iframe of a specific part of a page:
<style type="text/css">
body {background:transparent;
height:2000px;
width:870px;
}
</style>
<div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;">
<iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;">
</iframe>
</div>
The reason for this code is explained here: https://sites.google.com/site/yourcommentsite/
The first part is for transparency around the iframe, inside the gadget that will include the iframe (doesn't work with Google Site unless it's in a gadget). Then I make a red bordered "window" that includes the iframe of a site. I size the iframe and position it relative to the "window" and I have the comment section embedded. This code embeds a 900px wide and 9999px long iframe.
This is for use with Google Sites, to allow embedding of a specific part of the page of another Google Site.
The problem is: it's not responsive, so the istructions are a bit complicated and dependent on user's screen resolution, so people trying to use it will be making a fixed size iframe, and other displays will cut the iframe or make it too small. If the iframe is cut/overflows a scrollbar will appear, but it's not the cleanest solution.
I want to make it responsive, but solutions I've seen I can't make them work with the "window" that allows getting a specific part of site only.
I know close to nothing of coding, so could you help me find a solution?
Also, it's very difficult to add javascript to Google Sites, and it doesn't allow src="xxxx.js" or "xxxx.css".
Thanks!
Have a look at my example at http://jsfiddle.net/7k3sscdk/. This works by setting the height and width of everything to 100%. But, if the site that the iframe is pointing to, is not responsive, you can't make the iframe content responsive on your site either.
<iframe src='http://www.example.com' style='border: 0;' width='100%' height='100%' scrolling='no'></iframe>
I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..
A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smaller, the background should scale down.
So I just use an img tag with absolute positioning and z-index.
However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.
Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.
overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.
And min-height, max-height and height is not working for the body tag either.
Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution
PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.
I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.
The rest of the page may need a z-index to be displayed above the div.
Note that the body will have to have min-height: 100% for this to work.
position: fixed won't work in IE < 7.