teaching machines

CS 318: Lab 9 – Fixed Positioning

February 28, 2018 by Chris Johnson. Filed under cs318, lectures, spring 2018.

Dear students,

Today we begin our exploration of the several ways to break away from the normal left-to-right, top-to-bottom flow of a web page. We started with fixed positioning, because it introduces the ideas of anchoring outside the hierarchy. In fact, fixed position effectively removes an element entirely from its natural position in the hierachy and places it relatively to browser’s viewport.

Suppose you want a top navbar across your page. You might add this:

<header>WKRP - when the news hits the fan, we scoop it.</header>

With our randomly-generated main copy:

<main>
  <p>Delightful unreserved impossible few estimating men favourable see entreaties. She propriety immediate was improving. He or entrance humoured likewise moderate. Much nor game son say feel. Fat make met can must form into gate. Me we offending prevailed discovery. </p>

  <p>Chapter too parties its letters nor. Cheerful but whatever ladyship disposed yet judgment. Lasted answer oppose to ye months no esteem. Branched is on an ecstatic directly it. Put off continue you denoting returned juvenile. Looked person sister result mr to. Replied demands charmed do viewing ye colonel to so. Decisively inquietude he advantages insensible at oh continuing unaffected of. </p>

  <p>Exquisite cordially mr happiness of neglected distrusts. Boisterous impossible unaffected he me everything. Is fine loud deal an rent open give. Find upon and sent spot song son eyes. Do endeavor he differed carriage is learning my graceful. Feel plan know is he like on pure. See burst found sir met think hopes are marry among. Delightful remarkably new assistance saw literature mrs favourable. </p>

  <p>One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy. </p>

  <p>Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. </p>

  <p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find. </p>

  <p>Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on. </p>

  <p>Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful. Neither it cordial so painful picture studied if. Sex him position doubtful resolved boy expenses. Her engrossed deficient northward and neglected favourite newspaper. But use peculiar produced concerns ten. </p>

  <p>Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners. </p>

  <p>Remain valley who mrs uneasy remove wooded him you. Her questions favourite him concealed. We to wife face took he. The taste begin early old why since dried can first. Prepared as or humoured formerly. Evil mrs true get post. Express village evening prudent my as ye hundred forming. Thoughts she why not directly reserved packages you. Winter an silent favour of am tended mutual. </p>
</main>

Let’s style this to add some contrast:

* {
  box-sizing: border-box;
}

body {
  font-size: 18pt;
}

header {
  background-color: black;
  font-size: 24pt;
  color: white;
  text-align: center;
}

By default, these elements will flow, but when the font gets bigger and the user starts scrolling, we lose the top bar. Web developers are afraid that if viewers lose the ability to navigate a page quickly, they will abandon the site. Fixed positioning helps us keep an element—like navlinks—on screen at all times. Let’s add this CSS, which anchors the bar to the top and widens it to fill the window:

header {
  ...
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

The downfall is that the main content appears under the top bar. How do we fix that? We’ll add a little margin.

Here’s your TODO list for next time:

• Read chapter 7 in your book. Scan real webpages that you regularly visit and find three elements that have been positioned in a non-static way, one for each of the values absolute, fixed, and relative. On a quarter sheet, identify the site and the element, and describe why you think it was positioned the way it was.
• Be sure to get your WordPress posts made before March 1. You should have received an email with login information. Let me know if you didn’t.

See you then!

Sincerely,

Lab

Our goals for this lab include:

• Learning how to anchor elements to the browser window with fixed positioning.
• Designing a click-driven slideshow display, powered by a wee bit of Javascript. This should feel a little bit like the scrolling image viewers found on many social media sites.

The exercises from last lab took a bit longer, so this lab only introduces one new exercise. Please complete the last lab’s exercises before diving into the quokka slideshow described below.

Slideshow

Your task is to create quokka slideshow that looks and behaves something like this:

The yellow rings serve only to highlight click events. They were added by the screen capture software and should not appear on your page.

Follow these steps to get your page up and smiling:

• Give the page a non-white background color.
• Create a div whose id is panel.
• Nest inside panel an img element whose id is picture. This will be the only child element in panel. For its src attribute, supply the URL of an image of a quokka or something else that’s cute.
• Give panel fixed positioning. Anchor it from the browser window on all sides by 50 pixels.
• Add a subtle shadow on all sides of panel. Place the shadow on all slides by leaving the horizontal and vertical shifts at 0. (As a matter of style, web designers tend not to put units on 0. Use 0, not 0px.) But use a non-zero blur radius.
• Force the image to completely fill its parent by setting its width and height—to what?
• When you set both the width and the height of an image, it’s likely to appear distorted. Look up the object-fit property on MDN and set this property on your image to preserve its width:height ratio—its aspect ratio. Try its various values to learn their differences.
• Add navigation icons via two img elements that are siblings to panel. I used this one and this one. Feel free to use them or others.
• Position the navigation icons in a fixed manner. Vertically center them by anchoring them from the top by 50%. For properties that are common between the two icons, use a shared class. It is bad style and a maintenance nightmare to define the same properties in separate CSS rules. For properties that are unique, use individual ids.
• Anchor the left icon to the left side of the window, and the right icon to the right. Set the images’ width and offsets such that there are 5 pixels of space to image’s left and right. (Recall from above how much space you’ve got in the “gutter” where the icons appear.)
• Verify that the anchoring behaves properly. Resize the window. Does the gap between the image and browser stay fixed in size?
• Make the navigation icons feel like links by turning the mouse into a pointer when it hovers over them. Use this CSS property:

  cursor: pointer;
  

• Respond to mouse-clicks on the icons with Javascript. This sort of task is not the subject of this course. Take CS 319 to learn more, or find a book on Javascript. For the time being, create a file named slideshow.js and paste in this code:

  // The list of image URLs
  var urls = [
    'http://www.traveller.com.au/content/dam/images/g/u/n/q/h/0/image.related.articleLeadwide.620x349.gunpvd.png/1488330286332.png',
    'http://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/57159-istock-486456250.jpg?itok=pYToxS1l&resize=1100x619',
  ];
  
  // The index (serial number) of the current image
  var i = 0;
  
  // Grab handles onto HTML elements.
  var leftButton = document.getElementById('left');
  var rightButton = document.getElementById('right');
  var picture = document.getElementById('picture');
  
  // Retreat
  leftButton.onclick = function() {
    i = (i - 1 + urls.length) % urls.length;
    picture.src = urls[i]; 
  }
  
  // Advance
  rightButton.onclick = function() {
    i = (i + 1) % urls.length;
    picture.src = urls[i]; 
  }
  

  In the HTML, paste in this element after your navigation icons:

  <script src="slideshow.js"></script>
  

  Add a few other image URLs to the definition of urls. As for the current two URLs, each line you add should have this form:

    'URL',

• Keen observers will notice that the icons are not centered perfectly on the vertical axis. This is more obvious if you shorten the window. If you care, call over your instructor or teaching assistant to fix this.

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab09 in your browser.

Validate your pages with the W3C CSS Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.