Search code examples
htmlcsscountdown

Overlapping divs that follow their main container

I've made a container that display a countdown to the next subscription date for our subscribers, however there are some problems with the layout, whenever there are no days, months or years left, that specific box will be removed from the container with our <xsl-if> statement (this is not present in the fiddle, must delete timebox manually to test).

SEE EDIT AT BOTTOM

When one is removed, the main container gets smaller in width, and its important that the graphical elements inside, such as .reflection and .reflectionLng follows the same behavior and adjust themselves, I have some jQuery in place to take care of this, however I noticed that it still didn't function when "Days" were gone or removed, even though it works as intended when "Years" and "Months" are gone.

jsfiddle

<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
            <xsl:text><int:text>7</int:text></xsl:text>
                        </span>
      <br/>
      <span class="timeChar">
                                    <xsl:text><int:text>YEARS</int:text></xsl:text>
                                </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
            <xsl:text><int:text>11</int:text></xsl:text>
                        </span>
      <br/>
      <span class="timeChar">
                                    <xsl:text><int:text>MONTHS</int:text></xsl:text>
                                </span>
    </div>
        <div class="timeBox">
      <span class="timeNum">
            <xsl:text><int:text>18</int:text></xsl:text>
                        </span>
      <br />
      <span class="timeChar">
                                    <xsl:text><int:text>DAYS</int:text></xsl:text>
                                </span>
      <div class="reflection"></div>
    </div>

    <div class="reflectionLng"></div>
  </div>

I have a feeling it has something to do with the .reflection element being nested inside the div "Days" however I cannot pinpoint what the issue is.

Please help me make the container shown in the fiddle act as the screenshot below, when the timeBox for "DAYS" is not longer active or displayed.

enter image description here

EDIT: I updated the jsfiddle, fixed it so that the container now adjusts its width accordingly when "Days" timeBox is removed from the container, however the div .reflection is still nested inside of the "Days" timeBox, and I can't get it working properly outside.

Solution

  • Ok, so here's how I would do it. I would change the <div> elements that you were using to create the "background" to ::before and ::after pseudo-elements. And instead of trying to alter the CSS with jQuery I would just alter the class of the timeContainer accordingly and add the appropriate CSS declarations.

    Here's a snippet with all three values visible:

     if ($('.timeContainer #timeBoxYears').length <= 0 && $('.timeContainer #timeBoxMonths').length <= 0) {
   $('.timeContainer').addClass('one-part');
 } else if ($('.timeContainer #timeBoxYears').length <= 0 || $('.timeContainer #timeBoxMonths').length <= 0 || $('.timeContainer #timeBoxDays').length <= 0) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }
    .wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  transform: rotate(-45deg);
}
.timeContainer.one-part::after {
  transform: rotate(-63deg);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
        <xsl:text><int:text>7</int:text></xsl:text>
	  </span>
      <br/>
      <span class="timeChar">
	    <xsl:text><int:text>YEARS</int:text></xsl:text>
	  </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
	  </span>
      <br/>
      <span class="timeChar">
	    <xsl:text><int:text>MONTHS</int:text></xsl:text>
	  </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
	  </span>
      <br />
      <span class="timeChar">
	    <xsl:text><int:text>DAYS</int:text></xsl:text>
	  </span>
    </div>
  </div>

    Here's a snippet with only two values visible:

     if ($('.timeContainer #timeBoxYears').length <= 0 && $('.timeContainer #timeBoxMonths').length <= 0) {
   $('.timeContainer').addClass('one-part');
 } else if ($('.timeContainer #timeBoxYears').length <= 0 || $('.timeContainer #timeBoxMonths').length <= 0 || $('.timeContainer #timeBoxDays').length <= 0) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }
    .wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  transform: rotate(-45deg);
}
.timeContainer.one-part::after {
  transform: rotate(-63deg);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
	  </span>
      <br/>
      <span class="timeChar">
	    <xsl:text><int:text>MONTHS</int:text></xsl:text>
	  </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
	  </span>
      <br />
      <span class="timeChar">
	    <xsl:text><int:text>DAYS</int:text></xsl:text>
	  </span>
    </div>
  </div>

    And here's a JSFiddle to play around with: https://jsfiddle.net/thepio/pfbuLhux/

    EDIT:

    Oops I didn't look closely at your jQuery. Now it's fixed and should work on any situation no matter which box is removed. Also I just set display:none; to the ::before and ::after pseudo-elements when there's only one box, so they won't be displayed at all.

     if ($(".timeContainer > div").length <= 1) {
   $('.timeContainer').addClass('one-part');
 } else if ($(".timeContainer > div").length <= 2) {
   $('.timeContainer').addClass('two-parts');
 } else {
   $('.timeContainer').addClass('three-parts');
 }
    .wrapper {
  width: 500px;
  height: 800px;
}
.timeBox {
  width: 90px;
  height: 90px;
  margin: 0px 0px 0px 0px;
  display: table;
  position: relative;
  float: left;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
span.timeNum {
  font-size: 38px!important;
  color: #FFF;
  font-weight: bold;
  line-height: 13px;
  margin-top: 35px;
  display: block;
}
.timeChar {
  font-size: 12px;
  color: #FFF;
  font-weight: normal;
  padding: 5px;
  text-transform: uppercase;
  line-height: 0px;
  display: block;
}
.timeContainer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#942949, #c83762);
  height: 90px;
  width: auto;
  border: 1px solid rgba(186, 186, 186, 0.35);
  border-radius: 16px;
  box-shadow: 3px 3px 3px #888888;
  display: table;
}
.timeContainer::before {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer::after {
  content: '';
  width: 140%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: 0;
  transform-origin: 100% 0%;
}
.timeContainer.three-parts::before {
  transform: rotate(-18deg);
}
.timeContainer.three-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.two-parts::before {
  transform: rotate(-26deg);
}
.timeContainer.two-parts::after {
  transform: rotate(-45deg);
}
.timeContainer.one-part::before {
  display: none;
}
.timeContainer.one-part::after {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeContainer">
    <div class="timeBox" id="timeBoxYears">
      <span class="timeNum">
        <xsl:text><int:text>7</int:text></xsl:text>
	  </span>
      <br/>
      <span class="timeChar">
	    <xsl:text><int:text>YEARS</int:text></xsl:text>
	  </span>
    </div>
    <div class="timeBox" id="timeBoxMonths">
      <span class="timeNum">
        <xsl:text><int:text>11</int:text></xsl:text>
	  </span>
      <br/>
      <span class="timeChar">
	    <xsl:text><int:text>MONTHS</int:text></xsl:text>
	  </span>
    </div>
    <div class="timeBox" id="timeBoxDays">
      <span class="timeNum">
        <xsl:text><int:text>18</int:text></xsl:text>
	  </span>
      <br />
      <span class="timeChar">
	    <xsl:text><int:text>DAYS</int:text></xsl:text>
	  </span>
    </div>
  </div>

    A new JSFiddle: https://jsfiddle.net/thepio/qdbyaaxb/