{"id":180,"date":"2013-10-10T19:23:12","date_gmt":"2013-10-10T19:23:12","guid":{"rendered":"http:\/\/farmur.com\/journal\/?p=180"},"modified":"2014-08-30T18:41:01","modified_gmt":"2014-08-30T18:41:01","slug":"responsive-web-week-6-navigation-bg-images-callbacks","status":"publish","type":"post","link":"http:\/\/farmur.com\/journal\/responsive-web-week-6-navigation-bg-images-callbacks\/","title":{"rendered":"Responsive Web \u2013 Week 6 \u2013 Navigation, BG Images &#038; Callbacks"},"content":{"rendered":"<p>This week I was able to work on the navigation a bit more. \u00a0Mainly working on some small animations to show the section title when a user mouses over the dot.<\/p>\n<p>One of the major things I was able to get working was the &#8220;current&#8221; title changing when a user changes sections. \u00a0This is currently accomplished with a callback utilizing the jQuery plugin &#8220;PanelSnap.&#8221; \u00a0This plugin also allows the &#8220;active&#8221; state on the menu.<\/p>\n<p>The last major test I started running was with the background-image. \u00a0I&#8217;m using:<\/p>\n<pre>background-size:\u00a0cover;<\/pre>\n<p>in order to have it fill the screen. \u00a0The first two images are supposed to be continuous, so I had to add:<\/p>\n<pre>background-position:\u00a0center bottom;\"<\/pre>\n<p>to the image in oder to the first section in order for it to be horizontally centered and resize from the bottom. \u00a0The second section needed to resize from the top, so the code for the was:<\/p>\n<pre>background-position:\u00a0center top;\"<\/pre>\n<p>Finally, I looked at my site on an ipad and I&#8217;m thinking I may need to rethink having &#8220;pages&#8221; instead of true scrolling. \u00a0The ipad showed the screen vibrating, which I&#8217;m assuming is due to the height calculation. \u00a0This next week may include a lot of changes.<\/p>\n<p>Here is the most updated version of the site:\u00a0<a title=\"Farmur Week 5\" href=\"http:\/\/goo.gl\/KR3dvS\">http:\/\/goo.gl\/KR3dvS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week I was able to work on the navigation a bit more. \u00a0Mainly working on some small animations to show the section title when a user mouses over the dot. One of the major things I was able to get working was the &#8220;current&#8221; title changing when a user changes sections. \u00a0This is currently [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[8],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-responsive-web-1","tag-rweb"],"_links":{"self":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":2,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":238,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/180\/revisions\/238"}],"wp:attachment":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}