Using keyboard keys as navigation - javascript

I'm working on a blog theme & I'd like to have keyboard navigation. I know it has something to do with the id of the keyboard keys, but I've looked for I think 3 hours now and still have not found an easy solution. Here are the keys that I'd like to press & what I'd like them to do.
J - Scroll down to next post
K - Scroll up to previous post
R - Opens a new tab with THAT post's reblog URL
P - Opens a new tab with THAT post's permalink URL
If anyone could help me with this it would be extremely helpful. Also, I know you can do something by setting the links up in the URL like <article data-reblog-url="http://reblogurl" data-permalink-url="{Permalink}"> but I have no clue how to make the browser open a new tab when the R & P keys are pressed with that data as the URL. Also, the J & K, I'd like the browser to smooth scroll to the top of the post including the post's margin-top.
If anyone could help me with the whole code I would appreciate it a TON. I know it's a lot and I'm probably going to get thumbs down for this, but like I said I've been trying for more than an hour and I just need an expert's help.

More than an hour isn't a lot. But here's something to get you started:
You can reliably check which key was pressed by checking the which on the event object. I've made a demo so you can see how to check which key was pressed.
DEMO: http://jsfiddle.net/RXPhP/
Gotcha: The event is only fired on the element that has focus, so you're probably better tying it to body or document for navigation.

Something like this would give you a nice start. If you cannot use any libraries, then you do
<script>
var keyMap = [];
keyMap["j"] = 106;
keyMap["k"] = 107;
keyMap["r"] = 114;
keyMap["p"] = 112;
window.onkeypress = function (event) {
var asciiVal = (event.which) ? event.which : event.keyCode;
//Write a switch here to individually handle input.
}

http://www.w3schools.com/jsref/event_onkeypress.asp for the keypress events. It allows you to execute js when a key is pressed. The js would receive an event event and that would tell you what key was pressed. Depending on the key press, you would do something else nothing

Related

Can't simulate a click event with javascript in "web application"

I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works
The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}

How to detect redirection to the same address when using hash navigation?

This question is sort of what i'm thinking, but has no answers.
I have successfully implemented hash navigation in my application using the following code:
$(window).on('hashchange', function () {
loadContent(location.hash.slice(1));
}).trigger('hashchange');
I use this event to download partial HTML content from the server via Ajax, and it gets called when the browser detects a change on the hash in the address bar. The addresses looks like this:
https://www.mywebsite.com/#/account/login
The problem is, when the link is the same it does not fire the hashchange event (for obvious reasons). I need to call the function loadContent to refresh the page.
For example, before I implemented hash navigation, if the user wanted to discard all the changes he made to the page, he simply clicks the same link in the system menu, or click the address bar and hit enter. Then, the browser will redirect to the same page and drop all the changes.
But now, I can't detect that. What can I do to detect those commands and call my loadContent(location.hash.slice(1)); function?
After some research, I come to conclusion that there's no way to do that. I found this question that is very close to mine, but also no useful answer, other than handling the "onclick" event on every link on the site. Not a very beautiful solution - and does not solve the functionality of hitting enter on the address bar.
I ended up with a different approach. Definitely does not solve the way I wanted, however I think that it's more elegant from code perspective and practical from user perspective. I created a keyboard shortcut to refresh the page:
function doc_keyUp(e) {
if (e.altKey && e.keyCode === 82) { // ALT + R
if (confirm("Discard changes and refresh the page?")) {
loadContent(location.hash.slice(1));
}
return false;
}
}
document.addEventListener('keyup', doc_keyUp, false);
It may a simple approach, but what if you store your current hash in a property and afterwards register a click event and check if the hash is still the same?
Here is an (untested) example. But you should get the idea.
var storedHash = document.location.hash;
// You may add a data attribute to corresponding links to not
// catch all 'a'-tags (i.e. document.querySelectorAll('a[data-nav=true]'))
var links = document.querySelectorAll('a');
for (var i in links) {
if (!links.hasOwnProperty(i)) {
continue;
}
links[i].addEventListener('click', function() {
if (document.location.hash === storedHash) {
// Here comes your logic
}
});
}

Getting Href From Hyperlink Text in Javascript/JQuery

I am trying to write a Tampermonkey script to help the navigation of some of the websites I commonly browse. The goal is to be able to browse through the pagination of the page with the arrow keys (for instance, if I am on page 3, left key would go to page 2). I want to be able to search the page to ensure the Previous link exists, and if it does, click it to go to the previous page.
An example would be as follows:
<a href="www.example.com/page/2.html>Previous</a>
Instead of parsing the url to get the "2" as an integer, incrementing or decrementing as needed, and reconstructing the url, I want to find the word "Previous" and click it if it exists. How would I go about doing this? Thank you much for your time!
This is somewhat what I am looking for:
http://runnable.com/UhZCuuHhSAsoAALM/how-to-get-a-href-value-using-jquery
However, the code uses
var href = $('a:first').attr('href');
to get the first href on the page. I need it to get a specific href on the page (one titled "Previous").
Moving backward and forward through the user's history is done using the back(), forward(), and go() methods.
window.history.back();
window.history.forward();
Check out MozDev
<body id="body" data-page='2'>...
javascript
var num = document.getElementById('body').getAttribute('data-page');
document.onkeyup = function(e) {
if (e.keyCode == 37) {
window.location.href = "www.example.com/page/"+(num-1)+".html";
}
if (e.keyCode == 39){
window.location.href = "www.example.com/page/"+(num+1)+".html";
}
};
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

How to set a "First Word Hotkey" to button in Javascript?

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

Short cut key to open pages

i have 5 links in my home page ,
linkabc
linkdef
linkghi
linkjkl
linkmno
when i click the CTRL+b to open the linkabc page ,
When i click the CTRL+e to open the linkdef page like wise,
How to do this functionality with few snnipet ,
The vanilla javascript way:
You'll need to bind to the onkeydown event, then retrieve the keycode.
Get keycodes here: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx
For modifier keys, you'll need to maintain variables to check if they are depressed. For instance, if the keycode for control is detected onkeydown, toggle the var control = true. Onkeyup, you'll toggle back: var control = false. To trigger the action, you'll do:
if (control && e.keycode == 66) { // 66 happens to be "b"
performAction();
}
This is much easier if you're using a library, though, as there are plugins for all major javascript libraries for keybindings, such as this one for jQuery: http://plugins.jquery.com/project/hotkeys
No Javascript needed.
<a accesskey="b" href="#">linka<u>b</u>c</a>
<a accesskey="e" href="#">linkd<u>e</u>f</a>
You can access the first link by pressing Alt-b, the second by Alt-e.
This post has a little Javascript library that lets you bind keyboard shortcuts. Might try looking into that. He has a little demo on that page and it seems to work pretty well.
You can do it using the accesskey attribute of the Html Anchor tag as follows but you will press ALT instead of CTRL:-
<a accesskey="b" href="linkabc.html">linka<u>b</u>c</a>
<a accesskey="e" href="linkdef.html">linkd<u>e</u>f</a>
I hope this helps you and you can check this url for more information:-
http://en.wikipedia.org/wiki/Access_key

Categories