Effects

Smooth Scroll Between pages JS

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

//when you click on a link in one page, if the link leads to an anchor in another page, this will will load the new page on the top and smooth scroll down to the anchor

$(document).ready(function () {

var urlHash = window.location.href.split("#")[1];

if (urlHash.length > 0)

$('html,body').animate({

scrollTop: $('#' + urlHash).offset().top

}, 875);

... Read more about Smooth Scroll Between pages JS

Tabs

As see on: https://hwpi.harvard.edu/styleguide/tabs

 

Add a class called nicetabs and add to the tabs widget

CSS:

#content-column .nicetabs .boxes-box-content li::before{
display:none;
}

.nicetabs .ui-tabs .ui-tabs-nav li a {
    text-transform: capitalize;
    font-size: 18px;
}
.nicetabs ul.tab-links {
    margin: 0 auto;
    width: 70%;
}
.nicetabs .ui-tabs .ui-tabs-panel {
   ...

Read more about Tabs

Accordion

As used in:

https://islamicstudies.harvard.edu/islam-tolerance

Add this to stylesheet:

.accordion .ui-icon {
    width: 30px;
    height: 30px;
}

.accordion h3 {
    background-color: #BAC5C6!important;
    padding-top: 20px!important;
    padding-bottom: 20px!important;
    margin-bottom: -2px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff!important;
 ...

Read more about Accordion

Zoom/shift Parallax background image

.role-of-boards is the name of the element with the Parallax background image

jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); jQuery(".role-of-boards").css({ backgroundSize: (100 + scroll/100) + "%", top: -(scroll/200) + "%", }); });

Space between Gears in Columns and their widgets

.region .block-boxes .block-boxes .contextual-links-wrapper.contextual-links-processed {
    margin-top: 15px;
}
.region .block-boxes .contextual-links-wrapper.contextual-links-processed {
    margin-top: 0;
}

Blockquote

blockquote {

border-left: 0; background-image: url(https://beta.hwpi.harvard.edu/files/hds-rlp/files/quote.png); background-repeat: no-repeat; background-size: 30px; margin-left: 0; padding-left: 35px; margin-right: 35px; margin-bottom: 45px; padding-top: 5px;

}

Read more about Blockquote

People Images - Display large pic (instead of small thumbnail)

Place this js in a theme (or embed media widget).  In the js below the class .people-lop-lrg-pic is the class applied to the LOP widget.

 

 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
jQuery(document).ready(function() {
// makes lop news pic use full size image
setInterval(function(){ 
jQuery(".view-os-news figure, .full-news-pic figure").each(function() {
  jQuery(this).html(jQuery(this).html().replace("/styles/os_square_100_100/public", ""));
  });...

Read more about People Images - Display large pic (instead of small thumbnail)

Hover Card with Rise Effect

To add a hover over card with a transition rise effect, add the following css to a custom theme.  To trigger the rise effect, add the hover-rise class (along with the cards class) to a columns widget.

.cards.hover-rise .block-boxes-os_boxes_html {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease
}

.cards.hover-rise .block-boxes-os_boxes_html:hover {
-webkit-transform:translateY(-18px);
transform: translateY(-18px)
}

Smooth Scroll JS - Accessible

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {

//This function has been updated to maintain tab focus for accessibility

//reference https://codepen.io/theandyyates/details/dGovD

$('a[href*=#]:not([href=#])').click(function(event) {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

target = $(this.hash);...

Read more about Smooth Scroll JS - Accessible

Pages