Scripting
always refresh your screen to see if there are updates to this page if returning to check if recordings are posted Instructor Note: Remember to start recording after starters.
| notes | recording |
|---|---|
| As usual, 603 is better; all students should use 603 recording | Class Recordings on Panopto |
Slides for this session
- Various Template Navigation Overview Slides
- Students Z Scrolling Nav Google Slides
- Student Z Scrolling Nav Sample Site
Client Side Script (JavaScript)
I will demonstrate how you can implement some of these javascript samples shown here:
https://www.w3schools.com/js/js_examples.asp
We do not expect you to learn how to program in javascript in a part of one lecture and lab. We just want you to be able to grab some code and make it work for you.
If you are interested in actually understanding some javascript, then you may want to invest 12 minutes here: https://www.youtube.com/watch?v=Ukg_U3CnJWI
Certainly one of the javascript examples from w3schools demos will to the job for your project. You should not just copy and paste it as is; you should make it work to suit your situation.
Below is the sample code of how I did this for my one page site:
Notice that the above code does not need to be enclosed in a script element. This is because the javascript is coded into the onclick attribute. The onclick attribute is the only place where javascript is to be found. All other parts of the code example are all basic HTML.
That is the real learning objective: figure out how to do a little JavaScript and hack it to make it work for you.
For example, if you choose this sample, don’t just use the same image; use your own images. Students have figured this out over and over again, so you can do it too. I have had to sit down and help some students that got stuck, so let me know if you need some extra help.
My one page theme, based on the bootstrap framework, also has magnific popup javascript plugin. If you use the portfolio example with your own photos, then you can get credit if you make the photos pop up from the portfolio. If you don't use the portfolio, you can also use the magnific popup to get credit if you can make your single photo pop up. Check out the help info at magnific site documentation for help if you want to try this.
A more simple Popup Example for EZ Template; not magnific popup
Server Side Script (Google Font example)
The javascript example above is hosted at my account at https://jsfiddle.net, so it is showing up on this page via a serverside script. If you have a youtube account or a twitter account you can find instructions on how you can embed a youTube video or a Twitter feed on an html page in your site. Basically any thing that is hosted on another server and can be displayed on your site will count as a server side script.
Google fonts are hosted on Google servers and can be displayed on your pages. Here is a link that describes how to integrate Google fonts into your site:
There are other Server side scripts you can implement, but the Google fonts option is used by a lot of students to meet the server side script. If you use this option you should be careful to only use legible typefaces for your body text. You may use more decorative typefaces for your headers.
Google Form
You can also use a Google Form to meet this objective. Here is a video