Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer







Warning when upgrading to Spotfire 10

TIBCO has deprecated the JQueryUI Javascript library in the latest Spotfire 10.0 release

TIBCO Community pages show us how to use JQuery properly

Simple popup




html

<ul>
  <li><a  href="#popup1">Filters</a>
  <li><a  href="#popup2">Inputs</a>
  <li><a  href="#popup3">About</a>
</ul>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Filters</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
      Region:<br>
      <SpotfireControl id="4e267da24bbb4c0caaec3a001ed70c93" />
      <br>Rank:<br>
      <SpotfireControl id="4a5d98d3faae45cfb14beabd3338aeb1" />
      <br>Promotions:<br>
      <SpotfireControl id="7cd9afca669640dba8ef856d5ce227e4" />
      <br>Store Type:<br>
      <SpotfireControl id="634158287ec847808d07dab327b04cf3" />
    </div>
  </div>
</div>

<div id="popup2" class="overlay">
  <div class="popup">
    <h2>Inputs</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
      Enter discount amount:<br> 
      <SpotfireControl id="7965aff6ff4541ca8bf89464411cbfdc" />
      <br>Select state:<br> 
      <SpotfireControl id="c01e7f23d4e04c2bbedf7dac3f16a6da" />
      <br><a href="#"><button style='float:right'>apply</button></a>
    </div>
  </div>
</div>

<div id="popup3" class="overlay">
  <div class="popup">
    <h2>About</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
      Save real state with smart popups!
    </div>
  </div>
</div>

<style>
  .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  }
  .overlay:target {
  visibility: visible;
  opacity: 1;
  }
  .popup {
  margin: 70px auto;
  padding: 20px;
  background: whitesmoke;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  }
  .popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
  }
  .popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 100ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  }
  .popup .close:hover {
  color: #06D85F;
  }
  .popup .content {
  max-height: 30%;
  overflow: auto;
  }
  @media screen and (max-width: 700px){
  .box{
  width: 70%;
  }
  .popup{
  width: 70%;
  }
  }
</style>

No comments: