 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
woodsy134
Joined: 21 May 2008 Posts: 3 Location: Arizona, USA
|
Posted: Wed May 21, 2008 9:19 am Coding to put a scroll bar into a table cell (Calendar) |
|
|
|
I have searched all over the Web, including several Web developers forums, trying to figure out how to get a scroll bar into a cell within a (Calendar) table. But, still can't figure it out!
I'm new to HTML, know only one (email scrambling) javascript, and no other type of scripting or programming languages. Further, I can't seem to understand the gist of CSS! Therefore, everything I have found on the net about doing what I need to do is like trying to read a foreign language, and understand it enough to make it work to do what I want it to do!
I've downloaded a trial version of an HTML calendar creator, that allows me to edit the coding that the software creates. But, I've tried a number of different edits, in various different areas of the coding, and still can't get what I need.
Because this is the first time I've posted in this forum, I'm going to attempt to post the code that I have thus far, so I can hopefully get some help with it. Hope this works! lol
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Calendar by HTML Calendar Maker Pro - www.htmlcalendar.com</title>
<meta name="generator" content="HTML Calendar Maker Pro v3.8.7 - www.htmlcalendar.com">
<meta name="date" content="2008-05-17">
<meta http-equiv="content-type" content="text/html">
</head>
<body bgcolor="#003399">
<!-- Start Calendar, Jun 2008 -->
<div align="center"><p><font face="Arial" size="6" color="#FFFFFF">Jun 2008</font></p></div>
<!--Days of the week, printout-->
<table width="100%" cellpadding="4" cellspacing="0" border="1" bordercolor="#003399" bgcolor="#003399">
<tr>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Sun</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Mon</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Tue</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Wed</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Thu</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Fri</font></td>
<td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Sat</font></td>
</tr>
<!--Beginning of first week of month-->
<tr>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>1</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>2</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<!--Begin cell where scrolling is needed-->
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>3</b></font></div>
<font size="2" color="#FFFFFF" face="Arial">* Launch of the Peace Parade of 2008!<br> <br>* Ham and Bean Feed at the Riverside Stage Stop; Riverside, NM; 7 - 10 PM<br> <br>* Testing to see how many events can be placed into a single day.<br> <br>* There are 3, this one makes 4!</div></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>4</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>5</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>6</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>7</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
</tr>
<!--Beginning of second week of month-->
<tr>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>8</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>9</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>10</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>11</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>12</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>13</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>14</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
</tr>
<!--Beginning of third week of month-->
<tr>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>15</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>16</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>17</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>18</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>19</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>20</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>21</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
</tr>
<!--Beginning of fourth week of month-->
<tr>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>22</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>23</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>24</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>25</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>26</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>27</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>28</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
</tr>
<!--Beginning of fifth week of month-->
<tr>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>29</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>30</b></font></div><font color="#FFFFFF" face="Arial" size="2">
<br> <br> <br></font></td>
<!--Because there are only two days in the fifth week of this month, the final table data (td) tag contains coding to fill
the rest of this week with the background of the table (below)-->
<td colspan="5"><font size="2"><br> <br> <br> </font></td>
</tr>
</table>
<!-- End Calendar, Jun 2008-->
<!----- Begin Footer ----->
<br><center><table bgcolor="#FFFFFF"><tr><td align="center"><font face="Georgia,Arial" size="4" color="#000000"><b>Created with <a href="http://www.htmlcalendar.com">HTML Calendar Maker Pro</a>.</b></font><br><font face="Georgia,Arial" size="3" color="#000000">Visit <a href="http://www.htmlcalendar.com">www.htmlcalendar.com</a> for the latest version!<br>To get a registration code that gives you more calendars<br>and that lets you modify or remove this footer, go to the <a href="http://www.htmlcalendar.com/products/windows/order">Online Order Form</a>.</font></td></tr></table>
<!------ End Footer ------>
</body>
</html>
|
As can be seen on the calendar, I have four events (two of them testing a non-existent scroll feature within the cell) on 3 Jun 08. I will have several dates with multiple events, like this one, where I need to make the individual cells scrollable, so that it doesn't make any one row a different size than the rest of the calendar rows.
Can someone please help me? Please try to keep in mind that, as stated above, I don't know anything about CSS, javascript, PHP, CGI, or any other type of languages. So, please be as descriptive as possible.
Thanks much, all.
Dave |
|
Straystudio
Joined: 14 Apr 2008 Posts: 261 Location: Nord Italy
|
Posted: Thu May 22, 2008 11:27 am |
|
|
|
W E L C O M E !
DIV Element can have scrollbars.
DIV can take place inside a TABLE cell, then.
style="overflow: auto;" does the trick; besides auto, it can also get scroll (always shown, at zero content even though), or hidden.
overflow: auto; to intervene, wants the DIV to be size limited, too; and to have content enough.
With Yours I can find place for a DIV as heigh as up to 45px, without enlarging the cell.
So replace inserting the string:
<div style="height: 45px; overflow: auto;">
| Code: |
<!--Begin cell where scrolling is needed-->
<td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
<b>33</b></font></div><div style="height: 45px; overflow: auto;">
<font size="2" color="#FFFFFF" face="Arial">* Launch of the Peace Parade of 2008!<br>
|
<div align="right" style="height: 45px; padding-right: 4px; overflow: auto;">
as well may be a good option.
Be aware I found the </div> closing tags already present there, most likely left as remaining in error from a previous editing.
You see, this is just a wholly HTML only as a solution, working anywhere.
I think it as the classic as the best one. |
|
woodsy134
Joined: 21 May 2008 Posts: 3 Location: Arizona, USA
|
Posted: Thu May 22, 2008 12:04 pm Thanks a bunch! |
|
|
|
Hello Stray,
Thanks so much for your response and help. Worked like a charm! I had attempted to insert very similar coding to that which you gave me, at several different points in the coding, but to no avail!
I still don't exactly understand what is going on with the coding, or why/how it works, because I've not worked much with the div tag before. But, it works great.
I'll have to do a bit more studying on the subject to see if I can figure out exactly what's happening with it, in the context (coding location) where it is inserted. Hopefully, I'll be able to figure it out.
Thanks again for the assistance!
Dave |
|
Straystudio
Joined: 14 Apr 2008 Posts: 261 Location: Nord Italy
|
Posted: Thu May 22, 2008 12:33 pm |
|
|
|
Take care, that "stray" </div> closing tags again, wants to be moved after the </font> closing tag, to nest rightly.
| woodsy134 wrote: |
| I had attempted to insert very similar coding .., but to no avail! |
I.e. Likely anyone beeing thinking the DIV as a very classic Element, at first is drived to do :
<div height="45px" style="overflow: auto;">
same as it does get align="center"
yet, it wants height:; width:; in the style="" only, instead.
And go on ... unremembering later.
Here a bit of JavaScript You can insert inside the same DIV string, to test:
onMouseOver='this.style.height="100px";' onMouseOut='this.style.height="45px";'
|
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
|
|
|
|