Key events not functioning properly with AngularJS image slider

Working on creating an image slider in AngularJS with Google Material, I have encountered a couple of issues.

  1. Unable to bind keypress events
  2. The images slide both ways at the same time and then first one disappears after a few seconds

Some code is provided below:

$scope.onKeyUp = function (keyCode) {
                console.log("I am here;")
                if (keyCode === LEFT_ARROW) {
                    $scope.prevSlide;
                } else if (keyCode === RIGHT_ARROW) {
                    $scope.nextSlide;
                }
            }

Link to full codepen: https://codepen.io/milindsaraswala/pen/yJaYpe

Seeking assistance on resolving these issues. Any help would be appreciated.

jquerycssangularjsmaterial-designangular-material

Answer №1

Alright, there are a couple of adjustments that you'll have to make.

Firstly, it's important to note that keypress/keydown will only function on elements that can receive focus (such as input elements).

An workaround for this is to specify tabindex on your element. Is the AngularJS ng-keydown directive only functional in an <input> context?

<div class="slider" tabindex="0" ng-keyup="onKeyUp($event)"  flex></div>

Secondly, switch to using the keyup event instead of keypress, as keypress is believed to be obsolete now.

This is the revised codepen link. Visit https://codepen.io/gaurav5430/pen/xOEXzG/ for more details.

console.log is now being executed with keypress (please verify if your logic is functioning correctly)

You will need to click once on the slider to bring it into focus (alternatively, use the keyboard to focus)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through a HTML email Listserv with a click event scrolling feature

I am looking to create an interactive HTML email with a link that can scroll the recipient's browser to a specific section within the email. I am considering using Javascript and jQuery for this functionality. Can someone guide me on how to implement ...

javascriptjqueryhtmlcss

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Using Javascript and JQuery to display the current date upon the initial page load, then preserving the date when navigating to different

When using Bootstrap's Datepicker, I encountered a scenario where I need the current page to load when a user first visits the page. However, if the user selects a different date and then navigates to another page, I want the Datepicker to retain the ...

javascriptjqueryhtmldatepickerbootstrap-4

Express is having trouble routing Angular's "/" route

My goal is to display a home view using Express/Angular. When accessing the root URL ('/'), I want a specific view to load. Currently, when navigating to http://localhost:3000, only an empty page with <!-- ngView: --> is displayed. However ...

node.jsangularjsexpress

The view in Angular JS is not displaying the latest updates as expected

I recently encountered a problem in AngularJS where the view is not updating correctly when the model value changes. It seems to be an intermittent issue where instead of displaying the new model value, it appends the old and new values together. Upon inv ...

javascriptangularjsangular-ui-routerapplydigest

Reliable drop-down box is not functioning properly

I am new to AJAX and I came across a solution for my issue on this page, but I am having trouble getting it to work. I want the input #precio to change when I select an option in the select #producto. This is the code I have: <form action="actualizar ...

phpjqueryajaxselect

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

What is the best way to populate a text field in AngularJS with multiple selected values?

Seeking assistance with a dynamic text field value that changes based on an AngularJS post request. I am looking to modify this value through multiple selected options. Here is the HTML code: <tr ng-repeat="opt in myData"> <td> & ...

javascriptjqueryangularjs

Nested checkbox table toggle/Select-Deselect

I have created a page that includes a nested table with checkboxes for selecting all the table cells <td>, as well as checkboxes for each individual table cell <td>. My goal is to: CheckAll checkbox should be able to check/uncheck all the pa ...

javascriptjquerycheckbox

Arranging the picture pieces in various positions

I have recently combined three logo images into a single PNG format file to reduce the number of server requests and improve loading speed. To position the entire image, I can use absolute attributes. For example: div.absolute { position: absolute; t ...

javascripthtmlcssbootstrap-4

Ways to determine if the mouse is positioned at the bottom of a div area

I have multiple sections and I am trying to change the mouse cursor when it is within 200px of the bottom of each section. Although I used the code provided, it only seems to work for the first section. The e.pageY value is not being reset in subsequent s ...

javascriptjquery

Using AngularJS to implement a clickable functionality within a directive

Currently, I am in the process of implementing a drag-and-drop directive. When an element is dropped, I am adding a copy of that element to my div and appending the ng-click attribute to it in this manner: copy.append('<button class="close" ng-cli ...

javascriptjqueryangularjsdirective

Tips for locating the index while performing a drag and drop operation between two different containers

Can anyone help me figure out how to determine the exact index of an item when performing a jQuery drag and drop between two containers? I'm having trouble identifying the correct index, especially when it's dropped outside of its original contai ...

javascriptjqueryruby-on-rails-3jquery-ui-sortable

How to dynamically deactivate dates in a jQuery datepicker

For my current project, I need to implement a feature where the user can select a hotel, arrival date, and departure date. Upon selecting the hotel, I have to display the unavailable dates of the hotel in the jQuery datepicker as disabled. This is the Jav ...

jqueryajaxjquery-ui

Establish the API URL according to the configuration settings in the Web.config file

In the Angular application I inherited, the API URL is defined as a constant variable. While it works, it's tedious to change the variable value every time I need to switch between deployment, testing, and development APIs. Is there a way for me to a ...

c#.netangularjs

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

javascripthtmljquerycssanimate.css

Guide on how to store multiple checkbox values in an SQL Server database

In the educational system, students are able to select multiple courses. Each course may have several students enrolled in it. While it is possible to choose and save one lesson to the database, there is uncertainty on how to handle multiple lessons. Any a ...

c#angularjssql-serverasp.net-mvccheckboxlist

Is it necessary for the Angular route URL to match the Node Express route in order to communicate with the backend?

Angular: I have a question regarding the URLs in my Angular route and backend. In Angular, the URL is '/auth/login', while on the backend it's just '/login'. Surprisingly, everything works, but I'm curious as to how the fronte ...

angularjsexpresspostroutes

How do I invoke the month function in Fullcalendar?

I'm currently utilizing the fullcalendar plugin and I'm looking to customize my calendar so that it initially loads on June by default. I found a resource that might be helpful: However, I am not very proficient in JavaScript and the instruction ...

javascriptjqueryjquery-pluginsfullcalendar

RequireJS in use with .NET Angular

I set up a fresh ASP.NET Empty Web Application using Visual Studios 2013. Within this project, I have an angular application organized in the following directory structure: ├───TestProject │ ├───index.html │ ├───package.jso ...

asp.netangularjsnpmrequirejsgoogle-distancematrix-api