Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Making a Calendar

Status
Not open for further replies.
TStriker

TStriker

Programmer
Nov 12, 2003
277
US
I'm trying to make a simple event calendar with HTML and I'm having trouble with the vertical dimensions.

Many days and even sometimes entire weeks will be completely blank - no events at all. Sometimes there will be one event per day but there can be multiple events as well.

To give you an idea of the problem, right now if the calendar is completely void of events it looks like a stack of pancakes. Ideally I would like all of the cells to be equally tall. I'd like to see all cells would be as tall as the cell holding the most information.

Any ideas?

-Striker
 
Sort by date Sort by votes
You could use CSS to give the cells an initial height:
Code: 
<style type="text/css">
td {
  min-height: 50px;
  _height: 50px;
}
But then if they have more than that height worth of data, all the cells in the same row would increase to the height of the biggest cell - but the other cells not in that row would now change.

To make them all the same height you would have to use some javascript to get a handle to the table and iterate through all the TD nodes setting their height to the max height. Whilst it sounds pretty daunting, it's not.

This function will set all TD cells in a table to the height specified:
Code: 
<script type="text/javascript">
function updateTableCellHeight(tableId) {
  var newHeight = 75;
  var table = document.getElementById(tableId);
  if (table) {
    var cells = table.getElementsByTagName('td');
    if (cells) {
      for (var loop=0; loop<cells.length; loop++) {
        cells[loop].style.height = newHeight + 'px';
      }
    }
  }
}
</script>

You might trigger this on the window onload event - or by setting it on the body node:

Code: 
<body onload="updateTableCellHeight('december');">

This assumes a table with an ID of "december" is on the page.

The next question will be "how can I figure out the height of the cell so it can be done dynamically?" [smile]

You could use javascript again to iterate over the table and test the height of each cell, updating a variable containing the maximum height.

Let us know how you go.

Cheers,
Jeff

[tt]Visit my blog [!]@[/!] Visit Code Couch [!]@[/!] [/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
As we're talking tables here, you can ignore the min-height suggested by Jeff. All you need is this on any one cell per row:

Code: 
<td height="20"></td>

Replace 20 with whatever min-height you need.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
When I make all the cells the same height using this method:

<td style="height: 20px;">

The cells are all 20px high which is good but if they contain more content than can be squeezed into 20px then that particular row grows in height but the other rows don't. I was looking for a way to make all rows, regardless of content, as tall as the tallest row in the entire table.

It looks like this is not possible without javascript. That's fine, I just thought that maybe I was missing some simple CSS parameter.

-Striker
 
Upvote 0 Downvote
I'd rather do it with ellipsis, eg shortening all text so it will fit into a standrad height.

The way you want it, it will also look ugly if there is one ell outstandingly higher than all others, you might not get the better overview you aim at.

Then add some zooming capability or show details in a whole new page.

Bye, Olaf.
 
Upvote 0 Downvote
i think your problem is a bit more complex than just using html and css

you could use percentages for each row so that they are the same -- but then you will hit the same problem -- the only 2 ways i can think of is to limit the amount of content in each cell or there might be some way to code this using a server side language to dynmically get the largest cells height based on input and then resize -- but IF that is possible I do not know, and I do not know where to even start the search.
 
Upvote 0 Downvote
I think you need to anaylse the data, sever side and then produce the output to suit the overall content. It would just look a mess if you trusted to luck.
Do you have acceess to a server side language? Perl, PHP etc.


Keith
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
135
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
716
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
409
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top