iframe inside div cut off content - javascript

i have an iframe inside a div. the thing is, the iframe have an expanding menu (expands vertically) inside it. so, the height of the iframe will be dynamic, depending on what item is expanded. when i expand it, it will cut off and not show. below is the code for the div and the iframe.
<div class="camera">
<iframe name="ifra" id="ifra" title ="iframe" src="pages/whitef.html" frameBorder=0 scrolling="no"></iframe>
</div>
this is the css for both item.
iframe#ifra{
position: relative;
width: 810px;
min-height: 750px;
height:100%;
margin-top: -40px;
z-index: 1;
border:none;
overflow:hidden;
}
.camera {
height: 100%;
}
what i want to achieve is that the iframe will expand according to the expanded menu and also not being cut off.

ok this plug-in is out there to do what you requested, but it works only if the iframe src is in your domain.
there is also an article on css tricks you might want to look at.

Answer is in your CSS,
you may write this
overflow-y:scroll; //that will create a scroll in the iframe the content will not be hidden,
while you write OVERFLOW: HIDDEN; it will take the contenr increase in overflow and will cut down, will not shown.
Edit : for new link
Refer Old conversation for the same
http://stackoverflow.com/questions/934323/control-iframe-height-with-jquery
that will do :)

Related

Is there a way to make iframe embeds more responsive?

so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps & forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps & forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?
Here's what I have so far:
This is the look I'm going for:
Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile
You would need to use "css media queries" in order to reposition items in an html page based on screen size.
I have made an example here, please feel free to copy paste this code onto your project :).
I can see you are a new developer here, and I would like you to note for next time that it would make people's jobs easier if you could copy your code and paste it into stackoverflow instead of taking a screenshot.
(The snippet below works better when you press on expand snippet and resizes to fit browser size)
<style>
.container{
display: flex; /*Set div as flexbox to override default margins*/
}
iframe{/*Perform to all iframes*/
width: 50%;
margin: 10px;
}
#media only screen and (max-width: 900px) {/*When screen size is below 900px*/
.container{/*Make the form and map stack over each other*/
flex-direction: column;
/*flex-direction: column-reverse;*//* If you want them to stack the other way around*/
}
iframe{
width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
}
}
</style>
<div class="container">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
THE CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
Explanation of this CSS
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
After all this, you can just deal with your iframe
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

How to make a div overlay when child tag is added

I am using Paypal zoid and I have a button that when clicked, iframe is opened in the parent div, however, this iframe pushes the other contents of the web making the web look ugly, I was wondering if there is a way to make the parent div wait for the iframe to enter then it is styled as overlay and when the iframe is closed then it goes back to its position?
I will really appreciate someone helping me, a simple code will help or if zoid has a way to make iframe overlay the web content then it will be even better
my divs looks like this:
<script src='zoid_sett.js'></script>
<div id='zoid_iframe'>
<!--the iframe appears here -->
</div>
<div id="zoid_btn">
<script>
mybutton({}).render('#zoid_btn')
<script>
</div>
The iframe dimensions are 500 by 300 which is set in zoid settings.js file I am including.
My issue is not with the zoid render of the iframe but rather the styling of the iframe or the iframe's parent div to be an overlay.
You could use an overlay wrapper to be positioned as fixed.
HTML
<div id="overlay">
<div id='zoid_iframe'>
<div>Loading iframe here</div>
</div>
</div>
CSS
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
}
#overlay #zoid_iframe {
margin: auto;
width: 500px;
height: 300px;
background: #fff;
display: flex;
}
#overlay #zoid_iframe div {
margin: auto;
}
Just connect the button to "show" the overlay.
You can also add a "close" button to "hide" the overlay.
This is how it could look like when you "activate" the overlay.
https://jsfiddle.net/3q1yhro5/1/
Good luck :)

detect if div is ontop other elements (visible in the viewport) with overflow:hidden

I'm adding a div at the bottom of a video inside an iframe.
Generally I append the new Div to the iframe's parent and it's fine.
BUT, if some parent divs have some css like width:100% and overflow:hidden, it doesn't work and the div remains behind the iframe's video.
<style>
.defaultPhoto{
width: 434px;
height: 278px;
overflow: hidden;
}
.defaultPhoto .photo{
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper{ background: red; }
</style>
<div class="defaultPhoto">
<div class="photo">
<iframe width="434" height="278" src="https://www.youtube.com/embed/2xbgl7OJrg4"></iframe>
<div class="wrapper" id="Div0" >test</div>
</div>
</div>
This works:
http://jsfiddle.net/kav7b3os/87/
This NO:
http://jsfiddle.net/kav7b3os/70/
So, how can I be sure to put my new created div at the bottom of an iframe video and be sure it is visible in the viewport?
I used also the elementFromPoint to detect if the div is visible, with no luck.
You have a height on your defaultPhoto div of 278px and then inside this you have set the height of your photo div to 100% (i.e. 278px) then inside this, you set the height of your iFrame to 278px. So, the iFrame takes up the full height of the parent container - the full 100%. Therefore, if you don't allow overflow your new wrapper div can't be seen. The way to fix this, if you don't want to allow overflow is to increase the size of the defaultPhoto div. Depending on your requirements, you could do this with javascript at the point you add your new div.
Check out this fiddle which shows your layout with a larger defaultPhoto:
http://jsfiddle.net/fn5zancp/2/
.defaultPhoto{
width: 434px;
height: 318px;
overflow: hidden;
}

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

Disable the body scroll, but keep it on individual div elements which are greater in height than the browser

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}​
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}

Categories

Resources