Reasoning for Script:
Reloads various CSS scripts based on browser detected width and height. Window reload in needed to reload the other JavaScript as browser is resizing.
Problems Occurred:
IE likes to loop continuously.
Compatibility with other scripts:
Chrome, FireFox, Safari work
Script used:
<body onResize="window.location.href = window.location.href;">
Someone please come up with a better solution or suggestion!! This has to work for Safari, IE, and FireFox.
Possibly else if logic based on what type of browser?
SOLUTIONS BELOW (JQUERY): window.resize event firing in Internet Explorer
$(document).ready(function(){
var winWidth = $(window).width(),
winHeight = $(window).height();
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers
//window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
//New height and width
var winNewWidth = $(window).width(),
winNewHeight = $(window).height();
// compare the new height and width with old one
if(winWidth!=winNewWidth || winHeight!=winNewHeight)
{
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
}
//Update the width and height
winWidth = winNewWidth;
winHeight = winNewHeight;
});
});
I'd use:
window.location.reload()
to reload the page.
Also, I'm not sure if onresize is a widely-supported event.
Instead, I'd do it with a timer (source here http://jsfiddle.net/ACpTm/4/)
But I REALLY would not advise anyone to reload the page due to styling. It's a bad practice and the user dislikes it, especially if they have limited bandwidth.
Could you describe why you need to do this? We could provide a more versatile solution instead of this.
You would be way better off if you didn't base your CSS on the browser size.
You could use Javascript/jQuery to resize things in the window onResize event, I had to do this once in the past and it worked ok.
Related
I'm trying to make a website for mobile. I'm having the "resize" event bounded on window, which should rearrange elements when the mobile device is turning (portrait <-> landscape). On iPhone and Samsung Galaxy SII, the event is triggered when I'm scrolling down the page, and that's not good.
How can I fix this?
Cache the width of the viewport and on resize return false if the width is still the same.
A small jQuery snippet:
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//DO RESIZE HERE
cachedWidth = newWidth;
}
});
Use the onOrientationChange event and the window.orientation property instead.
Also see this answer.
Here link to a test page.
I'm trying to make a PDF's zoom always full width within an iframe, and on browser resize it re-calculates the PDF's zoom and sets it to 100% browser width.
The pdf parameter #view=Fit or #zoom=100 works on document ready, but I can't manage get it to refresh/recalculate this value when the browser is resized (preferably without losing the scroll position).
<iframe id="readFrame" src="https://xxxxxx.pdf#view=Fit"></iframe>
note: I'm resizing the iframe like this:
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
var browser_viewportH = $(window).height();
var browser_viewportW = $(window).width();
var nav_height = $("#nav-bar").height() + $("#tempWrapper").height();
var block_height = $("#blockContainer").height();
var viewportH = browser_viewportH - (nav_height + block_height);
$("#readFrame").css("height", viewportH);
});
Well I think you have a Typo on here:
$("#read iframe").css("height", viewportH);
Should be
$("#readFrame").css("height", viewportH);
As your iframe has the ID "readFrame", hasn't it`?
<iframe id="readFrame" src="YOUR_PDF_PATH.pdf#view=Fit" style="width:100%;"></iframe>
<script type="text/javascript">
$('#readFrame').css('height',$(window).height());
</script>
you can use this, and this works on resize as well, and this doesn't lose your scroll height too when resized..
I ended up using pdf.js if anyone else comes across this problem.
The problem with using the pdf parameters is they don't work in Chrome and Firefox as these browsers have their own pdf viewers.
On the other hand, pdf.js is only fully supported in Chrome and Firefox and others have limited support but are functional other than <=IE8.
I found this bit of popular javascript doesn't work in IE10. I didn't create it but am maintaining a site that implements this. Was wondering if anyone else came across it. It seems the Document.getElemsntById('frame').onload event isn't working but the window.resize event does. Meaning on initial frame load it doesn't re-size but when I do anything to the window it does. Its just a pdf opening in an Iframe. Seems fine in all browsers except IE10 , on both Win 7 and 8 machines.
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
height -= 250;
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
Sorry if I was too vague in the question. I did Google this and found similar situations but not exactly like mine. I alerted out the height var and checked with a conditional and like I mentioned the browser would only run the function on resize, all other browsers were fine. I don't know why but I decided to add empty parenthesis to the call in on the onload event and it worked.
document.getElementById('frame').onload = resizeIframe();
Disclaimer: I am not a javascript or jQuery expert.
This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.
Is there a better way to go about this? Or do I just need to fix up what is already here?
In case somebody else runs into this problem in the future, I'll post what solved my problem.
When I attempted to add the resize event to the function, my code looked like this:
$(window).on('resize', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:
$(window).on('resize load', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
I'm trying to make my site mobile friendly.
I want to know the browser window size so that I do something when it's narrower than 728px and something else when it's bigger.
This must take into account resizing the window on the PC as well as changing from portrait to landscape mode in a phone.
How can this be done?
As m90 suggest, if the only thing you want to do is modify the style, then you should have a look at media queries. However, if you want to do more than just modify the style, then you have to rely on JavaScript.
Plain JavaScript
The problem is that it isn't entirely straight forward to get the width of the window, it varies between browsers. So you would have to create a function, something like this (untested):
var width = 0;
function updateWindowSize() {
if (document.body && document.body.offsetWidth) {
width = document.body.offsetWidth;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
width = document.documentElement.offsetWidth;
}
if (window.innerWidth) {
width = window.innerWidth;
}
}
Then you could listen for for the window onresize event, and call the function to get the new window size everytime the window changes.
window.onresize = function(event) {
updateWindowSize();
}
jQuery
If you use jQuery, then this can be done a bit shorter, as jQuery takes care of the cross-browser-support for you behind the scenes:
var width;
$(window).resize(function() {
width = $(window).width();
});
As a warning, IE8 and lower don't support media queries or CSS3. If you don't care about IE8, go for it. Respond.js, Modernizr and others can help to support IE6-8, but it's far from perfect.