cause a table row to blink when it is scrolled into view

After adding a smooth scroll animation to a page containing a table where I have a link to scroll one of the rows from another page, the specific row being scrolled is not very clear. I am looking for a way to make that row blink a few times after the scroll animation to ensure users know exactly where to look.

    html {
  scroll-behavior: smooth;
}

I recall seeing this done somewhere before with an arrow pointing at the section, but unfortunately, I cannot remember the website.

htmlcssbootstrap-4

Answer №1

Here's an illustrative example where I incorporated URI handling based on your feedback

Modify

const url = new URL("https://example.com/index.html?x=YOURIDHERE"); // new URL(location.href);

To be

const url = new URL(location.href);

in your actual webpage

window.addEventListener("load", function() {
  const url = new URL("https://example.com/index.html?x=YOURIDHERE"); // new URL(location.href);
  const tr = document.getElementById(url.searchParams.get("x"))
  if (tr) {
    tr.scrollIntoView();
    tr.classList.add("selected")
    setTimeout(function() {
      tr.classList.remove("selected")
    }, 4000);
  }
})
html {
  scroll-behavior: smooth;
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

tr {
  border: 3px solid purple;
}

@keyframes selected {
  from {
    background-color: red;
  }
  to {
    background-color: inherit;
  }
}

.selected {
  animation: selected 1s infinite;
}
<table>
  <tbody>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>
    <tr>
      <td>Row</td>
    </tr>

   <!-- additional rows truncated for brevity -->
   
</table>

Answer №2

Big thanks to Mplungjan for getting me 99% of the way there! I just made a small tweak to pull the parameter from the URL. You can use a link with a parameter for the section ID like 

https://example.com/index.html?x=YOURIDHERE

   function getParamsFromUrl() {
    var params = {};
    var pieces = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        params[key] = value;
    });
    return params;
}
window.addEventListener("load", function() {
  const targetRow = document.getElementById(getParamsFromUrl()["x"])
  targetRow.scrollIntoView();
  targetRow.classList.add("selected")
  setTimeout(function() {
    targetRow.classList.remove("selected")
  }, 4000)
})
html {
  scroll-behavior: smooth;
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

tr {
  border: 3px solid purple;
}

@keyframes selected {
  from { background-color: red;   }
  to   { background-color: inherit; }
}

.selected {
  animation: selected 1s infinite;
}
<table>
  <tbody>
    
    <tr id="1">
      <td>Row</td>
    </tr>
    <tr id="2">
      <td>Row</td>
    </tr>
    <tr id="3">
      <td>Row</td>
    </tr>
    <tr id="4">
      <td>Row</td>
    </tr>
    <tr id="5">
      <td>Row</td>
    </tr>
    <tr id="6">
      <td>Row</td>
    </tr>
    <tr id="7">
      <td>Row</td>
    </tr>
    <tr id="8">
      <td>Row</td>
    </tr>
    <tr id="9">
      <td>Row</td>
    </tr>
    <tr id="10">
      <td>Row</td>
    </tr>
    <tr id="11">
      <td>Row</td>
    </tr>
    <tr id="12">
      <td>Row</td>
    </tr>
    <tr id="13">
      <td>Row</td>
    </tr>
    <tr id="14">
      <td>Row</td>
    </tr>
    <tr id="15">
      <td>Row</td>
    </tr>
    <tr id="16">
      <td>Row</td>
    </tr>
    <tr id="17">
      <td>Row</td>
    </tr>
    <tr id="18">
      <td>Row</td>
    </tr>
    <tr id="19">
      <td>Row</td>
    </tr>
    <tr id="20">
      <td>Row</td>
    </tr>
    <tr id="21">
      <td>Row</td>
    </tr>
    <tr id="22">
      <td>Row</td>
    </tr>
</table>

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

Software communicating with the internet

What programming knowledge do I need to have in order to interact with the web using C++? For example, I want to create a program that automates sending invites to players on Yahoo Chess. How should I approach this task? ...

c++htmlflashbash

Tips for successfully implementing a basic JQuery code in Internet Explorer

Having trouble getting this to work on my website, especially in Internet Explorer. Check it out here: http://jsfiddle.net/b43hj/24/ Any tips on how to make it compatible with all browsers? Thank you edit - I've only used the code from the jsfidd ...

javascriptjqueryhtml

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...

javascripthtmlfunction

utilizing PHP and AJAX to showcase data in an HTML table

I'm new to AJAX and I want to display an HTML table that is generated from PHP when a generate button is clicked. Below is the code snippet in my HTML file: function showHint() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, C ...

phphtmlajax

Creating a contact form in WordPress that triggers a separate PHP file

I've been working on integrating a small contact form into the sidebar of my WordPress site. After moving the code from its original HTML file to the appropriate WordPress PHP files, everything seems to be functioning correctly except for the contact ...

phphtmlwordpressforms

Generate an embedded iframe displaying a linked code snippet

I manage an online store and once a courier has been dispatched, I send out an email to customers with tracking information for their shipments. To streamline this process, I have implemented an input field (Code provided below). In this field, when a us ...

javascripthtmljqueryajaxiframe

I noticed a random gap between the elements with no discernible explanation

<div id="colorscheme"> </div> <div id="content"> <div id="display_saved"> TEXT TEXT TEXT </div> Here is the HTML structure related to a particular document issue. CSS: #colorscheme{ width:25%; display:inline-blo ...

htmlcss

Retrieving information received from an XML HTTP request in node.js

Currently, I am transmitting text data from a textbox to a node.js express server using XMLHttpRequest: var text = document.getElementById("textBox").value; console.log(text); var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Fire ...

javascripthtmlnode.jsexpressxmlhttprequest

Tips for Optimizing Navigation with Jquery Integration

I have implemented a dynamic navigation system using jQuery, where I load the navigation from a separate nav.html file to avoid updating it on every page manually. However, I am facing an issue with targeting elements in the loaded navigation to make them ...

javascriptjqueryhtmlnavigation

Locate the HTML element using Selenium by identifying it with the `<td>` tag

I'm relatively new to test automation and am currently exploring the best method to locate an element by its <td> text, specifically in this case "Man pdr". I will include a visual reference for better understanding. My objective is to click on ...

htmlseleniumxpathautomation

What causes the border to trigger the appearance of a scrollbar due to an overflow?

The first image display a scrollbar, while the second one does not. It all comes down to the .tabulator CSS class and specifically the border property. How come only a 1px border impacts the scroll feature instead of affecting the entire content? https: ...

htmlcss

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Imagine having a canvas divided into a 15x10 32-pixel checkerboard grid. This setup looks like: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tileSize = 32; var xCoord var yCoord ...

javascriptjqueryhtmlcanvas

Align Text with Icon Using FontAwesome

Hey, I'm having a bit of trouble with something simple and it's driving me crazy. All I want to do is center the text vertically next to a FontAwesome icon. However, no matter what I try, I just can't seem to get it to work. I've looke ...

htmlcssfont-awesomevertical-alignment

My code seems to be malfunctioning

I'm attempting to conceal the chatname div. Once hidden, I want to position the chatid at the bottom, which is why the value 64px is utilized. However, I encountered an error stating The function toggle3(); has not been defined. <div id="chat ...

javascriptjquerycss

Eliminate php file extensions using .htaccess

Currently, I am developing a script and looking to change the links in the following way: www.mysite.com/sign-up.php to www.mysite.com/sign-up and www.mysite.com/profile.php?username=abc to www.mysite.com/profile/abc I have come across this code that ...

phpcss.htaccess

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

javascripthtmlcsssass

Displaying a full-page background color with specified height

Here is a straightforward CSS code snippet: body { background-color: #08407A; min-width: 1000px; height: 500px; } Unfortunately, this code does not function properly in Internet Explorer. While the background color displays correctly, I speci ...

css

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

javascripthtmlajaxdatatable