...

View Full Version : Help with high school football website



superjeff10
05-26-2009, 06:27 AM
I am a football coach in Arkansas. I am using Dreamweaver. I have been doing more and more to our website and would like a box that when you click "Next Event" it shows the next event from our "Events Calendar." [Go to the bottom left-hand corner of www.mayflowerfootball.com to see what I am talking about]. I want the user to be able to continuously click "Next Event" and gradually scroll through our whole Events Calendar.

I have no clue how to even get started, so you're help would be GREATLY appreciated!

Old Pedant
05-26-2009, 07:31 AM
Ummm...you would have to FIRST have the entire events calendar in some accessible form. A PDF file is not accessible to outside code.

Pardon me for saying so, but I really don't think that showing one event at a time would be very user-friendly. If the person wanted to see who Hall is playing on July 20th, he/she would have to scroll through what, maybe 40 other games first??

I think a more reasonable way to do this would be to put each *date's* schedule on a separate web page (whether PDF or not) and then have a link to each date from the front page. Unless you are talking about events other than games??

superjeff10
05-26-2009, 08:05 AM
Ummm...you would have to FIRST have the entire events calendar in some accessible form. A PDF file is not accessible to outside code.

Pardon me for saying so, but I really don't think that showing one event at a time would be very user-friendly. If the person wanted to see who Hall is playing on July 20th, he/she would have to scroll through what, maybe 40 other games first??

I think a more reasonable way to do this would be to put each *date's* schedule on a separate web page (whether PDF or not) and then have a link to each date from the front page. Unless you are talking about events other than games??


I am talking about our summer "Events Calendar." It's not about games. It's other events. There is a link to it at the top of the page. It's not the 7-on-7 pdf I believe you are talking about.

Regardless, any help you can give me on getting this thing going would be greatly appreciated.

Old Pedant
05-26-2009, 10:02 PM
Oh, gotcha...well, I still question the point of moving one event at a time.

If I were looking for "father/son retreat" it would be pretty tedious to look through dozens and dozens of events one at a time. The monthly calendars are much more usable, I would think.

Now, if you wanted to have the link on the front page go to the next event *after the current point in time*, that would make sense. But now you are talking about a *ton* of coding. And probably you wouldn't want to do it all in HTML/JavaScript. You'd be better off using a database (or at least an Excel spreadsheet?) and now that means server-side coding: PHP/ASP/JSP stuff.

It occurs to me that one thing you *could* do is a bit of a hack: You could have JS code that would take the user to the correct calendar for today's date (e.g., on June 17th it would take the user to /pages/june.html) and then on each of the monthly pages, you could have JS code that would hightlight the current date (maybe invert the colors?).

That sounds like a reasonable project and something that could be done with the existing pages without too much hassle.

leppdesign
05-26-2009, 10:51 PM
I don't know if this is a pertinent option, but you could set up a google calendar with your special events and then either your "next event" could link directly to that, or you can link to a page where you have embedded the google calendar on your website. I can guide you through this if you need help.

May I also make a slight suggestion that you condense the number of links you have in your header? Maybe group a couple of them together and have some drop down? It's kinda a lot to read across to find what you're looking for and it's not preferred to require someone to scroll over on your site sideways like that. Just a thought :)

superjeff10
05-27-2009, 07:00 AM
Oh, gotcha...well, I still question the point of moving one event at a time.

If I were looking for "father/son retreat" it would be pretty tedious to look through dozens and dozens of events one at a time. The monthly calendars are much more usable, I would think.

Now, if you wanted to have the link on the front page go to the next event *after the current point in time*, that would make sense. But now you are talking about a *ton* of coding. And probably you wouldn't want to do it all in HTML/JavaScript. You'd be better off using a database (or at least an Excel spreadsheet?) and now that means server-side coding: PHP/ASP/JSP stuff.

It occurs to me that one thing you *could* do is a bit of a hack: You could have JS code that would take the user to the correct calendar for today's date (e.g., on June 17th it would take the user to /pages/june.html) and then on each of the monthly pages, you could have JS code that would hightlight the current date (maybe invert the colors?).

That sounds like a reasonable project and something that could be done with the existing pages without too much hassle.

I don't plan on the "Next Event" part taking the place of the full calendar I have. I simply want it there to show what event we have coming up next. And then I want them to be able to click "Next Event" so they can just scroll through the next few things to get an idea of what we'll be doing over the next few days.

On the other hand, if it'd be a lot easier, I wouldn't mind having "Next Event" simply take you to the Calendar page (which I just did tonight after I read this), but I would like to be able to have the calendar invert the colors on the actual date. Obviously, it'd need to be JS code. Any clue where I could find out how to make that happen?? I have never done any JS code writing myself. Anymore help would be greatly appreciated!

Thanks again!

Old Pedant
05-27-2009, 08:46 AM
First of all create a file named "mayflower.js" and put it in your "pages" directory (same directory as where "may.html", "june.html", etc., are).

The file should contain this code, exactly as shown:


function findToday(whichMonth)
{
var today = new Date();
var theMonth = today.getMonth() + 1;
var theDay = today.getDate();

// only invert the day if this is correct month:
if ( theMonth != whichMonth ) return;

var divs = document.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
// we are looking for this pattern:
// <div align="center" class="style22">
// <div align="center">
// <table width="40" border="0" align="left">
// <tr>
// <th width="8" scope="col">11</th>
// </tr>
// </table>
var div = divs[d];
if ( div.className == "style22" )
{
var th = div.getElementsByTagName("th");
if ( th != null )
{
th = th[0];
if ( th != null && th.innerHTML != null )
{
var dnum = parseInt(th.innerHTML);
if ( th.width == 8 && ! isNaN(dnum) && dnum == theDay )
{
// looks like we found it...change the colors!
div.style.color = "#660066";
div.style.backgroundColor = "#FFFF99";
return; // done!
}
}
}
}
}
}


Secondly, in each of your monthly event calendars (may.html through august.html and beyond if needed) you need to add in a link to that new "mayflower.js" file (at the end of the <head>...</head> section and change your <body> tag to add an ONLOAD call. An excerpt from "may.html" is shown here, with the additions in red:


<style type="text/css">
.style21 {font-size: 1px;
color: #990099;
}
.style22 {color: #FFFF99}
.style23 {color: #FFFF99; font-size: 75px; }
.style27 {color: #FFFF99; font-size: 30px; }
</style>
<script type="text/javascript" src="mayflower.js"></script>
</head>
<body bgcolor="#660066" onload="findToday(5);">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#660066">


The only part that changes from month to month is the *NUMBER* in the call to findToday( ).

The number should MATCH the MONTH of the calendar. I am showing findToday(5) there because this is for "may.html", and May is the 5th month. So you'd use findToday(6) for "june.html" and so on.

Give it a try. I *did* try it with "may.html".

Obviously, it's not thoroughly tested, yet.

One trick you could do, to test the other months, is temporarily make them all use findToday(5) so the code will think it is working on May and it should highlight the current day of the month in each month. Assuming they all work okay, then change the 5 to the appropriate number in each one. [I just did this with "august.html" and it worked.]

Oh...and you can of course change the colors to whatever you would like.

superjeff10
05-28-2009, 01:02 AM
First of all create a file named "mayflower.js" and put it in your "pages" directory (same directory as where "may.html", "june.html", etc., are).

The file should contain this code, exactly as shown:........


Man, I REALLY appreciate the help! I'm gonna jump on this here in a couple of hours and I'll get it to work. You really went out of your way and I appreciate it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum