Common problem when building web pages. You want a DIV that’s the same height as the browser window, but you don’t know what the height of the browser window is. It changes from user to user. Well, jQuery to the rescue.
var browser_window_height = 0;
$(document).ready(function() {
// this sets the height of the div on init
$('#fullscreen').each(
function() {
browser_window_height = $(window).height();
$('#info').text(browser_window_height.toString());
$(this).css('height', browser_window_height.toString() + 'px');
}
);
// this says, if they resize the window, change the height of the div
$(window).resize(function() {
var new_browser_window_height = $(window).height();
if (new_browser_window_height < browser_window_height) {
// if the new window size is smaller, resize quickquickquick
$('#fullscreen').css('height', new_browser_window_height.toString() + 'px');
} else {
$('#fullscreen').animate({
'height' : new_browser_window_height.toString() + 'px'
}, "slow");
}
browser_window_height = new_browser_window_height;
$('#info').text(browser_window_height.toString());
});
});View the page (and full source) here.
This kind of table has been around for years. It’s nice to finally know how to make them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <html>
<head>
<title>jQuery day 2 of 15</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
// this stripes our table very nicely
$("table tbody tr:odd").addClass("alt");
// now add the hover bit
$("table tbody tr").hover(
function() {
// over
$(this).addClass("highlight");
},
function() {
// out
$(this).removeClass("highlight");
}
);
});
</script>
<style>
table {
margin: 50px auto 0 auto;
border: 1px solid #666666;
}
thead tr {
background-color: #666666;
}
th {
font-weight: bold;
color: #ffffff;
padding: 5px;
}
td {
width: 200px;
padding: 5px;
}
.alt {
background-color: #cccccc;
}
.highlight {
background-color: #ff9900;
}
.highlight td {
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</body>
</html> |
I’ve packaged up the class files I used for this site and put them here. The previous “codeblog” version of this site is still here.
For my illustration site, I wanted to display thumbnails. However, I didn’t want to manually create the thumbnails so I wrote PHP code to create them for me. The problem with that was that it was kinda slow. It was going through all of images, making a thumbnail of each, and displaying them- that was pretty slow. I modified it to write the thumbnail to a file, instead. Once that worked, I made the page check if there was a thumbnail file- if there isn’t, create one. It all sped right along then. Here’s the function to create a thumbnail file…
function makeThumb($img) {
# makes a thumbnail image file
$image = ImageCreateFromJPEG("imagedir/$img");
$ix = ImageSx($image);
$iy = ImageSy($image);
$tsize = min($ix, $iy) * 0.75;
# first, extract the square we're going to use
$ia = min($ix, $iy) - $tsize;
$ib = $ia * 2;
$tmp = imagecreatetruecolor($tsize, $tsize);
imagecopyresampled($tmp,$image,0,0,$ia,$ia,$tsize,$tsize,$ib,$ib);
# new resize that square to ?x?
$t = imagecreatetruecolor(25, 25);
imagecopyresampled($t,$tmp,0,0,0,0,25,25,$tsize,$tsize);
# and write to a file
$ifile = fopen("thumbnaildir/$img", "w");
ImageJPEG($t, "thumbnaildir/$img");
fclose($ifile);
} # end of makeThumbAnd here’s the code that uses it…
if (!file_exists("thumbnaildir/". $ximage)) {
makeThumb($ximage);
}
# display thumbnail, since we know it's there now
The short lived “LinkSwap” project, packaged for your convenience.
Here’s some cool code to make a nice looking block of code in CSS.
p.code {
font-family: Courier;
font-size: 8pt;
white-space: pre;
}