DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 02-21-2018, 12:31 PM   #1
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 276
Default Highlighting text based on event

Hi,

I want an event to trigger text to immediately change to red and bold, then slowly transition back to the original formatting.

I'm using Bootstrap 3 and jQuery. To do this, my idea was to have two different classes. One .highlighted and one normal (in this case .infonumber). The classes are formatted using CSS:

Code:
.highlighted
 {
   color: #F33 !important;
   font-weight: bold !important;
 }
.infonumber
{
  color: #33F;
  font-weight: normal;
  transition: all 3s linear;
}
The idea is that when I change the span to .highlighted it snaps to red, and when it is changed back to .infonumber, it transitions back using the 3s linear. Unfortunately, it doesn't appear to do anything at all. I thought maybe this was because the change back to infonumber class was happening too fast, so I tried chaining a promise in there. That doesn't help. However, if I stick something in there that stops the process (like an alert), it is clearly changing to red/bold correctly, then changing back.

This CodePen https://codepen.io/lcarlseiler/pen/eVMjym shows how it currently does not work. This CodePen https://codepen.io/lcarlseiler/pen/qxoLmo shows how it works when I insert an alert in there to break it up.

I hope you understand the effect I'm looking for.

Question is, do I need to be using something else, like jQuery's animate() and a callback? or do I need to be making this simpler?
CarlSeiler is offline   Reply With Quote
 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Yellow felt pens for highlighting text Andrew B. General Publishing Topics 25 02-03-2008 10:14 PM
Monthly Event Calendar dthomsen8 Web Site Building & Maintenance 5 02-14-2007 04:01 AM
Topic Based design dacoyle Web Site Building & Maintenance 10 12-01-2005 07:25 PM


All times are GMT -8. The time now is 12:59 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Contents copyright 2004–2018 Desktop Publishing Forum and its members.