React - Disable function when browser shrinks - javascript

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.

Related

MutationObserver works only with FF

I have a DIV with id='obsah_popis' (which basically hold all the page content) and this div is filled dynamically upon request (by clicking on menu buttons, photogalery buttons etc.) so its height is not constant but changes overtime as different objects go in or out (loaded in/out).
I need to monitor its actual height for my custom build (coded) scroller which recalculate its height and everything necessary around it according to that height value.
I made a MutationObserver for this reason that works great...but ONLY IN Firefox (46+) - when I run it under Chrome (63) or Opera (50) it does not work at all.
My code for the observer part looks like this (for the purpose of testing I only added alert() to fire up letting me know it was triggered):
var test = new MutationObserver(function(mutations) {
alert();
//resizeSkrolerHandle();
});
test.observe(document.querySelector('#obsah_popis'), {
attributes:true,
childList:true,
characterData:true,
subtree:true
});
BTW strangelly enough (at least for me) this other MutationObserver I run at the same place (just underneath my not functioning one) work perfectly in all browsers:
var bbb = new MutationObserver(function(mutations) {
document.getElementById("parallax_pozadie").style.top = document.getElementById("parallax_static").style.top = (document.getElementById("skroler").getBoundingClientRect().top * -1) * scrollSpeedMultiply + "px";
});
bbb.observe(document.querySelector('#skroler'), {
attributes:true,
childList:false
});
The only difference I see there is the fact that this working one is actually fired up by MANUAL INPUT (dragging of my custom scroller) whereas that non-working one is supposed to be fired up programmatically.
Does anyone know the reason and possible solution to this?

change default cursor style in PIXI.js

I want to change my cursor when triggering a mousedown event. I found a lot of hints how to achieve that - but these have one major issue. To change the defaultCursorStyle property I need to instantiate the InteractionManager prototype.
var renderer = PIXI.autoDetectRenderer(640, 480),
var interactionManager = new PIXI.interaction.InteractionManager(renderer)
interactionManager.defaultCursorStyle = "crosshair" // a native html/css cursor style
That looks fine at first but the problem here is that this InteractionManager seems to batch-register all events applied to PIXI object via the .on(event, callback) event-binding function per instance.
That means that if there would be a second instance of this InteractionManager, all events would be bound twice and therefore triggered twice. I had this exact issue.
So I needed to revert my changes and try to access the default InteractionManager. Somebody in the HTML5GameDev forum told me to access it like this:
renderer.plugins.interaction
knowing that I tried the following:
renderer.plugins.interaction.defaultCursorStyle = "crosshair"
My events now worked properly again. But the cursor change did not happen. However debugging the line told me that the property defaultCursorStyle was successfully set to "crosshair". Now I'm looking for a way to make this change visible.
My question:
Is there a better way to change the cursor style than the mentioned one above? If no, how can I make my default cursor change visible after setting the new style to the default InteractionManager?
There's a setCursorMode method in the docs, guess it's what you need.
const app = new PIXI.Application({ height, width })
app.renderer.plugins.interaction.cursorStyles.default = 'crosshair'
setTimeout(() => {
app.renderer.plugins.interaction.setCursorMode('pointer')
}, 1000)
Whenever cursor leaves the renderer, PIXI resets cursor mode (here's exactly the line). So you might want to set new cursor mode as default each time you change it.
function changeCursorMode (cursorMode) {
app.renderer.plugins.interaction.cursorStyles.default = cursorMode
app.renderer.plugins.interaction.setCursorMode(cursorMode)
}
app.renderer.plugins.interaction.cursorStyles.crosshair = 'crosshair'
changeCursorMode('crosshair')

How to enforce user must scroll pdf within iframe

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);
}
});

After resizing the window, elements within do no fit anymore

I have a modal dialog (window.showModalDialog) with html in it. when I resize the dialog, the HTML within it does not repect the new boundaries and I get scroll bars or elements that don't expand 100% to the new width.
To fix this I have to drag it around for a bit and it then jolts it self back into the correct sizes.
To fix it programtically. I do the following window.document.getElementById('removeMainBody').innerHTML =window.document.getElementById('removeMainBody').innerHTML;
But this causes some dynamic objects in the html to stop functionin.
How can i solve this problem and make the elemnts within the dialog resize after I resize the dialog?
Here is my code
else if(<c:out value="${staffCount}" /> > 1){
document.getElementById('removeDiv').style.display = '';
window.dialogWidth='770px';
window.dialogHeight='320px';
window.document.getElementById('removeMainBody').innerHTML =window.document.getElementById('removeMainBody').innerHTML;
}
If you set a style or a Class from the Body-Tag, this should force an HTML Reflow, and the Site would be displayed correct again, without setting the innerHTML Property.
example:
...
window.document.body.className = "relfow";
// if the body class Attribute was set, than set it now back
window.document.body.className = "oldBodyStyleClassName" ; / Or just to ""
...
if the browser optimizes, the refresh calls, so that now reflow occures you could
setTimeout(function(){
...
window.document.body.className = "relfow";
// if the body class Attribute was set, than set it now back
window.document.body.className = "oldBodyStyleClassName" ; / Or just to ""
...
})
i hope this helps. (here you can find some info to Reflow Link)

Disable Browser Window Resize

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();
});

Categories