Jquery Question posted in
The official Jquery Api Documentation can be found here.

Highlight text without JQuery

I’m not good at JavaScript and I found a snippet in order to highlight text using JQuery Color. It conflicts with Lightbox2 and I want to convert the snippet to JavaScript. Here’s my code:

function highlight(elemId){
  var elem = $(elemId);
  elem.css("backgroundColor", "#ffffff"); // hack for Safari
  elem.animate({ backgroundColor: '#ffffaa' }, 0);
  setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
}

if (document.location.hash) {
  highlight(document.location.hash);
}
$('a[href*="#"]').click(function() {
  var elemId = '#' + $(this).attr('href').split('#')[1];
  requestAnimationFrame(highlight(elemId));
});

How can I convert the code from JQuery to JavaScript?

Tags:

2

Answers


  1. 0

    Here is all the JavaScript you wanted.

      function highlight(elemId) {
  var elem = document.querySelector(elemId);

  // Remove leading #
  elemId = elemId.slice(1);

  // Set initial background color instantly
  elem.style.transition = "background-color 0s";
  elem.style.backgroundColor = "#ffffaa";

  // Trigger reflow
  elem.offsetHeight;

  // Set transition duration for subsequent changes
  elem.style.transition = "background-color 3s";
  elem.style.backgroundColor = "#ffffff";

  setTimeout(function() {
    elem.style.backgroundColor = "#ffffff";
  }, 1000);
}

if (document.location.hash) {
  var elemId = document.location.hash.slice(1); // Remove leading #
  highlight(elemId);
}

document.querySelectorAll('a[href*="#"]').forEach(function(link) {
  link.addEventListener('click', function() {
    var elemId = '#' + this.getAttribute('href').split('#')[1];
    highlight(elemId);
  });
});
    Login or Signup to reply.
  2. 0

    You don’t need JavaScript if you need to apply once a highlight as long as the element is part of the pseudo-class :target

    :target {
  animation: highlight 3s;
}

@keyframes highlight {
  0%   { background: #ffffaa; }
  100% { background: initial; }
}
    <a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<h2 id="foo">Foo</h2>
<h2 id="bar">Bar</h2>

    Otherwise, yes, JavaScript can help to achieve the desired goal.
    Make sure to use (just like in the example above) a CSS class that will trigger CSS animation by using classList.add and classList.remove once the animation terminates.

    const highlight = (selector) => {
  document.querySelectorAll(selector).forEach(elSelected => {
    elSelected.classList.add("highlight");
    elSelected.addEventListener("animationend", () => {
      elSelected.classList.remove("highlight");
    }, {once: true});
  });
};

document.querySelectorAll(`a[href*="#"]`).forEach(elAnchor => {
  elAnchor.addEventListener("click", () => {
    const selectorId = elAnchor.getAttribute("href").match(/#.+$/)[0];
    highlight(selectorId);
  });
});

// You can also use the function with any selector like:
// highlight("h2");
    .highlight {
  animation: highlight 3s;
}

@keyframes highlight {
  0%   { background: #ffffaa; }
  100% { background: initial; }
}
    <a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<h2 id="foo">Foo</h2>
<h2 id="bar">Bar</h2>

    Find out more about the methods and topics you want to research on MDN

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search