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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide a div based on a set date using javascript or jquery

    First, I apologize if this is a repeat topic. Ive used google for the last couple days and tried finding a solution. There are similar problems out there, however I can not manipulate codes to get what I'm looking for accomplished because I am pretty new with any coding outside of html and css. Everything I've found is not set with a specific date.

    What I am looking for -- I am working on a sports team website. On the side column there is a div for "next scheduled game". I would like the content of that div to always display the upcoming game or if it is gameday, to show the content of that days game until after it has been played. When the season is over, I would like it to show a "see you next season" default content.

    There are 24 games scheduled. I know the times and dates of the games. How would I write the javascript to show/hide each content div based on dates.

    Like I said, im new to coding so I dont have any code on hand, but if you can help explain how I could tackle this problem or maybe even know of scripts that would accomplish this, that would be appreciated.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by emagdnim View Post
    ...
    There are 24 games scheduled. I know the times and dates of the games. How would I write the javascript to show/hide each content div based on dates.
    ....
    What is the format of the information?
    At least post the information you wish to display.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    What is the format of the information?
    At least post the information you wish to display.
    Sorry, I do not have it in code yet. It will be an entire <div> container on a sidebar that includes images of the teams playing. the date of the game. the time of the game. and the location of the game similar to this image:



    I was thinking it would be easier to code all that out, and then use javascript to make them change based on the current date. So before the season starts, obviously the first scheduled game will show, then they will change automatically based on the date so I dont have to manually update them as each game passes.

    How would I go about creating this?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Use style display = "block" or "none" to show/hide the divs according to the date:-


    Code:
    <div id = "cunextseason" style = "display:none"> See You next season</div>
    <div id = "div1" style="display:none">Details of the first match</div>
    <div id = "div2" style="display:none">Details of the second match</div>
    
    <script type = "text/javascript">
    
    var today = new Date();
    
    var endofseason = new Date("September 30, 2013");
    if (today >= endofseason) {document.getElementById("cunextseason").style.display = "block"}
    
    var startEventDate = new Date("February 1, 2013 14:00"); // time is optional
    var endEventDate = new Date ("March 20, 2013 18:00");
    if ((today >= startEventDate)  && (today <=endEventDate)) {document.getElementById("div1").style.display = "block"}
    var startEventDate = new Date("February 10, 2013 08:00");
    var endEventDate = new Date ("March 30, 2013 18:00");
    if ((today >= startEventDate)  && (today <=endEventDate)) {document.getElementById("div2").style.display = "block"}
    
    </script>

    Quizmaster: Tennesse Williams wrote "Death Of A Salesman". True or false?
    Contestant: False. I have a lot of his records, but I can't remember him singing that one.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    i was requesting the format of the dates and teams to display.
    But if you don't have that, it is not ready to code as it will change and waste time.


  •  

    Posting Permissions

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