SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    style border-collapse

    Hello,

    can someone help? How do I add a "border-collapse:collapse" modification in the script below? Thanks much!

    // call function to draw calendar
    drawCal(firstDay + 1, days, date, monthName, year)
    }

    function drawCal(firstDay, lastDate, date, monthName, year) {
    // constant table settings
    var headerHeight = 50 // height of the table's header cell
    var border = 2 // 3D height of table's border
    var cellspacing = 4 // width of table's border
    var headerColor = "midnightblue" // color of table's header
    var headerSize = "+3" // size of tables header font
    var colWidth = 60 // width of columns in table
    var dayCellHeight = 25 // height of cells containing days of the week
    var dayColor = "darkblue" // color of font representing week days
    var cellHeight = 40 // height of cells representing dates in the calendar
    var todayColor = "red" // color specifying today's date in the calendar
    var timeColor = "purple" // color of font representing current time

    // create basic table structure
    var text = "" // initialize accumulative variable to empty string
    text += '<CENTER>'
    text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
    text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
    text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
    text += monthName + ' ' + year
    text += '</FONT>' // close table header's font settings
    text += '</TH>' // close header cell

    // variables to hold constant settings
    var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
    openCol += '<FONT COLOR="' + dayColor + '">'
    var closeCol = '</FONT></TD>'


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fagin View Post
    Hello,

    can someone help? How do I add a "border-collapse:collapse" modification in the script below? Thanks much!
    You don't apply it directly to the table.

    Instead, you set a class name with the border-collapse declaration, and then apply that class name to the table.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understood that to mean setting the class in my css file. Then inserting the script inside the <div class=calendarbox>....script...</div>

    Which is what I did and that didn't work. Sorry, I'm a total layman. I'm just in the learning process.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fagin View Post
    I understood that to mean setting the class in my css file. Then inserting the script inside the <div class=calendarbox>....script...</div>

    Which is what I did and that didn't work. Sorry, I'm a total layman. I'm just in the learning process.
    There is a JavaScript technique that can be alternatively applied.
    The documentation page for border-collapse helped to provide this info.

    object.style.borderCollapse = 'collapse';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •