javascript blink in innerHTML

[crmpicco]

I have this setup to display the date in a <td>, however, as it is built with innerHTML can i still apply the blink method to it.
The code below doesnt work for the blinking.
But the JS blink functions and CSS works when i apply it to a font tag outwith the innerHTML?

function getTheDate(GMToffset)
{
var orgdate=new Date();
var year=orgdate.getYear();
if (year < 1000)
year+=1900;
var day=orgdate.getDay();
var month=orgdate.getMonth();
var daym=orgdate.getDate();
if (daym<10)
daym="0"+daym;
var dayArr=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthArr=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var time = document.getElementById("time");
var theDate = new Date();
var frmtedDate = theDate.getHours();
var GMTchange;

time.className = "font4";
if ((GMToffset!="0")&&(GMToffset!=null))
{
var oprtor = GMToffset.slice(0,1);
if(GMToffset.length>2)
{
GMTchange = GMToffset.slice(1,3);
}
else
{
GMTchange = GMToffset.slice(1,2);
}

var preFrmtedDate = theDate.getHours();

if(oprtor=="-")
{
frmtedDate = Number(parseFloat(preFrmtedDate)-parseFloat(GMTchange));
}
else if(oprtor=="+")
{
frmtedDate = Number(parseFloat(preFrmtedDate)+parseFloat(GMTchange));
}
}

var theMinuten = theDate.getMinutes();

if(parseFloat(frmtedDate)>24)
{
day = day+1;
daym = daym+1;
frmtedDate = parseFloat(frmtedDate)-24;
}
//alert("frmtedDate B4 = " + frmtedDate);
if(frmtedDate<10)
{
//alert("under 10");
var frmtedDate = "0"+frmtedDate;
//alert("frmtedDate formatted = " + theFrmtedDate);
//frmtedDate = Number(theFrmtedDate);
}
//alert("frmtedDate = " + frmtedDate);
if(parseFloat(theMinuten)<10)
{
theMinuten = "0"+theMinuten;
//theMinuten = parseFloat(theMinuten);
}
time.innerHTML = frmtedDate;
time.innerHTML = time.innerHTML + "<font id=dot class=blink>.</font>" + theMinuten + "&nbsp;" + dayArr[day] + ",&nbsp;" + monthArr[month] + "&nbsp;" + daym + ",&nbsp;" + year;

}

<script type="text/javascript">
<!--
var b_timer = null; // blink timer
var b_on = true; // blink state
var blnkrs = null; // array of spans

function blink() {
var tmp = document.getElementsByTagName("font");
if (tmp) {
blnkrs = new Array();
var b_count = 0;
for (var i = 0; i < tmp.length; ++i) {
if (tmp[i].className == "blink") {
blnkrs[b_count] = tmp[i];
++b_count;
}
}
// time in m.secs between blinks
// 500 = 1/2 second
blinkTimer(500);
}
}

function blinkTimer(ival) {
if (b_timer) {
window.clearTimeout(b_timer);
b_timer = null;
}
blinkIt();
b_timer = window.setTimeout('blinkTimer(' + ival + ')', ival);
}

function blinkIt() {
for (var i = 0; i < blnkrs.length; ++i) {
if (b_on == true) {
blnkrs[i].style.visibility = "hidden";
}
else {
blnkrs[i].style.visibility = "visible";
}
}
b_on =!b_on;
}
//-->
</script>

<script language="javascript">
window.onload=blink;
</script>

<style>
.blink {
font-size: 15px;
color: #000000;
display: inline;
}
</style>

:(

[Bill Posters]

How about simply using CSS?
.blink {
display: inline;
font-size: 15px;
color: #000;
text-decoration: blink;
}

[crmpicco]

but it seems i cant apply any class within innerhtml

[Bill Posters]

Of course you can.

e.g.
obj.innerHTML = "This word should <span class=\"blink\">blink<\/span>.";

You may simply need to write the date and time out in bits, adding the classes to the relevant part of the overall string.


It would appear that your code (as shown in your original post) is malformed.
You attempt to open a new script element without actually closing the previous one. (Given that you have two script elements back to back, you should place all that js within a single script element.)

In brief, what is it that you're trying to achieve? It seems an awful lot of js for what I imagine to be a relatively simply task.


Here's an example of a similar task I tested out a while back…
http://test.newplasticarts.co.uk/business-hours-refresher/

The javascript (http://test.newplasticarts.co.uk/business-hours-refresher/js.php) contains a little dynamic PHP, but you'll see from the scripting that it should be relatively simply to add classes to elements contained within a larger innerHTML string.

[crmpicco]

ah, remember blink doesnt work in IE as it does in FF though......
That link doesnt work in IE

[Bill Posters]

ah, remember blink doesnt work in IE as it does in FF though......
That link doesnt work in IE

I guess I shouldn't be surprised.
Perhaps it's time to ask yourself whether the blink effect is important enough to justify figuring out and adding a sizeable block of js in place of a more correct approach (i.e. CSS).

Given that blinking effects are recommended against in accessibility guidelines, I personally wouldn't put too much effort into devising a js method.
My personal view would be to use the quick, easy and correct CSS property and leave it at that - and categorise the fact that lesser browsers don't support it down to 'progressive enhancement'.

[brothercake]

IGiven that blinking effects are recommended against in accessibility guidelines, I personally wouldn't put too much effort into devising a js method.
I would go further - because blink is poor accessibility since it could conceivably trigger a seizure in someone who has photo-sensitive epilepsy - I would advise you not do anything, CSS based or otherwise, that causes text to blink.

What's the blink really for? Is it just a cute effect, in which case maybe you could acheive the same thing with a multi-colored word or something? Or is it to indicate strong emphasis, in which case <strong> styled from CSS would be the way to go.