outerHeight in Chrome giving wrong value, OK in IE and FireFox - javascript

In the jquery.smartWizard plugin, there is a function called fixHeight which adjusts the height of a wizard step. This is used when a step is first displayed or when revealing hidden divs within the step. It works fine in IE (at least in IE 11 on Win8.1) and in FireFox. But, in the latest version of Chrome (Version 40.0.2214.94 m) the outerHeight is a much smaller value than it should be, by over 100 pixels or more.
This is the function, out of the box:
SmartWizard.prototype.fixHeight = function(){
var height = 0;
var selStep = this.steps.eq(this.curStepIdx);
var stepContainer = _step(this, selStep);
stepContainer.children().each(function() {
if($(this).is(':visible')) {
height += $(this).outerHeight(true);
}
});
// These values (5 and 20) are experimentally chosen.
//stepContainer.height(height);
//this.elmStepContainer.height(height + 12);
stepContainer.animate({ "height": height - 12 }, 500);
this.elmStepContainer.animate({ "height": height }, 500);
alert(window.outerHeight);
}
I modify the final steps to add the animation. With or without Chrome fails.
EDIT:
Here is a fiddle that demonstrates the difference between IE and Chrome. Click member, then click non-member. You will see that second set of values is different in each browser.
http://jsfiddle.net/xjk8m8b1/
EDIT2:
Here is another fiddle that shows both browsers get the same values for height until you try and calculate the visible elements. Then Chrome is way off.
http://jsfiddle.net/xjk8m8b1/2/

While not the best solution, I did figure out the issue. Firefox and IE are both adding up the height of everything in the div, include break tags and anything that creates vertical space. Chrome, in my opinion is broken, and not adding up these extra elements! It is not returning a true value for consumed vertical space.
My workaround is to wrap the contents of the div inside another dummy div. This way jquery looks at the height of that first child div and correctly returns the height.

I have the same problem, a ScrollBar is in the middle, the StepContainer never fixes the height.
Then I change this line in jquery.smartwizard.js:
$this.elmStepContainer.height(_step($this, selStep).outerHeight());
To this:
$this.elmStepContainer.height(_step($this, selStep).outerHeight() +20);
20 is enough for me, and my problem is gone.

Related

Why does Firefox return NaN from this parseInt of a CSS padding value?

In an application I'm working on, we have a fixed height modal with form content. The modal content is usually longer than the modal, so the user will have to scroll down inside the modal container to view and fill in the entire form.
Each form <input> also has a small tooltip that appears below the <input> when it is in focus. To ensure this tooltip is visible for users if they're tabbing through the form or click on a form field close to the bottom of the current scroll position in the modal, I've written some JavaScript/jQuery to scroll the content automatically if the tooltip would be hidden by the bottom of the modal.
This is my code:
// The amount of padding an element should always have to the bottom
var padding = 50;
// Add focus event to the form elements
$(".modal-content input, .modal-content textarea").focus(function(){
// Get element bottom position relative to modal bottom
var elementBottom = $(this).offset().top + $(this).height();
var modalPadding = parseInt($('.modal-content').css('padding'), 10);
var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + modalPadding;
var distanceFromBottom = modalBottom - elementBottom;
// Get current scroll location
var modalScroll = $('.modal-content').scrollTop();
// Scroll the modal if the element's tooltip would appear outside visible area
if (distanceFromBottom < padding){
var amountToScroll = padding + modalScroll + -distanceFromBottom;
$('.modal-content').animate({ scrollTop: amountToScroll },250);
}
});
Don't worry if things seem a bit confusing out of context; the problem here is on line 8, where I use parseInt to get an integer of the content area's padding value for use in the calculation on how much to scroll the content.
.modal-content has a padding value of 15px. As you would expect, parseInt returns 15 which I can then add to the other values in my modalBottom variable. This works perfectly in Chrome, Safari and Internet Explorer 8.
However, in Firefox, this parseInt always returns NaN (Not-a-Number) for some reason. If I replace modalPadding in the modalBottom variable with 15, like in the following code, it also works in Firefox:
var modalBottom = $('.modal-content').offset().top + $('.modal-content').height() + 15;
Obviously, the only reason for using the modalPadding variable is so that we won't have to update the JS code if we change the padding of the modal content, which is unlikely. Still, it annoys me to hell that Firefox returns a NaN no matter how I try to parse the padding value into an integer.
First I thought it had to do with the radix value of parseInt (which should be 10 for base 10) but as you can see I have it right there and it still doesn't work.
I've also tried using parseFloat and removing "px" from the value with .replace('px','') before attempting to make the value an integer with parseInt, neither of which returned anything but NaN in Firefox.
I'm running Firefox 27.0.1. Can anyone please explain to me why Firefox won't parse my padding?
Documentation says:
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.
Therefore you will need to specify paddingLeft or paddingTop... etc
As can see in this live example, $.css doesn't return anything in Firefox.
If your padding is going to be 15px for all directions (left, right, top and bottom) then just get one:
var modalPadding = parseInt($('.modal-content').css('paddingLeft'), 10);
Firefox can be picky with this. Padding could refer to padding left, padding right etc. If you know that all paddings are the same, try this:
Replace
var modalPadding = parseInt($('.modal-content').css('padding'), 10);
With
var modalPadding = parseInt($('.modal-content').css('padding-left'), 10);
Check out this JSFiddle.

document scroll doesn't work in IE

Neither this script:
$(window).scroll(function() {
alert("works");
})
nor this:
$(document).scroll(function() {
alert("works");
})
works in IE 8 and earlier.
I don't know why, could somebody help?
Create jsfiddle and check it in browserstack:
IE8 - window scroll works
IE7 - window scroll works
Check what you don't have javascript errors on page.
Mainly three things you should see
1.If you have given style as
overflow:hidden
2.If you have given height in page percentage.
3.if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason :
IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
Hope this helps...

Javascript DOM offsetHeight issue on small screens

I have a simple code to set the height of one column, id="colLeft" to the height of another column, id="colRight", with no padding or borders:
<script type="text/javascript">
var colLeft = document.getElementById("colLeft");
var colRight = document.getElementById("colRight");
colLeft.style.height = colRight.offsetHeight + "px";
</script>
This code works fine on desktop and iPad, but on my android phone the results are rather unpredictable. Sometimes colLeft is much longer, sometimes colRight, and sometimes it works the way it should. I have tried it on two browsers with the same results.
I have also tried it inside window.onload=function(){...} which gave slightly less variance in the results, but is still not perfect.
Thanks for any help.
You can read a bit about offsetHeight here. The important thing to note is that if the content is larger than the viewable area the browser might do funny things with non-scrolling elements. Because this is a phone browser, I am guessing that the issue is that it is miscalculating the column height because it doesn't deal with scrolling elements correctly.
How do you set the height of the first column? If it has a valid height set in the style sheet you could easily do something like this:
colLeft.style.height = colRight.style.height;
If that doesn't work, you may need to set the column height based on the browser window size with something like:
colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";
Or something similar.

JS/Jquery syntax for IE Window width and height

I'm measuring the window and document width and height via the following properties :
//measure the window and document height and width dynamically
var w = $(window).width();
var h = $(window).height();
var wd = $(document).width();
var hd = $(document).height();
Works fine in firefox but IE kicks up a fuss. Is there an alternative to this syntax that works in IE?
JS error recieved - could not get the position property. Invalid Argument
Works for me in both FF and IE, check for yourself here.
i just figured out, whats the "bug" in the code.
Firefox is able to get width and height, whereever you put your javascript.
But IE is only able to get this values when the script is within the body element.
I've had the same problem here and was trying about an hour.
I noticed, that the jsbin script is inside the pagebody and moved my javascript into the body and wow - it works in IE :-)
Best regards
I had the same problem and i solve it.
The question was related with IE being in Quircks mode, because i had in the begining of the HTML some non valid tags (i copy the source from a .aspx page, and i left there the <%page ..%> directive.
When IE finds some strange tag it enters quircks mode, and some things work diferent.
When i deleted the strange tag, the $(window).width(); stuff begins to work.
Hope this helps someone in the future with my same problem. :)

jQuery .css("margin-top", value) not updating in IE 8 (Standards mode)

I'm building an auto-follow div that is bound to the $(window).scroll() event. Here is my JavaScript.
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"));
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if(scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2))+"px");
console.log("Setting margin-top to "+$("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
This code assumes that there is this CSS rule in place
#ActionBox {
margin-top: 15px;
}
And it takes an element with the id "ActionBox" (in this case a div). The div is positioned in a left aligned menu that runs down the side, so it's starting offset is approximately 200 px). The goal is to start adding to the margin-top value once the user has scrolled past the point where the div might start to disappear off the top of the browser viewport (yes I know setting it to position: fixed would do the same thing, but then it would obscure the content below the ActionBox but still in the menu).
Now the console.log shows that the event is firing every time it should and it's setting the correct value. But in some pages of my web app the div isn't redrawn. This is especially odd because in other pages (in IE) the code works as expected (and it works every time in FF, Opera and WebKit). All pages evaluate (0 errors and 0 warnings according to the W3C validator and the FireFox HTMLTidy Validator), and no JS errors are thrown (according to the IE Developer Toolbar and Firebug). One other part to this mystery, if I unselect the #ActionBox margin-top rule in the HTML Style explorer in the IE Developer Tools then the div jumps immediately back in the newly adjusted place that it should have if the scroll event had triggered a redraw. Also if I force IE8 into Quirks Mode or compatibility mode then the even triggers an update.
One More thing, it works as expected in IE7 and IE 6 (thanks to the wonderful IETester for that)
I'm having a problem with your script in Firefox. When I scroll down, the script continues to add a margin to the page and I never reach the bottom of the page. This occurs because the ActionBox is still part of the page elements. I posted a demo here.
One solution would be to add a position: fixed to the CSS definition, but I see this won't work for you
Another solution would be to position the ActionBox absolutely (to the document body) and adjust the top.
Updated the code to fit with the solution found for others to benefit.
UPDATED:
CSS
#ActionBox {
position: relative;
float: right;
}
Script
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"),10);
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if (scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2)) + "px");
console.log("Setting margin-top to " + $("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
Also it is important to add a base (10 in this case) to your parseInt(), e.g.
parseInt($("#ActionBox").css("top"),10);
Try marginTop in place of margin-top, eg:
$("#ActionBox").css("marginTop", foo);
I found the answer!
I want to acknowledge the hard work of everyone in trying to find a better way to solve this problem, unfortunately because of a series of larger constraints I am unable to select them as the "answer" (I am voting them up because you deserve points for contributing).
The specific problem I was facing was a JavaScript onScoll event that was firing but a subsequent CSS update that wasn't causing IE8 (in standards mode) to redraw. Even stranger was the fact that in some pages it was redrawing while in others (with no obvious similarity) it wasn't. The solution in the end was to add the following CSS
#ActionBox {
position: relative;
float: right;
}
Here is an updated pastbin showing this (I added some more style to show how I am implementing this code). The IE "edit code" then "view output" bug fudgey talked about still occurs (but it seems to be a event binding issue unique to pastbin (and similar services)
I don't know why adding "float: right" allows IE8 to complete a redraw on an event that was already firing, but for some reason it does.
The correct format for IE8 is:
$("#ActionBox").css({ 'margin-top': '10px' });
with this work.
try this method
$("your id or class name").css({ 'margin-top': '18px' });

Categories

Resources