User:Jeremy/sandbox: Difference between revisions

From WikiMSK
No edit summary
No edit summary
 
(66 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Test|section3=Test3|section3-title=test|section3-text=test}}
<html>
<html>
<!--
<div class="example">
    
    
  Radio version of tabs.
</div>
<script>
// how to use the funciton on line 94
// for questions email felix@demont.is


   Requirements:
var images10 = [
   - not rely on specific IDs for CSS (the CSS shouldn't need to know specific IDs)
  "https://c1.staticflickr.com/5/4408/36911638800_7f554b122f_o.jpg",
   - flexible for any number of unkown tabs [2-6]
  "https://c1.staticflickr.com/5/4345/36911638670_a1bbffc14c_o.jpg",
   - accessible
   "https://c1.staticflickr.com/5/4359/37166488521_67b51412f5_o.jpg",
   "https://c1.staticflickr.com/5/4375/36911638530_9a5f5f9299_o.jpg",
   "https://c1.staticflickr.com/5/4417/36495726713_20521b5372_o.jpg",
  "https://c1.staticflickr.com/5/4376/36495726633_8b48fc83d3_o.jpg",
  "https://c1.staticflickr.com/5/4343/36495726613_4f8310a864_o.jpg",
  "https://c1.staticflickr.com/5/4425/36495726553_8fd2411a7f_o.jpg",
  "https://c1.staticflickr.com/5/4394/36495726443_cb6f6b0d9b_o.jpg",
   "https://c1.staticflickr.com/5/4348/36911638180_551e1c2257_o.jpg"
];


   Caveats:
var images19 = [
   - since these are checkboxes the tabs not tab-able, need to use arrow keys
   "https://wikimsk.org/w/img_auth.php/b/b7/MRI_T2_Lumbar_Spine_L1_Transpedicular_Axial.jpg",
   "https://wikimsk.org/w/img_auth.php/thumb/b/bb/MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg",
  "https://wikimsk.org/w/img_auth.php/thumb/f/f9/MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/b/be/MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/f/f1/MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/4/40/MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/2/27/MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/e/e9/MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/0/00/MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/c/cc/MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/5/59/MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/4/49/MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/a/ab/MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/1/13/MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/9/94/MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg"
];


  Also worth reading:
images = images10;
  http://simplyaccessible.com/article/danger-aria-tabs/
images2 = images19;
-->


<div class="tabset">
function ImageStack (options) {
   <!-- Tab 1 -->
 
   <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
  var self = this;
   <label for="tab1">Märzen</label>
   
   <!-- Tab 2 -->
  self.img_array = options.images;
   <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
 
   <label for="tab2">Rauchbier</label>
  self.stack = document.createElement('div');
  <!-- Tab 3 -->
  self.stack.style.overflow = 'auto';
  <input type="radio" name="tabset" id="tab3" aria-controls="dunkles">
   self.stack.style.maxWidth = '100%';
   <label for="tab3">Dunkles Bock</label>
   self.stack.style.height = options.height;
  self.stack.style.width = options.width;
  self.stack.style.backgroundSize = 'cover'
  self.stack.style.position = 'relative';
    
  var typeRegex = /(\D+)/
  var sizeType = options.height.match(typeRegex)[0]
    
   var numberRegex = /(\d+)/
  self.height_number = Number( options.height.match(numberRegex)[0] )
   
  self.wrapper = document.createElement('div');
 
   for (var i = 0; i < self.img_array.length; i++) {
   
    var image = document.createElement('img');
    image.src = self.img_array[i];
   
    image.style.display = 'none';
    image.style.position = 'absolute';
    image.style.width = options.width;
    image.style.height = options.height;
    image.style.top = 0;
    image.style.left = 0;
    image.dataset.iid = i;
   
    self.wrapper.appendChild(image);
   
   }
   
  self.image_elements = self.wrapper.querySelectorAll('img');
    
    
   <div class="tab-panels">
   self.scrollobject = document.createElement('div');
    <section id="marzen" class="tab-panel">
  self.scrollobject.style.width = '100%';
      <h2>6A. Märzen</h2>
  self.scrollobject.style.position = 'absolute';
      <p><strong>Overall Impression:</strong> An elegant, malty German amber lager with a clean, rich, toasty and bready malt flavor, restrained bitterness, and a dry finish that encourages another drink. The overall malt impression is soft, elegant, and complex, with a rich aftertaste that is never cloying or heavy.</p>
  self.scrollobject.style.zIndex = '2';
      <p><strong>History:</strong> As the name suggests, brewed as a stronger “March beer” in March and lagered in cold caves over the summer. Modern versions trace back to the lager developed by Spaten in 1841, contemporaneous to the development of Vienna lager. However, the Märzen name is much older than 1841; the early ones were dark brown, and in Austria the name implied a strength band (14 °P) rather than a style. The German amber lager version (in the Viennese style of the time) was first served at Oktoberfest in 1872, a tradition that lasted until 1990 when the golden Festbier was adopted as the standard festival beer.</p>
  if (self.img_array.length > 15){
  </section>
  self.img_count = self.img_array.length;
    <section id="rauchbier" class="tab-panel">
  } else {
      <h2>6B. Rauchbier</h2>
  self.img_count = 15;
      <p><strong>Overall Impression:</strong>  An elegant, malty German amber lager with a balanced, complementary beechwood smoke character. Toasty-rich malt in aroma and flavor, restrained bitterness, low to high smoke flavor, clean fermentation profile, and an attenuated finish are characteristic.</p>
  }
      <p><strong>History:</strong> A historical specialty of the city of Bamberg, in the Franconian region of Bavaria in Germany. Beechwood-smoked malt is used to make a Märzen-style amber lager. The smoke character of the malt varies by maltster; some breweries produce their own smoked malt (rauchmalz).</p>
  self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
    </section>
    <section id="dunkles" class="tab-panel">
      <h2>6C. Dunkles Bock</h2>
      <p><strong>Overall Impression:</strong> A dark, strong, malty German lager beer that emphasizes the malty-rich and somewhat toasty qualities of continental malts without being sweet in the finish.</p>
      <p><strong>History:</strong> Originated in the Northern German city of Einbeck, which was a brewing center and popular exporter in the days of the Hanseatic League (14th to 17th century). Recreated in Munich starting in the 17th century. The name “bock” is based on a corruption of the name “Einbeck” in the Bavarian dialect, and was thus only used after the beer came to Munich. “Bock” also means “Ram” in German, and is often used in logos and advertisements.</p>
    </section>
  </div>
    
    
</div>
  self.scrollobject.style.height = self.scrollobject_height + sizeType;
 
  self.scrollUpdate = function (e) {
   
    self.height_number = self.stack.getBoundingClientRect().height
    self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
   
    var sT = self.stack.scrollTop
    var hn05 = self.img_array.length - 1
    var hh = (self.scrollobject_height - self.height_number) / hn05
    scrollval = Math.floor(sT / (hh))
   
    self.currentimg = self.image_elements[scrollval].src
   
    self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
   
  }
 
  self.stack.addEventListener('scroll', self.scrollUpdate);
 
  self.currentimg = self.image_elements[0].src
  self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
 
  /*
 
  window.addEventListener('resize', function () {
    var stackRect = self.stack.getBoundingClientRect()
   
    console.log(stackRect)
   
    self.height_number = stackRect.height
    self.scrollobject_height = Math.floor( 0.1 * self.img_array.length * self.height_number );
   
    self.stack.style.width = stackRect.width + 'px'
    self.stack.style.eight = stackRect.width + 'px'
  })
 
  */
     
  self.stack.appendChild(self.wrapper);
  self.stack.appendChild(self.scrollobject);
 
  return self.stack;
 
}


<p><small>Source: <cite><a href="https://www.bjcp.org/stylecenter.php">BJCP Style Guidelines</a></cite></small></p>
<style>
/*
/*
CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}


.tabset .tab-panel {
The function ImageStack returns a Element Node, which can be appended to an already existing element or modified, however someone wants to change it.
  display: none;
}


.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
The parameters should have to be a height of the element, the width of the elment, and a list (Array) to all the images.
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}


/*
Styling
*/
*/
body {
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}
.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}


.tabset > label::after {
var stack = new ImageStack({
   content: "";
   images: images2,
   position: absolute;
   height: '350px',
  left: 15px;
   width: '350px'
  bottom: 10px;
});
   width: 22px;
  height: 4px;
  background: #8d8d8d;
}


.tabset > label:hover,
var stack2 = new ImageStack({
.tabset > input:focus + label {
  images: images,
   color: #06c;
  height: '30rem',
}
   width: '30rem'
});


.tabset > label:hover::after,
// append the stack to the .example element
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}


.tabset > input:checked + label {
document.querySelector('.example').appendChild(stack);
  border-color: #ccc;
document.querySelector('.example').appendChild(stack2);
  border-bottom: 1px solid #fff;
</script>
  margin-bottom: -1px;
}
 
.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}
 
/*
Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}
 
body {
  padding: 30px;
}
 
.tabset {
  max-width: 65em;
}
</style>
</html>
</html>

Latest revision as of 22:17, 24 October 2022

Retrieved from ‘https://wikimsk.org/w/index.php?title=User:Jeremy/sandbox&oldid=19494’