As shown in the demo, dispatchEvent is not working as expected.
http://jsfiddle.net/DerekL/V8uEN/
Key part:
btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
An alert should pop up after 1 second upon loaded, but it is not coming up and an error appears in the console:
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.
I don't know where's the problem at since I found a demo almost with the exact same code, and it is working but not mine.
btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
Your problem is that initMouseEvent doesn't return anything. You can't combine all of that into one line. You need to break it up.
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null);
btn.dispatchEvent(mEvent);
This is how it's done in the demo you linked to.
This works:
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
alert("Clicked.");
});
setTimeout(function () {
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
btn.dispatchEvent(mEvent);
}, 1000);
Related
Does someone have any idea why only the second time I run my code it does work?
ThisElement = document.querySelector("#side > div._1Ra05 > div > label > div > div._1awRl.copyable-text.selectable-text");
ThisElement.innerText = 'message';
var focusEvent = new FocusEvent('focus', {
bubbles: false,
cancelBubble: false,
cancelable: false,
composed: true,
currentTarget: null,
defaultPrevented: false,
detail: 0,
eventPhase: 0,
isTrusted: true,
});
ThisElement.dispatchEvent(focusEvent);
https://youtu.be/yrD9jB1FXHo
The code just sends a message in the search box.
I'm testing it on chrome using the DevTools console (F12).
The problem is with the React JS used to design whatsapp web, so to manage this you can call again event in the setTimeout
Reason behind this issue:
On the first event trigger the whatsapp web screen will release all the input focused from the app screen, so it is required to again trigger event to stimulate human action in browser.
function searchContact(contact_name = "") {
search = document.querySelector('#side > div._1Ra05 > div > label > div > div._1awRl.copyable-text.selectable-text');
var focusEvent = new FocusEvent('focus', {
bubbles: true,
cancelBubble: false,
cancelable: true,
composed: true,
currentTarget: null,
defaultPrevented: false,
detail: 0,
eventPhase: 0,
isTrusted: true,
});
//Enter value in search box events
var inputEvent = new InputEvent('input', {
bubbles: true
});
search.textContent = contact_name;
search.dispatchEvent(focusEvent);
search.dispatchEvent(inputEvent);
setTimeout(function() {
search.textContent = contact_name;
search.dispatchEvent(focusEvent);
search.dispatchEvent(inputEvent);
el = document.querySelector("#side > div._1Ra05 > div > label > div > div._1awRl.copyable-text.selectable-text");
var event = new KeyboardEvent('keydown', {
code: 'Enter',
key: 'Enter',
keyCode: 13,
view: window,
bubbles: true
});
el.dispatchEvent(event);
}, 1000)
}
searchContact("name");
function triggerMouseEvent(el, etype) {
console.log(el)
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(etype, true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
Atom-typescript changes tab space from 2 to 4 when we format the code.
I changed formatting.js file and set it to 2 but still i'm facing the same issue..
How can i change the tab space in atom-typescript?
below is the content of formatting.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Maintainance:
* When a new option is added add it to:
* - the FormatCodeOptions interface
* - the defaultFormatCodeOptions function
* - the makeFormatCodeOptions function
*/
const os_1 = require("os");
function defaultFormatCodeOptions() {
return {
baseIndentSize: 2,
indentSize: 2,
tabSize: 2,
newLineCharacter: os_1.EOL,
convertTabsToSpaces: true,
indentStyle: "Smart",
insertSpaceAfterCommaDelimiter: true,
insertSpaceAfterSemicolonInForStatements: true,
insertSpaceBeforeAndAfterBinaryOperators: true,
insertSpaceAfterKeywordsInControlFlowStatements: true,
insertSpaceAfterFunctionKeywordForAnonymousFunctions: false,
insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis: false,
insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets: false,
insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces: false,
insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces: false,
placeOpenBraceOnNewLineForFunctions: false,
placeOpenBraceOnNewLineForControlBlocks: false,
};
}
exports.defaultFormatCodeOptions = defaultFormatCodeOptions;
//# sourceMappingURL=formatting.js.map
As suggested by #baruch, here is the reference: github.com/TypeStrong/atom-typescript/issues/1236
I'm posting what worked for me.
To change indentation to 2 for atom-typescript:
Go to your project directory.
Open or create tsconfig.json.
Add the following code
"formatCodeOptions": {
"baseIndentSize": 0,
"indentSize": 2,
"tabSize": 2,
"newLineCharacter": "\n",
"convertTabsToSpaces": true,
"indentStyle": "Smart",
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": false,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterConstructor": false,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
"insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
"insertSpaceBeforeFunctionParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
}
This worked for me!
I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};
It's my first post here. I have this simple web site www.kanalistart.com and there you can see an image sliding around but not continuously. Here are the current settings if the script. What can I do to make it unstoppable. Thanks!
// Default configuration properties.
var defaults = {
vertical: false,
start: 1,
offset: 1,
size: null,
scroll: 9,
visible: null,
animation: 'normal',
easing: 'swing',
auto: 0,
wrap: null,
initCallback: null,
reloadCallback: null,
itemLoadCallback: null,
itemFirstInCallback: null,
itemFirstOutCallback: null,
itemLastInCallback: null,
itemLastOutCallback: null,
itemVisibleInCallback: null,
itemVisibleOutCallback: null,
buttonNextHTML: '<div></div>',
buttonPrevHTML: '<div></div>',
buttonNextEvent: 'click',
buttonPrevEvent: 'click',
buttonNextCallback: null,
buttonPrevCallback: null
};
I have a question about my slideshow, i want it to play automatically, how to do it???
i've already changed the autoplay setting from false to true, but still cant.
here is my code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: true,
transitionType:'move',
globalCaption: true
});
});
</script>
and here is my link if you need to read the jquery file
My Slider problem link
THANKS
Try this,
autoPlay: {
enabled: true,
delay: 1500
}
Change the delay according to your requirement.
Or just try,
autoPlay : {
enabled : true
}
AutoPlay property requires an object not true\flase value, look at doc
Try this code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: {
// autoplay options go gere
enabled: true,
pauseOnHover: true
}
});
});
Edit: "}" was missing after " pauseOnHover: true" .