Styling Weekends

[rcpilot]

Is there a way to somehow apply CSS to Saturday and Sunday separately on the mini calendar? AKA - I want to apply an image border to the left and right of the main rows so I can round them off and comply with our original design. Applying a background to a row isn't really an option because it would mean removing the backgrounds of the cells themselves (besides all the other problems inherent in trying to style a table row). And applying a background to the table also runs into the same issue (although this may end up being my only cross-browser option). I have a working implementation using first-child/last-child, but full support for that across browsers is almost non-existant.

(I'm also trying to use a 'negative mold' png to subtract the areas I don't want and leave the rounded border, allowing default backgrounds and category backgrounds etc. to show through.)

http://familymag.lakenetwork.net/articles/ so you actually know what the hell I'm talking about, but this could be in any random state considering I'm currently proceeding with other bits I need to do. (Works right in browsers that support first-child/last-child right now, don't try with others unless you want to see it wrong. )

[Brian]

I see what you are trying to accomplish... But I'm not sure if you can do this without rolling your own CSS mods like you appear to be trying to do.

[rcpilot]

I tweaked some javascript snippets to work as pseudo-pseudo-selectors. (I'm capable enough in it, but javascript isn't my forte and I tend to shy away from it whenever I can. So, this may not be quite the optimal solution)

javascript:

<!--[if lte IE 7]>
<script type="text/javascript">
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

window.onload=function() {
    IEFirstLast();
}
function IEFirstLast() {
    rows = getElementsByClass('rows');
    
    for (var i = 0; i < rows.length; i++) {
        row = rows[i].getElementsByTagName('td');
        n = row.length - 1;
        row[n].className += ' lastchild';
        row[0].className += ' firstchild';
    }
}
</script>
<![endif]-->

CSS:

.rows > td:first-child  {
    background-image:url(minicalendarleft.png);
}
.rows td.firstchild    {
    background-image:url(minicalendarleft.png);
}
.rows > td:last-child {
    background-image:url(minicalendarright.png);
}
.rows td.lastchild {
    background-image:url(minicalendarright.png);
}

IE6 was erroring out when I tried to combine the two selectors, not sure what's going on there, but I think it's choking on the '>'. (And I've removed all my png compatibility code to just leave the meat.)

[ve9gra]

That is SLICK! A-1 on the job!

[rcpilot]

I'm not sure how safe this is considering I essentially hijack the AJAX request, but I realized I needed to find a way to drive this whenever the AJAX call was made to load a new month. Otherwise the changes are applied to your current month and the new month it loads is ignored. (And it seems to be working alright.) This is a bit more long winded and isn't necessarily for the feint of heart if you're really new to code.

This first part goes in the header above any EPC includes.

Javascript:

var xmlhttp;
try { 
    xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e) {}
window.onload=function() {
    IEFirstLast();
}

function IEFirstLast() {
/*@cc_on
@if (@_jscript_version <= 5.7)
    rows = getElementsByClass('rows');
    
    for (var i = 0; i < rows.length; i++) {
        row = rows[i].getElementsByTagName('td');
        n = row.length - 1;
        row[n].className += ' lastchild';
        row[0].className += ' firstchild';
    }
@end@*/
}

function AJAXFirstLast() {
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
        IEFirstLast();
    }
}

The first part instantiates the necessary AJAX object globally so we can have access to it. IEFirstLast() is just a modification of the original function with conditional statements built inside the function instead of around it. (This is so non-IE browsers can openly call this method later and not be left wondering where their function disappeared to.) The last function is the event listener for the IEFirstLast function that's added onto EPC's default event handler. Its only purpose is to call IEFirstLast() when the time is right.

This next part goes inside the header too, but below any EPC includes.

Javascript:

function addListener() {
    xmlhttp.onreadystatechange = function() {
        triggered();
        AJAXFirstLast();
    }
}

This is our 'hijacking' function, when it gets called it overwrites the original event handler with a function that calls both our handler, and the default handler.

This next bit uses a tweak from elsewhere on this site that involves overwriting the original navigation menu. Seen here: http://www.easyphpcalendar.com/forum...90&postcount=3

What we'll be doing is adding onto the "left" and "right" navigation links.
HTML/Javascript:

<td width="30" align="left"><a onclick="loadurl('../calendar/calendar.php','1'); addListener(); IEFirstLast();" href="javascript: void(0);" class="customNavTableText"><?php echo $navLeft; ?></a></td>
<!-- main calendar link is here -->
<td width="30" align="right"><a onclick="loadurl('../calendar/calendar.php','3'); addListener(); IEFirstLast();" href="javascript: void(0);" class="customNavTableText"><?php echo $navRight; ?></a></td>

Remember, this is built within the framework of the linked post above, and will not work properly without those changes implemented. The important bits here are the 'addListener(); IEFirstLast();' functions that were added to the onclick attribute. addListener() overwrites the original event handler whenever an ajax call is made from these links, and IEFirstLast() is duplicated here for when IE tries to cache its AJAX requests. (When it uses a cached copy the AJAX call doesn't fire off, which in turn doesn't automatically call IEFirstLast().)

I think that's it... I also have some tweaks I made regarding AJAX and a click through mini calendar that directs you to the right month, but right now the VP debate's starting.

[rcpilot]

As a side note now that IE8 is out, I had to change this line:

@if (@_jscript_version <= 5.7)

to this:

@if (@_jscript_version <= 5.8)

IE8 does a lot better at what it and IE7 are supposed to be capable of, but it still doesn't support this.