Fix increase/decrease example in header

server/documents/elements/header.html.eco

@@ -14,6 +14,8 @@ themes      : ['Default', 'Bookish', 'Chubby']
 
 <%- @partial('header') %>
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/header.less" />
+<script src="/javascript/header.js"></script>
+
 <div class="main container">
 
   <div class="peek">
@@ -65,7 +67,11 @@ themes      : ['Default', 'Bookish', 'Chubby']
     <h4 class="ui header">Page Headings</h4>
     <p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
     <div class="ignored info ui message">Page headings size themselves relative to the base font of the entire page not the surrounding text.</div>
-    <div class="ui basic segment">
+    <div class="ui ignored two fluid font buttons">
+      <a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
+      <a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
+    </div>
+    <div class="ui segment">
       <h1 class="ui header">First header</h1>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
       <h2 class="ui header">Second header</h2>
@@ -77,17 +83,17 @@ themes      : ['Default', 'Bookish', 'Chubby']
       <h5 class="ui header">Fifth header</h5>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
-    <div class="ui ignored secondary two item font menu">
-      <a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
-      <a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
-    </div>
   </div>
 
   <div class="example">
     <h4 class="ui header">Content Headings</h4>
     <p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p>
     <div class="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div>
-    <div class="ui basic segment">
+    <div class="ui ignored two fluid font buttons">
+      <a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
+      <a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
+    </div>
+    <div class="ui segment">
       <div class="ui huge header">Huge Header</div>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
       <div class="ui large header">Large Header</div>
@@ -99,10 +105,6 @@ themes      : ['Default', 'Bookish', 'Chubby']
       <div class="ui tiny header">Tiny Header</div>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
-    <div class="ui ignored secondary two item font menu">
-      <a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
-      <a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
-    </div>
   </div>
 
   <h2 class="ui dividing header">States</h2>

server/files/javascript/semantic.js

@@ -45,11 +45,12 @@ semantic.ready = function() {
 
     $menuPopup        = $('.ui.main.menu .popup.item'),
     $menuDropdown     = $('.ui.main.menu .dropdown'),
-    $pageTabMenu      = $('.tab.header.segment .tabular.menu'),
-    $pageTabs         = $('.tab.header.segment .menu .item'),
+    $pageTabMenu      = $('body > .tab.segment .tabular.menu'),
+    $pageTabs         = $('body > .tab.segment .menu .item'),
 
     $downloadDropdown = $('.download.buttons .dropdown'),
 
+    $helpPopup        = $('.header .help.icon'),
 
     $example          = $('.example'),
     $shownExample     = $example.filter('.shown'),
@@ -59,10 +60,6 @@ semantic.ready = function() {
     $designer         = $('.designer.item'),
 
     $sidebarButton    = $('.attached.launch.button'),
-
-    $increaseFont     = $('.font .increase'),
-    $decreaseFont     = $('.font .decrease'),
-
     $code             = $('div.code').not('.existing'),
     $existingCode     = $('.existing.code'),
 
@@ -145,15 +142,15 @@ semantic.ready = function() {
             url      : variableURL,
             dataType : 'text',
             urlData  : urlData,
-            onSuccess: function(content) {
-              window.less.modifyVars( handler.less.parseFile(content) );
+            success: function(content) {
+              less.modifyVars( handler.less.parseFile(content) );
               $themeDropdown
                 .api({
                   on       : 'now',
                   url      : overrideURL,
                   dataType : 'text',
                   urlData  : urlData,
-                  onSuccess: function(content) {
+                  success: function(content) {
                     if( $('style.override').size() > 0 ) {
                       $('style.override').remove();
                     }
@@ -236,28 +233,6 @@ semantic.ready = function() {
         return $element;
       }
     },
-
-    font: {
-
-      increase: function() {
-        var
-          $container = $(this).parent().prev('.ui.segment'),
-          fontSize   = parseInt( $container.css('font-size'), 10)
-        ;
-        $container
-          .css('font-size', fontSize + 1)
-        ;
-      },
-      decrease: function() {
-        var
-          $container = $(this).parent().prev('.ui.segment'),
-          fontSize   = parseInt( $container.css('font-size'), 10)
-        ;
-        $container
-          .css('font-size', fontSize - 1)
-        ;
-      }
-    },
     overviewMode: function() {
       var
         $button  = $(this),
@@ -710,22 +685,8 @@ semantic.ready = function() {
     }
   };
 
-
-  $sidebarButton
-    .on('mouseenter', handler.menu.mouseenter)
-    .on('mouseleave', handler.menu.mouseleave)
-  ;
-  $menu
-    .sidebar({
-      animation : 'scale down'
-    })
-    .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
-    .sidebar('attach events', $hideMenu, 'hide')
-  ;
-
   $('.masthead')
     .visibility({
-      context: '.pusher > .page',
       once: false
     })
     .visibility('bottom visible', function(){
@@ -800,15 +761,12 @@ semantic.ready = function() {
     .each(handler.createCode)
   ;
 
-  $swap
-    .on('click', handler.swapStyle)
+  $helpPopup
+    .popup()
   ;
 
-  $increaseFont
-    .on('click', handler.font.increase)
-  ;
-  $decreaseFont
-    .on('click', handler.font.decrease)
+  $swap
+    .on('click', handler.swapStyle)
   ;
 
   $developer
@@ -840,6 +798,17 @@ semantic.ready = function() {
     })
   ;
 
+  $sidebarButton
+    .on('mouseenter', handler.menu.mouseenter)
+    .on('mouseleave', handler.menu.mouseleave)
+  ;
+  $menu
+    .sidebar({
+      animation: 'scale down'
+    })
+    .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
+    .sidebar('attach events', $hideMenu, 'hide')
+  ;
   $waypoints
     .waypoint({
       continuous : false,