{"id":883,"date":"2020-06-23T12:08:05","date_gmt":"2020-06-23T16:08:05","guid":{"rendered":"http:\/\/tech.creed3.com\/?p=883"},"modified":"2020-06-23T12:08:05","modified_gmt":"2020-06-23T16:08:05","slug":"get-attention-with-timed-text-alteration-using-javascript-and-css","status":"publish","type":"post","link":"https:\/\/tech.creed3.com\/?p=883","title":{"rendered":"Get Attention With Timed Text Alteration using Javascript and CSS"},"content":{"rendered":"

One of the many sites I work on is a genealogy site for Breathitt County Kentucky<\/a>.  It’s a simple informational site using only HTML, javascript and CSS.  No server side scripting available.  It’s been a good walk back in time for me as I’ve become so accustomed (read “dependent”) on doing everything server side with PHP.  Recently an update “demanded” some means of calling attention to it without being too annoying or flashy and also without using an image as there was simply no room for it.  It also needed to load fast.  Enter javascript and CSS.<\/p>\n

I admittedly don’t utilize javascript very often.  I really dug my heels into it early on (late 1990’s) but the frustration of varied browser support made me abandon it almost entirely.  I much prefer server side scripting as it’s more controlled and every browser ends up with the same thing.  I have dipped a toe or two into ajax over the past couple of years and do really like using it.  But in this application, I just needed a little attention getting thing.<\/p>\n

In this case it’s for a new page \/ feature on the site and I wanted to call attention to the menu link for it.  There is no room for a simple “NEW” image without changing the already wide layout and making it wider.  That would be simple.  However many of the users for this site are seniors who may not have newer computers with modern browsers or monitors that can properly display a wide format.  What I settled on is a simple and constant toggling between the actual link name to a red, bold text “NEW”.  I spent a little time searching for such a script and came up empty handed so I needed to write it myself.<\/p>\n

The javascript is pretty simple and basic:<\/p>\n

<script>\r\nwindow.onload = function(){\r\n\tvar $newtext = document.getElementById('new').innerHTML;\r\n\tsetInterval(() => {\r\n\t\tsetTimeout(function(){\r\n\t\t\tdocument.getElementById('new').innerHTML= $newtext;\r\n\t\t}, 1500);\r\n\t\tdocument.getElementById('new').innerHTML='. . . N E W . . .<\/span>';\r\n\t}, 10000);\r\n}\r\n<\/script><\/code><\/pre>\n
You need to wrap it in a function that loads after the entire page has finished loading otherwise there’s no chance of being able to get the actual text from within the span tags that you are wanting to call attention to.  Once you have it in memory ($newtext) then we run a constantly iterating timing function using setInterval(), and within it a setTimeout() function.  Between the two you are able to change the text on screen using document.getElementById().innerHTML.  In this case I’m not only replacing the text but also adding an additional span tag so I can add some additional CSS to the “NEW” attention getting text.  Since the span which surrounds the new link text is within the hyperlink tag, even while the text is changed to “NEW” the link will still function.  All are really basic commands any browser will support except possibly the most ancient versions.<\/p>\n
The only remaining thing to do is place your span tags around the text you wish to call attention to.  In this case it is a menu link:<\/p>\n
< a href=\"mypage.html\" >< span id=\"new\" >Research Requests< \/span >< \/a ><\/code><\/pre>\n
Note: ignore the spaces after the < and before the > in the code above.  Apparently WordPress doesn’t want to deal with this as code where a hyperlink is concerned for some reason and I don’t have the time to spend forcing the issue.<\/p>\n
Here it is in action.
\n