CODEWITHSUNDEEP
javascriptjquerycss
Tiny
Tiny

Reputation: 27909

Text colour highlighting using JavaScript

//<![CDATA[
var blinkText = $(".highlight");

var interval = setInterval(function() {
  blinkText.toggleClass("highlightRed");
}, 500);
//]]>
.highlight {
  -webkit-transition: background 1.0s ease-in-out;
  -ms-transition: background 1.0s ease-in-out;
  transition: background 1.0s ease-in-out;
}
.highlightRed {
  color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="highlight" style="font-weight: bolder; font-size: 33px; color: #00F">&rarr;</span>

JSFiddle:

The above code is expected to make the given arrow blink according to the interval given but it does not. How to make the arrow change colour with respect to the interval given?

Upvotes: 1

Views: 67

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39392

You need to change following things to make your code work.

  1. Attach jQuery to your web page.
  2. Use your JavaScript code in inside $(function() { ... }); code so that it founds elements in DOM
  3. Move your inline styles to the stylesheet attached.
  4. Styles of highlightRed class should come after styles of .highlight in stylesheet.

Note: no need to use !important in your styles. It should be avoided as much as possible.

$(function() {
  var blinkText = $(".highlight");

  var interval = setInterval(function () {
      blinkText.toggleClass("highlightRed");
  }, 500);
});
.highlight {
    -webkit-transition: background 1.0s ease-in-out;
    -ms-transition: background 1.0s ease-in-out;
    transition: background 1.0s ease-in-out;
    font-weight: bolder;
    font-size: 33px;
    color: #00F;
}

.highlightRed {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="highlight">&rarr;</span>

Upvotes: 2

Dhara Parmar
Dhara Parmar

Reputation: 8101

Just add !important in color:red:

.highlightRed {
    color: red !important;
}

OR

IF you dont want to use !important, as !important id not a good practise just do it:

1) Remove inline css from span and add that style into any class called custom:

<span class="highlight custom">&rarr;</span>

.custom {
   font-weight: bolder; font-size: 33px; color: #00F;
}

2) Define highlightRed css class like this:

span.highlightRed {
    color: red;
}

Upvotes: 0

Jose Bernalte
Jose Bernalte

Reputation: 177

.highlightRed {
    color: red !important;
}

Upvotes: 0

Related Questions