I'm trying datatable and using default loading wording "Loading ..." and having grey background. Then i'm trying to change loading type by using spinning indicator. But grey background still appear instead of spinning indicator only. How can i remove the default grey background?
My spinning indicator is below
My jquery code is below
$('#countries-table').DataTable({
"processing":true,
"language": {
processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
// "processing": "Loading. Please wait..."
},
"serverSide":true,
"ajax":"<?= base_url('app/getdata'); ?>",
"dom":"lBfrtip",
stateSave:true,
info:true,
"iDisplayLength":5,
"pageLength":5,
"aLengthMenu":[[5,10,25,50],[5,10,25,50]],
"fnCreatedRow": function(row, data, index){
$('td',row).eq(0).html(index+1);
}
});
i'm already commented default text indicator
Thank you.
Related
Am using sweet alert plugin, Even after turning setting option animation : false also I am getting sweet alert opening animation(fade in- fade out like) is coming. How to disable it.sweet alertsweet alert
The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin.
Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2
Here's the example with SweetAlert2 and disabled animation:
Swal.fire({
icon: 'success',
title: 'SweetAlert2 modal without animation',
showClass: {
backdrop: 'swal2-noanimation', // disable backdrop animation
popup: '', // disable popup animation
icon: '' // disable icon animation
},
hideClass: {
popup: '', // disable popup fade-out animation
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Here is my solution to disable the animation.
If you want to remove the scale animation, add it to your main css file:
.swal-overlay--show-modal, .swal-modal {
animation: none !important;
}
If you want to remove the opacity animation too, add this too:
.swal-overlay{
transition: none !important;
}
I have OverlayTrigger with trigger='hover'. Expected behaviour here would be hiding popover when I moved cursor out of it. However, library hides popover when I move cursor out of button, i.e.
<OverlayTrigger trigger='hover' placement='left' overlay={
<Popover>
... content ...
</Popover>
}>
<Button bsStyle='default'>name</Button>
</OverlayTrigger>
So, when cursor out of button on popover content (if I want to click on link there for instance) it disappears.
Any solutions for this?
I am just starting to learn React. My solution to this is to set trigger option as "manual", and add onMouseOver={fn} and onMouseOut={fn} to manually show and hide the PopOver content. Here is my sample code:
var popOver_timer;
var Pop = React.createClass({
mixins: [TimerMixin],
mouseOverhandler: function() {
this.clearTimeout(popOver_timer);
this.refs.pop.show();
},
mouseOuthandler: function() {
popOver_timer = this.setTimeout(
()=> {this.refs.pop.hide();},
50
);
},
render: function() {
return (
<div onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
<OverlayTrigger ref="pop" placement="bottom" trigger="manual" container={document.body} overlay={
<Popover onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
This Page
</Popover>}>
<a href={this.props.popUsrUrl}>
<button>PopOver</button>
</a>
</OverlayTrigger>
</div>
);
}
});
Besides react-boostrap, I also require react-time-mixin and use the react-setTimeout. It is because when your mouse moves from the button to the popover content, the onMouseOut will be triggered first, then the onMouseOver. Therefore, a time delay for onMouseOut should be set. I set it to 50 ms. Hope it helps.
I have an ExtJS popup in my application.
Inside the popup there is a BoxComponent with an image. The image usually takes a few seconds to load. I would like to show a "Loading..." spinner message in the box to inform the user know that something is happening.
Here is a sample of my code right now:
function createPopup(id) {
picUrl='/create_image.py?date='+id
popup = new GeoExt.Popup({
title: 'Info: ' + id,
height: 350,
width:425,
items: [pic]
});
pic = new Ext.BoxComponent({
id: 'pic',
autoEl: {tag: 'img', src: picUrl},
border: false,
width: 400,
height: 300,
listeners: {
//SHOULD I HANDLE MY PROGRESS SPINNER SOMEWHERE HERE???
}
});
popup.show();
}
I'm a newbie to ExtJs and I couldn't figure out how to do this.
I assume that I probably must create two event listeners:
The first event is when the BoxComponent (or the popup?) appears.
The second event is when the image finishes loading. In the first event, I show the progress spinner and in the second event, I hide the progress spinner.
What are the events in the Ext.BoxComponent or in the Ext.Popup that I should use?
Or is there an easier way to show the progress spinner while the image is loading?
I suggest by default having a rule on an image component that shows a background image of spinner, and then place a listener for onload which would remove the rule to hide it.
The suggestion by Vu Nguyen set me on the right track. My version of ExtJs is 3.4 so I couldn't use 'image component'. But I discovered the Ext.LoadMask component that works well as a loading progress spinner. First, I attached the LoadMask to the popup.el element. The next trick was to capture the render event of the BoxComponent and the load event of the image. In the render event I show the LoadMask spinner and in the load event I hide it:
pic = new Ext.BoxComponent({
id: 'pic',
autoEl: {
tag: 'img',
src: picUrl
},
border: false,
width: 400,
height: 300,
listeners: {
render: function (c) {
var myMask = new Ext.LoadMask(popup.el, {
msg: "Loading station data..."
})
//show the spinner when image starts loading
myMask.show()
c.getEl().on('load', function () {
//hide the spinner when image finishes loading
myMask.hide()
})
}
}
})
popup = new GeoExt.Popup({
title: 'Info: ' + stname,
height: 350,
width: 425,
items: [pic]
})
popup.show()
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
I have a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html