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;//
}
Related
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
i am learning react+typescript. i want to implement a control like fluentui dropdown:
basically I draw a div and set its position 'relative' then use absolute layout on the dropdown panel. but there is a problem:
how to dismiss the dropdown when click outside area?
Can you share good practices?
Let's assume dropdown is dom node of your dropdown area
and dismissDropdown function to dismiss it.
Then your code could look like this:
window.addEventListener("click", function (e) {
// if outside of dropdown
if (!dropdown.contains(e.target)) {
dismissDropdown()
}
});
contains: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
Basically we check if element on which user clicked is inside dropdown or dropdown itself, and if not then dismiss it.
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.
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}