I am developing a phonegap application, and I am using rangeslider to make the regular <input type=range> elements more visually appealing. However I ran into a problem with the following function which is called when the onchange() event fires:
function store_slider(){
store_slider_val=document.getElementById("slider").value; //gets the value of the slider
if(store_slider_val==100){
//if slider is at 100 give a notification
navigator.notification.confirm('Mark task as complete?',task_complete_handle,'Hey there!','YES,NO');
function task_complete_handle(button){
if(button==1){
//do stuff
}
else{
//set the slider to 90
$('#slider').val(90).change();
}
}
}
else{
//do other stuff
}
}
The issue I'm facing is that the when the slider is at 100 the notification produced by navigator.notification.confirm('Mark task as complete?',task_complete_handle,'Hey there!','YES,NO'); appears twice instead of once when I try the app in my phone(Appears only once when I run it in my laptop browser). When I don't use rangeslider the code works as expected.
How can I fix this issue? Rangeslider was a perfect and simple solution to making range inputs look better and I would really like to continue using this and not switch to another slider plugin.
I solved this problem only by completely removing rangeslider.js and using another plugin as it seems it is connected to the way rangeslider is implemented.
What I did was to only update the model if the value was different, this ensured that my model push to the back-end was only called once and not twice eg:
if (Model.value != $this.value) {
Model.value = $this.value;
PostToBackEnd();
}
Related
I'm trying to add some functionality using Tampermonkey on top of a providers angular application but I'm stuck at this simple thing. I can't replicate the issue using CodePen so we're going to have to go for theories and suggestions. I'll try to be as specific as I can.
Adding this interval when the page loads to check when an input with the id serialNumberInput is available. Then I'm adding a dropdown to the form, and attach an onChange event to it to update the serial input field with the value of the selected option. However, the trigger parts just never happens. It does work when I enter them manually, but not with the script.
var populateSerialNumbersTimer = setInterval(function(){
var serial = $("input#serialNumberInput");
if($(serial).length >= 1){
$(serial).css("display", "inline").css("width", "50%");
$(serial).after(deviceToSerialSelectionHTML);
$("select#deviceToSerial").on("change", function(){
$(serial).val($("select#deviceToSerial").val());
$(serial).trigger("change");
$(serial).trigger("blur");
});
clearInterval(populateSerialNumbersTimer);
}
}, 200);
I've thought about it and considering how the serial number ends up in the text field the field must be accessible. Maybe it's that the events that I'm trying to trigger has not been declared at the time of the function declaration?
Suggestions much appreciated.
It looks like jQuery tries to cache the event somehow. This is how I solved it with native javascript in case someone else is interested:
function triggerEvent(e, s){
"use strict";
var event = document.createEvent('HTMLEvents');
event.initEvent(e, true, true);
document.querySelector(s).dispatchEvent(event);
}
$("select#deviceToSerial").on("change", function(){
serialNumberInput.val($("select#deviceToSerial").val());
triggerEvent("change", "input#serialNumberInput");
triggerEvent("blur", "input#serialNumberInput");
}
I came across a situation were a button event handler calls a function, that may take a couple seconds to complete depending on the input. Once the function completes, the output will show up in a grid.
The function is completely client side. Right before the function is running I add a css class to the grid wrapper div that basically just shows a 'loading' gif/animation.
This works fine in Chrome, but not in Firefox and IE 11.
Below is an oversimplified version of how I achieve this with javascript setTimeout 0.
$('#calc').on('click', function(){
$('#container').addClass('loading');
calculate(10, function(res){
$('#result').text(res);
$('#container').removeClass('loading');
});
});
//represents my long running function
function fib(n) {
if(n<2) {
return n;
}
return fib(n-2) + fib(n-1);
}
//will be called by click handler
function calculate(n,cb) {
setTimeout(function(){
var result = fib(n);
return cb(result);
},0)
}
As you can see I use setTimeout 0 in calculate(n,cb) to give the browser the ability to show the 'loading' animation before the function starts and then remove it when it is done.
However, this does not work in Firefox.
What are some other options for me to achieve what I am trying to do?
I am using jQuery here, but the actual project I am working on is using Angular5. But the idea should be the same.
Here is a jsFiddle to show what I am trying to do. Using the loading animation by Mattln4D (thanks)
https://jsfiddle.net/alabianc/qL5zggh7/
If you want to see some actual good result, run it with 40 as an input in calculate, but no more than that!
I appreciate any help!
I think if you set the timeout = 0, it is so fast to browser can show the loading animation. When I try to change timeout = 10 or 100, I can see the loading animation show on both of chrome, ff.
So I got a little codepen. Everything works so far except a little thing. I got a <h1> and an <input>. When I type something in the text input, its value should get passed to the <h1> in realtime.
I tried to do that with a keyup function:
$('input[name=titleInput]').keyup(function(){
$('#title').text(this.value);
});
Something happens, but not what I want.When I type something in the text input, then delete it (with backspace) and re-enter something, only the first character gets passed to the title.Try it out on my codepen. Maybe it's just a stupid mistake of mine, but to me this behaviour is pretty weird.Thanks for your help in advance!EDIT:I am using text-fill-color, which may causes the problem.EDIT 2:A friend of mine tested it. It worked for her. She's using Chrome and the same version as me (58.0.3029.110 (official build) (64-Bit)).
Chrome does not update the content correctly. Such kind of bugs can always happen if you use vendor prefixed css properties, so you should avoid those.
You could hide the container before update, and then show it again with a timeout. This will trigger an update, but would also result in flickering.
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide()
$('#title').text(this.value);
setTimeout(function() {
$('.clipped').show();
})
});
EDIT An alternative might be to use background-clip on the text and provide the inverted image yourself, but I right now don't have time to test that.
EDIT2 Based on the test of #TobiasGlaus the following code does solve the problem without flickering:
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide().show(0)
$('#title').text(this.value);
});
This seems to be different to $('.clipped').hide().show() most likely it starts an animation with duration 0 and uses requestAnimationFrame which also triggers a redraw. To not relay on this jQuery behaviour, the code should be written as:
$('input[name=titleInput]').keyup(function(){
if( window.requestAnimationFrame ) {
$('.clipped').hide();
}
$('#title').text(this.value);
if( window.requestAnimationFrame ) {
window.requestAnimationFrame(function() {
$('.clipped').show();
})
}
});
i'd use the following lines:
$('input[name=titleInput]').bind('keypress paste', function() {
setTimeout(function() {
var value = $('input[name=titleInput]').val();
$('#title').text(value);
}, 0)
});
This will listen to the paste / keypress events, and will update the value on change.
I have the following button positioned absolutely over a canvas element:
<button class="left">Left</button>
This is the JavaScript that is supposed to respond to button click:
$(".left").mousedown(function() {
leftTimer = setTimeout(moveLeft, 10);
}).mouseup(function() {
clearTimeout(leftTimer);
});
var leftTimer,
moveLeft = function() {
if (circleX > 0) {
circleX -= 4;
}
$("h1.title").text('Clicked Left');
leftTimer = setTimeout(moveLeft, 10);
};
I added the title line to check if there was a delay. When I click the button normally, nothing happens the title does not change. I have to keep the button pressed for some time to change the text to "Clicked Left" or to move my target element. Even then there is a considerable delay between the time I first touch the button and the time the text changes. Why is that ? Let me know if I need to provide more information.
You should actually have Angular with your Ionic app, and use the ng-click element on the div you want to handle.
According to the documentation, AngularJS is required :
Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.
Here is a JSBin, to make you a basic binding between your HTML and your AngularJS : https://jsbin.com/rifigakube/edit?html,js,output
If you are new to this technology here is a list to get started with AngularJS (it's pretty easy to learn if you know Javascript) :
https://angularjs.org/
https://docs.angularjs.org/tutorial/step_00
http://www.w3schools.com/angular/
https://thinkster.io/a-better-way-to-learn-angularjs
https://egghead.io/technologies/angularjs
And finally, when you think you're confident enough with AngularJS : https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic
(I really suggest you learn AngularJS before doing the last one, or you will get stuck after)
Hope this helps.
I am trying to find in the Galleria JavaScript file a place where I tell it to run a JavaScript function every time the current picture is changed (prev, next, or clicking on a thumbnail)
Does anyone with experience with galleria have any ideas?
http://galleria.io/
When you set up your Gallery bind to the image function and you will receive the event every time the image changes. I use it to load text into another area of my page like so.
Galleria.ready(function() {
this.bind("image", function(e) {
$("#text_div").text(arrayOfText[e.index]);
});
});
To make sure you have things setup correctly use it like this,
Galleria.loadTheme('galleria/themes/kscreates/galleria.classic.js');
Galleria.configure();
Galleria.ready(function() {
this.bind("image", function(e) {
console.log(e.index);
});
});
Galleria.run('#galleria');
and have a look in your Safari console and you will see the index of the currently displayed image.
Hope this helps.