Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table.

<table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)">
                          <tr ng-repeat="fd in getFullDayDate track by $index"
                          ng-click="getHorraire(fd.myDate,$index,1)"
                          style="cursor:pointer" ng-model="pickDateRow"
                          ng-class="{activeLink: $index===selectedIndex, weekend: fd.dayName=='Samedi'|| fd.dayName=='Dimanche'}">
                          <td style="font-size:14px;" id="{{fd.$index}}"> {{fd.fullDate}}, 2018</td>
                          </tr>
                          <tr><td style="height:80px;"></td></tr>
                      </table>

Assuming today's date is 30/03/2018, I noticed that the 30th date is at the bottom of the table and requires manual scrolling to view it.

Is there a way to automatically scroll to the current date?

jqueryhtmlcssangularjs

Answer №1

Following @Bryan's suggestion, you can generate an id for the current date and utilize anchor-scroll to navigate to it.

 <div ng-repeat="item in dateArray">
    <span id="{{(item.getDate()==today.getDate())?'scrollDate':''}}">
        {{item | date}}
    </span>
 </div>

In your controller, remember to include$location and $anchorScroll.

Here is a functioning jsfiddle link for reference.

PLEASE NOTE: $anchorScroll does not facilitate smooth scrolling or work with ngAnimate. For smooth scrolling, consider using a third-party directive.

Source for additional details:

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

I'm having trouble getting $(this) to save in local storage. I want to add a class to $(this) and have it still there even after a

$("ul").on("click" , "li.afterdone" , function(event){ $(this).toggleClass("done") }); Here is the code snippet I've been working on: I am trying to figure out how to make the 'done' class persist on a specific li.afterdone element e ...

jquerylocal-storagethisaddclass

How come my audio element in HTML refuses to play once I adjust its volume setting?

I'm currently working through a React tutorial and I've encountered an issue with my component. I have implemented an audio HTML tag in the component, with its volume controlled by an input from another React component. However, despite setting u ...

javascripthtmlreactjs

Is there a way to efficiently load POST data into SimpleXML?

I am facing a challenge in posting XML data from a textarea input to PHP for parsing and generating an output table. Despite trying various methods, none seem to be yielding results. My current approach is as follows: jQuery('#btnRegistrarXML' ...

phpjqueryajaxsimplexml

Fading colored images and backgrounds using Javascript

Although js and html are not my strong points, I am attempting to create two simple effects on a single page. As the user scrolls down the page, I want the background image or color to change as different divs come into view and then move off the screen. ...

javascriptcssfadein

Assistance with Collision Detection in HTML5 Canvas using JavaScript

Attempting to create a platformer game using HTML5 and the canvas feature. I managed to implement collision detection with rectangles, but encountered issues when adding multiple rectangles. I have a function that adds new objects to an array with attribut ...

javascripthtmlcanvascollision-detection

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

htmlcssbootstrap-4

Make the height of the CSS div fill the remaining space and allow scrolling once the maximum height of the screen is reached

I've scoured the internet high and low for a solution to my problem, but I just can't seem to find anything that fits my needs perfectly. The answers I have come across are either outdated or not quite what I'm looking for. I'm really h ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Enhancing a Pie Chart Dynamically with Ajax using Highcharts

I need assistance with updating the data for the pie chart when a list item is clicked. The issue arises when using dynamic values from $cid in data.php. For example, user_student.cid = 1 works correctly, but if I use user_student.cid = $cid, it doesn&apos ...

javascriptphpjqueryajaxhighcharts

Utilize Fullpage.js afterSlideLoad event to repeat animations across multiple slides

Can anyone help me figure out what I'm doing wrong here? I'm trying to apply my slide animations to each slide without having to manually copy and paste for each index. The console log is working for every slide except for the first one (0), bu ...

jqueryanimationindexingfullpage.js

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

Revise tax classification for international customers of the company in WooCommerce

I am currently facing an issue in WooCommerce where I need to set a different tax class for company users with billing addresses outside of Germany. Normally, the tax rate is always 19%, but in this specific case, I require it to be set at 0%. To achieve t ...

phpjqueryajaxwordpresswoocommerce

inserting picture within the code

Looking for some feedback on this: I decided to use a third-party image host to create the code (I've used them in the past). However, when I added the code to my page where I intended it to be (after verifying in Google Inspect), the image does not a ...

htmlimage

How are the script name and script file connected in WordPress enqueuing?

When adding a jQuery script to the function.php file using the enqueue method, how does the script name relate to the actual file that contains the jQuery code? Is the script name arbitrary, or is it derived from either the file name or the actual script w ...

javascriptjquerywordpress

In Pure JavaScript, an HTML element is added every time the click event is triggered

Hey everyone, I'm facing a small issue and I could use some help fixing it. I need to implement an onclick event that adds HTML code every time it's clicked. I am hesitant to use innerHTML due to its potential risks. Here is the code snippet: bu ...

javascripthtml

A flex container containing two divs each with a white-space:nowrap element set at 50% width

How can I create a parent div that contains two child divs, each with a width of 50% that adjusts based on content? The issue arises when one of the child divs has an h3 element with white-space:nowrap;, causing it to exceed the 50% width. I attempted to ...

htmlcssflexbox

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Issue with passing parameter values in MVC Html.ActionLink

Currently, I am experimenting with MVC for a demonstration and have managed to put together some components. However, I am encountering difficulties with an Html.ActionLink. The goal is to display a series of dropdown lists to the user that must be selecte ...

javascriptjqueryasp.net-mvc

Creating dynamic input forms in PHP

New to PHP and seeking guidance! I'm in the process of creating a photography website and encountering an issue with a specific page. Essentially, I need this page to display a form with a varying number of inputs. The goal is to have a dynamic visua ...

javascriptphphtmlforms

Utilizing jQuery mobile for seamless integration with PhoneGap in Android app development

Currently, the Google Maps based jQuery Mobile application is functioning well on browsers. However, I am encountering difficulties in packaging it as an android application through PhoneGap. When attempting to do so, only plain html without any styling or ...

androidjqueryjquery-mobilecordova

Tips for setting up styles for h:panelgrid in JSF

When using a simple h:panelGrid to display a table, how can I specify styles for the table to enhance its appearance? I have been researching online but am feeling overwhelmed by all the information available. <h:panelGrid id="panel" columns="2" cellp ...

cssjsfjsf-2