"Fossies" - the Fresh Open Source Software Archive

Member "pmd-src-6.47.0/docs/js/mydoc_scroll.html" (25 Jun 2022, 15020 Bytes) of package /linux/misc/pmd-src-6.47.0.zip:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

A hint: This file contains one or more very long lines, so maybe it is better readable using the pure text view mode that shows the contents as wrapped lines within the browser window.


    1 ---
    2 title: Scroll layout
    3 type: scroll
    4 keywords: json, scrolling, scrollto, jquery plugin
    5 tags: special_layouts
    6 last_updated: November 30, 2015
    7 summary: "This page demonstrates how you the integration of a script called ScrollTo, which is used here to link definitions of a JSON code sample to a list of definitions for that particular term. The scenario here is that the JSON blocks are really long, with extensive nesting and subnesting, which makes it difficult for tables below the JSON to adequately explain the term in a usable way."
    8 ---
    9 
   10 {% if site.output == "pdf" %}
   11 {{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF.  {{site.data.alerts.end}}
   12 {% endif %}
   13 
   14 {% if site.output == "web" %}
   15  <script src="../js/jquery.scrollTo.min.js"></script>
   16     <!-- local scroll must come after scrollTo, because localScroll is based on scrollTo, which is based on jQuery -->
   17 <script src="../js/jquery.localScroll.min.js"></script>
   18 
   19 <script>
   20 
   21 $( document ).ready(function() {
   22 $('#small-box-links').localScroll({
   23            target:'#definition-box-container',
   24            showSpeed: 1000,
   25            hash: true,
   26            easing: 'swing',
   27            onAfter:function(){
   28           $("#definition-box-container div a").addClass("active");
   29           $("#definition-box-container div a").removeClass("active");
   30           $("#definition-box-container div").removeClass("active");
   31            $(window.location.hash).addClass("active");
   32   }
   33 });
   34 
   35 
   36 });
   37 </script>
   38 
   39 <!-- documentation for localScroll function: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html -->
   40     <style type="text/css">
   41  
   42    #definition-box-container {
   43         border: 0px solid #dedede;
   44         border-radius: 4px;
   45         max-height: 500px;
   46         overflow: scroll;
   47         padding-left:5px;
   48         border-radius:5px;
   49     }
   50 
   51     #json-box-container {
   52 
   53       border: 1px solid #dedede;
   54       border-radius: 4px;
   55       max-height:500px;
   56       overflow: scroll;
   57     }
   58 
   59     #small-box-links {
   60       float: left;
   61     }
   62 
   63     #definition-box-container .active {
   64      background-color: #FFFBCC;
   65     }
   66     
   67     div#definition-box-container div {
   68       padding: 10px;
   69 }
   70 
   71     @media (min-height: 700px)  {
   72        #json-box-container {
   73            max-height:500px;
   74          }
   75            #definition-box-container  {
   76           max-height: 500px;
   77   }
   78     }
   79 
   80      @media (min-height: 800px)  {
   81        #json-box-container {
   82            max-height:600px;
   83     }
   84         #definition-box-container  {
   85           max-height: 600px;
   86   }
   87   }
   88 
   89     @media (min-height: 900px)  {
   90        #json-box-container {
   91            max-height:700px;
   92     }
   93         #definition-box-container  {
   94           max-height: 700px;
   95   }
   96   }
   97 
   98      @media (min-height: 1000px)  {
   99        #json-box-container {
  100            max-height:800px;
  101     }
  102         #definition-box-container  {
  103           max-height: 800px;
  104   }
  105   }
  106 
  107     @media (min-height: 1100px)  {
  108        #json-box-container {
  109            max-height:900px;
  110     }
  111         #definition-box-container  {
  112           max-height: 900px;
  113   }
  114   }
  115 
  116 
  117     </style>
  118 
  119 
  120 <div class="container">
  121 <div class="row">
  122  
  123 <div id="small-box-links">
  124 
  125 <div class="col-md-6">
  126 <div id="json-box-container">
  127 <pre>
  128 {
  129   <a href="#apples">"apples"</a>: "red fruit at the store",
  130   <a href="#bananas">"bananas"</a>: "yellow bananas in a bunch",
  131   <a href="#carrots">"carrots"</a>: "orange vegetables that grow in the ground",
  132   <a href="#dingbats">"dingbats"</a>: "a type of character symbol on a computer",
  133   <a href="#eggs">"eggs"</a>: "chickens lay them, and people eat them",
  134   <a href="#falafel">"falafel"</a>: "a Mediterranean sandwich consisting of lots of different stuff i don't know much about",
  135   <a href="#giraffe">"giraffe"</a>: "tall animal, has purple tongue",
  136   <a href="#hippo">"hippo"</a>: "surprisingly dangerous amphibian",
  137   <a href="#igloo">"igloo"</a>: "an ice shelter made by eskimos",
  138   <a href="#jeep">"jeep</a>: "the only car that starts with a j",
  139   <a href="#kilt">"kilt"</a>: "something worn by scottish people, not a dress",
  140   <a href="#lamp">"lamp"</a>: "you use it to read by your bedside at night"
  141   <a href="#manifold">"manifold"</a>: "an intake mechanism on a car, like a valve, i think",
  142   <a href="#octopus">"octopus"</a>: "eight tentacles, shoots ink, lives in dark caves, very mysterious",
  143   <a href="#paranoia">"paranoia"</a>: "the constant feeling that others are out to get you, conspiring against your success",
  144   <a href="#qui">"qui"</a>: "a life force that runs through your body",
  145   <a href="#radical">"radical"</a>: "someone who opposes the status quo in major ways",
  146   <a href="#silly">"silly"</a>: "how I feel writing this dummy copy",
  147   <a href="#taffy">"taffy"</a>: "the sweets children like the most and dentists hate the worst",
  148   <a href="#umbrella">"umbrella"</a>: "an invention that has not had any advancements in 200 years",
  149   <a href="#vampire">"vampire"</a>: "a paranormal figure that is surprisingly in vogue despite its basic nature",
  150   <a href="#washington">"washington"</a>: "the place where tom was born",
  151   <a href="#xylophone">"xylophone"</a>: "some kind of pinging instrument used to sound chime-like notes",
  152   <a href="#yahoo">"yahoo"</a>: "an expression of exuberance, said under breath when something works right",
  153   <a href="#zeta">"zeta"</a>: "the way british people pronounce z",
  154   <a href="#alpha">"alpha"</a>: "the original letter of the alphabet, which has since come to mean the first. however, i think the original symbol of alpha is actually an ox. it is somewhat of a mystery to linquists as to the exact origin of the letter alpha, but it basically represents the dawn of the alphabet, which proved to be a huge step forward for human thought and expression.",
  155   <a href="#beta">"beta"</a>: "the period of time when something is finished but undergoing testing by a group of people.",
  156   <a href="#cappa">"cappa"</a>: "how italians refer to their baseball caps",
  157   <a href="#dunno">"dunno"</a>: "informal expression for 'don't know'"
  158   }
  159       
  160 </pre>
  161 
  162 </div><!-- end json-box-container-->
  163 </div> <!-- end col-md-6-->
  164 
  165 <div class="col-md-3">
  166 
  167 <div id="definition-box-container">
  168 
  169 
  170     <div id="apples"><h5>apples</h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer magna massa, euismod sed rutrum at, ullamcorper quis tellus. Vestibulum erat purus, aliquet sit amet pellentesque eget, tempus at ante. Nulla justo nisi, elementum nec nisi eget, consectetur varius tortor. </div>
  171 
  172     <div id="bananas"><h5>bananas</h5>Curabitur quis nibh sed eros viverra tempus et quis lorem. Nulla convallis sit amet risus vitae rutrum. Nulla at faucibus lectus. Pellentesque tortor nisl, interdum ac quam non, egestas congue massa. Vestibulum non porttitor lacus. Nam tincidunt arcu lectus. Donec eget ornare neque, hendrerit ornare lectus. In ac pretium odio.</div>
  173 
  174     <div id="carrots"><h5>carrots</h5>Vivamus pulvinar vestibulum pharetra. Vivamus vitae diam iaculis, posuere mi sed, dignissim massa. Nunc vitae aliquet urna. Proin sed pulvinar ex. Maecenas nisl lorem, rutrum sit amet hendrerit sed, posuere at odio. Sed consectetur semper tristique. Vivamus finibus varius felis at convallis. Fusce in dictum nunc.</div>
  175 
  176     <div id="dingbats"><h5>dingbats</h5>Curabitur feugiat lorem eget elit ullamcorper tincidunt. In euismod diam aliquet tortor fermentum tempor. Fusce quam felis, commodo viverra orci vitae, scelerisque aliquet risus. </div>
  177 
  178     <div id="eggs"><h5>eggs</h5>Duis est nunc, fringilla eu ligula et, varius dignissim dui. Vivamus in tellus vitae ipsum vehicula fermentum at congue tellus. Suspendisse fermentum, magna vitae aliquet sodales, tellus nisi rutrum arcu, vitae auctor dolor quam ac tellus. Cras posuere augue erat, in sagittis quam lacinia id.</div>
  179 
  180     <div id="falafel"><h5>falafel</h5>Praesent auctor a enim non lacinia. Integer sodales aliquet mi vel dapibus. Donec consequat justo eget nisi lacinia, eu sodales ligula molestie. Sed sapien nulla, rhoncus at elementum a, </div>
  181 
  182     <div id="giraffe"><h5>giraffe</h5>Nullam venenatis at lectus sed pharetra. Sed hendrerit ligula lectus, non pellentesque diam faucibus sit amet. Aliquam dictum hendrerit pellentesque. Cras eu nisl sagittis, faucibus velit sit amet, sagittis odio. Donec vulputate ex vitae purus</div>
  183 
  184     <div id="hippo"><h5>hippo</h5>Cras nec pretium nulla. Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. Curabitur iaculis sapien sed venenatis auctor. Integer eu orci at lectus eleifend auctor id rutrum urna.</div>
  185 
  186     <div id="igloo"><h5>igloo</h5>Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus.  </div>
  187 
  188     <div id="jeep"><h5>jeep</h5>Nulla vitae metus rutrum, condimentum orci nec, maximus est. Aenean sit amet ante nec elit dignissim faucibus eget quis quam. </div>
  189 
  190     <div id="kilt"><h5>kilt</h5>Morbi maximus, erat vel rhoncus sagittis, dolor purus dignissim ante, sit amet pharetra ex justo vitae ipsum. Nulla consequat interdum neque</div>
  191 
  192     <div id="lamp"><h5>lamp</h5>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam dapibus blandit. Donec porta, enim hendrerit venenatis vulputate, orci diam lacinia nibh, faucibus rutrum dolor dui ut quam.</div>
  193 
  194     <div id="manifold"><h5>manifold</h5>Donec finibus massa vel nisi ullamcorper, vitae ornare enim euismod. Aliquam auctor quam erat. Duis interdum rutrum orci, ac interdum urna pharetra eget.</div>
  195 
  196     <div id="octopus"><h5>octopus</h5>Nulla id egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Curabitur eu lobortis ligula.</div>
  197 
  198     <div id="paranoia"><h5>paranoia</h5>Aenean hendrerit mauris ipsum, non laoreet ipsum luctus vel. Curabitur tristique auctor elit ut pulvinar. Quisque arcu arcu, condimentum aliquam sodales nec, dignissim nec justo. Nunc tristique sem felis, pharetra euismod lorem volutpat sed. Ut porttitor metus sit amet elit rhoncus semper.</div>
  199 
  200     <div id="qui"><h5>qui</h5>Quisque rhoncus cursus felis vel elementum. Vestibulum dignissim molestie tortor nec facilisis. Praesent a nibh condimentum, porta nulla egestas, auctor eros</div>
  201 
  202     <div id="radical"><h5>radical</h5>Etiam hendrerit interdum tellus, at aliquet sapien egestas in. Aenean eu urna nisl. Cras vitae risus pharetra, elementum mauris nec, auctor lectus. Fusce pellentesque venenatis dictum. Proin at augue at mauris finibus semper ultricies sed eros.</div>
  203 
  204     <div id="silly"><h5>silly</h5>Praesent pulvinar consequat posuere. Morbi egestas rhoncus felis, id fermentum metus lobortis in. Vestibulum nibh orci, euismod eget vestibulum nec, vehicula vitae tortor. Aenean ullamcorper enim nunc, eu auctor ligula auctor eget.</div>
  205 
  206     <div id="taffy"><h5>taffy</h5>Etiam et arcu vel lacus aliquet lobortis in in massa. Nunc non mollis elit. Aenean accumsan orci quis risus aliquam, non gravida nulla molestie. Mauris pharetra libero et magna aliquam aliquam. Integer quis luctus dolor. </div>
  207 
  208     <div id="umbrella"><h5>umbrella</h5>Fusce molestie finibus malesuada. Nullam ac egestas quam, id venenatis ligula. Pellentesque pulvinar elit et vestibulum fringilla. Cras volutpat sed quam ornare scelerisque. Vivamus volutpat ante pretium scelerisque tempus. Etiam venenatis tempor nisl dignissim sollicitudin. Curabitur ac risus vitae dolor pretium posuere vel vitae diam. Donec in odio arcu.</div>
  209 
  210     <div id="vampire"><h5>vampire</h5>Vestibulum pretium condimentum commodo. Integer placerat leo non ipsum ultrices, ac convallis elit varius. Vestibulum ultricies, justo eu rutrum molestie, quam arcu euismod sapien, vel gravida ipsum nulla eget erat. </div>
  211 
  212     <div id="washington"><h5>washington</h5>Nunc ac quam eu risus dictum sodales. Nam ac risus iaculis, aliquet sem eu, mollis mauris. Curabitur pretium facilisis orci ut lacinia. Sed fermentum leo a odio blandit rutrum. Phasellus at nibh vel odio interdum vulputate ac eget urna. Nam eu arcu dapibus, sodales ligula nec, volutpat ipsum. Suspendisse auctor tellus vitae libero euismod venenatis. </div>
  213 
  214     <div id="xylophone"><h5>xylophone</h5>Sed molestie lobortis ante sit amet hendrerit. Sed pharetra nisi sed interdum pulvinar. Nunc efficitur erat non aliquam mattis. Sed id nisl mattis lacus vehicula volutpat vitae vel massa. Curabitur interdum velit odio, vitae sollicitudin nunc rutrum non. </div>
  215 
  216     <div id="yahoo"><h5>yahoo</h5>Nunc commodo consectetur scelerisque. Proin fermentum ligula ac quam finibus tincidunt. Aenean venenatis nisi et semper semper. Nunc sodales velit ipsum, ac pellentesque augue placerat eu.</div>
  217 
  218     <div id="zeta"><h5>zeta</h5>Nullam ac suscipit odio. Curabitur viverra arcu ut egestas sollicitudin. Fusce sodales varius lectus ut tristique. Etiam eget nunc ornare, aliquet tortor eget, consequat mauris. Integer sit amet fermentum augue. </div>
  219 
  220     <div id="alpha"><h5>alpha</h5>Praesent nec neque ac tellus sodales eleifend nec vel ipsum. Cras et semper risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mattis leo nisl, a tincidunt lectus tristique eget. Donec finibus lobortis viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus egestas pulvinar odio non vehicula. Morbi malesuada leo eget nisl sagittis aliquet.</div>
  221 
  222 
  223     <div id="beta"><h5>beta</h5>Mauris a libero vel enim pharetra interdum non a quam. Sed tincidunt ut elit sed dignissim. Suspendisse vitae tellus dapibus, fermentum lacus ac, fermentum lacus. Nam ante odio, fringilla ac elementum a, mollis sed tellus.</div>
  224 
  225     <div id="cappa"><h5>cappa</h5>Nam molestie semper nulla et molestie. Ut facilisis, ipsum sed convallis posuere, mi mauris bibendum erat, nec egestas ipsum est nec dolor. </div>
  226 
  227     <div id="dunno"><h5>dunno</h5>Etiam et metus congue, commodo libero et, accumsan sem. Aliquam erat volutpat. Quisque tincidunt, tortor non blandit ullamcorper, orci mauris dignissim augue, eget vehicula nulla justo sed dolor. Nunc ac urna quis nisi maximus pharetra in a mauris. Proin metus mi, venenatis vitae tristique sed, fermentum at purus. Aliquam erat volutpat. Maecenas efficitur sodales nibh, ac hendrerit felis facilisis et. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
  228 
  229 
  230 </div> <!-- end definition-box-container -->
  231 </div> <!-- end col-md-3-->
  232 </div> <!-- end small-box-links -->
  233 </div> <!-- end row -->
  234 </div> <!-- end container -->
  235 
  236 
  237 {{site.data.alerts.note}} This was mostly an experiment to see if there was a better way to document a long JSON code example. I haven't actually used this approach in my own documentation.{{site.data.alerts.end}}
  238 
  239 {% endif %}
  240