Hi i am using quick note plugin.
In IE8 i am getting the error Object doesn't support this property or method, have no idea how to solve this, I am getting this error on below code
error here ->
$.fn.postitall.defaults = {
// Basic Settings
id : 0, //Id
created : Date.now(),
domain : window.location.origin, //Domain in the url
page : window.location.pathname, //Page in the url
backgroundcolor : '#FFFC7F', //Background color
textcolor : '#333333', //Text color
textshadow : true, //Shadow in the text
position : 'relative', //Position absolute or relative
posX : '5px', //top position
posY : '5px', //left position
height : 180, //height
width : 200, //width
minHeight : 152, //resizable min-width
minWidth : 131, //resizable min-height
description : '', //content
newPostit : false, //Create a new postit
autoheight : true, //Set autoheight feature on or off
draggable : true, //Set draggable feature on or off
resizable : true, //Set resizable feature on or off
removable : true, //Set removable feature on or off
changeoptions : true, //Set options feature on or off
savable : false, //Save postit in local storage
// Callbacks / Event Handlers
onChange: function () { return 'undefined'; },
onSelect: function () { return 'undefined'; },
onDblClick: function () { return 'undefined'; },
onRelease: function () { return 'undefined'; }
};
Date.now wasn't added to Javascript specification until ECMAScript 5 which means that it is not present on IE8 and lower. This is why you get the mentioned error. However, you can implement your own Date.now() method:
/** +new Date is short for (new Date).valueOf(); */
var Date.now = Date.now || function(){ return +new Date; };
So, if Date.now exists you will use existing browser's implementation, otherwise you define your own function.
Related
during a project I need to set up a cropper associated with a face detection. The face detection works well but the cropper modifies the format of the image with its object, the coordinates returned by the facedetector are false. Do you know how to apply the facedetector once the image has been modified with the cropper interface ?
var image = document.getElementById('img');
var cropper = new Cropper(image, {
/* aspectRatio: 9 / 16,*/
// autoCrop: true,
scalable: false,
cropBoxResizable: false,
guides: true,
dragMode: 'none',
preview: '.preview',
data:{
width: 250,
height: 325,
},
crop: function(e) {
$('#x').val(e.detail.x);
$('#y').val(e.detail.y);
$('#w').val(e.detail.width);
$('#h').val(e.detail.height);
},
});
$('#img').faceDetection({
complete: function (faces) {
console.log(faces)
initx = faces[0].x;
inity = faces[0].y;
cropper.data({x:120,y:init});
}
});
You probably need to first, get the coords, then initiate Cropper with those coordinates, like this:
const img = $('img');
img.faceDetection({
complete: function (faces) {
initCropper(faces[0]);
}
});
function initCropper(data) {
cropper = new Cropper(img[0], {
data
});
}
https://jsbin.com/keruzal/edit?js,output
I'm using Scrollreveal.js to reveal some divs on my website.
Now i want Scrollreveal to call a function after it has revealed a specific div.
As the documentation says:
"
// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}"
My code:
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
afterReveal: function (domEl) {domEl.demo();}});
Can anyone tell me what the correct syntax is to call my variable after the div has been revealed?
I have tried for a long time to do it myself, with no positive results, so i think it's ok to ask someone for help now :)
Thanks!
Figured it out, it wasn't difficult, as i suspected, just me being new to this :)
so to shorten this, this is how i used CountUp.js with Scrollreveal.js
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
beforeReveal: function(){var options = {
useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}},
});
I am working in a Sencha Touch app with different Toasts to show messages like "successful" or "info" etc.. but I am having random behavior, for example:
1º if you navigate for the application tapping in a one action with Toast and you navigate to other screen while Toast is up, toast has a random behavior getting the last color instead of change..( in the test case with the same color but with different message, please you can read the code)
2º Sometimes Toast is not appearing and I do not have explanation.
Any suggestion about the code? currently it is a singleton class, and it is called from other parts/controllers of the app depending the action.
On the other hand, any other approach with a similar behavior? maybe it is needed to change the strategy and no use Toasts..
It is happening in Windows 8 and iOS and I am using 2.4.1 version, reading the release notes of 2.4.2 has not news about this element of the framework, and I guess is not relevant to update to the latest framework version.
Here my Toast Manager class:
/**
* Loading popup as a static-functions class
*
* Different toast-messages colors:
* 0 --> green
* 1 --> orange
* 2 --> red
*
* We create a config object and depending of the status we show a Toast
*/
Ext.define('xx.view.components.ToastManager', {
singleton : true,
requires : [
'Ext.Toast'
],
config : {
toastOptions: {
message : '',
centered : false,
width : 200,
height : 100,
bottom : '10%',
modal : false,
right : 10,
style : '',
type : 'slide', duration: 850, easing: 'ease-out',
hideAnimation: {type: 'fadeOut', duration: 650, easing: 'ease-out'},
timeout : 3000
},
toastComponent : null,
t : null
},
constructor : function () {
this.initConfig();
},
changeVisibility: function() {
if(this.getT()) {
clearTimeout(this.getT());
}
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'visible');
}
var t = setTimeout(function() {
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'hidden');
}
}, 4000);
this.setT(t);
},
/**
* Shows a successful message
* #param label
* #param status
*/
showToastMessage : function (label, status) {
var options = this.getToastOptions();
options.message = label;
switch (status) {
case 0:
options.style = 'background-color: #30B420';
break;
case 1:
options.style = 'background-color: #FFA500';
break;
case 2:
options.style = 'background-color: #ff0000';
break;
default:
options.message = "?"
}
this.changeVisibility();
this.setToastComponent(Ext.toast(this.getToastOptions()));
}
});
I'm using this function for my toast messages (in ExtJS though):
showToastMessage: function(message, alignTo){
Ext.toast({
cls: 'toast-window',
header: false,
html : '<div class="toast">' + message + '</div>',
animate: true,
slideInAnimation: 'ease',
slideInDuration: 300,
slideOutDuration: 200,
autoCloseDelay: 1500,
align: alignTo ? alignTo : 't'
});
}
You can apply some css to toast-window and toast classes to make you message look nice.
You just pass your message to this function and it should show a nice toast!
YUI().use('node-event-delegate', 'panel', function(Y){
(function createNewMetadataPanel() {
console.log('creating');
var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
var form = Y.Node.create('<form/>');
var set = Y.Node.create('<fieldset/>');
form.append(set);
widget.append(form);
panelContent.append(widget);
var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
set.append(metaDataName);
set.append(metaDataValue);
panel2 = new Y.Panel({
srcNode : '#newMetadataPanelContent',
headerContent: 'Add A New Member',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : false
});
panel2.addButton({
value: 'Create Member',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addMetaData();
}
});
});
When this code runs, the panel appears as soon as the page loads, at the bottom of the screen. It is not even centered. Shouldn't render : false prevent it from being added to the DOM, and visible : false prevent it from being shown?
Give you #newMetadataPanelContent element the CSS property display:none. Y.Panel will un-hide it when you show your panel.
I get this error:
[ERROR][GeolocationModule( 278)] (KrollRuntimeThread) [633,2564] Unable to get current position, location is null
and I have followed other people's advice without any luck.
Could someone lead me in the right direction? I would be so grateful. Thank you!
var win1 = Titanium.UI.createWindow({
title : 'map_landing',
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'hails_window',
backgroundColor : '#fff'
});
var win3 = Titanium.UI.createWindow({
title : 'cabs_window',
backgroundColor : '#fff'
});
User = {
location : {}
};
var hail_button = Titanium.UI.createButton({
title : 'Hail Cab',
top : 10,
width : 200,
height : 50
});
var find_button = Titanium.UI.createButton({
title : 'Find People',
bottom : 10,
width : 200,
height : 50
});
var options = {
accessKeyId : '',
secretAccessKey : ''
}
Ti.Geolocation.purpose = "Receive user location";
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
alert('HFL cannot get your current location');
return;
}
User.location.longitude = e.coords.longitude;
User.location.latitude = e.coords.latitude;
User.location.accuracy = e.coords.accuracy;
User.location.speed = e.coords.speed;
User.location.timestamp = e.coords.timestamp;
var mapview = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
region : {
latitude : User.location.latitude,
longitude : User.location.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
animate : true,
regionFit : true,
userLocation : true
});
win1.add(mapview);
win1.add(hail_button);
win1.add(find_button);
hail_button.addEventListener('click', function(e) {
alert('hello');
$.ajax('http://hail.pagodabox.com/add_hail', {
type : 'POST',
lat : User.location.latitude,
lang : User.location.longitude,
success : function(response) {
alert(response)
}
})
});
find_button.addEventListener('click', function(e) {
});
win1.open();
});
It took me some time to track this down, but I think I've found the steps needed to "fix" the lack of a location in the Android emulator (from this answer):
First, open ddms (Dalvik Debug Monitor). On Windows, navigate to the
android-sdk\tools directory and run ddms.bat. The first line in the
top-left pane will read something like "emulator-####" such as
emulator-5560.
Open a command prompt window. Enter 'telnet localhost ####'
substituting the number you found above. This will open a telnet
window to your android emulator.
Enter the following command (substitute your own longitude & latitude,
in that order, if you'd like):
geo fix -82.411629 28.054553
(I'm pretty sure you can add elevation as a third number.) The GPS
icon will appear in the emulator's notification bar. Geolocation is
now available. At this point, I could get location data in my app and
in other apps, such as Maps.