background img swap custom - with timed content - .com breakpoints

this one is latest and bestest

by ian_smithz

HTML

<!-- date format should be exactly like this example -->
<!-- e.g. -->
<!-- Nov 09 2018 09:00 to Nov 09 2018 09:01 -->

<!-- this inline style height is to mimic equal height js - already in page -->
<div class="timed-content" style="height: 468px;">
<div class="extra-div-just-for-debugging">

  <time style="display: none" aria-hidden="true">Nov 14 2018 00:00 to Nov 14 2018 23:59</time>
  <a href="#">
  <div class="deal-of-the-day outer-container">
  
  <div style="" class="bg-gradient swap-bg" data-src-small="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_sm.png" data-src-medium="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_md.png" data-src-large="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat-e_lg.png"
    data-alt="Nest Smart Thermostat E"></div>
 </div>
 </a>
 
 </div>
 </div>
 

<div class="timed-content">

  <time style="display: none" aria-hidden="true">Nov 12 2018 14:52 to Nov 12 2018 14:57</time>

  <div style="" class="dotd-bg-container swap-bg" data-src-small="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_sm.png" data-src-medium="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_md.png" data-src-large="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat-e_lg.png"
    data-alt="Nest Smart Thermostat E"></div>

</div>

CSS

.timed-content {
  display: none
}



/* these styles can be stripped down */
.deal-of-the-day.outer-container {
    border: 1px solid #d1d1d1;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.2);
    padding: 9px;
    background-color: #fff;
    height: 100%;
}

.deal-of-the-day .bg-gradient {
    height: 100%;
    overflow: hidden;
    background-color: #8d0000;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

JavaScript

//document.addEventListener("DOMContentLoaded", function() {

var swapImgTimed = function() {

  jQuery(".timed-content").each(function(index) {
    var sRange = jQuery(this).find("time").html();
    console.log(sRange);
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();

    var bw = window.innerWidth;

    var $this = jQuery(this).find('.swap-bg');

    var imgNameSmall = jQuery($this).data('src-small');
    var imgNameMedium = jQuery($this).data('src-medium');
    var imgNameLarge = jQuery($this).data('src-large');

    if (dtNow >= dtFrom && dtNow <= dtTo) {

      jQuery(this).closest('.timed-content').show();

      if (bw <= 640) {
        if (imgNameSmall) {
          jQuery($this).css('background-image', 'url(' + imgNameSmall + ')');
        } else if (imgNameMedium) {
          jQuery($this).css('background-image', 'url(' + imgNameMedium + ')');
        } else {
          jQuery($this).css('background-image', 'url(' + imgNameLarge + ')');
        }
      } else if (bw > 640 && bw < 1025) {
        if (imgNameMedium) {
          jQuery($this).css('background-image', 'url(' + imgNameMedium + ')');
        } else {
          jQuery($this).css('background-image', 'url(' + imgNameLarge + ')');
        }
      } else {
        jQuery($this).css('background-image', 'url(' + imgNameLarge + ')');
      }
    }
  });

};

jQuery(document).ready(function() {
  swapImgTimed();
});

jQuery(window).on('resize', swapImgTimed);



//});