javascript blink in innerHTML

crmpicco · February 22nd, 2006, 06:05 AM

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?

Code:

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 + "." + 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>

www.crmpicco.co.uk

crmpicco · February 22nd, 2006, 08:19 AM

maybe a better way to put it is

Code:

    time.innerHTML = time.innerHTML + "." + theMinuten + "&nbsp;" + dayArr[day] + ",&nbsp;" + monthArr[month] + "&nbsp;" + daym + ",&nbsp;" + year;

how can i make the 'dot' or 'fullstop' blink? [bold]"."[/bold]

Thanks.

Picco

www.crmpicco.co.uk

ChrisScott · February 23rd, 2006, 05:47 AM

If you create your dot within a tag of it's own, you could apply your blink method to that.

HTH,

Chris

crmpicco · February 23rd, 2006, 10:36 AM

yeah, i tried that chris

Code:

"."

its just basically to make it look as if the clock is ticking.........

www.crmpicco.co.uk

ChrisScott · February 23rd, 2006, 11:34 AM

You need to call the call the blink() method after you update the innerHTML to rebuild the array of tags getting blinked.

HTH,

Chris

crmpicco · March 10th, 2006, 06:21 AM

unforunately IE doesnt support the javascript blink method

www.crmpicco.co.uk

ChrisScott · March 10th, 2006, 10:31 AM

Works fine for me. Like I said you just need to call blink() after you add the innerHTML e.g.

Code:

<a href="#" onclick="document.getElementById('myDiv').innerHTML = 'I BLINK!!!';blink();">add blinking innerHTML</a>
...    
<div id="myDiv"></div>

crmpicco · March 16th, 2006, 01:41 PM

thanks Chris, i'll give it a try and get back to you

www.crmpicco.co.uk

crmpicco · April 3rd, 2006, 06:38 AM

yeah that worked fine chris!

www.crmpicco.co.uk
www.ie7.com