The image in the plan belongs to me, which is my purpose. How can I do that? I want a range input as in the image below. sweet alert2
My code
$("#btn22").click(function() {
Swal({
title: '<strong>hoşgeldin <u> #username</u></strong>',
html: 'yukarıda ki hesaba takipçi alıyorsun, <b>kaç takipçi satın almak istersin?</b>, ',
text: '<font color="blue"> yukarıda ki hesaba kaç takipçi almak istiyorsanız aşağıdan seçenekleri</font>',
imageUrl: 'images/move/user-profil.jpg',
footer: 'bu hesap sana ait değil mi? <a href ""> buraya tıkla </a> ve çıkış yap.',
confirmButtonText: '<i class="fa fa-money"></i> satın al!',
imageWidth: 120,
imageHeight: 120,
input: 'range',
inputLabel: 'Your age',
inputAttributes: {
min: 100,
max: 50000,
step: 100
},
inputValue: 25,
animation: false
});
Related
Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.
The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3
Below is the current working of the code:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.
Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:
New component:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
Loading image:
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},
I get this error in cytoscape.js:
"Do not assign mappings to elements without corresponding data (e.g. ele p for property background-image with data field linkImagem); try a [linkImagem] selector to limit scope to elements with linkImagem defined"
Look data array:
{ data: { id: 'atr1', classificacao : '1', backgroundColor : '#F79646', nomeAtributo : 'Bancos desconfortáveis', angulo : '0', valign : 'top', halign : 'right', linkImagem : 'http://www.fec.unicamp.br/~confterm/imagens/background/nodes/8.png' }, position: { x:220, y: 300 }, selected: false, selectable: false, locked: false, grabbable: false }
Look script style options:
.selector('node')
.css({
'label': 'data(nomeAtributo)',
'text-valign': 'data(valign)',
'text-halign': 'data(halign)',
'color' : '#000',
'font-size': '11px',
'background-fit': 'fit',
'background-color': 'data(backgroundColor)',
'background-image': 'data(linkImagem)',
})
How I can solve this?
The solution is given to you in the error message. Either don't use mappers if you're not going to define the data for each matching element, or adjust your selectors so that they only match elements with the data defined.
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I am trying to extend a tinymce pluggin and need to add an input element of type=file.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
It seems you can do the following to show elements to a container that opens in a panel :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];
win = editor.windowManager.open({
title: 'Insert/edit image',
data: data,
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: generalFormItems
},
],
onSubmit: onSubmitForm });
I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
---> {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},
];
Is it possible to do this and how?
Managed to figure this out and want to leave the answer here for others trying to do something similar.
There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :
{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},
In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Insert/edit image',
url: 'dialogTemplate.html',
width: 700,
height: 600
});
Also you can inline HTML:
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Upload a file to attach',
html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
width: 450,
height: 80,
buttons: [{
text: 'Attach',
subtype: 'primary',
onclick: function() {
// TODO: handle primary btn click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});
I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>
You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}