adding latest

temp.md

@@ -2,6 +2,8 @@
 
 ## React to height change
 
+### Get current height of page
+
 To create content based on viewport height change you should use an event listener: `window.addEventListener`.
 
 A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
@@ -61,6 +63,22 @@ Opera:
 Google/Safari:
 `height: -webkit-calc(100% - 65px);`
 
+### Get current height of an object
+
+Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
+
+```javascript
+getBackgroundWidth() {
+    var background = document.querySelector("#backgroundsvg");
+    this.backgroundWidth = background.clientWidth;
+}
+```
+
+Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
+
+You can see all the methods and properties for document here:
+<https://developer.mozilla.org/en-US/docs/Web/API/Document>
+
 ## Using `<v-content>` to fill the page
 
 `fill-height` is useful for child components if you want them to fill to the height of the parent.
@@ -98,6 +116,11 @@ Cropping images with `object-fit: cover;`
 
 ## Images that autoscale (zoom)
 
+This is a good example on how you can dynamically zoom in/out of an image:
+<https://css-tricks.com/crop-top/>
+
+Quick method:
+
 To set an image to auto scale (zoom style)
 
 Use `max-width` to the value you want the image to be
@@ -107,8 +130,12 @@ Use `max-height` to the value you want the image to be
 
 ## To Do
 
+Image looks good on `left: 50%;`
+
 Organise these notes!
 
+Set dynamic navbar content (cols)
+
 Get image cropping from more than one direction
 
 Document all up and move into firebase.md
@@ -122,8 +149,20 @@ Do Liquidlight (using big headers)
 
 Do buttons: <https://www.gatsbyjs.org>
 
+Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
+<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
 
-
-Use media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
+Can use dynamic classes with vuetify.
 
 Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
+
+56 on small breakpoint
+64 on medium and up
+
+List of breakpoints:
+<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
+
+Small: `600px >< 960px`
+Medium: `960px >< 1264px`
+
+When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.