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

Reply
 
Thread Tools Display Modes
Old 02-21-2018, 12:31 PM   #1
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 280
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
Old 02-21-2018, 02:07 PM   #2
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 280
Default

Quote:
Originally Posted by CarlSeiler View Post
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?
Can't use animate() colors or font weight in jQuery, apparently. However, color can be done with jquery-color.js. I think I might have a direction to go here. Looking into using a combination of these techniques.

Results are at: https://codepen.io/lcarlseiler/pen/xYzxvE

I don't really like the way the colors fade, but the boldness just drops. Apparently, it's nigh impossible to transition from one font weight to another using javascript. Oddly, I was able to do this using CSS and the transitions, although admittedly not very smooth.
CarlSeiler is offline   Reply With Quote
Old 02-22-2018, 01:05 PM   #3
terrie
Staff
 
Join Date: Oct 2004
Posts: 9,216
Default

Can't help you with the code--my html'ing is ancient...'-}}--but hopefully someone will pop in with advice. Using FF (old version, 24), I took a look at each example--had to allow cloudflare.com in Request Policy to see the results (or non-result as the case may be). It's pretty nifty...I kind of like that the colors fade because it makes it easier to see/confirm the change...


Terrie
terrie is offline   Reply With Quote
Reply

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 10:36 AM.


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