I am very New to JavaScript. Now i am trying to make a Google Chrome Extension which a click a Button on a specific web address. But the Site opens only for 30 second.. So i just saw the button color is GREEN and the button text is- " Move To "
so how can i trigger that button ? I am Trying for this. But its not Working.
var b = $('button[class*="Move To"]')[1]
$(b).click();
You can use :contains.
var b = $( "button:contains('Move To')" )[1]
b.trigger('click');
https://api.jquery.com/contains-selector/
Or if text is exactly Move To you can use this:
var b;
if($('button').text() == 'Target'){
$('button').trigger('click');
}
fire click event on a button containing particular text
js
$("button:contains('Move To')").trigger( "click" );
HTML
<button id="btn">Move To</button>
Related
I want to create a chrome extension that can simulate reply button of menu which appears when we click on small down arrow button of a message in the chat on WhatsApp Web.
I was able to get DOM element using getElemntsByClassName() in the content script of extension, but unable to simulate mouseover/mouseenter event to display that small arrow button. That button will only appear when mouse hover the message.
var mainWindow = document.getElementsByClassName("z_tTQ")[0]; //get main div which contains msg boxes
var msgs_in_boxes = mainWindow.getElementsByClassName("message-in") //get msg boxes
var msg_in_box = msgs_in_boxes[msgs_in_boxes.length - 1]; //get the last msg box div elem
var msg_in = msg_in_box.getElementsByClassName("_2et95 _3c94e")[0]; //get div inside the msg box
var event = new Event('mouseenter');
msg_in.dispatchEvent(event);
I have tried both mouseenter & mouseover events but unable to display arrow button programmatically.
Also I have dispatched events on msg_in_box instead of msg_in. But not working
Are there any method to accomplish this task by java script in chrome extension? Or are there any similar extension available on the market. My objective is simulate click on reply button of a specific message(Let's say last message) (I want to mention that message programmatically) via chrome extension.
Edit:-
I realized when I disable JS from devtools still that arrow button appearing and disappearing happens when mouse hover. It seems they use CSS to do that instead of onmouseenter of JS. How can I simulate that CSS :hover
I have a textarea that has spellcheck = "false". I want to have a button that when clicked turns on spellcheck and checks the spelling of what is already typed.
At present, if you enter anything else in the text box after the button click, it checks spelling properly. However, I would like it to spell check what's already there without needing to enter anything additional in textarea.
<textarea id="ta" spellcheck="false"></textarea>
<div>
<input type="button" id="spell_btn" value="spell check">
</div>
$(document).on('click', '#spell_btn', null, function () {
$("#ta").attr("spellcheck", "true");
});//close .click
https://jsfiddle.net/906dqtn6/5/
I tried to reset the value using $('#ta').val() but
didn't have any effect.
var x = $("#ta").val();
var y = " ";
$("#ta").val(y);
$("#ta").val(x);
Thanks in advance.
Your HTML attribute should be spellcheck instead of spellchecker (w3schools) and the jQuery should be:
$("#spell_btn").on('click', function () {
$("#ta").attr("spellcheck", "true");
});
An idea is that maybe you could trigger a keypress or keydown event on button click on your element.because spellcheck only seems to work as you type (or while the element is in focus), when clicking the button spellcheck may become inactive. To trigger these events:
$("button").on("click",function() {
$('#ta').keydown();
$('#ta').keypress();
$('#ta').keyup();
$('#ta').blur();
});
See here for reference
Here is a free, open source Javascript library for spell checking that I authored:
https://github.com/LPology/Javascript-PHP-Spell-Checker
There's a link to a live demo at the top. It's designed to have the feel of a spell checker in a desktop word processor. I wrote it after being dissatisified with these same options.
To use, just include the JS and CSS files into your page, and then add this:
var checker = new sc.SpellChecker(
button: 'spellcheck_button', // opens the spell checker when clicked
textInput: 'text_box', // HTML field containing the text to spell check
action: '/spellcheck.php' // URL of the server side script
);
i am working with liflet API.
i create markers on a map.
when a marker is pressed a popup uppers.
in the pop up there are two buttons.
what i am trying to do is to make the buttons change color when they are pressed.
the problem is that when i try to reset the color when the popup is opened to the original one
the affect happens only when i open the popup a second time.
i checked the popup event and the click event work.
button creation code:
if(!marker.getPopup()){
var tooltipContent = $('<div />');
$.each(marker._myId, function(index,value){
var current = $("<button id=\"router-"+value.properties.name+"\" type=\"button\" style=\"width:100%;color:black\" class='tooltipName' >"+value.properties.name+"</button>")
.click(function(){
handleClickOnSwitch(value);
var button=$("#router-"+value.properties.name);
button.css("background-color","grey");
});
tooltipContent=tooltipContent.append(current);
});
marker.bindPopup(tooltipContent[0],{'closeButton' : false,}).openPopup();
}
on click i change the button coller to grey.
each time the popup is opened i call:
function resetButtonPress(marker){
$.each(marker._myId, function(index,router){
var button=$("#router-"+router.properties.name);
button.css("background-color","RGB(221,221,221)");
});
}
i would appreciate any help.
in the end the root cause of the issue was a race condition.
the button element i was trying to update was not created fast enough and as a result
the color change did not take affect.
my solution to this was to create the buttons in the popup every time it opens.
this way i can circumvent the problem.
Situation: I have a HTML Form, inside it, i have some <input>'s with some info, and a <input type=submit> that is the Send button, who sends the form content to the url set on action parameter.
Problem: Missing knowledge(i don't know how to do).
Explanation of what i want: I want a hotkey like, for example, hit now on your browser or another common software like Notepad the Alt key of your keyboard. You will see a menu coming down on the top of screen, and some Word that are underlined like this one:
Well, you see the F with a underline, and you know that if you hit the key F the File menu will be opened.
Details: The hotkey that i want, is a little different from the example above, but have the same concept. Because i want to allow the user to Press: Alt + F instead of only F to automatically click on the Button that have F set as hotkey to itself.
This way, i can place one <input id=F type=button> i used attribute ID, for example, and if i press Alt + F the button is automatically clicked.
In theory, maybe its easy, but i really do not know how to do this on Javascript.
Does someone know how to do it?
What you want is something like
<input type="submit" accesskey="F"/>
Now, when the users hits Alt + F (or Alt + Shift + F on Firefox) it will be as though he had clicked on the submit button.
EDIT: to use Alt + F on firefox too see this topic: http://forums.mozillazine.org/viewtopic.php?t=446830
You can change it back to how it was using about:config, change:
ui.key.chromeAccess to 5
ui.key.contentAccess to 4
In Opera, press Shift + Esc. That brings up the access key list for the current page. Then you can press any number from the access key list to follow the respective link. Users can change this keyboard shortcut under Tools > Preferences > Mouse and keyboard.
If you were to use jQuery.hotkeys then you would bind each key or keystroke to a function and deal with it that way.
If you gave your buttons an ID of the key you want them to respond to, you could do something like this:
$(document).ready(function () {
var $doc, altKeys, modified;
$doc = $(document);
modified = function (ev) {
var selector;
selector = '#' + ev.data.replace(/^alt\+/, '');
$('button').css({background: 'transparent'});
$(selector).css({background: 'red'});
};
$('button').each(function () {
var key;
k = $(this).attr('id');
$doc.bind('keydown', 'alt+' + k, modified);
});
});
See this fiddle for a working example
I've been trying to put a link in a message that im sending using notyjs (http://needim.github.io/noty/). I don't want to use a noty button, just a link.
var n = noty({text: 'Hi there click, here to continue'});
The problem is that the message shows with the link, but when i click. it does nothing.
any ideas? thanks
By default noty closes on clicking anywhere in the container. To prevent this you should change the closeWith parameter. The modified code is as below.
var n = noty({text: 'Hi there click, here to continue',closeWith:['button']});
JS Fiddle : http://jsfiddle.net/nGDvU/