I am new to using MUI and I'm trying to create a simple animation which would trigger when a row is removed by the click of a row button (either fade out or even better have it compress). I currently have a workaround solution in which I grab the row through the data-id using document.querySelector and then add a class to it, but I would like to know how to do this using inline css.
After research it looks like I would have to use something like adding a keyframe (which I've seen done for individual elements) but I'm unclear how to do that for a row in a MUI data grid.
I've tried using UseGridApiRef and then using the getRowElement to add the below keyframe to that but can't get the syntax right.
I want to do this because currently I believe I am changing the DOM directly (very slow) by doing this:
let el = document.querySelector(`.MuiDataGrid-row[data-id="${id}"]`);
el.classList.add("animate-launch-case");
// Global css Page
.animate-launch-case {
opacity: 0;
transition: opacity 1s ease-in;
}
I want to be able to change the virtual DOM instead but having trouble understanding how to do it with state. Here is a Sandbox of my datagrid and here is an example of a keyframe I think would work:
const myEffectExit = keyframes`
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-200%);
}
`;
I'm trying to customize PayPal buttons using that method:
https://developer.paypal.com/docs/checkout/integration-features/customize-button/
var FUNDING_SOURCES = [
paypal.FUNDING.PAYPAL,
paypal.FUNDING.CARD
];
// Loop over each funding source / payment method
FUNDING_SOURCES.forEach(function(fundingSource) {
// Initialize the buttons
var button = paypal.Buttons({
// Check if the button is eligible
if (button.isEligible()) {
// Render the standalone button for that funding source
button.render('#paypal-button-container');
}
});
Buttons appear correctly, but I trying to add space between them, how can I do it? I tried also style 'vertical', but still they appear without space.
Thank you!
In your forEach loop, when you render things into the container (button.render() , also add whatever spacing you want.
Took me awhile but I have found solution, if somone would ever need in style:
#paypal-button-container{
}
.paypal-buttons-layout-horizontal {
margin: 5px;
}
Can the navigation between tabs be customized to as in the navcontainer i.e. while selecting tabs the view should scroll and change from left to right like swipe navigation with new page as in navcontainer.
You could achieve the slide in effect rather easily by adding the following CSS to your application
#keyframes slidein {
from {
right: -100%;
}
to {
right: -6px;
}
}
.sapUiTabPanel {
overflow:hidden;
}
.sapUiTabPanel > * {
animation: slidein 500ms;
position: absolute;
}
Note that you may need to add CSS with vendor prefixes depending on which browsers you are supporting.
To achieve the slide out of the current displayed tab is a bit tricky, one possible way this could be achieved is with the following code added to somewhere like the onInit method of your controller
oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
var oTarget = oEvent.target;
if(oTarget.className==="sapUiTabClose"){
return;
}
var iIdx = oTabStrip1.getItemIndex(oTarget);
if (iIdx > -1) {
if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
oEvent.stopPropagation();
oEvent.preventDefault();
jQuery.each(
oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
o.$().animate({left:sAnimateLeft},500);
});
setTimeout(function(){
oTabStrip1.selectTabByDomRef(oTarget);
},250);
}
}
});
The above is assuming oTabStrip1 is the instance of your tabstrip control. Although it's often not good practice to modify the DOM directly within UI5 applications, in this case it's probably safe as the content of the displayed tab is removed and replaced with the clicked tab content, so all we are doing is delaying this until the slide out animation is complete.
You can see a working example at http://jsbin.com/vukibi - the code has been taken directly from the tabstrip example with the above CSS and JS added
I would like to be able to move around (on the greyed-out background, by dragging and dropping) the modal form that is provided by Bootstrap 2. Can anyone tell me what the best practice for achieving this is?
The bootstrap doesn't come with any dragging and dropping functionality by default, but you can add a little jQuery UI spice into the mix to get the effect you're looking for. For example, using the draggable interaction from the framework you can target your modal ID to allow it to be dragged around within the modal backdrop.
Try this:
JS
$("#myModal").draggable({
handle: ".modal-header"
});
Demo, edit here.
Update: bootstrap3 demo
Whatever draggable option you go for, you might want to turn off the *-transition properties for .modal.fade in bootstrap’s CSS file, or at least write some JS that temporarily disables them during dragging. Otherwise, the modal doesn’t drag exactly as you would expect.
You can use a little script likes this.
simplified from Draggable without jQuery UI
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
var $selected = this;
var $elements = (opt.handle === "") ? this : this.find(opt.handle);
$elements.css('cursor', opt.cursor).on("mousedown", function (e) {
var pos_y = $selected.offset().top - e.pageY,
pos_x = $selected.offset().left - e.pageX;
$(document).on("mousemove", function (e) {
$selected.offset({
top: e.pageY + pos_y,
left: e.pageX + pos_x
});
}).on("mouseup", function () {
$(this).off("mousemove"); // Unbind events from document
});
e.preventDefault(); // disable selection
});
return this;
};
})(jQuery);
example : $("#someDlg").modal().drags({handle:".modal-header"});
Building on previous answers utilizing jQuery UI, this, included once, will apply to all your modals and keep the modal on screen, so users don't accidentally move the header off screen so they can no longer access the handle. Also sets the cursor to 'move' for better discoverability.
$(document).on('shown.bs.modal', function(evt) {
let $modal = $(evt.target);
$modal.find('.modal-content').draggable({
handle: ".modal-header",
containment: $modal
});
$modal.find('.modal-header').css('cursor', 'move')
});
evt.target is the .modal which is the translucent overlay behind the actual .modal-content.
jquery UI is large and can conflict with bootstrap.
An alternative is DragDrop.js: http://kbjr.github.io/DragDrop/index.html
DragDrop.bind($('#myModal')[0], {
anchor: $('#myModal .modal-header')
});
You still have to deal with transitions, as #user535673 suggests. I just remove the fade class from my dialog.
I'm loading a page dynamically via fancybox and AJAX. Everything is fine except when the dynamically loaded page is too tall for the screen. It will simply overflow past the bottom of the screen.
I'm using..
function dynamic_page(){
var url = "#ajax url here#";
$.fancybox.showLoading();
$.post(url, function(res){
$.fancybox.open(res,{
afterClose : function (){
$("#remove_val").val(0);
}
});
$.fancybox.update();
});
}
When a user clicks the page, it will reload again dynamically, keeping the width and height of the original fancybox:
$.post(url, function(res){
if(res){
$("#page_load_here").html(res);
}
How do I resize or recenter the fancybox according to the dynamically loaded page's height?
All help would be appreciated
Fixed it with:
$.fancybox.update();