jQuery height issues when content is displayed in an iFrame in FireFox - javascript

I am working on a calendar/schedule that requires breaks to span the full height of the containing event. The below code works great in FF/Chrome and IE. The issue arises when loading the content via an iFrame in Firefox, the height is always set to zero. The page will only display correctly when the iFrame is reloaded.
here is DEMO
$(window).load(function () {
$(".event").each(function () {
var height = $(this).height();
$(".note, .break").each(function () {
$(this).height(height);
});
});
})
I am looking for a consistent solution or a workaround for FF so that the heights are applied correctly on first load of the iFrame.
Thanks in advance.

way 1: wrap your iframe with a div got float:left; and calculate div's height on fireforx.
try to calculate this div's height, not iframe's..
<div style="float:left">
<iframe></iframe>
</div>
.load() usage
way2:
$(document).ready(function () {//if u wont define more specific element, use docment ready
$(".event").each(function () {
var height = $(this).height();
$(".note, .break").each(function () {
$(this).css('height':height+'px');//to change css height
//$(this).attr('height',height);//to change inline attr height
});
});
})

Related

JS or JQuery DIV fixed menu height for body padding

I belive my doubt is quite simple, but I'm not achieving the result I need.
I'm using BS4 to build a website.
I have a fixed-top navbar, using the class "fixed-top", but I don't know its actual height, and as the responsive goes on, it changes.
I want to calculate the height of the navbar via JQuery or JS then add the same height as PADDING-TOP on body, so it will be always aligned correctly.
It must happen on window load and resize.
What would be the correct way to do that?
Thanks!
$element.outerHeight() includes the vertical padding and borders in the height calculation.
$element.height() is the raw height of the element.
$(window).on("load resize", function (event) {
var $navbar = $(".my-navbar");
var $body = $("body");
$body.css("padding-top", $navbar.outerHeight());
});
$(function(){
$('body').css("padding-top", $(".fixed-top").height());
});
http://api.jquery.com/height/

Trigger jQuery function at specific different browser widths

So I have this jQuery function that adds margin-top to an element based on the height of another element.
I'm trying to have this function trigger again on window resizes. (Preferably 1200px, 991px, 768px, 500px breakpoints)
If there is a good solution that allows the function to trigger with any browser resize, even better. I just need to make sure this wont cause "lag" or "slowness" due to the function triggering 100 times during a resize event for example.
Here is a codepenn with my current function:
http://codepen.io/bruno-gomes/pen/vgRbBB
Code:
jQuery(document).ready(function($) {
(function() {
var navBarHeight = $('.header').height();
$('.content').css('margin-top', navBarHeight);
})();
});
The idea is that I want the fixed header to not cover the content, and the size of the header will vary depending on the width of the browser. This becomes an issue when user resizes browser because the function is only triggering once on load.
I have the IIFE setup like that because it's a Joomla site and they don't work properly otherwise by the way.
You can use .resize() for that
Ok seems like this approach solved all my problems ^.^
jQuery(document).ready(function($) {
var height = $('.header').height();
resizeHeader(height);
$(window).resize(function() {
var height = $('.header').height();
resizeHeader(height);
});
function resizeHeader(height) {
$('.content').css('margin-top', height);
}
});

JS / jQuery How to get height of dynamic (responsive) div?

I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing
You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});
You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)

Dynamically resize a div using jQuery

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var height = $(window).height();
$("#mainDiv").height(height);
</script>
<body>
<div id="mainDiv"></div>
</body>
I don't know much jQuery, am I making an obvious mistake?
There are a few things going wrong here:
Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).
You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:
var $win = $(window);
$win.on('resize',function(){
$("#mainDiv").height($win.height());
});
What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:
var timer,
$win = $(window);
$win.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#mainDiv").height($win.height());
}, 500);
});
You need to wrap it in a resize function:
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
Although I should point out what your doing could easily be attained through CSS:
body,#mainDiv {
height:100%;
}
This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.
Yes, the mistake is use jquery hehehe
You do this with CSS
<body>
<div id="mainDiv" style="height:100%"></div>
</body>
Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});
I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.
footer = $("div[data-role='footer']");
content = $("div[data-role='content']");
viewHeight = $(window).height();
contentHeight = viewHeight - footer.outerHeight();
contentHeight -= (content.outerHeight() - content.height());
content.height(contentHeight);

Incorrect height of div returned by JS functions. Why?

I try to get size of main div on page, to make iframe change its height to content, but document.getElementById("divId").offsetHeight (also try innerHeight) return wrong value. It always returns 247, but in fact page looks like it cut on 75%. I have an idea that page didn't load fully, so I put resize code in the footer of the page, but it still return 247.
$(document).ready(function() {
console.log(document.getElementById("resizeDiv").offsetHeight);
});
Any suggestions?
Add setTimeout to wait screen load and get correct height.
setTimeout(() => {
document.getElementById("resizeDiv").offsetHeight
}, 300);
I have found other decision, I just get height of body and it works good:
var height = Math.max(
document.body.scrollHeight,
document.body.clientHeight,
document.body.offsetHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight);
You may need to load your function after the DOM is loaded.
window.addEventListener('DOMContentLoaded', (event) => {
// do something
});
See Mozilla documentation
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
try this
$(document).ready(function() {
console.log($("#resizeDiv").height()); }
);
You're already using jQuery, why not try:
$(function() {
$('#resizeDiv').height();
});
It sounds like you may be trying to resize an iFrame based on the content inside it. If you are trying to do that, this question has already been answered here:
Resizing an iframe based on content
document.getElementById("resizeDiv").offsetHeight, it gives the actual height of the element in pixels. The value includes the height of any padding and borders.
document.getElementById("resizeDiv").style.height is similar to .height, except you're asking for the height part of the style attribute.
document.getElementById("resizeDiv").height is only valid if the element has a height attribute, such as an IMG tag:
<img src="..." width="200" height="300">
It's a shorthand for document.getElementById("resizeDiv").getAttribute("height").
The load event on the window object triggers when the whole page is loaded including styles, images and other resources. We can use this to get the correct height:
window.onload = function () {
element.offsetHeight;
}

Categories

Resources