Results 1 to 3 of 3

Thread: Hiding a <div> based on a specific date...

  1. #1
    Join Date
    Dec 2012

    Hiding a <div> based on a specific date...

    I thought I'd post this script here. Figured this out after doing some trial and error.

    Have you ever wanted to have something disappear from your site after a certain date? This script will do just that.

    You can follow the link here to see it in action: http://webfro.gs/scripts/js/timing_device/. I have also posted a link to download a demo with all the necessary files.

    Here is the code...

    The CSS

    .DateRange, .DateDiv { display: none; text-align: center; }
    The JavaScript

    $(function() {
        $(".DateDiv").each(function(index) {
            var sRange = $(this).find(".DateRange").html();
            var arrTemp = sRange.split(" to ");
            var dtFrom = new Date(arrTemp[0]);
            var dtTo = new Date(arrTemp[1]);
            var dtNow = new Date();
            if (dtNow >= dtFrom && dtNow <= dtTo)
    The HTML

    HTML Code:
    <h2>The following image will disappear on August 2, 2013, at midnight:</h2>
    <br />
    <br />
    <div class="DateDiv">
    	<span class="DateRange">8/2/2013 to 8/3/2013</span>
        	<img src="img/button_home.jpg" width="250" height="252">
            <p>This can be text, too</p>
    Here's another sample of it on the web that I built. Click here(jsfiddle).

    sƃoɹɟqǝʍ Design Studios
    Phoenix | Arizona

    E: webfrogs@webfro.gs

  2. #2
    Join Date
    Dec 2005


    Here's another way to do it without using JQuery.

    Added code to display image change on daily basis
    change image on same day (holiday) of the year.

    Note, you can add logic to display on a specific year only if desired,
    but I thought it would be more useful as a repeating display.

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <title> Daily Displays </title>
    <style type="text/css">
     #DailyImage .DayImage { display:none; }
     #DailyImage div img { height:125px; width:100px; }
     #HolidayImages .DayImage { display:none; }
    <h2>The following image will change each day of the week.</h2>
    <div id="DailyImage">
     <div id="Day0" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay0" src="" alt="" title="">
      <p>This can be text for Sunday too</p>
     <div id="Day1" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay1" src="" alt="" title="">
      <p>This can be text for Monday too</p>
     <div id="Day2" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay2" src="" alt="" title="">
      <p>This can be text for Tuesday too</p>
     <div id="Day3" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay3" src="" alt="" title="">
      <p>This can be text for Wednesday too</p>
     <div id="Day4" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay4" src="" alt="" title="">
      <p>This can be text for Thursday too</p>
     <div id="Day5" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay5" src="" alt="" title="">
      <p>This can be text for Friday too</p>
     <div id="Day6" class="DayImage">
      <span class="DateRange"></span>   <img id="imgDay6" src="" alt="" title="">
      <p>This can be text for Saturday too</p>
    <h2>The following image will change specific defined holidays.</h2>
    <div id="HolidayImages">
     <div id="Day_8_2" class="DayImage">
      <span>Aug. 2 to Aug. 3</span>
      <img src="http://www.nova.edu/hpd/otm/pics/4fun/Taz.JPG" height="125" width="100">
      <p>This can be text for holiday on MONTH, XX of each year</p>
     <div id="Day_8_3" class="DayImage">
      <span>Aug. 3 to Aug. 4</span>
      <img src="http://www.nova.edu/hpd/otm/pics/4fun/BuzzLite.JPG" height="125" width="100">
      <p>This can be text for holiday on MONTH, XX of each year</p>
    <script type="text/javascript">
    var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
    var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg','22.jpg'];
    var DOW = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    window.onload = function() {
      for (var d=0; d<imgList.length; d++) {
        document.getElementById('imgDay'+d).src = baseURL+imgList[d];
        document.getElementById('imgDay'+d).alt = imgList[d];
        document.getElementById('imgDay'+d).title = imgList[d];
      var sel = document.getElementById('DailyImage').getElementsByClassName('DateRange');
      for (var i=0; i<sel.length; i++) { sel[i].innerHTML = DOW[i]+ "'s mood"; }
      var today = new Date();
      var day = today.getDay(); 
      document.getElementById('Day'+day).style.display = 'block';
    // end of daily change display and start of holiday displays
      var month = '_'+(today.getMonth()+1);
      var date = '_'+today.getDate();
      var temp = 'Day'+month+date;  
      if (document.getElementById(temp)) { document.getElementById(temp).style.display = 'block'; }
    Last edited by JMRKER; 08-02-2013 at 09:53 PM.

  3. #3
    Join Date
    Sep 2008
    Jackson MS
    This is my entry:
    function eventTable(eYr,eMo,eDa,eText) {  
      this.date = new Date(eYr, eMo-1, eDa, 15, 0);  // Time set at 3pm. In JavaScript, months are from 0 (Jan) to 11 (Dec) so 1 is subtracted.
      var wkText = ""
      for (var i=0; i < eText.length; i++) {
        wkText+= eText[i] + "<br>"; }
      this.text = wkText;
    ETable = new Array; // Table entries MUST start from zero and be in chronological order.  When you delete the first one all other entres must be renumbered.
    ETable[0] = new eventTable(2013,2,24,[["Orchestra Showcase"],["Overture to \"Iphigenia in Aulis\" by Christoph Willibald von Gluck"],[""],
    ["Summer from \"The Four Seasons\" by Antonio Vivaldi"],["Julia Kirk - violin soloist"],[""],
    ["\"Concerto in Eb Major\" by Jan Krtitel Jiri Neruda"],["Anne Berthold - trumpet soloist"],[""],
    ["\"Concerto for Oboe\" by Vincenzo Bellini"],["Wayne Miller - oboe soloist"],[""],
    ["\"Der Rosenkavalier Waltzes\" by Richard Strauss (arr. O. Singer, orch. J. Doebber)"]]);
    ETable[1] = new eventTable(2013,11,10,[["The program hasn't been determined."],["Please check later."]]);
    ETable[2] = new eventTable(2014,2,23,[["The program hasn't been determined."],["Please check later."]]);
    ETable[3] = new eventTable(2014,4,1,[["Testing Entry"],[""],
    ["1712 Overture by P.D.Q. Bach"],[""],
    ["Iphigenia in Brooklyn by PDQ Bach"],["\"Annual April Fool\" Concert"]]);
    ETable[4] = new eventTable(2014,5,4,[["The program hasn't been determined."],["Please check later."]]);
    and it's used here:
    function readTable() {
    var months = [["January"],["February"],["March"],["April"],["May"],["June"],["July"],["August"],["September"],["October"],["November"],["December"]]
    var now = new Date();
    for (var i=0; i < ETable.length; i++) {
      if (now < ETable[i].date) {
        var html = "For " + months[ETable[i].date.getMonth()] + " " + ETable[i].date.getDate() + ", " + ETable[i].date.getFullYear() + "<br><br>";
        document.write(ETable[i].text); return; } }
    document.write("We don't have any programs set up yet.<br>Please visit this site later.");
    The whole thing is here and the "Upcoming Concerts" replaces the "return" with line feeds.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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