For the most part people are fine using the previous and next arrows when navigating a comic or a blog. But some people (as I learned when it was requested) would like the option to just press the left or right arrows on their keyboard and have it do the same thing.
So, I thought that was an interesting idea and decided I’d do it for my comic entry pages.
Here’s how I did it.
Create a keydown Event
Obviously, the main thing you’ll want to do is create an event that is listening for a keydown (aka: key press) and creates an event to run functionality when that happens.
$( document ).keydown( function( event ){
});
What this is saying is whenever the user presses a key anywhere on the document, it’ll trigger an event that will run some stuff.
Check that the User is on the Right Page
This one is kind of optional but I like to do it because it’s nice to not run functionality if you don’t have to. The way you do this is to get the href location, split it, and get the 3rd index of that array (which would be the second segment) and check if it equals the page that you want, and put all that into a conditional.
Mine looks like this:
$( document ).keydown( function( event ){
if ( window.location.href.split('/')[3] == 'comic' ) {
}
});
window.location.href gets the current url.
.split(’/’) turns the url into an array using the ‘/’ as a delimiter.
[3] selects the third index of the array, which is going to be the segment just after your domain.
If that value is ‘comic’, then we are on the comic page and we’re good to go!
Get the nodeName of your Target
I realized from the very beginning that this part would be important because I didn’t want someone trying to write a comment on the comic page and try to navigate through their comment using the arrow keys and suddenly be going all over the comics channel. BIG UX PROBLEM!
That means that we need to make sure the user is NOT currently doing work within an input element or a textarea element.
In order to do that we need to get the nodeName of the target element and make sure it isn’t either of those two.
to do this, declare a variable that is equal to the current event and target it to get its nodeName.
var target = $( event.target )[0].nodeName;
This will return the name of the targeted event in all caps. What you want to do now is to NOT trigger the navigation if the target is either ‘TEXTAREA’ or ‘INPUT’. Which you do like this.
$( document ).keydown( function( event ){
if ( window.location.href.split('/')[3] == 'comic' ) {
var target = $( event.target )[0].nodeName;
if ( ( target !== 'TEXTAREA') && ( target !== 'INPUT' ) ) {
}
}
});
So far so good!
Check the keyCode of the Event
At this point we need to know which key the user is pressing. We do this by checking the keyCode value of the event bu using event.keyCode.
The value of the left key is 37 and the value of the right key is 39, so write a conditional that checks if the event.keyCode is either of those values.
$( document ).keydown( function( event ){
if ( window.location.href.split('/')[3] == 'comic' ) {
var target = $( event.target )[0].nodeName;
if ( ( target !== 'TEXTAREA') && ( target !== 'INPUT' ) ) {
if( event.keyCode == 37 ) {
} else if( event.keyCode == 39 ) {
}
}
}
});
Make Sure the Navigation Links Exist
On the first and last pages, you’ll likely not have a previous or next navigation button. If the element you’re trying to trigger doesn’t exist, you’ll get an ugly error in your console. While this won’t really effect the user experience in any way for the typical user, it’s always best to fix errors in your code!
To do this we will check for the length of the element we want to trigger. In the case of my website those elements have a class of page-prev and page-next. Checking the length of the element with those class names is how we determine that the element exists on the page. If the length returns a value of 0, we know it’s not there and we don’t have to trigger a click function. If the value is greater than 1, we know there’s an element there and can continue with the rest of the function.
It looks like this:
$( document ).keydown( function( event ){
if ( window.location.href.split('/')[3] == 'comic' ) {
var target = $( event.target )[0].nodeName;
if ( ( target !== 'TEXTAREA') && ( target !== 'INPUT' ) ) {
if( event.keyCode == 37 ) {
if ( $( '.page-prev' ).length ) {
}
} else if( event.keyCode == 39 ) {
if ( $( '.page-next' ).length ) {
}
}
}
}
});
Trigger a Click
At this point we have confirmed:
- A keydown event has happened
- We are on the ‘comic’ channel
- The name of the target node
- That the target node is not an input or textarea element
- The key code of the keydown event
- That the button we want to trigger exists
The last thing we need to do is trigger a click to send the user to their desired page.
We do that by using a .click() function.
Normally a .click() function would be used to handle functionality based on when the user clicks the selected element. That would look something like $(‘button’).click(function(){ // do some stuff when the button is clicked });. Only that’s not what we want to do. All we want to do is simulate the user clicking the link we’ve determined by the key code value.
To do that we need to select the element we want, define the first index (the href value), and run the click function. That looks like this:
$( ‘.page-prev’ )[0].click();
and
$( ‘.page-next’ )[0].click();
Final Product
Congratulations! You’ve successfully implemented functionality to handle a user navigating your comic/blog/whatever using jQuery without interfering with any other use of the arrow keys on the page.
The final product looks like this:
$( document ).keydown( function( event ){
if ( window.location.href.split('/')[3] == 'comic' ) {
var target = $( event.target )[0].nodeName;
if ( ( target !== 'TEXTAREA') && ( target !== 'INPUT' ) ) {
if( event.keyCode == 37 ) {
if ( $( '.page-prev' ).length ) {
$( '.page-prev' )[0].click();
}
} else if( event.keyCode == 39 ) {
if ( $( '.page-next' ).length ) {
$( '.page-next' )[0].click();
}
}
}
}
});
If you have any questions feel free to leave a comment or contact me directly.
And if you’re looking to hire someone for web development work consider checking out my HIRE page and get in touch. I can probably help!
Well done 👍
Posted using Partiko Android
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit