We Keep Coding

Any known javascript or css that causes Chrome to not scroll vertically on a MacBook display?

I have a weird issue where my div is not scrolling vertically in Chrome on my MacBook display. If I move the window (without resizing it or anything) to a different display vertical scrolling works. If I scroll horizontally first that "unlocks" the vertical scrolling. Only in Chrome, only on the MacBook display.
I can't share the page here, but I can try to re-produce it with some different content if that is helpful. Thought I would check if it is a known issue first. I have some jquery resizing things going on that might be a lead.
setTimeout(function() {
var table_p = $("#table");
var position = table_p.position();
var viewheight = $(window).height() - position.top - 10;
table_p.height(viewheight);
$(window).resize(function() {
var table_p = $("#table");
var position = table_p.position();
var viewheight = $(window).height() - position.top - 10;
table_p.height(viewheight);
});
}, 250);

Turns out setting a height in the css for #table fixed the problem, even though the height is replaced by js soon after.

change image manually as window sizes

I used js to set image width and height according to window size. But in some cases when the browser is very wide, the image's hight exceeds all its father element's height. As a result, the bottom part of the image is not shown. How can I solve this?
I used bootstrap and swiper in this project and the image I want to change is inside my swiper division. I set and all the image's father elements' height to 100%. Here is my js code to change is image dymanically. The image size is 2560*1440.
if(winWidth/winHeight < 2560/1440) {
imgHeight = winHeight;
imgWidth = winHeight/1440 * 2560;
}else {
imgWidth = winWidth;
imgHeight = winWidth/2560 * 1440;
}
attr = "width:" + imgWidth + 'px;height:' + imgHeight + 'px;margin-left: -' + imgWidth/2 + 'px;margin-top:-' + imgHeight/2 + 'px';
$('.main .swiper-slide > img').attr('style',attr);
PS:
Sorry I didn't make it clear. The following methods you provided scale the image down in vertical view and so leaves much blank in the page. Actually I want my image's height to occupy the whole window's height, no matter in vertical window or horizontal window. And if the window is wide enough, image's width equals the window's width, otherwise cut the image in width and make it equals the window's width too.

#patstuart is correct, this is much better handled directly through CSS. It's pretty amazing how many styling issues (go figure) can be solved without writing a single line of JavaScript. So to answer your second question, let's figure out how it can be done with CSS. Without seeing a fiddle or your actual page / image, I'll just shoot from the hip here. If I understand correctly, you want the full image to display at its correct ratio no matter what the width / height of the screen is. If that's the case, here's a nice little trick:
.main .swiper-slide {
width: 100%;
height: 0;
/* Padding bottom should be the height's ratio to the width.
Which in this case, would be 56.25% */
padding-bottom: 56.25%;
}
.main .swiper-slide > img {
width: 100%;
}
That is how aspect ratio can be handled with CSS. Let me know if that resolves your issue or if you have any other questions. CSS was made for styling so always look for a solution there first.

Canvas width and height calculation is off

I'm using some script I found on Git that generates a snow effect. Somewhere in the code I have to set the width and the height of the canvas in which the snow is generated. I'm setting the canvas to the window full width / height :
canvas.width = $(window).width();
canvas.height = $(window).height();
But when rendered in the browser there are on both height and width some extra pixels adding scrollbars to the window. You can see the behavior here : Canvas ; I'm not quite sure why the width / height is calculated wrong or if there's something else interfering with those calculations that it makes it bigger than the actual window width / height. Maybe someone has a different view of the behavior or encountered it before ?

The canvas element is displayed inline by default, you can read here about similar problem.
The solution is quite simple :) Add following css code to the canvas element:
display: block;
and scrollbars should disappear.
old answer:
$(window).width() works properly but i don't know why $(window).height() returns too large value. It cause also showing vertical scrollbar because earlier computed width don't include the size of horizontal scrollbar.

How to center 'Getting Data' on mobile screen

While developing a site for many browsers, mobile and desktop, I've noticed that the following CSS works nicely to center a loading div.
img.loading1 {
position:absolute;
left:50%;
margin-left:-16px;
top:50%;
margin-top:-16px;
z-index:10
}
.loading2 {
color:#006BB2;
position:absolute;
left:50%;
margin-left:0px;
top:40%;
z-index:5
}
.loading3 {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color:lightgrey;
opacity:0.85
}
<div id="container" style="position:relative">
...content ommitted...
<div id="loading" style="display:none">
<div class="loading3"></div>
<img class="loading1" src="images/loader-ajax.gif" width="32" height="32">
<span class="loading2" id="getting">Getting your request...</span>
</div>
...content ommitted...
The div's display gets set to 'block' and the 3 items center great.
However, on a mobile screen, while the horizontal is right on, the vertical position could be off-screen depending on the height of the 'containing' div.
Is it possible to find the center of the screen and position the image and span there with Javascript?
Edit 1: Must the height of the loading div be set to be the height of the screen for this to work?

Related info:
Every absolutely-positioned element is positioned relative to a container. The default container is the body tag.
If no dimensions are specified, an element with absolute position is shrink-wrapped to the size of its content. When calculating the size in JavaScript, the value returned is whatever the current size happens to be, based on the content it contains. The element will not have the same size as its parent unless the width or height is explicitly set to 100%.
Without using jQuery:
Get the x and y location of the container element (relative to the viewport), the width and height of the viewport, and the width and height of the element.
Set the top to half the viewport height, minus the container y position, minus half the element height.
Set the left to half the viewport width, minus the container x position, minus half the element width.
// Center an absolutely-positioned element in the viewport.
function centerElementInViewport(el, container) {
// Default parameters
if ((typeof container == 'undefined') || (container === null))
// By default, use the body tag as the relative container.
container = document.body;
// Get the container position relative to the viewport.
var pos = container.getBoundingClientRect();
// Center the element
var left = ((window.innerWidth >> 1) - pos.left) - (el.offsetWidth >> 1);
var top = ((window.innerHeight >> 1) - pos.top) - (el.offsetHeight >> 1);
el.style.left = left + 'px';
el.style.top = top + 'px';
}
Here's a jsfiddle demo. If there are problems running it in jsfiddle, try this standalone demo.
Tested it in IE7/8/9, Firefox, Chrome, Safari, and Safari Mobile (iOS). The only thing found to cause a problem so far is if the absolutely-positioned element has a margin (which this function does not support at present).
Haven't tested in a responsive design yet.
Note: Be careful not to call this function when the page first loads. If the browser was scrolled or zoomed and then reloaded, the page may not have been rescrolled or zoomed back to where it was yet, and the resulting position would be incorrect. Setting a timer of 100 msec before calling the function seemed to work (allowing the browser time to rescroll and rezoom the page).

Use position: fixed with fix width & height.

in my exeprience this is hard to do with html/css
the easiest way i have found is using Javascripts innerHeight property
code could look like:
if (window.innerHeight) {
var loadingHeight = document.getElementById('loading').offsetHeight;
document.getElementById('loading').style.top = (((window.innerHeight/2)-loadingHeight) + "px");
}
you can set the horizontal position using the same method but replacing the height, offsetHeight and window.innerHeight methods with the respective width options, they are all well documented on the web

Using Javascript to resize a div to screen height causes flickering when shrinking the browser window

The Background:
I tried to solve the StackOverflow question yet another HTML/CSS layout challenge - full height sidebar with sticky footer on my own using jQuery. Because the sidebar in my case may be longer than the main content it matches the case of comment 8128008. That makes it impossible to have a sidebar longer than the main content and having a sticky footer without getting problems when shrinking the browser window.
The status quo:
I have a html page with a div, which is automatically stretched to fill the screen. So if there is empty space below the element, I stretch it downwards:
But if the browser viewport is smaller than the div itself, no stretching is done but the scrollbar shows up:
I've attached jQuery to the window's resize event to resize the div, if the browser window is not to small and remove any resizing in the other case. This is done by checking if the viewport is higher or smaller than the document. If the viewport is smaller than the document, it seems like the content is larger than the browser window, why no resizing is done; in the other case we resize the div to fill the page.
if ($(document).height() > $(window).height()) {
// Scrolling needed, page content extends browser window
// --> No need to resize the div
// --> Custom height is removed
// [...]
} else {
// Window is larger than the page content
// --> Div is resized using jQuery:
$('#div').height($(window).height());
}
The Problem:
Up to now, everything runs well. But if I shrink the browser window, there are cases, where the div should be resized but the document is larger than the window's height, why my script assumes, that no resizing is needed and the div's resizing is removed.
The point is actually, that if I check the document's height using Firebug after the bug appeared, the height has just the value is was meant to have. So I thought, the document's height is set with a little delay. I tried to run the resize code delayed a bit but it did not help.
I have set up a demonstration on jsFiddle. Just shrink the browser window slowly and you'll see the div "flickering". Also you can watch the console.log() output and you will notice, that in the case of "flickering" the document's height and the window's height are different instead of being equal.
I've noticed this behavior in Firefox 7, IE 9, Chrome 10 and Safari 5.1. Can you confirm it?
Do you know if there is a fix? Or is the approach totally wrong? Please help me.

Ok -- wiping my old answer and replacing...
Here's your problem:
You are taking and comparing window and document height, without first taking into consideration the order of events here..
Window loads
Div grows to window height
Window shrinks
Document height remains at div height
Window height is less than div height
At this point, the previously set height of the div is keeping document height greater than the window height, and this logic is misinterpreted:
"Scrolling needed, no need to extend the sidebar" fires, erroneously
Hence the twitch.
To prevent it, just resize your div along with the window before making the comparison:
(function () {
var resizeContentWrapper = function () {
console.group('resizing');
var target = {
content: $('#resizeme')
};
//resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize
//TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized
target.content.css('height', $(window).height());
var height = {
document: $(document).height(),
window: $(window).height()
};
console.log('height: ', height);
if (height.document > height.window) {
// Scrolling needed, no need to externd the sidebar
target.content.css('height', '');
console.info('custom height removed');
} else {
// Set the new content height
height['content'] = height.window;
target.content.css('height', height['content']);
console.log('new height: ', height);
}
console.groupEnd();
}
resizeContentWrapper();
$(window).bind('resize orientationchange', resizeContentWrapper);
})(jQuery);
Per pmvdb's comment, i renamed your $$ to "target"

$(window).bind('resize',function(){
$("#resizeme").css("height","");
if($("#resizeme").outerHeight() < $(window).height()){
$("#resizeme").height($(window).height());
$("body").css("overflow-y","hidden");
}else{
$("body").css("overflow-y","scroll");
}
});

Maybe I am misunderstanding the problem, but why are you using Javascript? This seems like a layout (CSS) issue. My solution without JS: http://jsfiddle.net/2yKgQ/27/