Javascript - Clicks and key events don't work in Cobalt - javascript

I'm quite nooby in using Cobalt. I try to create a simple app (just couple of pages) using HTML, CSS and JS. Static content looks fine in Cobalt. But mouse clicks and events from keyboard aren't handled. I mean code like
document.addEventListener("keydown", e => { do something });
//or
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
document.location.href = URL_PAGE;
});
}
works in Chrome, but doesn't work in Cobalt. When I click something or press buttons on a keyboard - just nothing happens. For now I haven't found how to handle user events to make them work in Cobalt.
Any help would be very appreciated.
Thank in advance,
Evgeniy

Appears that I just had errors in my script. I fixed them and now everything work fine. Sorry for a false alarm.

Related

HTML buttons work fine on desktop do not work on mobile

I have made a website and while the desktop version is finished i am still fighting with the mobile one. So anyways, every single button that uses js to do its thing doesnt work, while normal buttons with links work just fine. The issue also does not appear on chrome using the 'toggle device toolbar' option, which should technically simulate touch events.
This is how a sample button looks like:
<a class="button" id="upload-media-button">Upload</a>
And this is the js that uses it:
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(){
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
Can't say exactly why this is happening.
But this may be case. We should disable the default behavior of browser.
As it is an anchor tag, browser have its own handling.
Like modify your code like this
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(event){
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
Hope this helps.
try replacing touchstart with tap like this
$(document).ready(function() {
$('#upload-media-button').on('click tap', function(event){
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
});
this is assuming that you have included jQuery Mobile in your project. (which I highly recommend you do).

Firing a manual click event on an button in ember.js doesn't give the required result

TL;DR: Trying to fire a manual javascript click event on the chat button of twitch, won't send the message. Don't understand why the event doesn't do the same as a normal click and don't know how to make it work.
So I am trying to make a custom bot for twitch.tv, only reading his info from the HTML directly. I've got it perfectly working up to the point at where it can recognize commands and put text in the textbox. Now the problem I have is, as soon as I try to fire a manual click event on the "chat" button, it just doesn't seem to work. My guess is it has something to do with ember.js, and I frankly don't know anything about that. Anyway, here is the part of the code that doesn't work. EDIT: this works if I enter it as single in the console, doesn't work in context of the rest of my code though.
$('.send-chat-button').click();
What happens here is that I acquire a piece of html that contains the chat submit button, which is this:
<button class="button primary float-right send-chat-button" data-bindattr-3945="3945">
<span>
Chat
</span>
</button>
When I try to manually fire a click event on this, nothing happens. However, when I fire a manual click event on buttonContain.children[0] and buttonContain.children1 (which are, respectively, the settings and list of viewers buttons), it does work. They look like this:
<a data-ember-action="3943" class="button glyph-only float-left" title="Chat Settings"></a>
I'm guessing the difference is in the data-ember-action and the data-bindattr-*, but I don't know how to make it work. Anyone here knows why the click() event doesn't work and directly clicking does?
EDIT: If you have any questions about my question, feel free to ask.
EDIT2: I experimented a little more, and I can remove all HTML attributes from the button, and clicking on it will still work. I have no idea what is going on :(.
EDIT3: Okay, so it seems it only stops working when i remove the
Span within the button
Still no idea what is going on. (Yes, have also tried to fire the click event on the span)
EDIT4: As requested, here is all the code from my side. Note that I'm trying to click a button from twitch itself, of which ember side I do not own any code. This code is used by pasting it in the console on a twitch.tv stream and then starting it by calling initiateMessageProcessing. I'm sorry for the lot of hardcoded values, those are twitch' fields that I need. For now I'm just looking for a proof of concept.
var frequency = 5000;
var myInterval = 0;
var lastMessageId = 0;
function initiateMessageProcessing() {
if (myInterval > 0) {
clearInterval(myInterval);
}
myInterval = setInterval("checkMessages()", frequency);
}
function checkMessages() {
var chat = document.getElementsByClassName("chat-lines")[0];
processMessages(extractUnprocessedMessages(chat.children));
lastMessageId = parseInt(chat.lastElementChild.getAttribute("id").substring(5, 10));
}
function extractUnprocessedMessages(chat) {
var unprocessedMessages = [];
var chatId = 0;
for ( i = 0; i < chat.length; i++) {
chatId = parseInt(chat[i].getAttribute("id").substring(5, 10));
if (chatId > lastMessageId) {
unprocessedMessages.push(chat[i]);
}
}
return unprocessedMessages;
}
function processMessages(unprocessedMessages) {
var messageElement;
for ( i = 0; i < unprocessedMessages.length; i++) {
messageElement = unprocessedMessages[i].children[0].getElementsByClassName("message")[0];
if (messageElement != undefined && messageElement != null) {
if (messageElement.innerHTML.search("!test") !== -1) {
sendMessage('Hello world!');
}
}
}
}
function sendMessage(message) {
fillTextArea(message);
var button = $('.send-chat-button').get(0);
var event = new MouseEvent('click', {
bubbles : true
});
button.dispatchEvent(event);
}
function fillTextArea(message){
var textArea;
var chatInterface = document.getElementsByClassName("chat-interface")[0];
var textAreaContain = chatInterface.children[0];
textArea = textAreaContain.children[0].children[0];
textArea.value = message;
}
EDIT5: Eventlistener screenshot:
EDIT6: Edited source code to use $('.send-chat-button').click();
I have tried this, does not work in the current code, it does work if I manually fire this single command in the console when there is text in the chat. But sadly does not work in my code.
EDIT7: used Ember.run, still doesn't work.
EDIT8: used dispatchmouseevent, still doesn't work in context of code
It seems that the target site attaches event listeners without help of JQuery. If it is so, you cannot trigger it using jquery .click() method.
You can try directly mocking the browser event like this:
var button = $('.send-chat-button').get(0);
var event = new MouseEvent('click', {bubbles: true});
button.dispatchEvent(event);
This code will not work in IE8 and lower, but I guess it is not your case.
I know this post is quite old but I had been looking for an answer on this for a while and nothing really worked, after trying out A LOT of stuff I found it works when you focus the chatbox first then focus the button then triggering the click event!!! uuuhm yeah...
$('.chat_text_input').focus();
$('.send-chat-button').focus().trigger('click');
I have no idea why this works (and why it doesn't in any other way), but leaving any of the focusses out makes it fail or bug out.
Programmatically clicking a DOM element to make some action done is somewhat a wrong approach.
You should have define a method myAction() which will be called in two ways. First, from your ember action triggerMyAction() and second, after listening to a custom event, "myEvent".
Instead of $('.send-chat-button').click(); you will code $('something').trigger("myEvent") then.
Something like:
Em.Controller.extend({
myAction:function(){
//do your stuff
},
onMyEvent:function(){
$('something').on('myEvent',this.myAction);
}.on('didInsertElement'),
actions:{
triggerMyAction:function(){
this.myAction();
}
}
})

Google Fastbutton not working on mobile Safari?

I'm trying to implement Google's Fastbuttons described here for tables with a two-row layout.
The fastbuttons get bound on the table-rows with:
var buttons = document.getElementsByClassName('evtFastbutton');
for (var i = 0; i < buttons.length; i++) {
var fastbutton = new FastButton(buttons[i], function () {
var urlstr = 'xyz';
window.location.href = (urlstr);
});
}
If one of the rows is clicked it should change the background-color of either the previous or the next row and itself and open a new page.
While using Chrome or Firefox on Android or PC it all works great.
In Safari on the IPhone it is not changing the background-color but opens the new page.
I am not sure what is not working, the change of the background-color or the fastbutton.
Does anybody have had similar issues or a possible solution for this?
You can find the full code in this fiddle:
http://jsfiddle.net/tofeld/9Lu54yrr/1/
PS: I already tried the solutions suggested at this question: Google FastButton clicks twice on iOS
I found the solution of my problem.
As described here the rendering was not done before the javascript to change the page was executed.
So if anybody experiences a similar issue, try to do:
window.setTimeout(function(){window.location.href=('new/location');},0);
instead of
window.location.href=('new/location');

Appending div with image in Chrome

I am having problem with appending a div with an image to a page after clicking a link.
Here is my script, which on document.ready() adds the event.
var handler = function () {
$('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>");
//$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content");
}
$(document).ready(function () {
for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) {
if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") {
ls[i].onclick = handler;
}
}
})
The problem here that it doesn't work in Chrome while in Firefox and IE its working perfectly. After some digging i found out that it actually adds the div but doesn't show the image. (Tested it with adding the div on the beginning of the page, everything moves down and the div is empty)
I have tested it also adding it directly to page and then it works good but it's not what I'm looking for unfortunately.
Here is my css class:
.loading-graphic
{
background: url('~/Content/ico/loading_big.gif') no-repeat;
}
Got no idea what is causing the problem. Anyone got an idea? ;/
Honestly sometimes Chrome screws up. I have had issues with Chrome and background images, but it was only my computer. Try it on a different computer Chrome browser, it might not be the same.
The other thing I would suggest is, have your div coded already instead of appending it. So basically have it on the html code and position it out of sight, then when you need it, just move it to the right position.
It was the background position; also increased z-index, attached to body, and prevented other invisibility reasons.
var handler = function () {
$('body').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:50%;left:50%;margin:-100px 0 0 -100px;z-index:99999;background-position:center center;display:block !important;\"></div>");
}

Grab link on hover - Firefox addon

I want to grab the underlying link address on mouse hover.
Even if I can grab the link shown in my statusbar it would be enough.
This is for a firefox addon that I am creating.
function mouseOver(event) {
alert(event.currentTarget.href);
event.preventDefault();
}
A few easy steps
Get all links on page
Subscribe to mouseover event for each link
Onmouseover get the url
This would be more straightforward with jQuery, but this gets the job done.
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
links[i].addEventListener('mouseover',getLink,false)
//for less than ie9 use attachEvent (figure it out yourself)
}
function getLink() {
alert(this.href);
}

Categories