This example demonstrates fixed position elements (see the bottom left and bottom right of the page)

Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content

hx.select('body') # Move the morph sections to the end of the body to reduce overlapping issues .append(hx.select('#morphSectionLeft')) .insertAfter(hx.select('#morphSectionCenter')) .insertAfter(hx.select('#morphSectionRight')) # Create the new morph sections morphLeft = new hx.MorphSection('#morphSectionLeft') morphCenter = new hx.MorphSection('#morphSectionCenter') morphRight = new hx.MorphSection('#morphSectionRight') # Click detectors to close the sections when the user clicks outside the content. clickLeft = new hx.ClickDetector() clickCenter = new hx.ClickDetector() clickRight = new hx.ClickDetector() clickLeft.addException(hx.select('#morphSectionLeft .hx-morph-content').node()) clickLeft.addException(hx.select('#morphSectionLeft .hx-morph-toggle').node()) clickCenter.addException(hx.select('#morphSectionCenter .hx-morph-content').node()) clickCenter.addException(hx.select('#morphSectionCenter .hx-morph-toggle').node()) clickRight.addException(hx.select('#morphSectionRight .hx-morph-content').node()) clickRight.addException(hx.select('#morphSectionRight .hx-morph-toggle').node()) clickLeft.on 'click', -> morphLeft.hide() clickCenter.on 'click', -> morphCenter.hide() clickRight.on 'click', -> morphRight.hide()

HTML

This example demonstrates fixed position elements (see the bottom left and bottom right of the page)


<div id="morphSectionLeft" class="morphSection hx-morph-section">
  <div class="hx-morph-content hx-background-compliment hx-pad hx-border morphContent" style="display: none">
    Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
  </div>
  <div class="buttonWrapLeft">
    <button class="hx-btn hx-info hx-morph-toggle hx-no-margin morphButton">Toggle</button>
  </div>
</div>

<div id="morphSectionCenter" class="morphSection hx-morph-section">
  <div class="hx-morph-content hx-background-compliment hx-pad hx-border morphContent" style="display: none">
    Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
  </div>
  <div class="buttonWrapCenter">
    <button class="hx-btn hx-info hx-morph-toggle hx-no-margin morphButton">Toggle</button>
  </div>
</div>

<div id="morphSectionRight" class="morphSection hx-morph-section">
  <div class="hx-morph-content hx-background-compliment hx-pad hx-border morphContent" style="display: none">
    Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content <br> Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content Example Content
  </div>
  <div class="buttonWrapRight">
    <button class="hx-btn hx-info hx-morph-toggle hx-no-margin morphButton">Toggle</button>
  </div>
</div>

CoffeeScript

hx.select('body') # Move the morph sections to the end of the body to reduce overlapping issues
  .append(hx.select('#morphSectionLeft'))
  .insertAfter(hx.select('#morphSectionCenter'))
  .insertAfter(hx.select('#morphSectionRight'))

# Create the new morph sections
morphLeft = new hx.MorphSection('#morphSectionLeft')
morphCenter = new hx.MorphSection('#morphSectionCenter')
morphRight = new hx.MorphSection('#morphSectionRight')


# Click detectors to close the sections when the user clicks outside the content.
clickLeft = new hx.ClickDetector()
clickCenter = new hx.ClickDetector()
clickRight = new hx.ClickDetector()

clickLeft.addException(hx.select('#morphSectionLeft .hx-morph-content').node())
clickLeft.addException(hx.select('#morphSectionLeft .hx-morph-toggle').node())

clickCenter.addException(hx.select('#morphSectionCenter .hx-morph-content').node())
clickCenter.addException(hx.select('#morphSectionCenter .hx-morph-toggle').node())

clickRight.addException(hx.select('#morphSectionRight .hx-morph-content').node())
clickRight.addException(hx.select('#morphSectionRight .hx-morph-toggle').node())

clickLeft.on 'click', -> morphLeft.hide()
clickCenter.on 'click', -> morphCenter.hide()
clickRight.on 'click', -> morphRight.hide()

CSS

.morphSection {
  /* Styles applied to the morph section containers */
  position: fixed;
  bottom: 0;
  display: block;
  z-index: 1;
  /* So the morph sections show above the sidebar */
}

#morphSectionLeft {
  left: 0;
}

#morphSectionCenter {
  left: 50%;
  transform: translateX(-50%);
}

#morphSectionRight {
  right: 0;
}

.morphButton {
  width: auto;
  /* Clear the width from the button to prevent it expanding with the content */
}

.hx-morph-section > .morphContent {
  overflow-y: auto;
  /* allow the content to scroll */
  max-height: 70vh;
  /* Prevent the content growing larger than 70% of the screen height */
  max-width: 400px;
  /* Max width for content */
  background: white;
}

.buttonWrapRight {
  text-align: right;
  /* Make the button align to the right of the page */
}

.buttonWrapCenter {
  text-align: center;
  /* Make the button align to the center of the page */
}