I want to ask how can I change icon image in sweetalert with image?
I've tried change icon image in Swal.fire with image from assets, but it's not working
Here's the script
Swal.fire({
icon: "<?= base_url(); ?>assets/addon-media/icon_information.png",
html: "Are you sure want to add this ?",
showCancelButton: true,
confirmButtonText: 'Yes, Sure',
cancelButtonText: 'No, Cancel',
})
You can set the image for an icon by using the iconHtml param. Also, if you'd like to remove the default border around the icon, use the customClass param.
Here's the example:
Swal.fire({
title: 'Image icon',
iconHtml: '<img src="https://picsum.photos/100/100">',
customClass: {
icon: 'no-border'
}
})
.no-border {
border: 0 !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Related
I have a sweet alert that has multiple buttons. When a user clicks on a button it is supposed to open a different alert. I am able to get 1 button to work but that is it. Is this possible with Sweet Alert 2?
Code:
$("#swa").on("click", function(e) {
swal({
title: '<u><b>Test 1</b></u><p> </p>',
html:
'<button id="panel2">Panel 2</button>'+
'<p> </p>'+
'<button id="panel3">Panel 3</button>',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
$("#panel2").on("click", function(e) {
swal({
title: '<u><b>Test 2</b></u><p> </p>',
html:
'Test 2',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
$("#panel3").on("click", function(e) {
swal({
title: '<u><b>Test 3</b></u><p> </p>',
html:
'Test 3',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});
});
});
JS Fiddle
what is happening is that you have your panel3 sweet alert inside your panel2 sweet alert. To fix this just move the });
Your javaScript will now be;
$("#panel2").on("click", function(e) {
swal({
title: '<u><b>Test 2</b></u><p> </p>',
html:
'Test 2',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});// <--moved this here
$("#panel3").on("click", function(e) {
swal({
title: '<u><b>Test 3</b></u><p> </p>',
html:
'Test 3',
showCloseButton: true,
showCancelButton: true,
cancelButtonText: 'Go Back',
width: '75%'
})
});
//<--from here
});// I don't think this line is needed
By the way the last }); is not needed unless it relates to code that you haven't posted.
Good luck.
Hi i have dropzone Js Upload just working, but i need to add i border to the picture that i clicked on the Thumb Preview of dropzone js.
How i Can do that ?
I have this code :
defaultButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
//_this.removeFile(file);
$.ajax({
type: 'POST',
url: "{!! route('setDefaultPhoto' ) !!}" ,
data: { id : file.serverid },
dataType: 'JSON'
});
});
Just use:
.dz-image { border: 1px solid #000 }
I just need a little help here about displaying KendoUI window.
My situation is I have a button that will call the window. At first click of button, the window dialog will appear but after closing the window by clicking the 'x' button I can't make it appear again by pressing the same button.
I don't know where's my error.
Here's my code:
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (){
$("#window").kendoWindow({
actions: ["Refresh","Maximize","Minimize","Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px"
});
});
});
</script>
<div id="window" style="visibility: hidden;"></div>
<input type="button" class="test" value="test" />
Put kendo window out of button click like this,
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (e) {
$("#window").data("kendoWindow").open();
e.preventDefault();
});
$("#window").kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px",
});
});
</script>
<div id="window" style="display:none;"></div>
<input type="button" class="test" value="test" />
Div style is "display:none;" insted of "visibility: hidden;".
Can't scroll to the bottom if content too long
Why it can't scroll to the bottom if the content too long?
this._panel = {
xtype: 'panel',
height: '100%',
scrollable: true,
items: [{
html: '<img src="http://images5.fanpop.com/image/photos/29400000/Iron-Man-Tony-Stark-the-avengers-29489238-2124-2560.jpg" />'
}, {
html: '<img src="http://images5.fanpop.com/image/photos/29400000/Iron-Man-Tony-Stark-the-avengers-29489238-2124-2560.jpg" />'
}]
};
this.add(this._panel);
Im adding your code as an item of Ext.Container, Ext.Panel, or Ext.navigation.View and in all cases I can scroll to the bottom. I think is due to some config you have set in 'this'.
What component (xtype) is it?
I have an Image Component in ExtJS which loads an image via URL like this:
{
xtype: 'image',
width: 200,
height: 200,
src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
},
The image is displayed at 100%. 200x200 px are shown and the rest is clipped. I didn't find any property to allow scaling.
What is the best way to achieve a resizing image in ExtJS?
You can use xtype:'image' , shrinkWrap:true
Please check with Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap
A bit late...but I think this is kind of what you wish to have, I happened to use the image as a scaled background behind a panel instead of an image on top inside a panel, but the theory is the same:
//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
extend: 'Ext.container.Viewport', //my root view port
layout: {type: 'fit'},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container', //my background image
html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
layout: {type: 'border'},
items: [{
xtype: 'panel', //my panel on top of background
region: 'center',
bodyCls: 'transparent',
title: 'My Panel'
}]
}]
});
me.callParent(arguments);
}
});
Note that I didn't use image component, I used a container. html: <img ... and bodyCls: transparent... did the trick. You can change the image dynamically in a handler. Something like this:
//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
backgroundImage: 'wallpaper.jpg',
width: '100%',
height: '100%'
}).show();