Ancestry Pages: Javascript/jQuery Notes

This page has notes on using javascript and jQuery. General implementation notes are here, and notes on Bootstrap are here.

preventDefault

When writing a javascript function that handles a click event, include a call to the preventDefault method. The need for this was made clear twice while developing the photos page.

Clicking on the information icon in the bottom right of a photo brings up a popover containing a description of the photo. This was working, but as the popover appeared, the display scrolled back to the top of the page.

Clicking on the reverse icon on a photo that has a "back image" replaces the photo with the image of the reverse side. This was working, but the replacement image appeared briefly, then the original image came back, and the display scrolled back to the top of the page.

Both of these issues were resolved by adding a call to preventDefault to the click handling function. Here is a Stack Overflow discussion re: clicking a popover scrolls back to top of page. This article discusses the difference between preventDefault and return false.

Here's the code that runs on the photos page when the info icon for a photo is clicked:

  // Prevent scroll to top of page when popover link is clicked.
  $('.photo-info-link').on('click', function(e) {e.preventDefault(); return true;});

Topic Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora consequuntur at, ipsum! A labore ad explicabo veritatis cupiditate sit totam beatae sapiente nulla, sint obcaecati perspiciatis dolorem modi iste.