Get the current browser window center - javascript

How do I get the browser window height so I can find the center position?
I only need the window height, not the web page height.
I tried $(window).height() / 2 but it only works if the browser has focus from the top of the page. If I scroll down I get the wrong center.

To get the y value of the center of the current viewable area, use:
$(window).scrollTop() + $(window).height() / 2
I tried it on this page, by opening up the Web Inspector and entering:
$('<p>').text('test').appendTo('body').css({position: 'absolute', top: $(window).scrollTop() + $(window).height() / 2});

I think that the body's height needs to be in brackets for it to work properly:
var center = $("body").scrollTop() + ($("body").height() / 2);
However, if you're making a popup dialog, it's better to detect if the user is not on a mobile device then use the CSS "position: fixed". You detect for mobile devices because Mobile Safari doesn't understand fixed positioning in iOS versions before 5. Use this code for the detection:
var isMobile = navigator.appVersion.indexOf("Mobile/") != -1;
Ad#m

Try window.outerHeight and window.outerWidth, which works in FF5 (and possibly earlier versions) and Chrome, but not in IE9. From googling it seems that this bit of info is not easy to get by in IE.
Also see this other question dealing with IE.

var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="' + src + '" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var w = 700;
var h = 600;
var leftCenter = window.innerWidth / 2;
var leftWindowMargin = leftCenter - (w / 2);
var topCenter = window.innerHeight / 2;
var topWindowMargin = topCenter - (h / 2);
var win = window.open("", "", "width=" + w + ",height=" + h + ",resizable=no,top=" + topWindowMargin + ",left=" + leftWindowMargin + ";");
win.document.write(iframe);

Related

Javascript get original browser width or resolution

Can I get the original size of the browser even if it is minimized?
This code isn't working - perhaps it grabs the current size, not the original size.
var original_size = $(window).width();
var original_size2 = window.innerHeight;
var original_size3 = $(window).width() || window.innerHeight;
I think you're searching for:
window.screen.availHeight
window.screen.availWidth
console.log("Available Height: " + window.screen.availHeight);
console.log("Available Width: " + window.screen.availWidth);

Resize in firefox not working

Can someone tell me why resizing does not work in firefox but it works in internet explorer? I cannot figure out how to force it in all browsers. I am trying to resize the width to 800 and height to 475. Then I am trying to make it where you can not maximize the browser (disabling it). As well as removing all toolbars from showing and URL as well.
function OpenWindow(url, width, height)
{
var features = 'resizable:no;status:yes;dialogwidth:' + width + 'px;dialogheight:' + height + 'px;help:no';
features = features + ';dialogtop:' + (window.screen.availHeight - height) /2;
features = features + ';dialogleft:' + (window.screen.availWidth - width) /2;
window.showModalDialog(url, this, features);
}
function Resize(width, height)
{
var availWidth = window.screen.availWidth;
var availHeight = window.screen.availHeight;
var top = (availHeight - height) / 2;
var left = (availWidth - width) / 2;
if (window.dialogHeight)
{
window.dialogHeight = height + 'px';
window.dialogWidth = width + 'px';
window.dialogLeft = left;
window.dialogTop = top;
}
else
{
var _win;
if(window.parent) _win = window.parent;
else _win = window;
_win.resizeTo(width, height);
_win.moveTo(left, top);
}
}
Resize(800, 475);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Any advice will help. I do not understand why things work in certain browsers and not in others.
As you can see here, it's not been allowed in Firefox at all since Firefox 7. Sorry but you won't be able to resize the window in Firefox.

How to prevent an iframe from re-sizing when zooming

I've read similar issues on this but no one seems to have an answer. I have an iframe where I am loading an image. When I zoom the iframe becomes bigger or smaller. Is there a way to prevent the iframe from zoooming or a way to keep the ratio when zooming?
I got it working for an image but can seem to get it to work for when I use an iframe
JS
var iframeDimensions = document.getElementById('mobile-iframe');
var iwidth = iframeDimensions.clientWidth;
var iheight = iframeDimensions.clientHeight;
$(window).resize(function(){
var device = detectZoom.device();
newWidth = iwidth / device;
newHeight = iheight / device;
$(iframeDimensions).attr('width', newWidth);
$(iframeDimensions).attr('height', newHeight);
var winW = document.body.offsetWidth;
console.log('zoom level: '+device);
console.log('new width: '+newWidth+'px');
console.log('new height: '+newHeight+'px');
console.log('offsetWidth '+winW);
console.log('scale '+ winW / newWidth);
//$('iframe').css('-webkit-transform', 'scale(' + (device + ", " + device) + ')')
$('iframe').width();
//$('iframe').css('-webkit-transform', 'scale(1)');
});
HTML
<iframe id="mobile-iframe" src="https://www.google.com/logos/doodles/2013/maria-callas-90th-birthday-6111044824989696-hp.jpg" width="534" height="210" frameborder="0"></iframe>
Solution with JS:
take a look at this How to detect page zoom level in all modern browsers? for example to detect the browser zoom level and then multiply the width and height of your iframe with the inverse value so in the end they visually stay the same.
Example: zoom level is 1 (Standard): width: 100px; height: 50px;
zoom level is 2: width: 50px; height: 25px; -> Browser shows it double the size so it stays the same
just added: I still wouldn't recommend doing it due to usability ;)

JavaScript code works on IE but not Safari (Mac or Windows)

Can anyone tell me why this wouldn't work on Safari?
// Set the height of the iFrame
var avail = document.parentWindow.screen.availHeight;
var screenTop = document.parentWindow.screenTop;
var divHeight = $('.header').css('height').replace('px','');
var divTop = $('.header').position().top;
alert('avail: ' + avail + '\nscreenTop: ' + screenTop + '\ndivHeight: ' + divHeight + '\ndivTop: ' + divTop);
$('#viewerFrame').css('height', (avail - screenTop - divTop - divHeight - 94) + 'px');
In IE, it works exactly as I want (which means it sizes the iFrame to take up all of the screen that's left after I take into account the size of the window, the header, and so forth...). Why doesn't it work in Safari?
document.parentWindow is IE-only.
You may use top or parent instead

Centering via offset math doesn't work in non-webkit browsers

The code: http://jsfiddle.net/LPF85/6/
In FF, IE7, and IE9 (the only browsers I've tested that don't run WebKit), it seems that the left attribute is either always set to 0, or, in IE's case, negative.
My positioning code is all based off the dimensions of the document.
function open_img_in_face_box(id, width){
max_width = $j(document).width();
max_height = $j(document).height();
padding = 150;
passed_width = width || (max_width - (2 * padding));
var img = $j('#' + id);
dom_img = document.getElementById(id);
$j(document).bind('reveal.facebox', function() {
$j("#facebox .image img").width(passed_width);
})
// display
jQuery.facebox({
image: img.attr('src')
});
// center and adjust size
var aspect_ratio = img.width() / img.height();
var img_width = passed_width;
var img_height = passed_width / aspect_ratio;
window_center_y = max_height / 2;
window_center_x = max_width / 2;
offset_y = window_center_y - (img_height / 2);
offset_x = window_center_x - (img_width / 2);
var fbx = $j('#facebox');
fbx.css('position', 'absolute');
fbx.css('left', offset_x + 'px !important');
fbx.css('top', offset_y + 'px !important');
fbx.css('margin-left', 'auto');
fbx.css('margin-right', 'auto');
}
margin-left and margin-right don't appear to do anything here, which I'm fine with, because the left math should work across all browsers, right? (It is just math)
The goal of the facebox / lightbox, is to be centered both horizontally and vertically.
Why would you even programatically calculate the position in the first place? What if the user resizes the page? This can easily be done in pure CSS.
I don't really understand your jsFiddle (or am I not seeing the same thing?) so I'll just give you this script: http://jsfiddle.net/minitech/8U4Ke/ that can be modified however you like. It's commented. ;)
Now it's easy to hide and show - to hide, fade out .overlay. To show, fade it in. To change the contents, replace the HTML in .popup. Add close boxes and whatnot liberally.

Categories

Resources