Fetch current height of iFrame and applying that height to parent div - javascript

I have an iFrame inside of a div. I need the position on the iFrame to be absolute (it's a really long story). When the position is absolute, the content lays over the content below it. How can I fetch the current height of the iFrame and set that number as the height of the parent div in order to push the other content down, creating the illusion that the iFrame content in no longer laying on top of the rest?
Have done a bunch of research and tried so many things in js. Please help and if you're feeling nice, please give me some good rep :)
Thanks.
<div <style="height:[want this to be height of iframe after loading content]">
<iframe src="mydoc.html" style="position:absolute"></iframe>
</div>
<div>Other content that is now displaying under iFrame content</div>

$(document).ready(function() {
var iframeHeight = $('iframe').height();
$('div').css('height', iframeHeight);
});
It would be trivial to do this in vanilla js if you had selectors on your elements.

Related

How to display only as many pictures within a div as there is space for them?

I have an empty div element like this:
<div class="mydiv"></div>
My product owner now wants to fill this div with pictures until there is no more space left (in vertical direction):
<div class="mydiv">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<!-- keep going until mydiv is full -->
</div>
Unfortunately, the size of this div element is unknown until the page is actually loaded since it's a responsive website and thus the size of the div is dynamically adapted to the size of the screen/browserwindow. We do know the size of the images though.
Is there a pure HTML/CSS solution for this?
The only way I can think of is to check the width + height of the div during runtime via JavaScript and then do the math to see how many pictures are probably gonna fit in there and then insert only the images that will probably go in.
Ok so there is a way to use it with "hacks" :
I made a first container that is the with you defined.
set overflow:hidden to this container
Then i made another container inside the first one but with greater width
Inside this container put all the images ( works vertically and horizontally, add float:left to my example to make it work horizontally )
Here is the example
You see that i made 4 images ( faked them with fix position divs ) and that we can see 2.5 of them because of the container width.
Hope this trick is what you're looking for :)
This is my solution in javascript :
var mydiv = document.getElementById('mydiv') // or by class not important
while(!(mydiv .offsetHeight < mydiv .scrollHeight
|| mydiv .offsetWidth < mydiv .scrollWidth)) {
mydiv.innerHTML = mydiv.innerHTML + '<img src="myimg.jpg" />;
}

How to display nth divs within a certain div using javascript?

I have multiple divs on a page and in a certain div there are more child divs that get floated to go across the page. I want to be able to use javascript to see the width of the window and then divide my set width of the divs to work out how many to display.
I have found the 2 pieces of code. One that measures window width and the other to slice the divs and hide the rest.
$('div').slice(4).hide();
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
alert(width);
}
});
My Problem is how to select only the divs within my speciedfied div. I have tried this but it hasn't worked. Don't even know if i'm goin in the right direction
$("#mainContent2").append(('div').slice(4).hide());
Is javascrpt the right way to go about this or would css be able to do what I'm after?
Many Thanks
EDIT: HTML
<div id='mainContent>
<p></p>
<div>
<div id='mainContent2'>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
<div><img></img><p></p></div>
</div>
If you have got the number of div to show in particular div then you can use this code.
$(#mainconetent2 > div).slice(4).hide());
I'm not sure whether I correctly understood your problem, but JQuery offers the child-selector for selecting children of a specific element. Then you have access to its parameters and can set whatever you want.

get height of nodeList load via ajax with javascript

I am loading in some html using YUI3, that looks like this:
<div id="content">
<p>This is all of my content, neat neat neat!!!!</p>
<img src="ps_logo.png" alt="Google" />
</div>
I've tried using .get('offsetHeight') and .getComputedStyle('height'), but both only return the height of the div and paragraph tag and don't take into account the height of the image. So, even though the image is 150px tall, I am getting 73px returned.
Whats the best way to get the width and height of a nodeList when the elements haven't had it set via CSS?
Thanks for the help.
Either set the img height in the img tag - account for it, or ensure that the height query is called after the image has loaded, not just after the image tag has been put in the page.

JavaScript - Is it possible to get height from div in separate page?

I'm wondering, is it possible to collect the height of a specific div container from a separate page with JavaScript? I'm using jQuery btw and I'm in need of comparing heights of div containers.
Edit: To clarify a bit more, I load content from a specific div in a separate page using jQuery. This content is faded into a different container with dynamic height. But in the small fraction of time before the content arrives, it shrinks down to it's min-height.
What I've done so far is collecting the height of the container before and after the load. But it only works after I've loaded content once. Because I don't have the height before it's been loaded the first time.
If the relationship between the pages is opener and [popup|child] window, then yes.
If not, you are going to run into a security wall. (unrelated pages should not have access to each other)
So, if the "other" page is a popup window that your page launched, or a child iframe that your page "launched", then yes.
I would use the jQuery .height() method to obtain the height, but how you get the object is up to you (depends on what attribute info you have etc.)
//get from popup
var otherDiv = popupWinRef.document.getElementbyId('id');
//get from iframe
var otherDiv = window.frames[frameIdOrIndex].document.getElementById('id');
alert($(otherDiv).height());
Well, you can't get it until AFTER it's loaded via jQuery. Then you need to make sure you're not having a conflict between two divs with the same ID.
From your comments it sounds like you are using ajax to load content from another page, you'll likely have the load div hidden... So I would position the loading div absolutely out of the viewport but not hidden. then get the height of your desired div but make sure you access it using the loading div and your desired div... something like this:
#divToLoadContent { position: absolute; left: -99999em; top: 0; } /* don't hide this div */
Script
var height = $('#divToLoadContent #myDesiredDiv').height();

Resizing a div to fill the browser

I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy
Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.
Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.
On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;
This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>

Categories