I have the following script code designed to capture double tap events so I can toggle an image between a size that fits on the page and full size. The problem is that the tap event is not firing at all in Safari browser running on iPhone 4. In the below code, the alert never displays regardless of what I do on the touch screen.
$(function () {
$('#showImage').on('tap', function (event) {
alert("gets in tap event");
var d = new Date();
var tapTime = d.getTime();
if (tapTime - lastTapTime > 500) {
lastTapTime = tapTime;
}
else {
toggleResize();
}
});
});
Why isn't this working?
tap event is now working. I had some script code on an earlier page that was breaking the script code on this page. When I removed the earlier script code, this script code started working again.
Related
I'm trying to use testcafe to fill forms on a page.
When the form is filled, I'd like to be able to stop the test with the window still open so a human can review the form before clicking submit.
I can pause the test with t.debug() but this locks the page and shows the testcafe controls overlay at the bottom.
Is there a way I can remove this overlay and unlock the page?
I've tried using client functions to hide the element with javascript as follows:
test('test_1', async (t) => {
const hideOverlay = ClientFunction(function() {
const target = document.querySelector('#root-hammerhead-shadow-ui > div > div');
target.style.display = 'none';
return true;
})
await t.wait(5000);
setTimeout(async function() {
const res = await hideOverlay();
console.log('-------->', { res });
}, 6000);
await t.debug();
});
Since no code will be executed after debug is invoked, I thought I could use a settimeout to queue the call to the function that hides the overlay, so that it is queued and only executes after debug is called and the overlay is visible.
Didn't work though :( code didn't execute, got an unhandled promise rejection.
Could really use some help here, thanks :)
Yes, you can unlock the page by clicking the 'Unlock page' button in the footer as #VysakhMohan mentioned in the comment.
Please refer to the client-side debugging documentation for more details.
I would like to port an existing fully functional Chrome extension to Firefox, everything seems to work except the confirm() function behavior.
When the user clicks a specific button in the popup.html page, he is asked to confirm the action.
Chrome successfully prompts the dialog, I then get a Boolean back as soon as "ok" or "cancel" button is clicked, code related to the boolean returned is executed.
Firefox behavior feels buggy on the other hand. The confirm dialog prompts too but the extension popup is instantly dismissed, preventing further code in the click event handler to execute.
manifest.json : …, "default_popup": "popup.html", …
popup.html :
…
<script src="js/popup.js"></script>
</body>
popup.js :
removeButton.addEventListener('click', function () {
// Firefox: calling confirm() closes the popup.html page ...
// ... terminating event handler code
if (confirm("Please confirm you wish to remove this item.")) {
// …
}
});
Is there something to do about it or should I stop using confirm() and find a workaround ?
EDIT - Workaround solution
As a workaround, I set a 3 seconds countdown when the button is clicked and change its caption every second. Before time is up, if the user click again, the final action gets cancelled, otherwise final action is performed.
let log = document.querySelector('p')
,resetInterval = null
;
document.getElementById('resetbtn').addEventListener('click', function(e) {
if (!resetInterval) {
// Create a countdown and delete data when time is up.
e.target.content = e.target.innerHTML;
resetInterval = setInterval( function() {
var counter = +(e.target.innerHTML.trim().match(/\d+/)||[4])[0];
if (counter == 1) {
// Sending command to bacground page
// chrome.runtime.sendMessage({command:'remove'}, function (){
e.target.innerHTML = e.target.content;
resetInterval && clearInterval(resetInterval);
resetInterval = null;
log.innerHTML = 'Perform action…';
// });
} else e.target.innerHTML = 'Reset in '+(counter-1)+'s';
}, 1000);
log.innerHTML = '';
} else {
resetInterval && clearInterval(resetInterval);
e.target.innerHTML = e.target.content;
resetInterval = null;
log.innerHTML = 'Action aborted';
}
});
<button type="button" id="resetbtn">Reset</button>
<p></p>
Popout windows are designed to be dismissed when you move focus to another window. You can’t use dialogs (new windows) from the popout as they’re moving focus and thus dismissing the popout.
Is it possible to add event listeners for a document before a page has been navigated to using a Bootstrapped add-on? I would like to see what page the user wants to navigate to as well as later after the page loads to inspect the DOM. I need to run code in the HTML content context.
In the past I used a toolbar XUL and included javascript within it and it would load before the HTML page loaded.
i looked into doing stuff before DOMContentLoaded sometime ago and found out there is a document inserted observer.
order of events after running research code at bottom
readystate changes to interactive (i think multiple times, not sure)
readystate changes to complete
DOMContentLoaded event fires
load event fires (Sometimes load doesnt fire, if you might have to change addEventListener with capture arugment (3rd argument) as false or true)
apparently there should be readystate loading before all of this but i can never catch it i dont know why.
after running the code in scratchpad, browser environemnt of course, then load a new page and watch the error console it will throw these reports in this order:
ready state changed! ("interactive") Scratchpad/4:18
02:28:07.873 ready state changed! ("complete") Scratchpad/4:18
02:28:07.874 DOMContentLoaded event fired! Scratchpad/4:53
02:28:07.938 Load event fired! Scratchpad/4:45
here is the research code. it adds a the listeners and observer to see whats firing.
var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
var os = Cc['#mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
var LMObserver;
function myObserver() {
this.register();
}
myObserver.prototype = {
observe: function (subject, topic, data) {
//Cu.reportError(subject);
//Cu.reportError(data);
//i think subject is window element
subject.onreadystatechange = function () {
//loading
//interactive
//complete
Cu.reportError('ready state changed! ("' + subject.readyState + '")');
//var body = subject.documentElement.querySelector('body')
//you want to change title so you would do that here do something like: if (subject.readystate == 'complete') { subject.title = 'blah blah' }
//Cu.reportError('has body element: ' + body)
}
},
register: function () {
os.addObserver(this, 'document-element-inserted', false);
},
unregister: function () {
os.removeObserver(this, 'document-element-inserted', false);
}
};
//below this is the DOMContentLoaded thing i put this here so we can see what fires in what order
var pageLoad = function(event) {
var win = event.originalTarget.defaultView;
if (win && win.frameElement) {
return;
}
Cu.reportError('Load event fired!');
}
var pageDOMContentLoaded = function(event) {
var win = event.originalTarget.defaultView;
if (win && win.frameElement) {
return;
}
Cu.reportError('DOMContentLoaded event fired!');
}
LMObserver = new myObserver;
gBrowser.addEventListener("load", pageLoad, true);
gBrowser.addEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//gBrowser.removeEventListener("load", pageLoad, true);
//gBrowser.removeEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//LMObserver.unregister();
Here's some more indepth research on load events added with true or false as capture argument: https://github.com/Noitidart/event-listener-experiment-DOMC-and-load/blob/master/bootstrap.js
I have made a plugin using the addon SDK. The plugin adds a button to the nav-bar, and when it is clicked it opens a new tab with some data from an internal indexeddb using code similar to this:
// main.js
tabs.open({
url: self.data.url('index.html'),
onReady: runScript
});
function runScript(tab) {
var worker = tab.attach({
contentScriptFile: [
self.data.url("script.js")]
});
}
Everything works fine, except for the scenario where the user quits Firefox and opens it again, that tab will be restored, but it will contain nothing because it hasn't been triggered by the addon button click. This is because the scripts on the page are loaded through the runScript function in main.js, which is not executed when the HTML file is loaded on a restart.
How can I get this tab to have the same behavior on page startup than on button clicking?
I think you'll have to reload the tab:
exports.main = function(options) {
if(options.reason==='startup') for (var i=tabs.length-1; i>=0; i--) {
var tab = tabs[i];
if (tab.url!==self.data.url('index.html')) continue;
tab.once('ready', runScript.bind(null, tab));
tab.reload();
/* If it can't reload the tab,
use tab.url = self.data.url('index.html'); */
}
// ...
}
This a bug I had reported it awhile ago on bugzilla here
I added your topic as an example.
So what you have to do for now, is onReady, you have to turn you body into html datauri and set the location of the tab to this contents.
For example on ready:
var htmlDataUri = 'data:text/html,' + encodeURIComponent(document.documentElement.innerHTML);
//end make htmldatauri
document.location = htmlDataUri;
I am developing an iOS app in Appcelerator and I want to switch between windows with the use of a swipe event listener. How can I do this? The below code does not work. The current window that I "start" from contains a table.
var window = Ti.UI.currentWindow;
window.addEventListener('swipe', function() {
// Create the new window
var win = Titanium.UI.createWindow({
title: 'Contacts',
url:'contacts_simple.js'
});
// Animate the page turn
Titanium.UI.currentTab.open(win, {animated:false});
});
I think the problem is with the Ti.UI.currentWindow. Depending on the context you're working in it may not be valid.
Google 'appcelerator currentWindow', but here's a related link:
http://developer.appcelerator.com/question/5391/currentwindow
This will not be optimal and dynamic, but to start with, try referencing the window implicitly. Meaning if you did something like
var window_x = Ti.UI.createWindow({});
try
window_x.addEventListener('swipe', function() {...});