Page 1 of 1

Realy slow load time in IE but not in FireFox.

Posted: Tue Feb 10, 2009 12:45 pm
by thespikeyone
Hi all,

I am writing some code that seems to be simple, but I am running into a problem where IE(7.0.5730) takes 5-8 seconds to load, but FF(3.06) is almost instant. What confuses me even more is the fact that PHP is processed server side, so the processing should take longer when accessed by IE than by FireFox. So that leaves me to believe that it is not actually the PHP processing that is taking a long time, it is the interpretation of the HTML by the browser that is getting hung up, even though the status bar says "waiting for http://....

I think I have answered my own question here, but if anyone can confirm this I would appreciate it. Please let me know if you want me to post my code. Basically I am using PHP to dynamically create aprox. 600 divs each with an onclick event and some style information, but no images.

Re: Realy slow load time in IE but not in FireFox.

Posted: Tue Feb 10, 2009 4:16 pm
by mbdigital
Hi what's the url for your problem site?

Re: Realy slow load time in IE but not in FireFox.

Posted: Tue Feb 10, 2009 4:45 pm
by thespikeyone
Hey Mike,

Thanks forgetting back to me. Unfortunately I don't have it up on a public domain. Its part of my companies intranet. I have tested it with multiple computers accross the domain as well as in multiple browsers. Only IE (at least versions 6 and 7) have an issue with it.

If I remove the following code from my page, the issue goes away.

Code: Select all

 
<div id="Container">
    <?php
        $topCtr = 0;
        for ($i = 0; $i<24; $i++){
            echo '<div id="timeRow" style="top:'.($topCtr) .'px;">'.getHour($i).'</div>';
            echo '<div id="timeRow" style="top:'.($topCtr += $rowHeight) .'px;"></div>';
            echo '<div id="timeRow" style="top:'.($topCtr += $rowHeight) .'px;"></div>';
            echo '<div id="timeRow" style="top:'.($topCtr += $rowHeight) .'px;"></div>';        
            echo '<div id="separator" style="top:'.($topCtr += $rowHeight + $separatorHeight) .'px;"></div>';
            $topCtr += $separatorHeight;            
        }?>
    </div>
    <?php
    for ($x=0; $x<$numSchedules; $x++){ 
        echo'<div id="scheduleColumn" style="left:'.($scheduleColumn_left + ($x*$scheduleColumn_fullWidth)).'px;width:'.$scheduleColumn_width.'px;">    ';
            $topCtr = 0;
            for ($i = 0; $i<24; $i++){
                echo    '<div id="scheduleRow"  style="top:'.($topCtr).'px;">
                    <div id="c'.$x.''.$i.'00" 
                    style="position:absolute; width:100%; height:100%;" 
                    onmouseover="highlight(\'c'.$x.''.$i.'00\')" 
                    onmouseout="removeHighlight(\'c'.$x.''.$i.'00\')"
                    onclick="alert(\'col_'.$x.'_at_'.$i.':00\');"></div>
                </div>';
                echo    '<div id="scheduleRow"  style="top:'.($topCtr += $rowHeight).'px; border-top:'.$bgColor.' 1px solid;">
                    <div id="c'.$x.''.$i.'15" style="position:absolute; width:100%; height:100%;"
                    onmouseover="highlight(\'c'.$x.''.$i.'15\')" 
                    onmouseout="removeHighlight(\'c'.$x.''.$i.'15\')"               
                    onclick="alert(\'col_'.$x.'_at_'.$i.':15\');"></div>            
                </div>';
                echo    '<div id="scheduleRow"  style="top:'.($topCtr += $rowHeight).'px; border-top:'.$bgColor.' 1px solid;">
                    <div id="c'.$x.''.$i.'30" style="position:absolute; width:100%; height:100%;"
                    onmouseover="highlight(\'c'.$x.''.$i.'30\')" 
                    onmouseout="removeHighlight(\'c'.$x.''.$i.'30\')"               
                    onclick="alert(\'col_'.$x.'_at_'.$i.':30\');"></div>            
                </div>';
                echo    '<div id="scheduleRow"  style="top:'.($topCtr += $rowHeight).'px; border-top:'.$bgColor.' 1px solid;">
                    <div id="c'.$x.''.$i.'45" style="position:absolute; width:100%; height:100%;" 
                    onmouseover="highlight(\'c'.$x.''.$i.'45\')" 
                    onmouseout="removeHighlight(\'c'.$x.''.$i.'45\')"               
                    onclick="alert(\'col_'.$x.'_at_'.$i.':45\');"></div>            
                </div>';
                echo    '<div id="separator"    style="top:'.($topCtr += $rowHeight + $separatorHeight) .'px;"></div>';         
                $topCtr += $separatorHeight;            
            }
        echo '</div>';      
        }
    ?>
</div>
 

Re: Realy slow load time in IE but not in FireFox.

Posted: Tue Feb 10, 2009 5:55 pm
by Attero
That's a lot of data to be processed and rendered by the browser, especially in IE7 and previous versions. Fortunately, IE8 RC1 has been sped up quite a lot. Try it out.
You can get all the IE versions (3-6 and IE8 has IE7 mode) in stand-alone form if you are worried about not being able to revert your browser version. Search for MultipleIEs on Google.

It's probably all the HTML it needs to render. 600 odd divs with dynamic attributes everywhere can be harsh for the client to handle!

Re: Realy slow load time in IE but not in FireFox.

Posted: Wed Feb 11, 2009 2:32 pm
by thespikeyone
Thanks Attero,

Back to the drawing board, I'm sure I'll figure out a better way to do this.

Re: Realy slow load time in IE but not in FireFox.

Posted: Wed Feb 11, 2009 2:39 pm
by John Cartwright
Can you provide a sample (or entirity) of the generated output?

Re: Realy slow load time in IE but not in FireFox.

Posted: Wed Feb 11, 2009 10:53 pm
by thespikeyone
It generates 2700ish lines of HTML. Basically what I am doing is creating a calendar, similar to the google calendar - 5 days (columns) are displayed at a time. Each day has 24 hours (duhh) (which are the rows) and each hour has 4 divs (corresponding to 15 min each).
So that works out to 5 columns + (5 * 24rows) + (5* 24 * 4sections) = 605divs for the calendar and another 24 + (24 * 4) = 120 divs for the hours/minutes column along the side... So thats 725 divs plus I have a few others here and there for other things.

Just writing all that out has made me realize how extremely inefficient this is!


Here is some of the code the php file outputs:

Code: Select all

 
<div id="scheduleColumn" style="left:58px;width:200px;">    <div id="scheduleRow"   style="top:0px;">
                <div id="c0000" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0000')" 
                onmouseout="removeHighlight('c0000')"
                onclick="alert('col_0_at_0:00');"></div>
            </div><div id="scheduleRow" style="top:15px; border-top:#E6EDF7 1px solid;">
                <div id="c0015" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0015')" 
                onmouseout="removeHighlight('c0015')"               
                onclick="alert('col_0_at_0:15');"></div>            
            </div><div id="scheduleRow"     style="top:30px; border-top:#E6EDF7 1px solid;">
                <div id="c0030" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0030')" 
                onmouseout="removeHighlight('c0030')"               
                onclick="alert('col_0_at_0:30');"></div>            
            </div><div id="scheduleRow"     style="top:45px; border-top:#E6EDF7 1px solid;">
                <div id="c0045" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0045')" 
                onmouseout="removeHighlight('c0045')"               
                onclick="alert('col_0_at_0:45');"></div>            
            </div><div id="separator"   style="top:61px;"></div><div id="scheduleRow"   style="top:62px;">
                <div id="c0100" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0100')" 
                onmouseout="removeHighlight('c0100')"
                onclick="alert('col_0_at_1:00');"></div>
 
            </div><div id="scheduleRow" style="top:77px; border-top:#E6EDF7 1px solid;">
                <div id="c0115" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0115')" 
                onmouseout="removeHighlight('c0115')"               
                onclick="alert('col_0_at_1:15');"></div>            
            </div><div id="scheduleRow"     style="top:92px; border-top:#E6EDF7 1px solid;">
                <div id="c0130" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0130')" 
                onmouseout="removeHighlight('c0130')"               
                onclick="alert('col_0_at_1:30');"></div>            
            </div><div id="scheduleRow"     style="top:107px; border-top:#E6EDF7 1px solid;">
                <div id="c0145" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0145')" 
                onmouseout="removeHighlight('c0145')"               
                onclick="alert('col_0_at_1:45');"></div>            
            </div><div id="separator"   style="top:123px;"></div><div id="scheduleRow"  style="top:124px;">
                <div id="c0200" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0200')" 
                onmouseout="removeHighlight('c0200')"
                onclick="alert('col_0_at_2:00');"></div>
            </div><div id="scheduleRow" style="top:139px; border-top:#E6EDF7 1px solid;">
                <div id="c0215" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0215')" 
                onmouseout="removeHighlight('c0215')"               
                onclick="alert('col_0_at_2:15');"></div>            
            </div><div id="scheduleRow"     style="top:154px; border-top:#E6EDF7 1px solid;">
 
                <div id="c0230" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0230')" 
                onmouseout="removeHighlight('c0230')"               
                onclick="alert('col_0_at_2:30');"></div>            
            </div><div id="scheduleRow"     style="top:169px; border-top:#E6EDF7 1px solid;">
                <div id="c0245" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0245')" 
                onmouseout="removeHighlight('c0245')"               
                onclick="alert('col_0_at_2:45');"></div>            
            </div><div id="separator"   style="top:185px;"></div><div id="scheduleRow"  style="top:186px;">
                <div id="c0300" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0300')" 
                onmouseout="removeHighlight('c0300')"
                onclick="alert('col_0_at_3:00');"></div>
            </div><div id="scheduleRow" style="top:201px; border-top:#E6EDF7 1px solid;">
                <div id="c0315" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0315')" 
                onmouseout="removeHighlight('c0315')"               
                onclick="alert('col_0_at_3:15');"></div>            
            </div><div id="scheduleRow"     style="top:216px; border-top:#E6EDF7 1px solid;">
                <div id="c0330" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0330')" 
                onmouseout="removeHighlight('c0330')"               
                onclick="alert('col_0_at_3:30');"></div>            
            </div><div id="scheduleRow"     style="top:231px; border-top:#E6EDF7 1px solid;">
                <div id="c0345" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0345')" 
                onmouseout="removeHighlight('c0345')"               
                onclick="alert('col_0_at_3:45');"></div>            
            </div><div id="separator"   style="top:247px;"></div><div id="scheduleRow"  style="top:248px;">
 
                <div id="c0400" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0400')" 
                onmouseout="removeHighlight('c0400')"
                onclick="alert('col_0_at_4:00');"></div>
            </div><div id="scheduleRow" style="top:263px; border-top:#E6EDF7 1px solid;">
                <div id="c0415" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0415')" 
                onmouseout="removeHighlight('c0415')"               
                onclick="alert('col_0_at_4:15');"></div>            
            </div><div id="scheduleRow"     style="top:278px; border-top:#E6EDF7 1px solid;">
                <div id="c0430" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0430')" 
                onmouseout="removeHighlight('c0430')"               
                onclick="alert('col_0_at_4:30');"></div>            
            </div><div id="scheduleRow"     style="top:293px; border-top:#E6EDF7 1px solid;">
                <div id="c0445" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0445')" 
                onmouseout="removeHighlight('c0445')"               
                onclick="alert('col_0_at_4:45');"></div>            
            </div><div id="separator"   style="top:309px;"></div><div id="scheduleRow"  style="top:310px;">
                <div id="c0500" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0500')" 
                onmouseout="removeHighlight('c0500')"
                onclick="alert('col_0_at_5:00');"></div>
            </div><div id="scheduleRow" style="top:325px; border-top:#E6EDF7 1px solid;">
 
                <div id="c0515" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0515')" 
                onmouseout="removeHighlight('c0515')"               
                onclick="alert('col_0_at_5:15');"></div>            
            </div><div id="scheduleRow"     style="top:340px; border-top:#E6EDF7 1px solid;">
                <div id="c0530" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0530')" 
                onmouseout="removeHighlight('c0530')"               
                onclick="alert('col_0_at_5:30');"></div>            
            </div><div id="scheduleRow"     style="top:355px; border-top:#E6EDF7 1px solid;">
                <div id="c0545" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0545')" 
                onmouseout="removeHighlight('c0545')"               
                onclick="alert('col_0_at_5:45');"></div>            
            </div><div id="separator"   style="top:371px;"></div><div id="scheduleRow"  style="top:372px;">
                <div id="c0600" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0600')" 
                onmouseout="removeHighlight('c0600')"
                onclick="alert('col_0_at_6:00');"></div>
            </div><div id="scheduleRow" style="top:387px; border-top:#E6EDF7 1px solid;">
                <div id="c0615" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0615')" 
                onmouseout="removeHighlight('c0615')"               
                onclick="alert('col_0_at_6:15');"></div>            
            </div><div id="scheduleRow"     style="top:402px; border-top:#E6EDF7 1px solid;">
                <div id="c0630" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0630')" 
                onmouseout="removeHighlight('c0630')"               
                onclick="alert('col_0_at_6:30');"></div>            
            </div><div id="scheduleRow"     style="top:417px; border-top:#E6EDF7 1px solid;">
 
                <div id="c0645" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0645')" 
                onmouseout="removeHighlight('c0645')"               
                onclick="alert('col_0_at_6:45');"></div>            
            </div><div id="separator"   style="top:433px;"></div><div id="scheduleRow"  style="top:434px;">
                <div id="c0700" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0700')" 
                onmouseout="removeHighlight('c0700')"
                onclick="alert('col_0_at_7:00');"></div>
            </div><div id="scheduleRow" style="top:449px; border-top:#E6EDF7 1px solid;">
                <div id="c0715" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0715')" 
                onmouseout="removeHighlight('c0715')"               
                onclick="alert('col_0_at_7:15');"></div>            
            </div><div id="scheduleRow"     style="top:464px; border-top:#E6EDF7 1px solid;">
                <div id="c0730" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0730')" 
                onmouseout="removeHighlight('c0730')"               
                onclick="alert('col_0_at_7:30');"></div>            
            </div><div id="scheduleRow"     style="top:479px; border-top:#E6EDF7 1px solid;">
                <div id="c0745" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0745')" 
                onmouseout="removeHighlight('c0745')"               
                onclick="alert('col_0_at_7:45');"></div>            
            </div><div id="separator"   style="top:495px;"></div><div id="scheduleRow"  style="top:496px;">
                <div id="c0800" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0800')" 
                onmouseout="removeHighlight('c0800')"
                onclick="alert('col_0_at_8:00');"></div>
 
            </div><div id="scheduleRow" style="top:511px; border-top:#E6EDF7 1px solid;">
                <div id="c0815" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0815')" 
                onmouseout="removeHighlight('c0815')"               
                onclick="alert('col_0_at_8:15');"></div>            
            </div><div id="scheduleRow"     style="top:526px; border-top:#E6EDF7 1px solid;">
                <div id="c0830" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0830')" 
                onmouseout="removeHighlight('c0830')"               
                onclick="alert('col_0_at_8:30');"></div>            
            </div><div id="scheduleRow"     style="top:541px; border-top:#E6EDF7 1px solid;">
                <div id="c0845" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0845')" 
                onmouseout="removeHighlight('c0845')"               
                onclick="alert('col_0_at_8:45');"></div>            
            </div><div id="separator"   style="top:557px;"></div><div id="scheduleRow"  style="top:558px;">
                <div id="c0900" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0900')" 
                onmouseout="removeHighlight('c0900')"
                onclick="alert('col_0_at_9:00');"></div>
            </div><div id="scheduleRow" style="top:573px; border-top:#E6EDF7 1px solid;">
                <div id="c0915" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0915')" 
                onmouseout="removeHighlight('c0915')"               
                onclick="alert('col_0_at_9:15');"></div>            
            </div><div id="scheduleRow"     style="top:588px; border-top:#E6EDF7 1px solid;">
 
                <div id="c0930" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c0930')" 
                onmouseout="removeHighlight('c0930')"               
                onclick="alert('col_0_at_9:30');"></div>            
            </div><div id="scheduleRow"     style="top:603px; border-top:#E6EDF7 1px solid;">
                <div id="c0945" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c0945')" 
                onmouseout="removeHighlight('c0945')"               
                onclick="alert('col_0_at_9:45');"></div>            
            </div><div id="separator"   style="top:619px;"></div><div id="scheduleRow"  style="top:620px;">
                <div id="c01000" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01000')" 
                onmouseout="removeHighlight('c01000')"
                onclick="alert('col_0_at_10:00');"></div>
            </div><div id="scheduleRow" style="top:635px; border-top:#E6EDF7 1px solid;">
                <div id="c01015" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01015')" 
                onmouseout="removeHighlight('c01015')"              
                onclick="alert('col_0_at_10:15');"></div>           
            </div><div id="scheduleRow"     style="top:650px; border-top:#E6EDF7 1px solid;">
                <div id="c01030" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01030')" 
                onmouseout="removeHighlight('c01030')"              
                onclick="alert('col_0_at_10:30');"></div>           
            </div><div id="scheduleRow"     style="top:665px; border-top:#E6EDF7 1px solid;">
                <div id="c01045" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01045')" 
                onmouseout="removeHighlight('c01045')"              
                onclick="alert('col_0_at_10:45');"></div>           
            </div><div id="separator"   style="top:681px;"></div><div id="scheduleRow"  style="top:682px;">
 
                <div id="c01100" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01100')" 
                onmouseout="removeHighlight('c01100')"
                onclick="alert('col_0_at_11:00');"></div>
            </div><div id="scheduleRow" style="top:697px; border-top:#E6EDF7 1px solid;">
                <div id="c01115" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01115')" 
                onmouseout="removeHighlight('c01115')"              
                onclick="alert('col_0_at_11:15');"></div>           
            </div><div id="scheduleRow"     style="top:712px; border-top:#E6EDF7 1px solid;">
                <div id="c01130" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01130')" 
                onmouseout="removeHighlight('c01130')"              
                onclick="alert('col_0_at_11:30');"></div>           
            </div><div id="scheduleRow"     style="top:727px; border-top:#E6EDF7 1px solid;">
                <div id="c01145" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01145')" 
                onmouseout="removeHighlight('c01145')"              
                onclick="alert('col_0_at_11:45');"></div>           
            </div><div id="separator"   style="top:743px;"></div><div id="scheduleRow"  style="top:744px;">
                <div id="c01200" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01200')" 
                onmouseout="removeHighlight('c01200')"
                onclick="alert('col_0_at_12:00');"></div>
            </div><div id="scheduleRow" style="top:759px; border-top:#E6EDF7 1px solid;">
 
                <div id="c01215" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01215')" 
                onmouseout="removeHighlight('c01215')"              
                onclick="alert('col_0_at_12:15');"></div>           
            </div><div id="scheduleRow"     style="top:774px; border-top:#E6EDF7 1px solid;">
                <div id="c01230" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01230')" 
                onmouseout="removeHighlight('c01230')"              
                onclick="alert('col_0_at_12:30');"></div>           
            </div><div id="scheduleRow"     style="top:789px; border-top:#E6EDF7 1px solid;">
                <div id="c01245" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01245')" 
                onmouseout="removeHighlight('c01245')"              
                onclick="alert('col_0_at_12:45');"></div>           
            </div><div id="separator"   style="top:805px;"></div><div id="scheduleRow"  style="top:806px;">
                <div id="c01300" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01300')" 
                onmouseout="removeHighlight('c01300')"
                onclick="alert('col_0_at_13:00');"></div>
            </div><div id="scheduleRow" style="top:821px; border-top:#E6EDF7 1px solid;">
                <div id="c01315" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01315')" 
                onmouseout="removeHighlight('c01315')"              
                onclick="alert('col_0_at_13:15');"></div>           
            </div><div id="scheduleRow"     style="top:836px; border-top:#E6EDF7 1px solid;">
                <div id="c01330" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01330')" 
                onmouseout="removeHighlight('c01330')"              
                onclick="alert('col_0_at_13:30');"></div>           
            </div><div id="scheduleRow"     style="top:851px; border-top:#E6EDF7 1px solid;">
 
                <div id="c01345" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01345')" 
                onmouseout="removeHighlight('c01345')"              
                onclick="alert('col_0_at_13:45');"></div>           
            </div><div id="separator"   style="top:867px;"></div><div id="scheduleRow"  style="top:868px;">
                <div id="c01400" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01400')" 
                onmouseout="removeHighlight('c01400')"
                onclick="alert('col_0_at_14:00');"></div>
            </div><div id="scheduleRow" style="top:883px; border-top:#E6EDF7 1px solid;">
                <div id="c01415" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01415')" 
                onmouseout="removeHighlight('c01415')"              
                onclick="alert('col_0_at_14:15');"></div>           
            </div><div id="scheduleRow"     style="top:898px; border-top:#E6EDF7 1px solid;">
                <div id="c01430" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01430')" 
                onmouseout="removeHighlight('c01430')"              
                onclick="alert('col_0_at_14:30');"></div>           
            </div><div id="scheduleRow"     style="top:913px; border-top:#E6EDF7 1px solid;">
                <div id="c01445" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01445')" 
                onmouseout="removeHighlight('c01445')"              
                onclick="alert('col_0_at_14:45');"></div>           
            </div><div id="separator"   style="top:929px;"></div><div id="scheduleRow"  style="top:930px;">
                <div id="c01500" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01500')" 
                onmouseout="removeHighlight('c01500')"
                onclick="alert('col_0_at_15:00');"></div>
 
            </div><div id="scheduleRow" style="top:945px; border-top:#E6EDF7 1px solid;">
                <div id="c01515" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01515')" 
                onmouseout="removeHighlight('c01515')"              
                onclick="alert('col_0_at_15:15');"></div>           
            </div><div id="scheduleRow"     style="top:960px; border-top:#E6EDF7 1px solid;">
                <div id="c01530" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01530')" 
                onmouseout="removeHighlight('c01530')"              
                onclick="alert('col_0_at_15:30');"></div>           
            </div><div id="scheduleRow"     style="top:975px; border-top:#E6EDF7 1px solid;">
                <div id="c01545" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01545')" 
                onmouseout="removeHighlight('c01545')"              
                onclick="alert('col_0_at_15:45');"></div>           
            </div><div id="separator"   style="top:991px;"></div><div id="scheduleRow"  style="top:992px;">
                <div id="c01600" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01600')" 
                onmouseout="removeHighlight('c01600')"
                onclick="alert('col_0_at_16:00');"></div>
            </div><div id="scheduleRow" style="top:1007px; border-top:#E6EDF7 1px solid;">
                <div id="c01615" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01615')" 
                onmouseout="removeHighlight('c01615')"              
                onclick="alert('col_0_at_16:15');"></div>           
            </div><div id="scheduleRow"     style="top:1022px; border-top:#E6EDF7 1px solid;">
 
                <div id="c01630" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01630')" 
                onmouseout="removeHighlight('c01630')"              
                onclick="alert('col_0_at_16:30');"></div>           
            </div><div id="scheduleRow"     style="top:1037px; border-top:#E6EDF7 1px solid;">
                <div id="c01645" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01645')" 
                onmouseout="removeHighlight('c01645')"              
                onclick="alert('col_0_at_16:45');"></div>           
            </div><div id="separator"   style="top:1053px;"></div><div id="scheduleRow" style="top:1054px;">
                <div id="c01700" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01700')" 
                onmouseout="removeHighlight('c01700')"
                onclick="alert('col_0_at_17:00');"></div>
            </div><div id="scheduleRow" style="top:1069px; border-top:#E6EDF7 1px solid;">
                <div id="c01715" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01715')" 
                onmouseout="removeHighlight('c01715')"              
                onclick="alert('col_0_at_17:15');"></div>           
            </div><div id="scheduleRow"     style="top:1084px; border-top:#E6EDF7 1px solid;">
                <div id="c01730" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01730')" 
                onmouseout="removeHighlight('c01730')"              
                onclick="alert('col_0_at_17:30');"></div>           
            </div><div id="scheduleRow"     style="top:1099px; border-top:#E6EDF7 1px solid;">
                <div id="c01745" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01745')" 
                onmouseout="removeHighlight('c01745')"              
                onclick="alert('col_0_at_17:45');"></div>           
            </div><div id="separator"   style="top:1115px;"></div><div id="scheduleRow" style="top:1116px;">
 
                <div id="c01800" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01800')" 
                onmouseout="removeHighlight('c01800')"
                onclick="alert('col_0_at_18:00');"></div>
            </div><div id="scheduleRow" style="top:1131px; border-top:#E6EDF7 1px solid;">
                <div id="c01815" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01815')" 
                onmouseout="removeHighlight('c01815')"              
                onclick="alert('col_0_at_18:15');"></div>           
            </div><div id="scheduleRow"     style="top:1146px; border-top:#E6EDF7 1px solid;">
                <div id="c01830" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01830')" 
                onmouseout="removeHighlight('c01830')"              
                onclick="alert('col_0_at_18:30');"></div>           
            </div><div id="scheduleRow"     style="top:1161px; border-top:#E6EDF7 1px solid;">
                <div id="c01845" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01845')" 
                onmouseout="removeHighlight('c01845')"              
                onclick="alert('col_0_at_18:45');"></div>           
            </div><div id="separator"   style="top:1177px;"></div><div id="scheduleRow" style="top:1178px;">
                <div id="c01900" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01900')" 
                onmouseout="removeHighlight('c01900')"
                onclick="alert('col_0_at_19:00');"></div>
            </div><div id="scheduleRow" style="top:1193px; border-top:#E6EDF7 1px solid;">
 
                <div id="c01915" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01915')" 
                onmouseout="removeHighlight('c01915')"              
                onclick="alert('col_0_at_19:15');"></div>           
            </div><div id="scheduleRow"     style="top:1208px; border-top:#E6EDF7 1px solid;">
                <div id="c01930" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c01930')" 
                onmouseout="removeHighlight('c01930')"              
                onclick="alert('col_0_at_19:30');"></div>           
            </div><div id="scheduleRow"     style="top:1223px; border-top:#E6EDF7 1px solid;">
                <div id="c01945" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c01945')" 
                onmouseout="removeHighlight('c01945')"              
                onclick="alert('col_0_at_19:45');"></div>           
            </div><div id="separator"   style="top:1239px;"></div><div id="scheduleRow" style="top:1240px;">
                <div id="c02000" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02000')" 
                onmouseout="removeHighlight('c02000')"
                onclick="alert('col_0_at_20:00');"></div>
            </div><div id="scheduleRow" style="top:1255px; border-top:#E6EDF7 1px solid;">
                <div id="c02015" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02015')" 
                onmouseout="removeHighlight('c02015')"              
                onclick="alert('col_0_at_20:15');"></div>           
            </div><div id="scheduleRow"     style="top:1270px; border-top:#E6EDF7 1px solid;">
                <div id="c02030" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02030')" 
                onmouseout="removeHighlight('c02030')"              
                onclick="alert('col_0_at_20:30');"></div>           
            </div><div id="scheduleRow"     style="top:1285px; border-top:#E6EDF7 1px solid;">
 
                <div id="c02045" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02045')" 
                onmouseout="removeHighlight('c02045')"              
                onclick="alert('col_0_at_20:45');"></div>           
            </div><div id="separator"   style="top:1301px;"></div><div id="scheduleRow" style="top:1302px;">
                <div id="c02100" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02100')" 
                onmouseout="removeHighlight('c02100')"
                onclick="alert('col_0_at_21:00');"></div>
            </div><div id="scheduleRow" style="top:1317px; border-top:#E6EDF7 1px solid;">
                <div id="c02115" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02115')" 
                onmouseout="removeHighlight('c02115')"              
                onclick="alert('col_0_at_21:15');"></div>           
            </div><div id="scheduleRow"     style="top:1332px; border-top:#E6EDF7 1px solid;">
                <div id="c02130" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02130')" 
                onmouseout="removeHighlight('c02130')"              
                onclick="alert('col_0_at_21:30');"></div>           
            </div><div id="scheduleRow"     style="top:1347px; border-top:#E6EDF7 1px solid;">
                <div id="c02145" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02145')" 
                onmouseout="removeHighlight('c02145')"              
                onclick="alert('col_0_at_21:45');"></div>           
            </div><div id="separator"   style="top:1363px;"></div><div id="scheduleRow" style="top:1364px;">
                <div id="c02200" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02200')" 
                onmouseout="removeHighlight('c02200')"
                onclick="alert('col_0_at_22:00');"></div>
 
            </div><div id="scheduleRow" style="top:1379px; border-top:#E6EDF7 1px solid;">
                <div id="c02215" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02215')" 
                onmouseout="removeHighlight('c02215')"              
                onclick="alert('col_0_at_22:15');"></div>           
            </div><div id="scheduleRow"     style="top:1394px; border-top:#E6EDF7 1px solid;">
                <div id="c02230" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02230')" 
                onmouseout="removeHighlight('c02230')"              
                onclick="alert('col_0_at_22:30');"></div>           
            </div><div id="scheduleRow"     style="top:1409px; border-top:#E6EDF7 1px solid;">
                <div id="c02245" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02245')" 
                onmouseout="removeHighlight('c02245')"              
                onclick="alert('col_0_at_22:45');"></div>           
            </div><div id="separator"   style="top:1425px;"></div><div id="scheduleRow" style="top:1426px;">
                <div id="c02300" 
                style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02300')" 
                onmouseout="removeHighlight('c02300')"
                onclick="alert('col_0_at_23:00');"></div>
            </div><div id="scheduleRow" style="top:1441px; border-top:#E6EDF7 1px solid;">
                <div id="c02315" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02315')" 
                onmouseout="removeHighlight('c02315')"              
                onclick="alert('col_0_at_23:15');"></div>           
            </div><div id="scheduleRow"     style="top:1456px; border-top:#E6EDF7 1px solid;">
 
                <div id="c02330" style="position:absolute; width:100%; height:100%;"
                onmouseover="highlight('c02330')" 
                onmouseout="removeHighlight('c02330')"              
                onclick="alert('col_0_at_23:30');"></div>           
            </div><div id="scheduleRow"     style="top:1471px; border-top:#E6EDF7 1px solid;">
                <div id="c02345" style="position:absolute; width:100%; height:100%;" 
                onmouseover="highlight('c02345')" 
                onmouseout="removeHighlight('c02345')"              
                onclick="alert('col_0_at_23:45');"></div>           
            </div><div id="separator"   style="top:1487px;"></div></div>
 
and then that repeats 4 more times.