This article has been dead for over three months
You
Have something to say? Contribute New Article Reply to this Article
Any Event Page Design Tips out there?
My page http://www.epicbasketball.com/p/events.html is kinda lookin pretty darn unprofessional. I'm limited in my coding skill, but am pretty good at learning new things quickly. If anyone out there could give me some advice, some tips, or would like to flat-out retouch the code below yourself, it would be HIGHLY APPRECIATED. Thank you for taking the time to even read this far. Have a great day.
<body id="events">
<style type="text/css">
td#controls { background-color: #111; color: #fff; width: 500px; font-weight:
bold; } td#controls ul { margin: 0; padding: 0; list-style-type: none;
} td#controls li { padding: 1.3ex 0; border-bottom: 1px solid #000; } td#controls
input { margin-right: 0.5em; } td#events { width: 520px; background-color:
#fff; color: #000; } td#events table td { padding: 0 0.5em; height: 1.8em;
border-bottom: 1px solid #000; } tbody#eventsList tr.stripe0 { background-color:
#e0e0e0; } tbody#eventsList tr.stripe1 { background-color: #cccccc; } ul#nav,
ul#nav ul { font-family: Trebuchet MS; font-size: 13px; margin: 0; padding:
0; list-style: none; font-weight: bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function() {
var $rowSelectors = $("#controls input.rowSelector");
var $eventRows = $("tbody#eventsList tr");
function setStripes() {
$eventRows.not(":hidden").removeClass('stripe1').addClass('stripe0').filter(":odd").removeClass('stripe0').addClass('stripe1');
}
$rowSelectors.click(function() {
$rowSelectors.each(function() {
var fn = this.checked ? 'show' : 'hide';
$eventRows.filter("." + this.value)[fn]();
setStripes();
});
});
$("#massControls a").click(function() {
$rowSelectors.attr('checked', (this.name === '1') ? true : false).eq(0).triggerHandler('click');
}).eq(0).click(); //change to .eq(1).click() for initially [all off]
});
</script>
<form name="myform">
<div align="center">
<table width="1000" height="400" cellpadding="5" cellspacing="0" border=3
bordercolor="#000">
<tr>
<td bgcolor="#ffffff">
<table border=0 width="100%" bgcolor="#ffffff" style="padding-top:15px;">
<tr>
<td>
<div align="center">
<img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/eventcal.png">
<b>
<script>
var mydate = new Date()
var year = mydate.getYear()
if (year < 1000) year += 1900
var day = mydate.getDay()
var month = mydate.getMonth()
var daym = mydate.getDate()
if (daym < 10) daym = "0" + daym
var dayarray = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
var montharray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
document.write("<small><font color='000000' face='Arial'>" + dayarray[day] + ", " + montharray[month] + " " + daym + ", " + year + "</font></small>")
</script>
</b>
</div>
</td>
</tr>
</table>
</td>
<td rowspan=3 width="450" valign="top" align="left" style="padding-top:23px;">
<div align="center">
<img src="http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/gymlocations.png"
width=300>
Locations are continually added.
</div>
<div style="padding-top:7px;">
<table bgcolor="#111111" style="color: white; font-size: 12px;" height=35
width="100%">
<tbody>
<tr>
<td align="center" width="70">
Date
</td>
<td align="center" width="310">
Location
</td>
<td width=25>
</td>
</tr>
</tbody>
</table>
<iframe width='440' height='450' frameborder='0' src='https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmWD_Na4J_4BdFoyc281Z2xZTVVOaTNDNkhnNy1KZWc&single=true&gid=0&output=html&widget=false&chrome=false'>
</iframe>
</div>
</td>
</tr>
<tr>
<td rowspan="1" id="controls" valign="top" align="left">
<span id="massControls" style="float:right">
[
<a id="rowSelectorAll" name="1">all on</a>
] [
<a id="rowSelectorNone" name="0">all off</a>
]
</span>
  
<input type="checkbox" class="rowSelector" id="rs1" value="clinic">
<label for="rs1">
Clinics
</label>
  
<input type="checkbox" class="rowSelector" id="rs2" value="workout">
<label for="rs2">
Workouts
</label>
</td>
</tr>
<tr>
<td id="events" valign="top">
<div style="width: 510; height: 450px; overflow: auto; padding: 0px; border: 0; background-color:#ffffff;">
<table width="490" border="0" cellspacing="0" cellpadding="0">
<tbody id="eventsList">
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="workout">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="workout">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="workout">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="clinic">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
<tr class="workout">
<td width=20%>
<font size=2>
8/16/11
7:00pm
</font>
</td>
<td width=30%>
<font size=2>
location information
</font>
</td>
<td width=35%>
<a href="javascript:void(0)"><font size=2 face="verdana" style="text-transform:uppercase;"><b>Event Title</b></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</div>
</table>
</form>
</div>You
View similar articles that have also been tagged:
usability
© 2012 DaniWeb® LLC
