Detect Chrome browser window width and height to prevent element overflow - javascript

I'm looking for a code that either:
Prevents an element from extending beyond the edge of a window.
OR
Detects the window width or height so that the element's width/height may be set in units of px.
This code only needs to work in Google Chrome.
I've done a LOT of research and everything looks so complicated. Isn't there a simple CSS solution?
Thanks much in advance!

I had a similar problem that jQuery solved for me,
var width = jQuery(window).width();
there's also a .height() method

Related

Google Chrome incorrectly calculates the height of the element

I need to set the height of the sidebar the same as main content, so I wrote this:
document.querySelector('.sidebar-left').style.height = document.querySelector('.main-content').offsetHeight + 'px';
It works in Firefox like a charm but Google Chrome incorrectly calculates the height of .main-content element so the heights of .sidebar-left and .main-content are not equal. But sometimes when I refresh the page Chrome sets sidebar's height correctly, then again incorrectly.
The same happens when I use getBoundingClientRect() method. How can I fix this?
I don't have enough rep to comment so will post here.
I'm wondering at which point you do this - are you doing this in a document.ready event block (i.e. when the page is fully loaded) or before?
If before then the .main-content may not have yet rendered properly, so getting the height will be incorrect (especially if you're doing some modification of it?)

jquery iframe resize only works in firefox

I have been desperately trying to find a way to resize my iframe according to its content. I have a working script I found here but chrome still won't work. The frame does become bigger but it won't become smaller. I've tried so many codes but to no avail. (iframes are not my choice btw) I'm no expert in js and jquery so please guide me if you can. thanks
In Chrome, the body height is defined by the height of its container, there is a circular definition if you define the size of the container by the size of the iframe body. The solution that I've found is to set the position of the iframe's body as absolute.
You can see a demo here: http://webapps.so/labs/iframe/page.html

Rendering bug in WebKit browsers

In the project I currently work on we experience very strange rendering issue. The worst thing is that this issue emerges completely spontaneously and after several days of testing we haven't managed to find the sequence of actions wich would reproduce this issue. Here is an explanation of how this bug look like. Here is a screenshot of how the page should look like:
But instead of this after some manipulations content block pops up so only the part of the content is visible and its look like:
The most strange thing is that such a position of the block is not based on values of CSS properties as shown by Web Inspector.
As you can see the CSS properties are ok, while the position of the block is not. This fact suggest me that it could be some rendering bug of the WebKit engine
The project is built using Ext JS 3.4 and it is a classical one-page web application. This issue was seen in the last versions of Chrome and Safari on Mac OS 10.7/10.8. Though due to the spontaneous nature of this issue it might be present in other browsers and platforms too.
Any piece of advice on how to debug such issues or how it could arise is welcome.
Please check if any of your code or Ext JS's code is using scrollIntoView method, we have seen similar issue when scrollIntoView is called on any element that does not have overflow set to auto and it is inside an clipped element that is probably placed relatively positioned.
It seems bug in webkit because it scrolls clipped element which is not happening in other browsers.
I also see two elements in same hierarchy which has overflow set to auto. And scrollIntoView is scrolling wrong element.
Chrome and safari on Mac are having problems with scrolling. If the element has been scrolled and the content changes, the scroll position is kept even if the content is not high enough to require a scrolling.
The work around we have found in our application is to resize the container (the one that has the scroll) so that it has the scrollbar (or else you cannot play with the scrolling properties) and then reset the scrolling, and the height.
$(container).css('height',1).scrollTop('1').css('height','');
Here is how we do it in jQuery. You will not even see a flickering :)
I am not sure if it is the problem, but this thing kept us on our feet for a while.
i went through the same problem while working with a sencha touch 2 app and because thats same as ExtJS i have a solution for you
this probably is a bug in the framework and this happens when the ExtJS renders the application before the browser populates mayb the correct window.innerWidth and window.innerHeight and thus the viewport cannot take the correct width and height. this also explains the randomness of the event. This becomes more prominent when used on mobiles probably because of the limited resources and slow response.
the solution that i took to handle this mayb isnt a good one but i couldnt find a better one considering is a glitch in the framework itself
i poll for the correct height and width of the browser for around a sec after every say 100ms for the correct height and width of the window and if i find that the height OR width of the viewport isnt same i re adjust it. because you are working with ExtJS and app would run on high powered systems(as compared to mobile phones) i would recommend a smaller interval and then to be safe a larger time period to which it polls.
heres the code that i use currently edit according to your needs
var aId = setInterval(function () {
if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
clearInterval(aId);
}
num = num + 1;
if (num > 10) {
clearInterval(aId);
}
}, 100)
i currently use this code inside the launch function of the app. but you can also use this inside the show event of the viewport for which you should keep the interval time to minimum possible to avoid any lags.
with this if you think this app might be used on devices where the window height and width would be changed by the user (like that of mobile browser when the orientation changes or if you think user would change the height and width of the browser window). then just copy & paste the same code piece inside the viewports resize event so that it also polls and resizes viewport when the size of the viewport changes.
Did you try adding a clear:both; block after the toolbar div ?
<div style="clear:both;"></div>
#bjornd it's pretty hard to debug without any code :)
Is the toolbar positioned and has the content an ID that's called in the URL?
In other words: is there some link (e.g.) that triggers #content and has no preventDefault() etc? This would scroll the page probably.
I dunno, this was the first thing that came to mind.
It could also be the toolbar content that is (for some reason) no longer cleared or some change in the content's top position (relative to another changed/removed element?)
Try and create a stripped-down test-case that contains the simplest of code but still triggers the bug. If you post that (through e.g. a Fiddle etc) we can have a proper look.
It might be a css issue;
I've had a similar issue using equal height divs by setting a padding-bottom: 99999px; and margin-bottom: -99999px;. Which workes fine in all cases, except when you use hashtag anchors to jump to a div further on the page. Jump down.
In that case the top of the page clipped and started with the div I wanted to see.
Since you say the problem is pretty hard to track, this might be something to have a look at. The solution was to remove these 2 css lines and use another method of setting div heights.

$(window).width(); & $(window).height(); are coming out differently in every browser

I am relying on $(window).width(); & $(window).height(); for a resizing function and they seem to come out differently in different browser, same thing is also happening with innerWidth/innerHeight. What is the best way of getting an accurate value for this?
Thanks for any help
Thanks for inpt - for clarification I am using jquery Thanks but I am using 1.7.1 and I have the following css:
*{padding:0;margin:0;border:0;}
with no changes to padding or margin in html or body
$(window).width() is get the browser viewport width, why the ie browser get the less width? because in the left side of the browser, it has a border. so when you use the .width mothed, the ie browser's width will less than chrome\safari\firefox's.
Turns out the documentation clarifies that:
$(window).width(); // returns width of browser viewport
So being the viewport, each browser has a different viewport usable area.
it is a old version jquery bug
Ensure you're using body, html {margin:0; padding:0;} - might be default values in different browsers otherwise.

$(document).width() includes scrollbar in ie8

I have the following webpage:
A tall webpage with only a vertical scrollbar and no horizontal scrollbar. The document and window therefore have the same width.
When I ask IE8 for $(document).width(), it returns the viewport width including the vertical scrollbar. FF returns the right answer.
I cannot use $('body') for this, because it returns the same width as the window object (it is set to 100% somehow, so it doesn't work when the page gets smaller).
How can I make IE8 output the right value? Thanks in advance.
UPDATE
I actually did some more testing to my problem. and I found that when the horizontal scrollbar becomes visible as well (because of a smaller window), IE8 DOES get the right size. So this makes my problem even more complicated because I can't set an ugly if(IE8)-hack.
UPDATE2
The problem lies in my CSS and jQuery.
The actual case seems to be the problem:
My css says:
body
{
overflow-y:scroll;
}
IE8 doesn't count this as part of the body, but IE7 does. How to fix this? Call jQuery for a fix?
I put this problem to the jQuery crew: http://bugs.jquery.com/ticket/8048.
They don't think it's a bug. Their advice is to use $('body').width(). And this does indeed the job for me.
I still find it strange that the body in IE8 is adjusted to the scrollbar, but the $(document).width() stays the same. I used this jsFiddle for testing. It results in the same glitch, but jQuery thinks it's ok, because W3C doesn't say anything about it... Or something like that.

Categories

Resources