Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help with high school football website

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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??

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.

  • Users who have thanked Old Pedant for this post:

    superjeff10 (05-27-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Using Google calendar?

    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

  • Users who have thanked leppdesign for this post:

    superjeff10 (05-27-2009)

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts

    Here...try this code...

    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:
    Code:
    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:
    Code:
    <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.

  • Users who have thanked Old Pedant for this post:

    superjeff10 (05-28-2009)

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •