I have a page where I can order a product. So there is a "buy" button.
I would like, when the user scrolls down, when the button disappear to create a fixed bar at botttom of screen with this same button "Buy".
I was wondering if I have to do it like this :
screenHeight = window.innerHeight;
if (screenHeight > 400) { // do this }
else { // do this }
Or maybe there is a proper way to do this. Detecting when this button goes out of displayed screen ?
I am working with React.
Thank you
You can use Intersection Observer
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Related
I'm using Material-UI component.
This one from git : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
My main problem is when i use the scroll button, that scroll too much ( i have lot of tabs, something like 20 tabs ). So when i click on scroll button, that scroll to the right a lot and i lose my active tab.
I have tried to check the code of Tabs.
I found the 2 function i have to override.
These functions are inside that js code:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tabs/Tabs.js
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]);
};
If i modify it on node_modules directy that work well, here an exemple :
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]/10);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]/10);
};
So now when i click on scroll button i have good result, it's scrolling step by step. But i can't directly overide into node_modules.
How can i do to do it correctly & properly please ?
I would like to lock users on the page. The users can go on other tabs or desktop at least when they click on other tab of browser I would like to show them alert dialog which say "Are you sure?"
Hi guys Thanks for helping
I find code which is I need :
requestFullscreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
};
then I called this function onClick event on Button. After that I will check when User try to left page (alt+f4, alt+tab .. etc) I will show alert for "Are you sure for left page "
As you know FancyBox 3, on mobile, allows closing a popup with an up/down swipe.
How can we close it with a tap on the phone's screen instead? If it can be done of course.
Thanks.
You can, for example, use clickContent option:
$('[data-fancybox]').fancybox({
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : 'close';
}
});
Using this snippet, clicking images will zoom, but other content - close.
Demo - https://codepen.io/anon/pen/WEKmoB
I have many ion-items on my screen. I want to disable them every times i click a + icon my screen which blurs the screen and I want to disable all the clicks at that time how can i do that?
For you to blur the screen when you click a button, you can just use a empty div which can cover the height and width of the screen, and using ng-if you can toggle the div programmatically.
In html :
<div class="mr-blur" ng-if="toggle"></div>
In CSS :
.mr-blur{
height : 100vh;//full viewport height
width : 100vw;//full viewport width
background-color : white;//color of the overlay
opacity : 0.6;//to show a little bit of the iactive screen
z-index : 9999!important; //To put it on top of all elements
}
In JS :
$scope.plusButton = function(){ //function to be called when plus button is clicked
$scope.toggle = !$scope.toggle;//
}
I have panel wiht toolbar with buttons. Panel resizable when it small buttons hide in menu. In menu it show icon and value of overflowText. But on click button i need change overflowText.
expandClick: function (btn) {
var me = this;
btn.blur();
btn.overflowText = btn.overflowText === "expand" ? "reduce" : "expand";
view.fireEvent('expandGraph', view);
}
in browser's console on breckpoint i see right value but there is no change in interface. Why?!
btn.setConfig( name, [value] );
try to use this function to set specific initial configs dinamically.
Sometimes the button din't refresh his state if you modify directly the variable
Try to refresh component layout with doLayout() method after you change overflowText property.