Description no link

Description no link

Large JPG-Aro Ha_0428.jpg

Description with link

Description with link

Comon code

Include this when accessing spreadsheet data

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@a6b7734/common.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@31900ba/common.js"></script>

Section Break

<h4 class="museumSectionBreak colorAahom">
Exhibits and Attractions
</h4>

Exhibits and Attractions

Gallery Slideshow

  1. doGalleryShow()

  2. Add blank section with header image, set up the way you want

  3. Add gallery section immediately following, turn on captions you using

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@592c239/gallery.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@7776283/gallery.css" />
<script>
$( document ).ready(function() {
  var gallery = $('#page  article:first-child section.gallery-section').first().find('figure.gallery-grid-item');
    doGalleryShow();
   //$('#imgcontainerTest').appendTo($('#page section:first-of-type div.section-background'));
})
</script>

IconBar

  • showIconBar(sticky = true)

  • If sticky = true then icon bar is glued to the bottom of the header image.

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@2db8d83/iconbar.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@0578afa/iconbar.css" />
<script>
$( document ).ready(function() {
   showIconBar(true);
})
</script>
<div id="iconBar"></div>

Flipbox3

  • build_flipcards3(file_id = null, sheet = null)

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@929b08e/flipbox3.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@ab56830/flipbox3.css" />
<script>
$( document ).ready(function() {
  build_flipcards3(); 
});
</script>
<div id=flexbox class="v3">
  <div class="flex-container">
  </div>
</div>

 

Hours

  • showAddressInfo(museum = null,file_id = null, sheet = null)

  • First parameter of showAddressInfo is museum identification, which can be one of ‘unity’, ‘aahom’, ‘leslie’, ‘yankee’, ‘experience’ ,’challenger’. If null then it will take the first museum listed in the spreadsheet. 

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@13a5628/hours.min.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@a1ece69/hours.min.css" />
<script>
$( document ).ready(function() {
  showAddressInfo('Leslie'); 
});
</script>
<div id="hoursContainer"> 
</div>

FAQS2

  • do_faqs2(museums, collapsed = true, file_id = null, sheet = null)

  • First parameter of do_fags2 is museum identification, which can be one of ‘unity’, ‘aahom’, ‘leslie’, ‘yankee’, ‘experience’ ,’challenger’ or null to include all museums

  • Second parameter of ‘true’ says to collapse all on open, false will collapse all except first entry.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@2b85d7a/faqs2.min.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@921328b/faqs2.min.css" />
<script>
$( document ).ready(function() { 
  do_faqs2('',true);
});
</script>
<div class="faq_container">
</div>

Teamboxes

  • do_team_members2(file_id = null, sheet = null)

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@156bccf/teamboxes2.min.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@059b11c/teamboxes.min.css" />
<script>
$( document ).ready(function() {
    do_team_members2();
});
</script>
<div class="team_container"></div>

Carousel Arrows

Featured



Team List Using SquareSpace Blog


Team List Using SquareSpace Blog


This code reformats a SquareSpace blog list into image blocks using FlexBox, CSS and a bit of jQuery.



Accordian with Markdown


Accordian with Markdown


Create a banner slideshow on any page. Image source is from Gallery block on same page.



Process Data From A Google Docs Spreadsheet


Process Data From A Google Docs Spreadsheet


Grab data from a Google Spreadsheet and present on the page



Screen Shot 2020-12-01 at 7.10.56 AM.png


Slideshow from gallery block


Create a banner slideshow on any page. Image source is from Gallery block on same page.



Manage Junction Table Values


How to manage values in a junction table based on a multiple list of values item



Parse List of Author Names


The following code was used to bulk parse a set of author names in the form of:



APEX 5 Adding a Marquee Region


Here is a simple solution if you need to add a scrolling marquee to an APEX application.



APEX 5 Hiding The Navigation Menu


Totally hide the left navigation menu on entry to the page



APEX 5 JQuery Sortable Classic Report


re-ordering rows of a standard Oracle APEX classic report


Donor Wall

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@9761a2a/donor.min.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@c63115c/donor.min.css" />
<script>
$( document ).ready(function() {
    do_donor_wall_new();
});
</script>
<h2>Donor Wall</h2>
<div  class="summary-excerpt" id="donorWall"></div>

Donor Wall