-
STEP-5XX
3-
Lecture1.1
-
Lecture1.2
-
Lecture1.3
-
-
STEP-500
11-
Lecture2.1
-
Lecture2.2
-
Quiz2.1
-
Lecture2.3
-
Quiz2.2
-
Lecture2.4
-
Quiz2.3
-
Lecture2.5
-
Lecture2.6
-
Lecture2.7
-
Lecture2.8
-
-
STEP-501
5-
Lecture3.1
-
Lecture3.2
-
Lecture3.3
-
Lecture3.4
-
Lecture3.5
-
-
STEP-502
5-
Lecture4.1
-
Lecture4.2
-
Lecture4.3
-
Lecture4.4
-
Lecture4.5
-
-
STEP-503
5-
Lecture5.1
-
Lecture5.2
-
Lecture5.3
-
Lecture5.4
-
Lecture5.5
-
-
STEP-504
4-
Lecture6.1
-
Lecture6.2
-
Lecture6.3
-
Lecture6.4
-
-
STEP-505
4-
Lecture7.1
-
Lecture7.2
-
Lecture7.3
-
Lecture7.4
-
iop-502 | Gathering Content | Exercise Assignment
In this lesson we learn how to gather pages from a WordPress Site and use them to create a menu and pages in our THML5 application. We also learn how to invoke functions at different times using both the setTimeout JavaScript function and proper code placement. Finally we learn how to leverage the viewportThe size of a webpage rendered in the browser window minus any browser chrome. Early mobile devices relied on two sizes of viewports: the visual viewport defined the visible screen real estate (say, 320 pixels), while the layout viewport was a larger virtual screen size (say, 980 pixels). This enabl... area to set the content in our pages to fit the available area.
- Complete all steps completed in the video “inside out – STEP 502.0 | Gathering Content”.
- 00:00 – Introduction
- 00:22 – Overview
- 02:16 – grab the 2 scripts to link in index.html
- 02:34 – begin cleaning comments in index.html
- 03:13 – add js links to index.html
- 03:45 – add assets folder – clean file structure
- 04:03 – create assets folder
- 04:08 – move css folder to assets folder
- 04:10 – allow DW to update link paths
- 04:21 – move js folder to assets
- 04:24 – allow DW to update link paths
- 04:31 – create app.js file
- 04:44 – update path to app.s in index.html
- 04:58 – add main element tot he index.html
- 05:26 – create main element
- 05:31 – move main closing tag to before footer
- 06:08 – fix/get fontawsome script
- 06:23 – grab fontawsome code
- 07:00 – create fontawsome folder in vendor
- 08:08 – begin working on app.js file
- 08:14 – start working on page loader
- 08:38 – add page loader script to app.js
- 10:53 – add the getContent function to app.js
- 11:00 – revie window load event
- 11:05 – review getContent function
- 11:13 – discuss getContent ajax call
- 12:05 – get parent page id
- 12:29 – add parentPageID variable
- 13:02 – add the setTimeout function
- 16:25 – discuss isActive variable
- 17:06 – discuss className variable
- 18:24 – scroll effect no longer works
- 18:55 – call startScroll function
- 19:44 – look at what causes scrolling
- 19:55 – change page load to declaired function
- 21:00 – begin working on section resize
- 21:58 – create resizeDiv function
- 23:34 – invoke resize function after ajax call
- 24:23 – move resize function in to app.js file
- 24:53 – add event listner for resizDiv function
- 28:00 – git status
- 28:07 – git add
- 28:19 – git commit