Handling JQuery/CSS errors in IE - javascript

I've got some code to maximize a video panel on page load / resize. I'm using JQuery 1.4.4 and everything is working great in Chrome, Firefox and Safari. Following some examples from some other posts, I adjust the video panel size based on the rendered size and styling of the other elements on the screen.
function maximizeVideo(){
var play_height = $(window).height()-42;
var play_width = $PLAY.width() - $NAV.width();
play_width -= parseInt($NAV.css("paddingLeft"), 10) + parseInt($NAV.css("paddingRight"), 10);
play_width -= parseInt($NAV.css("marginLeft"), 10) + parseInt($NAV.css("marginRight"), 10);
play_width -= parseInt($NAV.css("borderLeftWidth"), 10) + parseInt($NAV.css("borderRightWidth"), 10);
$NAV.css('height',play_height-16+"px");
$VIDEO_PANEL.resize(play_width, play_height);
}
In IE the css accessor sometimes returns NaN. Is there a better way to account for the rendered width of the other element?
If not, what's the best way to trap these errors?
Thanks!

For your situation, I think you should be looking at the outerWidth function instead of width. Using outerWidth(true), we can obtain the width of the element including its borders, padding and margin. Therefore you can replace this line:
var play_width = $PLAY.width() - $NAV.width();
with this:
var play_width = $PLAY.width() - $NAV.outerWidth(true);
And thus eliminating the next three lines of calculations altogether.
Additionally, the height and width functions are not just getters, but also setters, so this line:
$NAV.css('height',play_height-16+"px");
can be rewritten as
$NAV.height(play_height - 16);

Related

$(window).resize() and $(document).ready() calculate different values

I am trying to make text adaptive using jQuery. Here is the fiddle:
http://jsfiddle.net/bq2ca7ch/
You can see a div with some text in it. The div doesn't have a specified height, and it's height is calculated from text height and 10% paddings on top and bottom.
I want font-size to be responsive. Let's say, div's original size was 124px, and font-size was 50px, so I want to keep this ratio. That means I need to know, what percent 50 is from 124. It is about 40.32 (50/124*100). That means that I need to set font-size to value, equal to container height/100 * 40.32. Here is the code I used:
function foo(){
var container = $(".box");
var containerHeight = $(".box").innerHeight().toFixed();
var neededSize = (containerHeight/100*40.32).toFixed();
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
That seems to be working, but only when I resize the page. When I reload it, there is some different value. Why does the same function gives different values on resize and onload?
What i observed that Size changes because :
1. When you just reload .the function runs only once.
2.But when you resize , the function runs twice and changes the font size because the again calculations are done based on new height.
Main thing is on resize it is calculating wrong innerheight
See this:
function foo(jQuery ){
var container = $(".box");
var containerHeight = $(".box").innerHeight(true).toFixed(2);
var neededSize = (containerHeight/100*40.32).toFixed(2);
alert(containerHeight );
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
Resize method is not reliable.
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
I tried with this , it worked for me both are giving the same result for me . try this container.css("font-size":neededSize + "px");

Set large value to div's height

I have a problem with height limitation of <div></div> in some web browsers, like Firefox. I have javascript code like this:
$('#MyDiv').css("height","20000000px"); // 20,000,000 pixel height
But I see height: 2e+7px; rule in the firebug. This problem exist in IE too, But in google chrome everything is ok and I see height: 20000000px;. How can I set very large value to div's height in a way that works for most browsers?
EDIT: firefox has no scrollbar in this div, but google chrome has scrollbar.
I want just confirm the problem which describes hamed. One can try the demo http://jsfiddle.net/OlegKi/y4tLxx53/4/ which contains setting height property using jQuery.css on the test div:
var testValues = [10000, 1533916, 1533917, 1533918, 10737418, 10737419,
17895696, 17895697, 17895698, 20000000], h, i;
for (i = 0; i < testValues.length; i++) {
h = testValues[i] + "px";
$("#test").css("height", h);
$("#log").append("<span>After setting height " + h +
", one have height: " + $("#test").css("height") +
"</span><br/>");
}
with very simple HTML markup
<div id="log"></div>
<div id="test"></div>
One can see in Google Chrome the expected results
but Firefox shows
and IE10 and IE11 displays
instead.
By the way, the setting of large height on divs will be used to implement "virtual scrolling" (for example in jqGrid). So that the user sees div with large scroll and a table inside. If the user uses scroll bar then the page of data will be downloaded from the server via Ajax. In the way the height of the div should corresponds to the size of data on the server. If one row of table data have height 23px, then IE10/IE11 can simulate in the simple way only 66692 rows of virtual data in IE (1533916/23=66692) and 778073 rows (less as a million rows) in Firefox. The demos shows that one need use more sophisticated implementation of "virtual scrolling" to have no, described above, problems with setting of height of div.
One can use the same inline demo alternatively:
var testValues = [10000, 1533916, 1533917, 1533918, 10737418, 10737419,
17895696, 17895697, 17895698, 20000000], h, i;
for (i = 0; i < testValues.length; i++) {
h = testValues[i] + "px";
$("#test").css("height", h);
$("#log").append("<span>After setting height " + h +
", one have height: " + $("#test").css("height") +
"</span><br/>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="log"></div>
<div id="test"></div>
I have run into the same issue implementing virtual scrolling. My solution is to detect numbers that are too large and use a multiplier.
This means that the height of the overflowed content will be realHeight / multiplier. And when I'm trying to figure out what data to show, I just take the scrollTop * multiplier. This works fine to the user because the scrollbar has a minimum height.
This will work if you have control over the effect. I'm not familiar with jqGrid, but the source code may have to be updated.
That's not a problem. The value 2e+7 is the same as 20000000, it's just a different way of showing the number.
In some tools, large numbers are shown in scientific notation. The number 2e+7 means 2 * 107.
If your document is size is not fixed, you can use this:
var height = $(document).height();
and set your div container height accordingly
$('#MyDiv').css("height",height);
This should work on all the browsers

Javascript positioning not working in Chrome or Safari

I have a script going in Javascript, the purpose of which is to make an image stay centered in the window when the window is smaller than the image. It just moves the image to the left by half the difference between the image width and the window width so that the center of the image is always the center of the screen. When the window is not smaller than the image, this left offset is set to zero. And it works perfectly, if I'm in IE or Firefox. On the webkit browsers, it doesn't ever go to zero, creating an effect akin to float:right when the window is wider than the image. Here's the code:
setTimeout(slideImageWidth, 1);
function slideImageWidth() {
var slideWidth = window.getComputedStyle(document.getElementById("slide-image")).width,
windowWidth = window.innerWidth,
slide = document.getElementById("slide-image"),
slideWidth = window.getComputedStyle(slide).width;
if (windowWidth < (slideWidth.replace("px", "") + 1) && slide.style.display !== "none") {
slide.style.left = ((((-slideWidth.replace("px", "") + windowWidth)) / 2) + "px");
}
else {
slide.style.left = 0;
setTimeout(slideImageWidth, 1);
};
I tried putting slide.style.left = 0 before the if and just letting the loop take care of it in the next millisecond, but that didn't work either. I've also tried both placements with:
slide.style.left = "0px";
slide.style.left = 0 + "px";
slide.style.left = "0" + "px";
slide.style.left = 0px;
none of which worked in Chrome or Safari, but all but the last of which worked in Firefox and IE.
When I use alert(slide.style.left) when the window is wider than the image, a positive value is returned in Chrome and Safari, unlike the 0 from Firefox and IE, which tells me that the 0 value is never being written to slide.style.left. Yet, I know that I can modify slide.style.left because it still positions itself based on the equation.
Why does this code not work with the webkit browsers, and how can I fix it?
First, the things which I think are accidental typos:
1) Your code references something called "slide1Width", which is defined nowhere.
2) Your code references something called "slide1", which is defined nowhere.
3) You don't have the right number of close brackets, and the last bracket inexplicably has a semicolon after it.
Second, the most obvious error that isn't causing your specific problem:
(slideWidth.replace("px", "") + 1)
This expression is not what you want. If slideWidth is "440px", the replace() call gives you "440", and ("440" + 1) is the string "4441". I don't think that's what you mean to do here.
Third, and finally, what I believe is the cause of the actual bug you're asking about: timing. If you open up the dev tools and manually run slideImageWidth() on a wide window after it has loaded and failed to center itself, the image will in fact jump to the center, even on Chrome. Why doesn't it do it on page load? Here:
window.getComputedStyle(slide).width
That expression returns "0px" right when the page is first loaded. If you wait until the image is done loading, you'll be able to get an actual width for it, in which case you can do the calculations you want. (Or, presumably, you could set the width yourself via styling.) It seems that IE is getting the image loaded and flowed before running the script, whereas Chrome is not.
Is there a reason you want to use setTimeout instead of a resize event? What about something like this:
window.onresize = function(event) {
setSlidePosition();
};
function setSlidePosition() {
var slideLeft = (document.getElementById("slide-image").style.left.indexOf('px') != -1 ) ? document.getElementById("slide-image").style.left : '0px';
var numLeft = slideLeft.replace('px','');
console.log(numLeft);
var element = document.getElementById("slide-image")
if(element.width > window.innerWidth) {
var newLeft = (element.width - window.innerWidth) / 2 * -1 + "px";
document.getElementById("slide-image").style.left = newLeft;
} else {
document.getElementById("slide-image").style.left = "0px";
}
};
setSlidePosition();
http://jsfiddle.net/4qomq7tb/45/
Seems to behave the same in chrome and FF at least. This doesn't specifically answer the question relating relating to your code, though :/

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.

jQuery: JavaScript does not do what I tell it to

I know that the title is very subtle but I have absolutely no idea how I should title this issue nor what the hell is happening with this function.
function update_background(source, isSystem){
if (!isSystem) {
source.replace(/\/tn_/, '');
jQuery('div#drag_container img[alt="background"]').attr('src', source); //*1
jQuery('div#drag_container img[alt="background"]').attr('style', '');
var height = jQuery('div#drag_container img[alt="background"]').height();
var width = jQuery('div#drag_container img[alt="background"]').width();
var ratio = Storyboard['format'];
//Don't touch the paddings, they are correct!
if (height * ratio > width) {
var padding = (Storyboard['display'] - (width * (Storyboard['height'] / height))) / 2;
jQuery('div#drag_container img[alt="background"]').css({
'height': Storyboard['height'],
'padding-left': padding
});
} else {
var padding = (Storyboard['height'] - (height * (Storyboard['display'] / width))) / 2;
jQuery('div#drag_container img[alt="background"]').css({
'width': Storyboard['display'],
'padding-top': padding,
'padding-bottom': padding
});
}
} else {
jQuery('div#drag_container img[alt="background"]').attr('src', source).attr('style', '');
jQuery('div#drag_container img[alt="background"]').css({
'width': Storyboard['display'],
'height': Storyboard['height']
});
}
}
What this function is supposed to do, is take a picture, get the size of it, compare it to the the size of the container it will be shown in, resize it so that it is as big as possible without sticking out of the container and then finally, apply padding where needed to center the image. It does not matter if the picture is landscape or portrait, the function knows exactly what to do. The picture is cached so that we don't get wrong values (I already had a bug like that). In case it is a System Background, we don't care for correct size and padding. Worked flawless for 3 months.
Lately, it is behaving rather odd. At the line with the comment *1, it does not only reset the src attribute of the img-tag, but it also sets a height and a padding, as if it already were in the padding calculations. They are removed again on the next line (which wasn't actually inserted for that purpose but was inserted to get the original dimensions of a picture) and it still works.
Unless, of course, you let the function run at regular speed, where it does not reset the style. I am quite irritated by this Bug as I have no idea where to start searching.
The function is only called once. It only runs once through the function. It is not included in an event and this function is called in 2 totally different places.
Any ideas?
Edit 1
I have found out that the Bug does not occur in every Browser.
Mac OS X Snow Leopard
Firefox: behavior as described
Opera: does it all wrong, but is not supported by our company
Safari: Still works flawless
Windows XP
Chrome: Works same as Safari
Firefox: Behavior as described
IE8: Same Behavior
IE7: Actually Works!
Linux
Firefox: Behavior as described
Konqueror: does not even work with my JavaScript
You might be having problems getting the size of the image because it isn't guaranteed that it has been loaded by the time you're checking its dimensions.
var $img = jQuery('div#drag_container img[alt="background"]');
$img.bind('load', function(){
// do all of your stuff with the width and the height of the image in here...
var width = $(this).width();
var height = $(this).height();
});
$img.attr('src', source); /* kicks off the loading of the image, the bound function
* above will get called when it's done.
*/

Categories

Resources