For starters... I have no sinister intention of subjecting users to popups or anything like that. I simply want to prevent a user from resizing the browser window of a webpage to which they've already navigated (meaning I don't have access to / don't want to use window.open();). I've been researching this for quite a while and can't seem to find a straightforward answer.
I felt like I was on track with something along the lines of:
$(window).resize(function() {
var wWidth = window.width,
wHeight = window.height;
window.resizeBy(wWidth, wHeight);
});
...to no avail. I have to imagine this is possible. Is it? If so, I would definitely appreciate the help.
Thanks
You can first determine a definite size.
var size = [window.width,window.height]; //public variable
Then do this:
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Demo: http://jsfiddle.net/DerekL/xeway917/
Q: Won't this cause an infinite loop of resizing? - user1147171
Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.
I needed to do this today (for a panel opened by a chrome extension) but I needed to allow the user to change the window height, but prevent them changing the window width
#Derek's solution got me almost there but I had to tweak it to allow height changes and because of that, an endless resizing loop was possible so I needed to prevent that as well. This is my version of Dereck's answer that is working quite well for me:
var couponWindow = {
width: $(window).width(),
height: $(window).height(),
resizing: false
};
var $w=$(window);
$w.resize(function() {
if ($w.width() != couponWindow.width && !couponWindow.resizing) {
couponWindow.resizing = true;
window.resizeTo(couponWindow.width, $w.height());
}
couponWindow.resizing = false;
});
If need some particular element to handle resize in some particular mode, and prevent whole window from resizing use preventDefault
document.getElementById("my_element").addEventListener("wheel", (event) =>
{
if (event.ctrlKey)
event.preventDefault();
});
Related
I am trying to disable a onMouseEnter / onMouseLeave event listener when the browser window is shrinking below 600px for instance. My question relates to a similar query Disable a whole function when window size is below 770px. However, I've never used jquery, so I was wondering is there a way to achieve the same thing in React without using jquery.
This is the sample I am working on https://codesandbox.io/s/jovial-rubin-vh2ft?file=/src/App.js:482-494
I would really appreciate any suggestion. Thank you
I just tried this on your project and it worked.
replace your handleMyPhoto method with this:
handleMyPhoto = () => {
const showPhoto = window.innerWidth < 600 ? false : !this.state.showPhoto;
this.setState({ showPhoto });
};
This basically checks if the window width is less than 600px then it sets showPhoto state to false, otherwise it revert the existing state as normal.
I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this,
var position = $('#myIframe').contents().scrollTop();
But not working. Please help me Thanks in advance.
If you don't mind making a static height for your iframe, I have a solution for you.
HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll
Now you have a scrollable "iframe".
Javscript
Get container element. (var containerEl = $("#container")[0];)
Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the
element. If it is, remove disabled property from button
Here's the fiddle. Made some changes to #mJunaidSalaat's jsfiddle.
Well I've tried almost an hour on this, Researched it, finally coming to a conclusion that Unfortunately this is not possible using this method.
The PDF is usually not a DOM element, it's rendered by PDF reader software. Every browser has its own mechanism for rendering PDFs, there is no standard. In some cases, the PDF might be rendered by PDF.js; in those situations you might be able to detect scrolling. But Adobe Reader, Foxit, and some of the native PDF rendering don't provide that option.
I've also created a Github issue for this. But no use.
Sorry. Please update me if you could find any thing or any workaround.
I've made a Fiddle for your solution. You can disable the submit button for user until user scroll on your iframe.
function getFrameTargetElement(objI) {
var objFrame = objI.contentWindow;
if (window.pageYOffset == undefined) {
objFrame = (objFrame.document.documentElement) ? objFrame.document.documentElement : objFrame = document.body;
}
return objFrame;
}
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});
Hope it helps.
try this
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});
I have been googling for a while and so far I found how to resize window with window resize directive but in my code I'm using window.innerHeight to get initial height. I can use it any time except I need an event to when it changes. JavaScript window resize event does not fire for me for some reason. Here is my code inside of the controller:
function adjustH() {
var bodyElem = document.getElementsByTagName('body')[0];
var topP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-top');
topP = topP.substring(0, topP.indexOf("px"));
var bottomP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-bottom');
bottomP = bottomP.substring(0, bottomP.indexOf("px"));
vm.h = window.innerHeight - topP - bottomP - 20;
}
window.onresize = function(event) {
adjustH();
}
Can anybody tell me if it is impossible to do it this way and I have to go the directive route? Or if its possible please tell me what I'm missing.
If you are working with angularJS, did you pass $window as a dependency to you controller.
I have had similar issues with this before and it was because the depoendency was not set.
Hope this helps.
After reading your comment which stated
Also my canvas set to height="{{vm.h}}" but it only resizes when I mouse over
It seems that you need to call $scope.$apply() (or $rootScope.$apply()) in order to update the height property of the element.
If you add more code from your directive/controller, I could give you a more detailed answer.
I'm trying to debug a page which is acting a little slow in Chrome, think it might be an issue with the following javascript code:
$(document).ready(function() {
function navScroll(distance){
$(window).scroll(function() {
var scrollTop;
if(distance){
scrollTop = distance;
}else{
scrollTop = 150;
}
if($(window).scrollTop() >= scrollTop) {
if(!($('#mainNav').hasClass('showNav'))) {
$('#mainNav').addClass('showNav');
}
} else {
if($('#mainNav').hasClass('showNav')) {
$('#mainNav').removeClass('showNav');
}
}
});
}
if($('.header-image-base').length){
var windowHeight = $(window).height();
$('.header-image-base').css('height', windowHeight);
navScroll(windowHeight);
}else{
navScroll();
}
});
When I look in Chrome's console's 'timeline' panel, and press record, this is what I see:
Any ideas what is happening here? I can't find any references to this on google and no idea how to remedy it.
Your page is slow most likely because you’re attaching a handler to the window scroll event—this is not a good practice as explained below:
It’s a very, very, bad idea to attach handlers to the window scroll event. Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall. Instead it’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay). (source)
Your screenshot shows that onloadwff.js is located at chrome-extension://hdokiejnpimakedhajhdlcegeplioahd which means it’s part of the LastPass extension — as seen below. So it’s probably not related to your performance issue.
(archived screenshot)
Link - https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd
today I'm implementing slider plugin and I have one question about it:
I want to make it responsive, but to achive that (depending on my current implementation) I should add another function which will detect if browser window size has changed - and here's my question - is it good for overall performance? Or maybe I should re-think about my solution and try to build it with pure css?
The browser resize is only temporary and personally I don't see the big hassle for a slight hiccup in that phase.
Since you refer to jquery, you can just add
$(window).resize(function() { ... });
Add it withing the document ready, and you will do good to call it one on load. Just do
$(window).resize();
As far as performance, you are correct that every little addon will have effect on the performance, but only when it is active. When the window is not resized, teh event does not get fired.
<div id="resized"></div>
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
$(window).on("resize", display);
or using javascript
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
window.addEventListener("resize", display, false);
on jsfiddle