Dear Graduate Students at UMBC,

The Council of Graduate Schools (CGS) is working with universities across the country to learn more about the financial needs of graduate students. We're asking all graduate students, including those who are working full-time, to participate in this conversation by completing a survey. 

We launched the survey in April, but CGS is allowing us to offer a BONUS ROUND for the "Survey of Financial Standing" for those graduate students who did not complete the survey last month. We have winners for the initial round: $500 in prizes! For this BONUS ROUND, There will be three additional prizes of $50 gift cards! *ALL* graduate students from all disciplines are eligible, including both part-time and full-time students.  

The following information was sent to all graduate students on May 7th: 

The Graduate School is administering the CGS Survey of Financial Standing, so that UMBC and graduate schools around the country can understand, and better serve, graduate students' financial needs.  If you did not take the survey in April 2014, please click:

 https://www.surveymonkey.com/s/PS8BHG9

The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. I'm happy to have Pankaj back, this time to tackle the idea of showing reading progress (or really, a scroll position indicator) on websites, which has been a mini-trend lately.

Lately I've seen quite a few websites that have some kind of an indicator to display the current reading position (how much you have "read", depending on how far you have scrolled down an article). Generally, such indicators are used on blog posts or long form articles and help readers understand how far they are from finishing the article.

Here are some examples:

Interestingly, all three techniques represent the same information but with a different approach. I don't know if there is a name for this feature - so throughout the article, I call it a Reading Position Indicator.

In this article, we'll focus on the first technique that uses a horizontal progress bar as the indicator. But instead of using traditional div/span(s) and some non-linear math to build the indicator, we will use the HTML5 progress element. In my opinion <progress> is much more semantically accurate and suitable to represent this information, and that too with no complex calculations involved.

The Problem

To build a reading position indicator, we need to answer two important questions:

1. What is the length of the webpage? The length of the webpage is same as the length of the document, which can be calculated via JavaScript.
2. What is the current reading position of the user? Determining the current reading position of the user would entail hacking into the user's mind to extract the portion of the document currently being read by the user. This appears more like a candidate for Artificial Intelligence and seems impossible; given the scope of technologies that we are dealing with.

This leaves us with no choice but to tackle this problem statement with a completely different approach.

Principle

The principle behind this technique is based on a simple fact that the user needs to scroll to reach the end of the web page. Once the user reaches the end of the web page we can conclude that he/she has finished reading the article. Our technique revolves around the scroll event which is likely to be the key to determine an approximate position of the user while reading.

Assuming the user starts reading from the top and will only scroll once he/she reaches the end of the viewport, we'll attempt to answer the following questions:

1. How much the user needs to scroll to reach the end of the web page? The portion of page that is hidden from the viewport is exactly the amount of scroll the user needs to perform to reach the end of the page. This will become our max attribute.
2. How much portion of the page, user has already scrolled? This can be determined by calculating the vertical offset of the top of the document from the top of the window which will become our value attribute.

In the context of the browser, document and window are two different objects. window is the viewable area of the browser (thick blue box in the above example) and document is actually the page that loads inside the window (thin grey box currently scrolling).

Markup

Let's start with a basic markup:

<progress value="0"></progress>

It's important to explicitly specify the value attribute. Otherwise, our progress bar will be in the indeterminate state. We don't want to add unnecessary styles in CSS for the indeterminate state. Thus we choose to ignore this state by specifying the value attribute. Initially, the user starts reading from the top, hence, the starting value set in the markup is 0. The default value of the max attribute (if unspecified) is 1.

To determine the correct value for the max attribute, we need to subtract the window's height from the height of the document. This can only be done via JavaScript, so we will worry about it at a later stage.

The placement of the markup in the HTML document would heavily depend on the how rest of the elements are placed. Typically, if you have no fixed position containers in your document, then you can place the progress element right on top of all the elements inside the <body> tag.

<body>
      <progress value="0"></progress>
    
      <!--------------------------------
      Place the rest of your markup here
      --------------------------------->
    </body>

Styling the indicator

Since, we want our indicator to always sit on top of the web page, even when the user scrolls, we'll position the progress element as fixed. Additionally, we would want the background of our indicator to be transparent so that an empty progress bar doesn't create a visual hinderance while scrolling through the web page. At the same time this will also help us tackle browsers with JavaScript disabled that we'll cover later.

progress {
      /* Positioning */
      position: fixed;
      left: 0;
      top: 0;
    
      /* Dimensions */
      width: 100%;
      height: 5px;
    
      /* Reset the appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
    
      /* Get rid of the default border in Firefox/Opera. */
      border: none;
    
      /* Progress bar container for Firefox/IE10+ */
      background-color: transparent;
    
      /* Progress bar value for IE10+ */
      color: red;
    }

For Blink/Webkit/Firefox, we need to use vendor specific pseudo elements to style the value inside the progress bar. This will be used to add color to our indicator.

progress::-webkit-progress-bar {
      background-color: transparent;
    }
    
    progress::-webkit-progress-value {
      background-color: red;
    }
    
    progress::-moz-progress-bar {
      background-color: red;
    }

Interaction

Calculating the width/height of window and document in JavaScript is messy and varies horribly across different breed of browsers. Thankfully, jQuery manages to abstract all the complexities offered by these browsers and provides a much cleaner mechanism to calculate the dimensions of window and document. Hence, for the rest of the article we'll rely on jQuery to handle all our interactions with the user.

Before, we begin, do not forget to add jQuery library to your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

We need jQuery to determine the max and the value attribute of our progress element.

• max - The max value is the portion of the document that lies outside the viewport which can be calculated by subtracting the window's height from the height of the document.

  var winHeight = $(window).height(),
        docHeight = $(document).height();
        max = docHeight - winHeight;
      
      $(progress).attr('max', max);

• value - Initially, value will be zero (already defined in the markup). However, as soon as the user starts scrolling, the vertical offset of the top of the document from the top of the window will increase. If the scrollbar is at the very top, or if the element is not scrollable, the offset will be 0.

  var value = $(window).scrollTop();
      $(progress).attr('value', value);

Now, everytime the user scrolls, we need to re-calculate the y-offset from the top of the window and then set it to the value attribute of the progress element. Note that the max attribute remains the same and doesn't change when the user scrolls.

$(document).on('scroll', function() {
      value = $(window).scrollTop();
      progressBar.attr('value', value);
    });

The direction in which the user is scrolling is not important, because we always calculate the y-offset from the top of the window.

It's important that our code executes only then the DOM is loaded, otherwise, premature calculation of window/document's height could lead to weird and unpredictable results.

$(document).on('ready', function() {  
      var winHeight = $(window).height(), 
          docHeight = $(document).height(),
          progressBar = $('progress'),
          max, value;
    
      /* Set the max scrollable area */
      max = docHeight - winHeight;
      progressBar.attr('max', max);
    
      $(document).on('scroll', function(){
         value = $(window).scrollTop();
         progressBar.attr('value', value);
      });
    });

(Or ensure this code is loaded at the bottom of the page instead of the top, and skip the document ready call.)

Browser compatibility

This is all what we need to build a functional reading position indicator that works equally well in all the browsers that support the HTML5 progress element. However, the support is limited to Firefox 16+, Opera 11+, Chrome, Safari 6+. IE10+ partially supports them. Opera 11 and 12 doesn't permit changing the progress bar color. Hence, our indicator reflects the default green color.

Variants

There are quite a few variations possible in which we can style the indicator. Especially, the semantic color scheme (fourth variation) is a useful experiment, wherein the indicator changes color based on the proximity of the reading position from the end of the article.

• Flat color scheme (default)
• Single color gradient
• Multi color gradient
• Semantic color scheme

See the Pen Reading Position Indicator by Pankaj Parashar (@pankajparashar) on CodePen.

Photo in the demo is by Dan Eden.

Edge cases

There are few scenarios, where our code can potentially break or present the user with an incorrect indicator. Let's look at those edge cases:

Document height <= Window height

So far, our code assumes that the height of the document is greater than the window's height, which may not be the case always. Fortunately, browsers handle this situation very well by returning the height of the window, when the document is visibly shorter than the window. Hence, docHeight and winHeight are the same.

max = docHeight - winHeight; // equal to zero.

This is as good as a progress element with both max and value attribute as zero.

<progress max="0" value="0"></progress>

Hence, our progress bar would remain empty and since our background is transparent, there will be no indicator on the page. This makes sense because, when the entire page can fit within the viewport there is really no need for an indicator.

Moreover, the scroll event won't fire at all because the height of the document doesn't exceed the window height. Hence, without making any modification, our code is robust enough to handle this edge case.

User resizes the window

When the user resizes the window, the height of the window and the document will change. This means that we will have to recalculate the max and the value attribute to reflect the correct position of the indicator. We'll bind the code that calculates the correct position to the resize event handler.

$(window).on('resize', function() {
      winHeight = $(window).height(),
      docHeight = $(document).height();
    
      max = docHeight - winHeight;
      progressBar.attr('max', max);
    
      value =  $(window).scrollTop();
      progressBar.attr('value', value);
    });

Javascript is disabled

When JavaScript is disabled our progress bar would have the default value as 0 and max as 1.

<progress max="1" value="0"></progress>

This would mean that the progress bar would remain empty and wouldn't affect any part the page. This is as good, as a page with no indicator isn't a big loss to the reader.

Fallback for older browsers

Older browsers that do not support the HTML5 progress element will simply ignore the progress tag. However, for some devs providing a consistent experience is important. Hence, in the following section, we'll employ the same fallback technique that was used in my previous article to implement the reading position indicator for oler browsers.

Markup - The idea is to simulate the look and feel of the progress element with div/span(s). Modern browsers will render the progress element and ignore the markup inside it, whereas older browsers that cannot understand the progress element will ignore it and instead render the markup inside it.

<progress value="0">
      <div class="progress-container">
        <span class="progress-bar"></span>
      </div>
    </progress>

Styling - The container will always span across the width of the webpage and the background will stay transparent to handle other edge cases.

.progress-container {
      width: 100%;
      background-color: transparent;
      position: fixed;
      top: 0;
      left: 0;
      height: 5px;
      display: block;
    }
    .progress-bar {
      background-color: red;
      width: 0%;
      display: block;
      height: inherit;
    }

Interaction - First we need to separate browsers that do not support the progress element from the browsers that support them. This can be achieved either with native JavaScript or you can use Modernizr to test the feature.

if ('max' in document.createElement('progress')) {
      // Progress element is supported
    } else {
      // Doesn't support the progress element. Put your fallback code here. 
    }

The inputs still remain the same. But, in addition to determining the value, we need to calculate the width of the .progress-bar in percentage.

winHeight = $(window).height();
    docHeight = $(document).height();
    
    max = docHeight - winHeight;
    value = $(window).scrollTop();
    
    width = (value/max) * 100;
    width = width + '%';
        
    $('.progress-bar').css({'width': width});

After exploring all the edge cases, we can refactor the code to remove any duplicate statements and make it more DRY-er.

$(document).ready(function() {
        
      var getMax = function(){
        return $(document).height() - $(window).height();
      }
        
      var getValue = function(){
        return $(window).scrollTop();
      }
        
      if ('max' in document.createElement('progress')) {
        // Browser supports progress element
        var progressBar = $('progress');
            
        // Set the Max attr for the first time
        progressBar.attr({ max: getMax() });
    
        $(document).on('scroll', function(){
          // On scroll only Value attr needs to be calculated
          progressBar.attr({ value: getValue() });
        });
          
        $(window).resize(function(){
          // On resize, both Max/Value attr needs to be calculated
          progressBar.attr({ max: getMax(), value: getValue() });
        }); 
      
      } else {
    
        var progressBar = $('.progress-bar'), 
            max = getMax(), 
            value, width;
            
        var getWidth = function() {
          // Calculate width in percentage
          value = getValue();            
          width = (value/max) * 100;
          width = width + '%';
          return width;
        }
            
        var setWidth = function(){
          progressBar.css({ width: getWidth() });
        }
            
        $(document).on('scroll', setWidth);
        $(window).on('resize', function(){
          // Need to reset the Max attr
          max = getMax();
          setWidth();
        });
      }
    });

Performance

Generally, it is considered a bad practice to attach handlers to the scroll event because the browser attempts to repaint the content that appears every time you scroll. In our case, the DOM structure and the styles applied to them are simple, hence, we wouldn't observe any lag or noticeable delay while scrolling. However, when we magnify the scale at which this feature can be implemented on websites that employs complex DOM structure with intricate styles, the scroll experience can become janky and the performance may go for a toss.

If scrolling performance is really becoming a big overhead for you to overcome, then you can either choose to get rid of this feature completely or attempt to optimize your code to avoid unnecessary repaints. Couple of useful articles to get you started:

• John Resig on Learning from Twitter.
• Scrolling performance by Paul Lewis.

Ambiguity

I am no UX expert, but in some cases, the position and appearance of our indicator can be ambiguous and potentially confuse the user. Ajax-driven websites like Medium, Youtube etc., use similar kind of a progress bar to indicate the load status of the next page. Chrome for mobile natively uses a blue color progress bar for the webpage loader. Now, if you add the reading position indicator to this frame, I am sure that an average user will have a hard time understanding what the progress bar at the top of the page really means.

You'll have to make the call for yourself if this is of benefit to use your users or not.

Pros

1. Semantically accurate.
2. No math or complex computation involved.
3. Minimum markup required.
4. Seamless fallback for browsers with no support for HTML5 progress element.
5. Seamless fallback for browsers with JavaScript disabled.

Cons

1. Cross browser styling is complex.
2. Fallback for older browsers relies on traditional div/span(s) technique making the entire code bloat.
3. Scroll hijacking can potentially reduce FPS on webpages with complex DOM structure and intricate styles.
4. It conflicts with the progress bar used to indicate web page loading and might confuse users.

Reading Position Indicator is a post from CSS-Tricks

Everyone needs a place where they can feel safe. When people don’t feel secure, it is harder for them to experience love, belonging, and fulfillment. Enter Safe House of Hope. Founded in 2007 by Denene Yates ‘10, health administration and policy, Safe House of Hope is a place where women exploited through human and sex trafficking can feel safe. Yates feels uniquely connected to the women she now serves. She says she grew up without much love and support, and now, as a mother of seven, she understands the value of having a place of safety. Yates says starting this non-profit has been one of unexpected turns and discoveries – an adventure she never imagined.

She took her first steps on this path when she got involved with You Are Never Alone (YANA), an organization that provided advocacy for women who had been victims of prostitution and sex trafficking. At first, she helped the group manage their budget, but she found herself drawn to YANA’s mission – she wanted to help the women YANA served gain the life-changing opportunities they had so long been denied.

“This is an epidemic, a big money industry,” Yates points out. It’s chilling to consider, but Yates explains that there are currently 27 million slaves worldwide – more than any other time in history – and that last year alone, the human trafficking industry made $33 billion.

Unfortunately, despite its critically needed mission, YANA struggled to support itself as an organization, and was faced with closing its doors. Sad to leave something she felt so passionate about, Yates was determined to keep YANA’s mission alive. After some time spent studying at UMBC, the fire inside was rekindled and the idea for Safe House of Hope was born.

UMBC helped turn her idea into a reality. She worked with her professors to design independent study courses that would allow her to transform the research and work of building an organization into college credit. She also found invaluable resources in the university’s Public Health Department, which emphasized the importance of prevention and improving health care systems. Yates even turned to UMBC’s Alex. Brown Center for Entrepreneurships and the Shriver Center for guidance and support as she worked through the process of becoming an established 501c3.

“I would not be here today if it weren’t for UMBC’s helpfulness in regards to providing resources, skills, and means to start this organization,” explains Yates. Now, Safe House of Hope is not just established – it’s flourishing. In fact, in 2013, the organization moved to its very own building on Curtis Avenue in Baltimore.

With its own facility and more space, Safe House of Hope has been provided with the opportunity to expand its services. Not only does it maintain its own building, but Safe House of Hope also has an emergency shelter, six beds, a drop-in center, a 24/7 talk line, a street outreach team, host families (families trained to have a client to live with them for a period of time), and a whole faculty of staff who work on community outreach activities such as Zumba, GED classes, and Bible studies. This year, Yates hopes to expand drop-in centers to three other communities with known street prostitution.

Yates considers herself part of a group of abolitionists determined to end modern-day slavery and encourages others to join her in this aim. She always tells her volunteers and those considering joining her team, “with just 10 hours of your time each month, we can change lives.” Not only does Yates believe this, she knows it. She has seen women’s lives altered before her very eyes – they find themselves homes, get jobs, and become self-sufficient. Because Yates knows that change is possible, she won’t stop fighting to make it happen.

While Yates does admit that starting a business – particularly one with work that can be so emotionally demanding – is challenging, it is this belief in the potential for change that pushes her to keep moving forward. It’s common for her clients to feel so stuck they won’t even want to think about tomorrow. But with hope in her eyes and passion in her voice, Yates explains that Safe House of Hope exists to “help people to dream again and to realize those dreams.” And being a part of that, she says, is worth every single second.

– By Jessie Orsburn

Have a story of your own to share?