This question already has answers here:
phoneGap camera and sencha touch view
(3 answers)
Closed 9 years ago.
I am working on sencha from last 20 days or so i have learnt a lot , I have got access to device camera and capturing photo using that camera but the problem is that i want to show that captured image in a Div in my page using a button .. Couldn;t got the solution Please help if anyone knows .. Take a look at this ..
{
xtype:'button',
text:'Tap',
docked:'top',
handler:function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
Ext.Msg.alert('Failed because: ' + message);
} }
},
{
xtype:'container',
html:'<div style="border:solid;border-color:red">Hello</div>',
id:'picture',
},
{
xtype:'container',
html:'<div style="border:solid; border-color=green">Hellow</div>',
items:[
{
xtype:'button',
text:'Get',
}
]
},
what i have to do now ??
You need to do something with the element that has ID 'myImages'. In the onSuccess function you are setting the src of that element accordingly, but where is the element actually used? You should add it to one of the containers, either in the initial definition or when onSuccess is called. If you want to wait until the button with text 'Get' is pressed then either have that button's handler append the myImages element, or hide/show it.
Related
I am trying to create a function in the Angular system which will produce an image of the map using html2canvas
The following is the current function:
window.emapComponent.service.getMap('mapApi').then((map) => {
html2canvas(document.getElementById("mapApi"), { useCORS: true }).then(function (canvas) {
canvas.screenshotDataURI = canvas.toDataURL("image/jpg", 0.5);
canvas.toBlob(function (blob) {
saveAs(blob, oRequest.fileName)
});
});
})
What happens is that in the system itself, as soon as I drag the map with the mouse, the photo comes out weird (file attached)-
I noticed in the elements of html that although I see the objects of the layers adjusted to the map, in practice the div itself is dragged from place to place and this is what I get in the picture
I would be happy to help with this
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I am trying to call a generic function but when that function is executed I am in a different scope (window). This code will picture the case:
Ext.application({
name : 'Fiddle',
context: null,
function1 : function(){
this.function2(this.function3);
},
function2 : function(func){
func();
},
function3 : function(){
if(context == this){
Ext.Msg.alert('Fiddle', 'Same context!');
}
else {
Ext.Msg.alert('Fiddle', 'Different context!');
}
},
launch : function() {
context = this;
this.function1();
}
});
I am trying to use bind but it is not working.
Thanks!
EDIT: I am so sorry guys, I said Javascript instead of Sencha. I thought the issue would be the same in Javascript and I could get more help. I apologise. I created a code in fiddle to replicate the issue. Thanks to all the comments and help, they are really appreciated!
You can use the bind method to bind your context (this).
function1 : function(arg){
this.function2(this.function3.bind(this), arg) // using bind
},
function2 : function(func, arg){
func(arg); // <-- Issue
},
function3 : function(arg){
// this = window... I lost the scope??
},
I bought a template and have asked to the writer but still no respond so far. Actually, I need a quick answer. Any body here can help to fix?
It's about to show Quick View of a single product detail to show in a window popup when a link is clicked. I have no idea how to put any data and get the data when popup appear, no browser refresh. Please don't ask me what have I done, I have no idea at all. I usually used ajax in a form.
The html link is like this :
<div class="quick-view">
<a title="Quick view" class="search" href="#"></a>
</div>
and the ajax call :
$(document).on('click','.quick-view .search,a.quick-view',function(){
var data = {
// data here....
}
$.post('quick_view.php', data, function(response){
$.fancybox(response, {
// fancybox API options
fitToView: false,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
// OWL Product thumb
$('.product-img-thumb .owl-carousel').owlCarousel(
{
dots:false,
nav:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
margin:21,
responsive : {
// breakpoint from 0 up
0 : {
items : 2,
},
// breakpoint from 480 up
480 : {
items : 2,
},
// breakpoint from 768 up
768 : {
items : 2,
},
1000 : {
items : 3,
}
}
}
);
})
return false;
})
any answers is appreciated.
If you add an ID to your elements that fire the event you can access and use it's ID or other Attribute to send it as data in your AJAX-call. To do this you use the event.target which points to the element that triggerred the event. In this way you can use the same call for a whole bunch of elements on the same page:
$(document).on('click','.quick-view .search,a.quick-view',function(event){
// Get the id of the element and add it to the data sent with call
var data = {
elementId: event.target.id
}
// Rest of your Ajax call
}
I would like to implement a swipe gesture to replace the current Next/Prev-buttons in my web app. I figure I'll use either jQuery Mobile, QuoJS or Hammer.js to recognize the swipe gestures.
But how can I go about implementing the swipe animation (similar to this) to go with the gestures?
I'm not flipping between images as in the example, but html sections mapping onto Backbone Model Views.
This finally "solved" it. I'm using jQuery-UI with a slide effect, but it's not looking as good as I had hoped, I want it to look more like on iOS using Obj-C. But it will have to do.
var handleSwipeEvents = function() {
$(function() {
$('#myId').on('swipeleft', swipeHandler);
$('#myId').on('swiperight', swipeHandler);
function swipeHandler(event) {
function slideEffect(swipeLeft, duration) {
var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
$('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
$('#myId').effect("slide", slideInOptions, duration); // slide in new data
// Alter contents of element
});
}
var swipeLeft = (event.type === "swipeleft");
slideEffect(swipeLeft, 300);
}
});
};
I have a feeling one can achieve better results using CSS3 and transition, but I haven't succeeded with that.
This question already has answers here:
Relative URL to a different port number in a hyperlink?
(12 answers)
Closed 9 years ago.
The tag below ceates a link to a page without having to provide the full URL:
link
So if you click it from example.com/, you'll go to example.com/foo.html. Is there a way to create a link that'll go to example.com:port/foo.html instead?
See here -> https://stackoverflow.com/a/6016361/773263
// delegate event for performance,
// and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName.toLowerCase() == 'a')
{
var port = target.getAttribute('href')
.match(/^:(\d+)$/);
if (port)
{
target.port = port[1];
}
}
}, false);
Seems to be the best way to do it. I don't think a purely HTML solution is possible.