├── Ajax PHP shoutbox ├── README.md ├── css │ └── lecture22.css ├── database.php ├── index.php ├── scripts │ └── lecture22.js └── shoutbox.php ├── Apple Style Thumbslider ├── css │ └── lecture27.css ├── images │ ├── active_bg.png │ └── slides │ │ ├── device-imac-thumb.png │ │ ├── device-imac.png │ │ ├── device-ipad-thumb.png │ │ ├── device-ipad.png │ │ ├── device-iphone-thumb.png │ │ ├── device-iphone.png │ │ ├── device-macbook-thumb.png │ │ └── device-macbook.png ├── lecture27.html └── scripts │ └── lecture27.js ├── JavaScript quiz ├── css │ └── lecture4.css ├── lecture3.html ├── lecture4.html └── scripts │ ├── lecture4.js │ └── modernizr.js ├── README.md ├── jQuery YouTube API search ├── Notes about YouTube API │ ├── Google-Developers-Console.png │ ├── data items returned by GET request.png │ ├── get YouTube API key Notes.txt │ └── using the YouTube API.png ├── css │ ├── fancybox_loading.gif │ ├── fancybox_overlay.png │ ├── fancybox_sprite.png │ ├── jquery.fancybox.css │ └── lecture12.css ├── lecture12.html └── scripts │ ├── jquery.fancybox.pack.js │ ├── lecture12.js │ ├── lecture12_backup.js │ └── lecture12_backup_before_lightbox.js ├── jQuery accordion ├── css │ └── lecture18.css ├── images │ └── arrow.png ├── lecture18.html └── scripts │ └── lecture18.js └── jQuery content slider ├── css └── lecture9.css ├── images ├── arrow-left.png ├── arrow-right.png ├── slide1.jpg ├── slide2.jpg ├── slide3.jpg ├── slide4.jpg ├── slide5.jpg ├── slide6.jpg └── slide7.jpg ├── lecture9.html └── scripts ├── lecture9.js └── lecture9_b.js /Ajax PHP shoutbox/README.md: -------------------------------------------------------------------------------- 1 | #Notes on Project 5: Ajax PHP shoutbox 2 | 3 | In this project, I created a new MySQL database on a server, wrote a connection script, submitted a new row to the database via an HTML form, and also wrote to the live page (via jQuery) at the same time. When the page is reloaded, the full contents of the database are written to the page. Whenever the form is submitted, a new row is written to the db. 4 | 5 | Downloaded [XAMPP](https://www.apachefriends.org/index.html) 6 | 7 | Installed XAMPP - MySQL and PHP and server in one handy DMG. Nice. 8 | 9 | Go to Applications, open XAMPP folder. 10 | HTDOCS - "This is basically your Web server," says the instructor. 11 | 12 | His HTDOCS has a million things in it; mine has very few. 13 | 14 | 1. In HTDOCS, I made a new folder named **js_shoutbox** for this project. 15 | 16 | 2. Create these new files in that folder: 17 | 18 | - index.php 19 | - database.php (to connect to MySQL database) 20 | - shoutbox.php (to take the POST request and write to the db) 21 | 22 | 3. Create the usual folders for CSS and JS 23 | 24 | 4. In browser, open 25 | 26 | 5. Databases tab > Create database 27 | - name it **jsshoutbox** 28 | - > Create 29 | 30 | 6. Click database name (jsshoutbox) 31 | - Create table 32 | - name it **shouts** 33 | - Number of columns: 4 34 | - > Go 35 | 36 | 7. Create id field - INT - 11 (he says he likes 11, doesn't say why) - and 37 | Index: make it the PRIMARY field (scroll to the right, find **Index**) 38 | 39 | 8. Check box immediately following Index (**A_I**): this is auto-increment, will add new row after each insertion. 40 | 41 | 9. Fill other fieldnames: name (VARCHAR), shout (VARCHAR), date (TEXT) 42 | 43 | - Note: For date, he's not using the date options provided, so he selects TEXT as the type. 44 | 45 | None of these have an Index selected. Add char limits for each one. 46 | 47 | 10. SAVE the table. 48 | 49 | Leave phpmyadmin, and open index.php at 50 | 51 | *** 52 | Write HTML and CSS for index.php (includes a form). 53 | 54 | * index.php 55 | * lecture22.css 56 | 57 | *** 58 | 59 | ##CONNECT TO DATABASE 60 | 61 | database.php 62 | 63 | First, return to XAMPP and set a password. 64 | 65 | * localhost/xampp 66 | * Security (link on left side) 67 | * /Applications/XAMPP/xamppfiles/xampp security 68 | 69 | Well, that didn't work (Mac OS), so I searched and found: 70 | 71 | 72 | 73 | Open Terminal 74 | 75 | Paste: 76 | 77 | ``` 78 | sudo /Applications/XAMPP/xamppfiles/xampp security 79 | ``` 80 | 81 | It walks you through everything with no difficulty. 82 | 83 | 4 passwords set: 84 | 85 | * XAMPP pages 86 | * MySQL/phpMyAdmin user pma 87 | * MySQL root password 88 | * FTP password for user 'daemon' 89 | 90 | All good now. 91 | 92 | 93 | EDIT database.php 94 | 95 | $conn is just a normal PHP variable name 96 | 97 | 98 | 99 | Now add include to index.php (AT TOP, ABOVE DOCTYPE) 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | You can test page now. Should not throw any errors. 106 | 107 | NOTE: If you force an error (by changing text in database.php), the error message will write at the top of the Web page. 108 | 109 | *** 110 | 111 | ##WRITE the jQuery 112 | 113 | lecture22.js 114 | 115 | 1. On submit, get all the values for all the vars. 116 | 2. Build the date from JavaScript new Date 117 | 3. Build the string to write to the MySQL database. 118 | 4. Use `$.ajax()` to send HTTP POST request 119 | 120 | Write many options. 121 | 122 | He adds a function to format the JavaScript date like a MySQL date. 123 | This seems unnecessary, since we told the database to treat the date field like plaintext, not like a date. 124 | (But the function might prove useful.) 125 | 126 | (At this point, our file shoutbox.php is still empty.) 127 | 128 | We fill in some dummy PHP to test it: 129 | `` 130 | 131 | Test. Good. 132 | 133 | In Chrome, use the console (Network tab) to see results (file list). 134 | 135 | *** 136 | 137 | ##WRITING the data 138 | 139 | shoutbox.php 140 | 141 | Add the same include AT TOP of file: 142 | 143 | ``` 144 | 145 | ``` 146 | 147 | Then all is wrapped in one PHP if-statement, with validation and 148 | error-checking, put the values passed by AJAX into the SQL database. 149 | And also write them to the UL in index.php. Which seems kind of 150 | stupid, since we could have just done that directly. 151 | 152 | Ah. He wants the full contents of the db to write into the shoutbox. 153 | Without the next step, each line writes. But when you reload, all 154 | lines disappear. 155 | 156 | To view contents of the db: 157 | 158 | * 159 | * Databases 160 | * jsshoutbox 161 | * Browse (near top) 162 | 163 | So, final steps: 164 | 165 | * Add more PHP to top of index.php to grab the stuff from the db. 166 | * It's a SQL call to the db, in the PHP. 167 | * Note it will get them in descending order by ID. 168 | 169 | Also in index.php, we write some PHP inside the UL to make the database contents write there. 170 | 171 | ##TRANSFER the project to Web hosting 172 | 173 | I had a new hosting company I haven't used for any databases yet, so I wanted to see if I could make this work there. I did, and it wasn't too hard. 174 | 175 | 1. Create a new MySQL database. My hosting company has a link just for this, separate from the CPanel. Name the db and create a new user to use it. Add that user to the database. This username and password should be different from the username/pw you use to log in at the hosting company's site. 176 | 177 | 2. Find out how to get into **phpMyAdmin** on your hosting service. If they have CPanel, it should be like this: 178 | 179 | - Database Tools > 180 | - phpMyAdmin (click to open it) 181 | - Log in again with your usual hosting service login and pw 182 | 183 | 3. Set up the new database -- this is the same as the steps at the beginning of this document. You have to create a table and make your four fieldnames. Make sure all the names are the same as in your original project so your code from the project will work without any changes. 184 | 185 | 4. **Edit the file database.php.** Remember, this is your connection script, so the PHP has to be changed to match your new db. 186 | 187 | ``` 188 | $conn = mysqli_connect("localhost", "db_username", "db_password", "name_of_MySQL_database"); 189 | ``` 190 | 191 | You don't change "localhost," but you do change the rest to match the new database you just made. 192 | 193 | 5. Transfer your files. You can use any FTP program to do this (I like [FIleZilla](https://filezilla-project.org/)). You should use the exact same folder name as in your project, so you can just grab the whole folder and drag it over. Note that most hosting services will be set up to have your Web pages inside a folder named `public_html` that's already set up by them. 194 | 195 | ![Illustration: Host FTP 1](http://macloo.github.io/projects-javascript-jquery/Ajax%20PHP%20shoutbox/images/host_upload1.png) 196 | 197 | ![Illustration: Host FTP 2](http://macloo.github.io/projects-javascript-jquery/Ajax%20PHP%20shoutbox/images/host_upload2.png) 198 | 199 | (end) 200 | -------------------------------------------------------------------------------- /Ajax PHP shoutbox/css/lecture22.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | margin: 20px auto; 11 | background: #000; 12 | color: #fff; 13 | font-family: Verdana, sans-serif; 14 | font-size: 100%; 15 | line-height: 1.5em; 16 | } 17 | 18 | #container { 19 | width: 750px; 20 | margin: 0 auto; 21 | border: 1px solid #666; 22 | margin-top: 50px; 23 | } 24 | 25 | header { 26 | text-align: center; 27 | padding: 20px 0; 28 | background: #333; 29 | } 30 | 31 | h1 { 32 | font-weight: normal; 33 | font-size: 250%; 34 | } 35 | 36 | /* Shouts box */ 37 | 38 | #shouts { 39 | padding: 30px; 40 | } 41 | 42 | ul { 43 | height: 300px; 44 | overflow: auto; 45 | padding: 20px; 46 | border: 1px solid #333; 47 | } 48 | 49 | ul li { 50 | list-style: none; 51 | line-height: 1.7em; 52 | } 53 | 54 | #inputs { 55 | background: #333; 56 | padding: 10px; 57 | text-align: center; 58 | } 59 | 60 | label { 61 | font-size: 110%; 62 | padding-right: 5px; 63 | } 64 | 65 | input[type='text'] { 66 | font-family: monospace; 67 | font-size: 120%; 68 | margin-right: 15px; 69 | width: 100px; 70 | height: 100%; 71 | } 72 | 73 | /* this is cool: style the input by id (weird syntax) */ 74 | input#shout { 75 | width: 250px; 76 | } 77 | 78 | /* Submit button */ 79 | 80 | input[type='submit'] { 81 | background: #c00; 82 | color: #fff; 83 | font-weight: bold; 84 | font-size: 140%; 85 | border: 0; 86 | padding: 7px 15px; 87 | cursor: pointer; 88 | height: 100%; 89 | } 90 | 91 | input[type='submit']:hover { 92 | background: #f00; 93 | } 94 | 95 | input[type='submit']:focus { 96 | outline: none; 97 | } 98 | -------------------------------------------------------------------------------- /Ajax PHP shoutbox/database.php: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /Ajax PHP shoutbox/index.php: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | Project 5 JS Shoutbox 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

JS Shoutbox

21 |
22 | 23 |
24 | 25 |
    26 | 28 | 29 | 30 | 31 |
  • 32 | : 33 | 34 | [] 35 |
    • 36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /Ajax PHP shoutbox/scripts/lecture22.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // ---------------------------------------------------------------------------- 3 | 4 | $('#submit').on('click', function() { 5 | var name = $('#name').val(); 6 | var shout = $('#shout').val(); 7 | var date = getDate(); 8 | 9 | // build string to write to the database 10 | var dataString = 'name=' +name+ '&shout=' +shout+ '&date=' +date; 11 | 12 | //validate input 13 | if(name == '' || shout == '') { 14 | alert('Please fill in Name and Shout fields.'); 15 | } else { 16 | // AJAX request 17 | $.ajax({ 18 | // options 19 | type: "POST", 20 | url: "../js_shoutbox/shoutbox.php", 21 | data: dataString, 22 | cache: false, 23 | success: function(html){ 24 | $('#shouts ul').prepend(html); 25 | // prepend is before the content of UL, inside 26 | } 27 | }); 28 | } 29 | 30 | return false; 31 | }); 32 | 33 | //format JavaScript date like a MySQL date 34 | function getDate() { 35 | var date; 36 | date = new Date(); 37 | date = date.getUTCFullYear() + '-' + 38 | ('00' + (date.getUTCMonth() + 1)).slice(-2) + '-' + 39 | ('00' + date.getUTCDate()).slice(-2) + ' ' + 40 | ('00' + date.getUTCHours()).slice(-2) + ':' + 41 | ('00' + date.getUTCMinutes()).slice(-2) + ':' + 42 | ('00' + date.getUTCSeconds()).slice(-2); 43 | return date; 44 | } 45 | 46 | // ---------------------------------------------------------------------------- 47 | }); 48 | -------------------------------------------------------------------------------- /Ajax PHP shoutbox/shoutbox.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | '.$name.': '.$shout.' ['.$date.'] '; 26 | // concatenate with '.' in PHP 27 | } 28 | } 29 | ?> 30 | -------------------------------------------------------------------------------- /Apple Style Thumbslider/css/lecture27.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: Verdana, sans-serif; 11 | font-size: 100%; 12 | color: #000; 13 | background: #999; 14 | } 15 | 16 | #container { 17 | margin: 20px auto; 18 | background: #fff; 19 | width: 1000px; 20 | border: 1px solid #999; 21 | padding: 20px; 22 | position: relative; 23 | } 24 | 25 | /* heading and text styles */ 26 | 27 | h1, h2 { 28 | font-family: Cambria, Georgia, serif; 29 | font-size: 200%; 30 | font-weight: normal; 31 | line-height: 1.4em; 32 | } 33 | 34 | h2 { font-size: 160%; } 35 | 36 | p { 37 | margin-bottom: 20px; 38 | line-height: 1.4em; 39 | } 40 | 41 | p.under { 42 | margin: 0 auto; 43 | padding: 20px 0; 44 | width: 900px; 45 | } 46 | 47 | /* thumbnail slider styles */ 48 | 49 | #slider { 50 | margin: 10px auto; 51 | width: 900px; 52 | 53 | -moz-box-shadow: 0 0 10px #999; 54 | -webkit-box-shadow: 0 0 10px #999; 55 | box-shadow: 0 0 10px #999; 56 | -moz-border-radius: 12px; 57 | -webkit-border-radius: 12px; 58 | border-radius: 12px; 59 | /* junk above for cute box visual effect */ 60 | 61 | /* below he makes a bg just for the thumbnails by using 62 | only repeat-x and pushing it to the bottom of this div */ 63 | background: url(../images/panel.jpg) repeat-x bottom center #fff; 64 | overflow: hidden; 65 | } 66 | 67 | #slides { 68 | display: block; 69 | width: 900px; 70 | height: 200px; 71 | margin: 25px 0; 72 | overflow: hidden; 73 | } 74 | 75 | .slide { 76 | float: left !important; 77 | } 78 | 79 | #thumbs { 80 | height: 45px; 81 | } 82 | 83 | #thumbs ul { 84 | list-style: none; 85 | width: 176px; /* 44 x 4 = 176 */ 86 | margin: 0 auto; /* center this div */ 87 | } 88 | 89 | #thumbs li { 90 | display: inline-block; 91 | height: 45px; 92 | list-style: none; 93 | /* the images in these LIs are all 24x24 */ 94 | /* note the weird bumping-together of LI tags in the HTML 95 | to compensate for inline-block behavior */ 96 | } 97 | 98 | #thumbs li img { 99 | display: block; 100 | margin: 0 10px; /* 10 px on each side +24 = 44 */ 101 | margin-top: 10px; 102 | border: 0; 103 | } 104 | 105 | #thumbs li { 106 | cursor: pointer; 107 | } 108 | 109 | #thumbs li.active, #thumbs li.active:hover { 110 | /* .active class will be added with jQuery */ 111 | background: url(../images/active_bg.png) no-repeat; 112 | } 113 | 114 | /* links */ 115 | 116 | a:focus { 117 | outline: 2px solid #069; 118 | } 119 | a:link, a:active, a:visited { 120 | color: #00c; 121 | text-decoration: underline; 122 | } 123 | a:hover { 124 | color: #00f; 125 | text-decoration: none; 126 | } 127 | 128 | -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/active_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/active_bg.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-imac-thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-imac-thumb.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-imac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-imac.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-ipad-thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-ipad-thumb.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-ipad.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-iphone-thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-iphone-thumb.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-iphone.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-macbook-thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-macbook-thumb.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/images/slides/device-macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/Apple Style Thumbslider/images/slides/device-macbook.png -------------------------------------------------------------------------------- /Apple Style Thumbslider/lecture27.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lecture 27 Image thumbslider 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

jQuery Thumbslider (modified)

15 |

A thumbnail menu below displays large images in the main window. 16 | Horizontal sliding action.

17 |
18 | 19 |
20 | 22 |
23 | 24 | 25 | 26 | 27 |
28 | 29 | 32 |
33 |
    34 |
  • 35 | 36 |
  • 37 | 38 |
  • 39 | 40 |
  • 41 | 42 |
    • 43 | 45 |
46 |
47 | 48 |
49 | 50 |

The autoplay function on this took me a while to figure out. It was not well explained in the tutorial. But it's pretty cool. Once you click any thumbnail, the autoplay quits, and I have not included a means to restart it. I changed a lot of the CSS in the tutorial and really simplified the HTML a lot (took out a lot of DIVs), so I don't know if this will break in browsers other than mine.

51 | 52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /Apple Style Thumbslider/scripts/lecture27.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | // ---------------------------------------------------------------------------- 3 | 4 | var totalWidth = 0; 5 | var positions = new Array(); 6 | 7 | // put gray bg in first LI (behind thumbnail image) 8 | $('#thumbs ul li').first().addClass('active'); 9 | 10 | // build an array containing the left edge position of each big image 11 | // loop through all slides 12 | $('#slides .slide').each(function(i) { 13 | positions[i] = totalWidth; 14 | totalWidth += $(this).width(); 15 | 16 | if (!$(this).width()) { 17 | alert("Please add a width to your images."); 18 | return false; 19 | } 20 | // console.log(positions); 21 | // [0, 900, 1800, 2700] now we know where each slide starts 22 | }); 23 | 24 | // set width of slides container to the total of all slides' widths 25 | $('#slides').width(totalWidth); 26 | 27 | // click event handler for the thumbnails: 28 | // the 2 args, 'e' and 'keepScrolling,' are only nec. b/c of the autoscroll 29 | // function at bottom. If we remove autoscroll() we do not need the args. 30 | // NOTE: 'e' will be 'click' event in either case. 31 | $('#thumbs ul li img').click(function(e, keepScrolling) { 32 | 33 | // the .active class adds a gray background on the thumbnail 34 | // remove .active class from all LIs 35 | $('#thumbs ul li').removeClass('active'); 36 | // add .active class to current LI 37 | $(this).parent().addClass('active'); 38 | 39 | // find out how many LIs are before this one -- 40 | // returns 0 for first item, 1 for second, etc. (nice!) 41 | // use pos to associate thumb clicked with position number in array 42 | var pos = $(this).parent().prevAll().length; 43 | // console.log(pos); // works 44 | 45 | // the .prevAll() method searches through the predecessors of 46 | // these elements in the DOM tree and constructs a new jQuery object 47 | // from the matching elements; the elements are returned in order 48 | // beginning with the closest sibling. 49 | 50 | $('#slides').stop().animate( 51 | { 52 | marginLeft:-positions[pos]+'px' 53 | }, 450); 54 | // 450 is the speed. 55 | // at this point, the slider already works. 56 | // I don't get why stop() comes first here, before animate -- 57 | // stop() should work on a currently running animation -- 58 | // but this works! Nicely! 59 | 60 | // if click was NOT triggered by autoscroll() function, stop autoplay 61 | // ('keepScrolling' will = '' if you manually clicked a thumbnail -- 62 | // then it would be false) 63 | if (!keepScrolling) clearInterval(doAutoscroll); 64 | // this was done wrong in the original tutorial, so autoplay never stopped 65 | 66 | }); 67 | 68 | 69 | // autoplay function 70 | // $('#thumbs ul li img') is the set of all img objects in that UL. 71 | // .eq() "reduces the set of matched elements to the one at the 72 | // specified index," i.e. img[0], or img[1], etc. 73 | // this is brilliant: dividing by the length of the array always 74 | // yields remainders that match the set elements, in order, no matter 75 | // how long the function runs. 76 | // Example: 98 % 4 = 2, 99 % 4 = 3, 100 % 4 = 0 ... 77 | var current = 1; 78 | function autoscroll() { 79 | if (current == -1) return false; // if NaN 80 | $('#thumbs ul li img').eq(current % $('#thumbs ul li img').length) 81 | .trigger('click', [true]); 82 | // this [true] will be passed in as arg/param 'keepScrolling' 83 | current++; 84 | // console.log(current % $('#thumbs ul li img').length); 85 | // this cycles 2, 3, 0, 1, 2, 3, 0 ... 86 | // 3 % 4 = 3 (remainder 3; modulus is integers only) 87 | // 4 & 4 = 0 88 | // 5 % 4 = 1 ... etc. 89 | } 90 | 91 | 92 | var doAutoscroll = setInterval(autoscroll, 2000); 93 | // remember how setInterval and clearInterval work: we cannot clear 94 | // unless we have a var. Also, no () in function name here. 95 | // 2000 is milliseconds, the length of the interval (the pause 96 | // before re-running the function) 97 | 98 | // ---------------------------------------------------------------------------- 99 | }); 100 | -------------------------------------------------------------------------------- /JavaScript quiz/css/lecture4.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 20px auto; 3 | padding: 0; 4 | background: #2A7510; 5 | color: #000; 6 | font-family: Verdana, sans-serif; 7 | font-size: 100%; 8 | line-height: 1.5em; 9 | } 10 | 11 | #wrapper { 12 | background: #B2E3A1; 13 | width: 900px; 14 | margin: 0 auto; 15 | } 16 | 17 | header { 18 | text-align: center; 19 | border-bottom: dashed 1px #fff; 20 | padding-top: 20px; 21 | } 22 | 23 | #results p { 24 | background: #fff; 25 | padding: 10px; 26 | margin: 10px 0; 27 | } 28 | 29 | section { 30 | padding: 10%; 31 | padding-top: 0; 32 | } 33 | 34 | h1 { 35 | font: normal 4em/1em Georgia, serif; 36 | margin: 10px 0; 37 | } 38 | 39 | header p { 40 | font-size: 130%; 41 | } 42 | 43 | .question { 44 | font-size: 120%; 45 | font-weight: bold; 46 | } 47 | 48 | /* Submit Answers button */ 49 | 50 | input[type='submit'] { 51 | background: #2A7510; 52 | color: #fff; 53 | font-weight: bold; 54 | font-size: 150%; 55 | border: 0; 56 | padding: 10px 15px; 57 | cursor: pointer; 58 | } 59 | 60 | input[type='submit']:hover { 61 | background: #3AA116; 62 | } 63 | 64 | input[type='submit']:focus { 65 | outline: none; 66 | } 67 | 68 | /* add some space to right of each radio button */ 69 | 70 | input[type='radio'] { 71 | margin-right: 10px; 72 | } 73 | -------------------------------------------------------------------------------- /JavaScript quiz/lecture3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Section 2 Lecture 3 6 | 7 | 60 | 61 | 62 | 63 | 64 |

JavaScript Section 2 Lecture 3

65 | 66 |
    67 |
  1. alert()
    2. 68 |
  2. variables (var keyword)
    3. 69 |
  3. if-else if-else
    4. 70 |
  4. arrays
    5. 71 |
  5. for loop
    6. 72 |
  6. functions
    7. 73 |
74 | 75 |

Make sure you've opened View > Developer > JavaScript Console in Chrome.

76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /JavaScript quiz/lecture4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Section 2 Lecture 4 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Simple JavaScript Quiz

16 |

Test your knowledge of JavaScript basics

17 |
18 | 19 |
20 | 21 |
22 | 23 |

1. Into which HTML element do we put JavaScript code?

24 |

25 | a. <js>
26 | b. <script>
27 | c. <body>
28 | d. <link> 29 |

30 | 31 |

2. Which HTML attribute is used to reference an external JavaScript file?

32 |

33 | a. src
34 | b. rel
35 | c. type
36 | d. href 37 |

38 | 39 |

3. How would you write "Hello" in an alert box?

40 |

41 | a. msg("Hello");
42 | b. alertBox("Hello");
43 | c. document.write("Hello");
44 | d. alert("Hello"); 45 |

46 | 47 |

4. JavaScript is directly related to the Java programming language.

48 |

49 | a. True
50 | b. False 51 |

52 | 53 |

5. A variable in JavaScript must start with which special character?

54 |

55 | a. @
56 | b. $
57 | c. #
58 | d. No special character is needed. 59 |

60 | 61 |

62 | 63 |
64 | 65 | 67 |
68 | 69 |
70 | 71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /JavaScript quiz/scripts/lecture4.js: -------------------------------------------------------------------------------- 1 | function submitAnswers() { 2 | 3 | var total = 5; 4 | var score = 0; 5 | 6 | // get user input 7 | // note: it was easy to copy/paste these lines and change the numbers 8 | 9 | var q1 = document.forms["quizForm"]["q1"].value; 10 | var q2 = document.forms["quizForm"]["q2"].value; 11 | var q3 = document.forms["quizForm"]["q3"].value; 12 | var q4 = document.forms["quizForm"]["q4"].value; 13 | var q5 = document.forms["quizForm"]["q5"].value; 14 | 15 | // validation - did the submitter skip any Q's? 16 | 17 | for (var i = 1; i <= total; i++) { 18 | if(eval("q" + i) == null || eval("q" + i) == "") { 19 | alert("You missed question " + i); 20 | return false; 21 | } 22 | } 23 | 24 | // set correct answers 25 | 26 | var answers = ['b', 'a', 'd', 'b', 'd']; 27 | 28 | // check answers (note i - 1 to account for array starting with [0]) 29 | 30 | for (var i = 1; i <= total; i++) { 31 | if (eval("q" + i) == answers[i - 1]) { 32 | score++; 33 | } 34 | } 35 | 36 | // display results 37 | 38 | var results = document.getElementById("results"); 39 | if (score == total) { 40 | results.innerHTML = "

Congratulations! You scored " + score + " out of " + total + " points.

"; 41 | } else { 42 | results.innerHTML = "

You scored " + score + " out of " + total + " points.

"; 43 | } 44 | 45 | // because we are not actually submitting this form 46 | return false; 47 | } 48 | -------------------------------------------------------------------------------- /JavaScript quiz/scripts/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-input-inputtypes-shiv-cssclasses-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}function A(){e.input=function(c){for(var d=0,e=c.length;d",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f APIs (then Browse APIs, scroll down to find YouTube Data API and change status to "On") 43 | 44 | API Reference: 45 | https://developers.google.com/youtube/v3/docs/ 46 | Find "Resource Types" here 47 | Click "Search" 48 | Click "list" (it is the only method given for Search) 49 | 50 | https://developers.google.com/youtube/v3/docs/search/list 51 | 52 | Provides a GET request for our form, and a list of all parameters we can include. (So cool!) E.g. you can limit it to one channel, and so on. 53 | A "snippet" is all the summary stuff about a video: title, short description, thumbnail. 54 | 55 | "in a search result, the snippet property contains other properties that 56 | identify the result's title, description, and so forth. If you set 57 | part=snippet, the API response will also contain all of those nested 58 | properties. (string)" 59 | 60 | q is a parameter that specifies the query term to search for. 61 | 62 | We are not using the JavaScript client library (however, one does exist!); in this tutorial, we are just making straight GET requests (using jQuery get() method). 63 | 64 | -------------------------------------------------------------------------------- /jQuery YouTube API search/Notes about YouTube API/using the YouTube API.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery YouTube API search/Notes about YouTube API/using the YouTube API.png -------------------------------------------------------------------------------- /jQuery YouTube API search/css/fancybox_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery YouTube API search/css/fancybox_loading.gif -------------------------------------------------------------------------------- /jQuery YouTube API search/css/fancybox_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery YouTube API search/css/fancybox_overlay.png -------------------------------------------------------------------------------- /jQuery YouTube API search/css/fancybox_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery YouTube API search/css/fancybox_sprite.png -------------------------------------------------------------------------------- /jQuery YouTube API search/css/jquery.fancybox.css: -------------------------------------------------------------------------------- 1 | /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 2 | .fancybox-wrap, 3 | .fancybox-skin, 4 | .fancybox-outer, 5 | .fancybox-inner, 6 | .fancybox-image, 7 | .fancybox-wrap iframe, 8 | .fancybox-wrap object, 9 | .fancybox-nav, 10 | .fancybox-nav span, 11 | .fancybox-tmp 12 | { 13 | padding: 0; 14 | margin: 0; 15 | border: 0; 16 | outline: none; 17 | vertical-align: top; 18 | } 19 | 20 | .fancybox-wrap { 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | z-index: 8020; 25 | } 26 | 27 | .fancybox-skin { 28 | position: relative; 29 | background: #f9f9f9; 30 | color: #444; 31 | text-shadow: none; 32 | -webkit-border-radius: 4px; 33 | -moz-border-radius: 4px; 34 | border-radius: 4px; 35 | } 36 | 37 | .fancybox-opened { 38 | z-index: 8030; 39 | } 40 | 41 | .fancybox-opened .fancybox-skin { 42 | -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 43 | -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 44 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 45 | } 46 | 47 | .fancybox-outer, .fancybox-inner { 48 | position: relative; 49 | } 50 | 51 | .fancybox-inner { 52 | overflow: hidden; 53 | } 54 | 55 | .fancybox-type-iframe .fancybox-inner { 56 | -webkit-overflow-scrolling: touch; 57 | } 58 | 59 | .fancybox-error { 60 | color: #444; 61 | font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 62 | margin: 0; 63 | padding: 15px; 64 | white-space: nowrap; 65 | } 66 | 67 | .fancybox-image, .fancybox-iframe { 68 | display: block; 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .fancybox-image { 74 | max-width: 100%; 75 | max-height: 100%; 76 | } 77 | 78 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 79 | background-image: url(fancybox_sprite.png); 80 | } 81 | 82 | #fancybox-loading { 83 | position: fixed; 84 | top: 50%; 85 | left: 50%; 86 | margin-top: -22px; 87 | margin-left: -22px; 88 | background-position: 0 -108px; 89 | opacity: 0.8; 90 | cursor: pointer; 91 | z-index: 8060; 92 | } 93 | 94 | #fancybox-loading div { 95 | width: 44px; 96 | height: 44px; 97 | background: url(fancybox_loading.gif) center center no-repeat; 98 | } 99 | 100 | .fancybox-close { 101 | position: absolute; 102 | top: -18px; 103 | right: -18px; 104 | width: 36px; 105 | height: 36px; 106 | cursor: pointer; 107 | z-index: 8040; 108 | } 109 | 110 | .fancybox-nav { 111 | position: absolute; 112 | top: 0; 113 | width: 40%; 114 | height: 100%; 115 | cursor: pointer; 116 | text-decoration: none; 117 | background: transparent url(blank.gif); /* helps IE */ 118 | -webkit-tap-highlight-color: rgba(0,0,0,0); 119 | z-index: 8040; 120 | } 121 | 122 | .fancybox-prev { 123 | left: 0; 124 | } 125 | 126 | .fancybox-next { 127 | right: 0; 128 | } 129 | 130 | .fancybox-nav span { 131 | position: absolute; 132 | top: 50%; 133 | width: 36px; 134 | height: 34px; 135 | margin-top: -18px; 136 | cursor: pointer; 137 | z-index: 8040; 138 | visibility: hidden; 139 | } 140 | 141 | .fancybox-prev span { 142 | left: 10px; 143 | background-position: 0 -36px; 144 | } 145 | 146 | .fancybox-next span { 147 | right: 10px; 148 | background-position: 0 -72px; 149 | } 150 | 151 | .fancybox-nav:hover span { 152 | visibility: visible; 153 | } 154 | 155 | .fancybox-tmp { 156 | position: absolute; 157 | top: -99999px; 158 | left: -99999px; 159 | max-width: 99999px; 160 | max-height: 99999px; 161 | overflow: visible !important; 162 | } 163 | 164 | /* Overlay helper */ 165 | 166 | .fancybox-lock { 167 | overflow: visible !important; 168 | width: auto; 169 | } 170 | 171 | .fancybox-lock body { 172 | overflow: hidden !important; 173 | } 174 | 175 | .fancybox-lock-test { 176 | overflow-y: hidden !important; 177 | } 178 | 179 | .fancybox-overlay { 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | overflow: hidden; 184 | display: none; 185 | z-index: 8010; 186 | background: url(fancybox_overlay.png); 187 | } 188 | 189 | .fancybox-overlay-fixed { 190 | position: fixed; 191 | bottom: 0; 192 | right: 0; 193 | } 194 | 195 | .fancybox-lock .fancybox-overlay { 196 | overflow: auto; 197 | overflow-y: scroll; 198 | } 199 | 200 | /* Title helper */ 201 | 202 | .fancybox-title { 203 | visibility: hidden; 204 | font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 205 | position: relative; 206 | text-shadow: none; 207 | z-index: 8050; 208 | } 209 | 210 | .fancybox-opened .fancybox-title { 211 | visibility: visible; 212 | } 213 | 214 | .fancybox-title-float-wrap { 215 | position: absolute; 216 | bottom: 0; 217 | right: 50%; 218 | margin-bottom: -35px; 219 | z-index: 8050; 220 | text-align: center; 221 | } 222 | 223 | .fancybox-title-float-wrap .child { 224 | display: inline-block; 225 | margin-right: -100%; 226 | padding: 2px 20px; 227 | background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 228 | background: rgba(0, 0, 0, 0.8); 229 | -webkit-border-radius: 15px; 230 | -moz-border-radius: 15px; 231 | border-radius: 15px; 232 | text-shadow: 0 1px 2px #222; 233 | color: #FFF; 234 | font-weight: bold; 235 | line-height: 24px; 236 | white-space: nowrap; 237 | } 238 | 239 | .fancybox-title-outside-wrap { 240 | position: relative; 241 | margin-top: 10px; 242 | color: #fff; 243 | } 244 | 245 | .fancybox-title-inside-wrap { 246 | padding-top: 10px; 247 | } 248 | 249 | .fancybox-title-over-wrap { 250 | position: absolute; 251 | bottom: 0; 252 | left: 0; 253 | color: #fff; 254 | padding: 10px; 255 | background: #000; 256 | background: rgba(0, 0, 0, .8); 257 | } 258 | 259 | /*Retina graphics!*/ 260 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 261 | only screen and (min--moz-device-pixel-ratio: 1.5), 262 | only screen and (min-device-pixel-ratio: 1.5){ 263 | 264 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 265 | background-image: url(fancybox_sprite@2x.png); 266 | background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ 267 | } 268 | 269 | #fancybox-loading div { 270 | background-image: url(fancybox_loading@2x.gif); 271 | background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ 272 | } 273 | } -------------------------------------------------------------------------------- /jQuery YouTube API search/css/lecture12.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: Verdana, sans-serif; 11 | font-size: 100%; 12 | color: #000; 13 | background: #fff; 14 | } 15 | 16 | #container { 17 | margin: 20px auto; 18 | width: 740px; 19 | border: 1px solid #999; 20 | padding: 20px; 21 | background: #F1F7DC; 22 | } 23 | 24 | section {} 25 | 26 | footer { padding-top: 20px; } 27 | 28 | clearfloats { clear: both; } 29 | 30 | 31 | /* heading and text styles */ 32 | 33 | h1, h2 { 34 | font-family: Cambria, Georgia, serif; 35 | font-size: 200%; 36 | font-weight: normal; 37 | line-height: 1.4em; 38 | } 39 | 40 | h2 { font-size: 160%; } 41 | 42 | p { 43 | margin-bottom: 20px; 44 | line-height: 1.4em; 45 | } 46 | 47 | 48 | /* links */ 49 | 50 | a:focus { 51 | outline: 2px solid #069; 52 | } 53 | a:link, a:active, a:visited { 54 | color: #00c; 55 | text-decoration: underline; 56 | } 57 | a:hover { 58 | color: #00f; 59 | text-decoration: none; 60 | } 61 | 62 | 63 | /* search form elements */ 64 | 65 | #search-form { 66 | display: block; 67 | margin-bottom: 15px; 68 | } 69 | 70 | .fieldcontainer { 71 | display: block; 72 | position: relative; 73 | width: 90%; 74 | margin: 0 auto; 75 | } 76 | 77 | .searchfield { 78 | display: block; 79 | width: 100%; 80 | padding: 11px 7px; 81 | padding-right: 43px; 82 | background: #fff; 83 | color: #333; 84 | font-family: monospace; 85 | font-size: 140%; 86 | border: 1px solid #ccc; 87 | } 88 | 89 | /* pretty cool trick: inserting the magnifying-glass image as background 90 | on the Submit button, then positioning the Submit button inside the 91 | form field! I wonder if this works in IE? */ 92 | 93 | #searchbutton { 94 | position: absolute; 95 | top: 7px; 96 | right: 10px; /* 360px; */ 97 | /* container is 740px wide (360px is less than half) 98 | .fieldcontainer is 90% wide with top margin of 0 99 | .searchfield is half that width? (45%) */ 100 | /* note: tutorial also has a whole animate-the-search-field 101 | part in jQuery, but I skipped that; it seemed unnecessary 102 | and just showy */ 103 | width: 32px; 104 | height: 32px; 105 | border: 0; 106 | cursor: pointer; 107 | /* two lines below set opacity for button, not image */ 108 | filter: alpha(opacity=65); 109 | opacity: 0.65; 110 | background: transparent url(../images/search.png) top left no-repeat; 111 | } 112 | 113 | #searchbutton:hover { 114 | /* two lines below change button's opacity */ 115 | filter: alpha(opacity=90); 116 | opacity: 0.9; 117 | } 118 | 119 | 120 | /* display for search results */ 121 | 122 | #results li { 123 | padding: 10px 0; 124 | border-bottom: 1px dashed #ccc; 125 | list-style: none; 126 | overflow: auto; /* not sure we need this */ 127 | } 128 | 129 | .list-left { 130 | float: left; 131 | width: 25%; 132 | } 133 | 134 | .list-left img { 135 | width: 100%; /* neat trick; inherits from floated div */ 136 | padding: 5px; 137 | background: #fff; /* photo border */ 138 | border: 1px solid #ccc; 139 | margin-top: 5px; 140 | } 141 | 142 | .list-right { 143 | float: right; 144 | width: 70%; 145 | } 146 | 147 | .list-right p.small { 148 | font-size: 90%; 149 | margin-bottom: 6px; 150 | } 151 | 152 | 153 | /* paging buttons for page bottom */ 154 | 155 | .button-container { 156 | margin-top: 25px; 157 | } 158 | 159 | .paging-button { 160 | background: #00c; 161 | color: #fff; 162 | font-size: 100%; 163 | text-align: center; 164 | padding: 10px 20px; 165 | cursor: pointer; 166 | -moz-border-radius: 20px; 167 | -webkit-border-radius: 20px; 168 | border-radius: 20px; 169 | border: 1px solid #666; 170 | } 171 | 172 | .paging-button:hover { 173 | background: #00f; 174 | } 175 | -------------------------------------------------------------------------------- /jQuery YouTube API search/lecture12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | YouTube Search Engine 6 | 7 | 8 | 9 | 10 | 11 | 16 | 20 | 21 | 22 | 23 |
24 | 25 |
26 |

YouTube Search Engine

27 |

Search for videos from YouTube and play them here!

28 |
29 | 30 |
31 |
32 | 34 |
35 | 36 | 37 | 38 |
39 |
40 | 41 | 42 |
    43 | 44 | 45 |
    46 | 47 |
    48 |

    This app accesses the YouTube API to search and display videos, from an exercise at Udemy. I made many changes to the JS file. Video viewer by fancyBox.

    49 |
    50 |
    51 | 52 |
    53 | 54 | 55 | -------------------------------------------------------------------------------- /jQuery YouTube API search/scripts/jquery.fancybox.pack.js: -------------------------------------------------------------------------------- 1 | /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 2 | (function(s,H,f,w){var K=f("html"),q=f(s),p=f(H),b=f.fancybox=function(){b.open.apply(this,arguments)},J=navigator.userAgent.match(/msie/i),C=null,t=H.createTouch!==w,u=function(a){return a&&a.hasOwnProperty&&a instanceof f},r=function(a){return a&&"string"===f.type(a)},F=function(a){return r(a)&&0
    ',image:'',iframe:'",error:'

    The requested content cannot be loaded.
    Please try again later.

    ',closeBtn:'',next:'',prev:''},openEffect:"fade",openSpeed:250,openEasing:"swing",openOpacity:!0, 6 | openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",nextEffect:"elastic",nextSpeed:250,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:250,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:!0,title:!0},onCancel:f.noop,beforeLoad:f.noop,afterLoad:f.noop,beforeShow:f.noop,afterShow:f.noop,beforeChange:f.noop,beforeClose:f.noop,afterClose:f.noop},group:{},opts:{},previous:null,coming:null,current:null,isActive:!1, 7 | isOpen:!1,isOpened:!1,wrap:null,skin:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(a,d){if(a&&(f.isPlainObject(d)||(d={}),!1!==b.close(!0)))return f.isArray(a)||(a=u(a)?f(a).get():[a]),f.each(a,function(e,c){var l={},g,h,k,n,m;"object"===f.type(c)&&(c.nodeType&&(c=f(c)),u(c)?(l={href:c.data("fancybox-href")||c.attr("href"),title:f("
    ").text(c.data("fancybox-title")||c.attr("title")).html(),isDom:!0,element:c}, 8 | f.metadata&&f.extend(!0,l,c.metadata())):l=c);g=d.href||l.href||(r(c)?c:null);h=d.title!==w?d.title:l.title||"";n=(k=d.content||l.content)?"html":d.type||l.type;!n&&l.isDom&&(n=c.data("fancybox-type"),n||(n=(n=c.prop("class").match(/fancybox\.(\w+)/))?n[1]:null));r(g)&&(n||(b.isImage(g)?n="image":b.isSWF(g)?n="swf":"#"===g.charAt(0)?n="inline":r(c)&&(n="html",k=c)),"ajax"===n&&(m=g.split(/\s+/,2),g=m.shift(),m=m.shift()));k||("inline"===n?g?k=f(r(g)?g.replace(/.*(?=#[^\s]+$)/,""):g):l.isDom&&(k=c): 9 | "html"===n?k=g:n||g||!l.isDom||(n="inline",k=c));f.extend(l,{href:g,type:n,content:k,title:h,selector:m});a[e]=l}),b.opts=f.extend(!0,{},b.defaults,d),d.keys!==w&&(b.opts.keys=d.keys?f.extend({},b.defaults.keys,d.keys):!1),b.group=a,b._start(b.opts.index)},cancel:function(){var a=b.coming;a&&!1===b.trigger("onCancel")||(b.hideLoading(),a&&(b.ajaxLoad&&b.ajaxLoad.abort(),b.ajaxLoad=null,b.imgPreload&&(b.imgPreload.onload=b.imgPreload.onerror=null),a.wrap&&a.wrap.stop(!0,!0).trigger("onReset").remove(), 10 | b.coming=null,b.current||b._afterZoomOut(a)))},close:function(a){b.cancel();!1!==b.trigger("beforeClose")&&(b.unbindEvents(),b.isActive&&(b.isOpen&&!0!==a?(b.isOpen=b.isOpened=!1,b.isClosing=!0,f(".fancybox-item, .fancybox-nav").remove(),b.wrap.stop(!0,!0).removeClass("fancybox-opened"),b.transitions[b.current.closeMethod]()):(f(".fancybox-wrap").stop(!0).trigger("onReset").remove(),b._afterZoomOut())))},play:function(a){var d=function(){clearTimeout(b.player.timer)},e=function(){d();b.current&&b.player.isActive&& 11 | (b.player.timer=setTimeout(b.next,b.current.playSpeed))},c=function(){d();p.unbind(".player");b.player.isActive=!1;b.trigger("onPlayEnd")};!0===a||!b.player.isActive&&!1!==a?b.current&&(b.current.loop||b.current.index=c.index?"next":"prev"],b.router=e||"jumpto",c.loop&&(0>a&&(a=c.group.length+a%c.group.length),a%=c.group.length),c.group[a]!==w&&(b.cancel(),b._start(a)))},reposition:function(a,d){var e=b.current,c=e?e.wrap:null,l;c&&(l=b._getPosition(d),a&&"scroll"===a.type?(delete l.position,c.stop(!0,!0).animate(l,200)):(c.css(l),e.pos=f.extend({},e.dim,l)))}, 13 | update:function(a){var d=a&&a.originalEvent&&a.originalEvent.type,e=!d||"orientationchange"===d;e&&(clearTimeout(C),C=null);b.isOpen&&!C&&(C=setTimeout(function(){var c=b.current;c&&!b.isClosing&&(b.wrap.removeClass("fancybox-tmp"),(e||"load"===d||"resize"===d&&c.autoResize)&&b._setDimension(),"scroll"===d&&c.canShrink||b.reposition(a),b.trigger("onUpdate"),C=null)},e&&!t?0:300))},toggle:function(a){b.isOpen&&(b.current.fitToView="boolean"===f.type(a)?a:!b.current.fitToView,t&&(b.wrap.removeAttr("style").addClass("fancybox-tmp"), 14 | b.trigger("onUpdate")),b.update())},hideLoading:function(){p.unbind(".loading");f("#fancybox-loading").remove()},showLoading:function(){var a,d;b.hideLoading();a=f('
    ').click(b.cancel).appendTo("body");p.bind("keydown.loading",function(a){27===(a.which||a.keyCode)&&(a.preventDefault(),b.cancel())});b.defaults.fixed||(d=b.getViewport(),a.css({position:"absolute",top:0.5*d.h+d.y,left:0.5*d.w+d.x}));b.trigger("onLoading")},getViewport:function(){var a=b.current&& 15 | b.current.locked||!1,d={x:q.scrollLeft(),y:q.scrollTop()};a&&a.length?(d.w=a[0].clientWidth,d.h=a[0].clientHeight):(d.w=t&&s.innerWidth?s.innerWidth:q.width(),d.h=t&&s.innerHeight?s.innerHeight:q.height());return d},unbindEvents:function(){b.wrap&&u(b.wrap)&&b.wrap.unbind(".fb");p.unbind(".fb");q.unbind(".fb")},bindEvents:function(){var a=b.current,d;a&&(q.bind("orientationchange.fb"+(t?"":" resize.fb")+(a.autoCenter&&!a.locked?" scroll.fb":""),b.update),(d=a.keys)&&p.bind("keydown.fb",function(e){var c= 16 | e.which||e.keyCode,l=e.target||e.srcElement;if(27===c&&b.coming)return!1;e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||l&&(l.type||f(l).is("[contenteditable]"))||f.each(d,function(d,l){if(1h[0].clientWidth||h[0].clientHeight&&h[0].scrollHeight>h[0].clientHeight),h=f(h).parent();0!==c&&!k&&1g||0>l)&&b.next(0>g?"up":"right"),d.preventDefault())}))},trigger:function(a,d){var e,c=d||b.coming||b.current;if(c){f.isFunction(c[a])&&(e=c[a].apply(c,Array.prototype.slice.call(arguments,1)));if(!1===e)return!1;c.helpers&&f.each(c.helpers,function(d,e){if(e&& 18 | b.helpers[d]&&f.isFunction(b.helpers[d][a]))b.helpers[d][a](f.extend(!0,{},b.helpers[d].defaults,e),c)})}p.trigger(a)},isImage:function(a){return r(a)&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSWF:function(a){return r(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(a){var d={},e,c;a=m(a);e=b.group[a]||null;if(!e)return!1;d=f.extend(!0,{},b.opts,e);e=d.margin;c=d.padding;"number"===f.type(e)&&(d.margin=[e,e,e,e]);"number"===f.type(c)&&(d.padding=[c,c, 19 | c,c]);d.modal&&f.extend(!0,d,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,mouseWheel:!1,keys:null,helpers:{overlay:{closeClick:!1}}});d.autoSize&&(d.autoWidth=d.autoHeight=!0);"auto"===d.width&&(d.autoWidth=!0);"auto"===d.height&&(d.autoHeight=!0);d.group=b.group;d.index=a;b.coming=d;if(!1===b.trigger("beforeLoad"))b.coming=null;else{c=d.type;e=d.href;if(!c)return b.coming=null,b.current&&b.router&&"jumpto"!==b.router?(b.current.index=a,b[b.router](b.direction)):!1;b.isActive=!0;if("image"=== 20 | c||"swf"===c)d.autoHeight=d.autoWidth=!1,d.scrolling="visible";"image"===c&&(d.aspectRatio=!0);"iframe"===c&&t&&(d.scrolling="scroll");d.wrap=f(d.tpl.wrap).addClass("fancybox-"+(t?"mobile":"desktop")+" fancybox-type-"+c+" fancybox-tmp "+d.wrapCSS).appendTo(d.parent||"body");f.extend(d,{skin:f(".fancybox-skin",d.wrap),outer:f(".fancybox-outer",d.wrap),inner:f(".fancybox-inner",d.wrap)});f.each(["Top","Right","Bottom","Left"],function(a,b){d.skin.css("padding"+b,x(d.padding[a]))});b.trigger("onReady"); 21 | if("inline"===c||"html"===c){if(!d.content||!d.content.length)return b._error("content")}else if(!e)return b._error("href");"image"===c?b._loadImage():"ajax"===c?b._loadAjax():"iframe"===c?b._loadIframe():b._afterLoad()}},_error:function(a){f.extend(b.coming,{type:"html",autoWidth:!0,autoHeight:!0,minWidth:0,minHeight:0,scrolling:"no",hasError:a,content:b.coming.tpl.error});b._afterLoad()},_loadImage:function(){var a=b.imgPreload=new Image;a.onload=function(){this.onload=this.onerror=null;b.coming.width= 22 | this.width/b.opts.pixelRatio;b.coming.height=this.height/b.opts.pixelRatio;b._afterLoad()};a.onerror=function(){this.onload=this.onerror=null;b._error("image")};a.src=b.coming.href;!0!==a.complete&&b.showLoading()},_loadAjax:function(){var a=b.coming;b.showLoading();b.ajaxLoad=f.ajax(f.extend({},a.ajax,{url:a.href,error:function(a,e){b.coming&&"abort"!==e?b._error("ajax",a):b.hideLoading()},success:function(d,e){"success"===e&&(a.content=d,b._afterLoad())}}))},_loadIframe:function(){var a=b.coming, 23 | d=f(a.tpl.iframe.replace(/\{rnd\}/g,(new Date).getTime())).attr("scrolling",t?"auto":a.iframe.scrolling).attr("src",a.href);f(a.wrap).bind("onReset",function(){try{f(this).find("iframe").hide().attr("src","//about:blank").end().empty()}catch(a){}});a.iframe.preload&&(b.showLoading(),d.one("load",function(){f(this).data("ready",1);t||f(this).bind("load.fb",b.update);f(this).parents(".fancybox-wrap").width("100%").removeClass("fancybox-tmp").show();b._afterLoad()}));a.content=d.appendTo(a.inner);a.iframe.preload|| 24 | b._afterLoad()},_preloadImages:function(){var a=b.group,d=b.current,e=a.length,c=d.preload?Math.min(d.preload,e-1):0,f,g;for(g=1;g<=c;g+=1)f=a[(d.index+g)%e],"image"===f.type&&f.href&&((new Image).src=f.href)},_afterLoad:function(){var a=b.coming,d=b.current,e,c,l,g,h;b.hideLoading();if(a&&!1!==b.isActive)if(!1===b.trigger("afterLoad",a,d))a.wrap.stop(!0).trigger("onReset").remove(),b.coming=null;else{d&&(b.trigger("beforeChange",d),d.wrap.stop(!0).removeClass("fancybox-opened").find(".fancybox-item, .fancybox-nav").remove()); 25 | b.unbindEvents();e=a.content;c=a.type;l=a.scrolling;f.extend(b,{wrap:a.wrap,skin:a.skin,outer:a.outer,inner:a.inner,current:a,previous:d});g=a.href;switch(c){case "inline":case "ajax":case "html":a.selector?e=f("
    ").html(e).find(a.selector):u(e)&&(e.data("fancybox-placeholder")||e.data("fancybox-placeholder",f('
    ').insertAfter(e).hide()),e=e.show().detach(),a.wrap.bind("onReset",function(){f(this).find(e).length&&e.hide().replaceAll(e.data("fancybox-placeholder")).data("fancybox-placeholder", 26 | !1)}));break;case "image":e=a.tpl.image.replace(/\{href\}/g,g);break;case "swf":e='',h="",f.each(a.swf,function(a,b){e+='';h+=" "+a+'="'+b+'"'}),e+='"}u(e)&&e.parent().is(a.inner)||a.inner.append(e);b.trigger("beforeShow"); 27 | a.inner.css("overflow","yes"===l?"scroll":"no"===l?"hidden":l);b._setDimension();b.reposition();b.isOpen=!1;b.coming=null;b.bindEvents();if(!b.isOpened)f(".fancybox-wrap").not(a.wrap).stop(!0).trigger("onReset").remove();else if(d.prevMethod)b.transitions[d.prevMethod]();b.transitions[b.isOpened?a.nextMethod:a.openMethod]();b._preloadImages()}},_setDimension:function(){var a=b.getViewport(),d=0,e=!1,c=!1,e=b.wrap,l=b.skin,g=b.inner,h=b.current,c=h.width,k=h.height,n=h.minWidth,v=h.minHeight,p=h.maxWidth, 28 | q=h.maxHeight,t=h.scrolling,r=h.scrollOutside?h.scrollbarWidth:0,y=h.margin,z=m(y[1]+y[3]),s=m(y[0]+y[2]),w,A,u,D,B,G,C,E,I;e.add(l).add(g).width("auto").height("auto").removeClass("fancybox-tmp");y=m(l.outerWidth(!0)-l.width());w=m(l.outerHeight(!0)-l.height());A=z+y;u=s+w;D=F(c)?(a.w-A)*m(c)/100:c;B=F(k)?(a.h-u)*m(k)/100:k;if("iframe"===h.type){if(I=h.content,h.autoHeight&&1===I.data("ready"))try{I[0].contentWindow.document.location&&(g.width(D).height(9999),G=I.contents().find("body"),r&&G.css("overflow-x", 29 | "hidden"),B=G.outerHeight(!0))}catch(H){}}else if(h.autoWidth||h.autoHeight)g.addClass("fancybox-tmp"),h.autoWidth||g.width(D),h.autoHeight||g.height(B),h.autoWidth&&(D=g.width()),h.autoHeight&&(B=g.height()),g.removeClass("fancybox-tmp");c=m(D);k=m(B);E=D/B;n=m(F(n)?m(n,"w")-A:n);p=m(F(p)?m(p,"w")-A:p);v=m(F(v)?m(v,"h")-u:v);q=m(F(q)?m(q,"h")-u:q);G=p;C=q;h.fitToView&&(p=Math.min(a.w-A,p),q=Math.min(a.h-u,q));A=a.w-z;s=a.h-s;h.aspectRatio?(c>p&&(c=p,k=m(c/E)),k>q&&(k=q,c=m(k*E)),cA||z>s)&&c>n&&k>v&&!(19p&&(c=p,k=m(c/E)),g.width(c).height(k),e.width(c+y),a=e.width(),z=e.height();else c=Math.max(n,Math.min(c,c-(a-A))),k=Math.max(v,Math.min(k,k-(z-s)));r&&"auto"===t&&kA||z>s)&&c>n&&k>v;c=h.aspectRatio?cv&&k
    ').appendTo(d&&d.lenth?d:"body");this.fixed=!1;a.fixed&&b.defaults.fixed&&(this.overlay.addClass("fancybox-overlay-fixed"),this.fixed=!0)},open:function(a){var d=this;a=f.extend({},this.defaults,a);this.overlay?this.overlay.unbind(".overlay").width("auto").height("auto"):this.create(a);this.fixed||(q.bind("resize.overlay",f.proxy(this.update,this)),this.update());a.closeClick&&this.overlay.bind("click.overlay", 40 | function(a){if(f(a.target).hasClass("fancybox-overlay"))return b.isActive?b.close():d.close(),!1});this.overlay.css(a.css).show()},close:function(){q.unbind("resize.overlay");this.el.hasClass("fancybox-lock")&&(f(".fancybox-margin").removeClass("fancybox-margin"),this.el.removeClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));f(".fancybox-overlay").remove().hide();f.extend(this,{overlay:null,fixed:!1})},update:function(){var a="100%",b;this.overlay.width(a).height("100%"); 41 | J?(b=Math.max(H.documentElement.offsetWidth,H.body.offsetWidth),p.width()>b&&(a=p.width())):p.width()>q.width()&&(a=p.width());this.overlay.width(a).height(p.height())},onReady:function(a,b){var e=this.overlay;f(".fancybox-overlay").stop(!0,!0);e||this.create(a);a.locked&&this.fixed&&b.fixed&&(b.locked=this.overlay.append(b.wrap),b.fixed=!1);!0===a.showEarly&&this.beforeShow.apply(this,arguments)},beforeShow:function(a,b){b.locked&&!this.el.hasClass("fancybox-lock")&&(!1!==this.fixPosition&&f("*").filter(function(){return"fixed"=== 42 | f(this).css("position")&&!f(this).hasClass("fancybox-overlay")&&!f(this).hasClass("fancybox-wrap")}).addClass("fancybox-margin"),this.el.addClass("fancybox-margin"),this.scrollV=q.scrollTop(),this.scrollH=q.scrollLeft(),this.el.addClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));this.open(a)},onUpdate:function(){this.fixed||this.update()},afterClose:function(a){this.overlay&&!b.coming&&this.overlay.fadeOut(a.speedOut,f.proxy(this.close,this))}};b.helpers.title={defaults:{type:"float", 43 | position:"bottom"},beforeShow:function(a){var d=b.current,e=d.title,c=a.type;f.isFunction(e)&&(e=e.call(d.element,d));if(r(e)&&""!==f.trim(e)){d=f('
    '+e+"
    ");switch(c){case "inside":c=b.skin;break;case "outside":c=b.wrap;break;case "over":c=b.inner;break;default:c=b.skin,d.appendTo("body"),J&&d.width(d.width()),d.wrapInner(''),b.current.margin[2]+=Math.abs(m(d.css("margin-bottom")))}d["top"===a.position?"prependTo": 44 | "appendTo"](c)}}};f.fn.fancybox=function(a){var d,e=f(this),c=this.selector||"",l=function(g){var h=f(this).blur(),k=d,l,m;g.ctrlKey||g.altKey||g.shiftKey||g.metaKey||h.is(".fancybox-wrap")||(l=a.groupAttr||"data-fancybox-group",m=h.attr(l),m||(l="rel",m=h.get(0)[l]),m&&""!==m&&"nofollow"!==m&&(h=c.length?f(c):e,h=h.filter("["+l+'="'+m+'"]'),k=h.index(this)),a.index=k,!1!==b.open(h,a)&&g.preventDefault())};a=a||{};d=a.index||0;c&&!1!==a.live?p.undelegate(c,"click.fb-start").delegate(c+":not('.fancybox-item, .fancybox-nav')", 45 | "click.fb-start",l):e.unbind("click.fb-start").bind("click.fb-start",l);this.filter("[data-fancybox-start=1]").trigger("click");return this};p.ready(function(){var a,d;f.scrollbarWidth===w&&(f.scrollbarWidth=function(){var a=f('
    ').appendTo("body"),b=a.children(),b=b.innerWidth()-b.height(99).innerWidth();a.remove();return b});f.support.fixedPosition===w&&(f.support.fixedPosition=function(){var a=f('
    ').appendTo("body"), 46 | b=20===a[0].offsetTop||15===a[0].offsetTop;a.remove();return b}());f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(s).width();K.addClass("fancybox-lock-test");d=f(s).width();K.removeClass("fancybox-lock-test");f("").appendTo("head")})})(window,document,jQuery); -------------------------------------------------------------------------------- /jQuery YouTube API search/scripts/lecture12.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('#search-form').submit(function(e) { 3 | e.preventDefault(); 4 | }); 5 | }) 6 | // I don't get why this is needed -- isn't GET actually submitting 7 | // the form? It seems like by using preventDefault() we would be 8 | // preventing the GET request! But script doesn't work w/o it. 9 | 10 | 11 | // I added two args (they are blank if you use the search form) 12 | // so that same function can be used for paging instead of copying 13 | // all the code TWICE into the Prev and Next Page functions. 14 | // Seems to work fine. 15 | function search(token, q) { 16 | // clear the containers we already have in HTML 17 | $('#results').html(''); 18 | $('#buttons').html(''); 19 | 20 | // grab the form field input 21 | // I added the if-test to streamline Prev and Next Page functions 22 | if (!q) { 23 | q = $('#query').val(); // id of the search input field in HTML 24 | } 25 | 26 | // send GET request to the API (jQuery method) 27 | // the URL for GET came from: 28 | // https://developers.google.com/youtube/v3/docs/search/list 29 | // also the options, such as part and q, come from there (long list) 30 | $.get( 31 | "https://www.googleapis.com/youtube/v3/search",{ // URL for GET 32 | part: 'snippet, id', 33 | q: q, 34 | pageToken: token, 35 | type: 'video', 36 | key: 'AIzaSyCH0i8znvwIBCWC_nZgFr8rmaUOW6AH1Hs' // my own key 37 | }, 38 | function(data){ // see below re: "data" 39 | var nextPageToken = data.nextPageToken; 40 | var prevPageToken = data.prevPageToken; 41 | // nextPageToken and prevPageToken are supplied by YouTube 42 | // and will allow us to retrieve the next set of results 43 | 44 | // log data 45 | console.log(data); 46 | // "data" contains all the data sent from YouTube API. 47 | // By logging it, we can see that, and we can open the 48 | // "snippet" in the Console and see title, descrip, etc. 49 | // for each video (see http://api.jquery.com/jquery.get/ 50 | // for origin of "data") 51 | 52 | $.each(data.items, function(i, item) { 53 | // get HTML output; see below for the function 54 | var output = getOutput(item); 55 | 56 | // display results on HTML page 57 | // output comes from getOutput() below 58 | $('#results').append(output); 59 | }); 60 | 61 | var buttons = getButtons(prevPageToken, nextPageToken, q); 62 | // create two buttons in HTML; see below for the function 63 | // buttons comes from getButtons() below 64 | $('#buttons').append(buttons); 65 | 66 | } 67 | ); // end .get() method 68 | } // end search function 69 | 70 | 71 | // Prev and Next Page functions 72 | // in the tute, the guy COPIED all the search() code and repeated it 73 | // in EACH page function -- NUTS. So instead I pass the new vars into 74 | // the search() function 75 | function prevPage() { 76 | var token = $('#prev-button').data('token'); 77 | var q = $('#prev-button').data('query'); 78 | // above does not exist in HTML; is written by getButtons() below 79 | search(token, q); 80 | } 81 | 82 | function nextPage() { 83 | var token = $('#next-button').data('token'); 84 | var q = $('#next-button').data('query'); 85 | // above does not exist in HTML; is written by getButtons() below 86 | search(token, q); 87 | } 88 | 89 | 90 | // build the output to be displayed in our HTML 91 | function getOutput(item) { 92 | 93 | // the guy in the tutorial is not clear about this at all. See: 94 | // PNG "data items returned by GET request.png" (my file). 95 | // You can dig into the data via the console and find these 96 | // parameter names that way: Object > Items > 0-5 > id, snippet 97 | var videoId = item.id.videoId; 98 | var title = item.snippet.title; 99 | var description = item.snippet.description; 100 | var thumb = item.snippet.thumbnails.medium.url; 101 | var channelTitle = item.snippet.channelTitle; 102 | // sometimes this is empty 103 | var videoDate = item.snippet.publishedAt; 104 | 105 | // build output string with HTML for one video 106 | // we're building two divs to float left & right inside a single
  • 107 | // all styled in the CSS 108 | var output = '
  • ' + 109 | '
    ' + 110 | '' + 111 | '
    ' + 112 | '
    ' + 113 | '

    ' +title+ '

    ' + 115 | '

    By ' +channelTitle+ ' on ' +videoDate+ 116 | '

    ' + 117 | '

    ' +description+ '

    ' + 118 | '
    ' + 119 | '
    • ' + 120 | '
    ' + 121 | ''; 122 | 123 | return output; 124 | } 125 | 126 | 127 | // build the buttons to be displayed in our HTML 128 | // I also rewrote this function to get rid of redundancy 129 | function getButtons(prevPageToken, nextPageToken, q) { 130 | var prevButton = ''; 133 | 134 | var nextButton = ''; 137 | 138 | if(!prevPageToken){ 139 | var buttonOutput = '
    ' + 140 | nextButton + '
    '; 141 | // probably should add if-not-nextPageToken but not going to 142 | // they might go on forever anyway 143 | } else { 144 | var buttonOutput = '
    ' + 145 | prevButton + ' ' +nextButton+ '
    '; 146 | } 147 | 148 | return buttonOutput; 149 | } 150 | -------------------------------------------------------------------------------- /jQuery YouTube API search/scripts/lecture12_backup.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('#search-form').submit(function(e) { 3 | e.preventDefault(); 4 | }); 5 | }) 6 | // I don't get why this is needed -- isn't GET actually submitting 7 | // the form? It seems like by using preventDefault() we would be 8 | // preventing the GET request! But this doesn't work w/o it. 9 | 10 | 11 | function search() { 12 | // clear the containers we already have in HTML 13 | $('#results').html(''); 14 | $('#buttons').html(''); 15 | 16 | // grab the form field input 17 | q = $('#query').val(); // id of the search input field in HTML 18 | 19 | // send GET request to the API (jQuery method) 20 | // the URL for GET came from: 21 | // https://developers.google.com/youtube/v3/docs/search/list 22 | // also the options, such as part and q, come from there (long list) 23 | $.get( 24 | "https://www.googleapis.com/youtube/v3/search",{ // URL for GET 25 | part: 'snippet, id', 26 | q: q, 27 | type: 'video', 28 | key: 'AIzaSyCH0i8znvwIBCWC_nZgFr8rmaUOW6AH1Hs' // my own key 29 | }, 30 | function(data){ // see below re: "data" 31 | var nextPageToken = data.nextPageToken; 32 | var prevPageToken = data.prevPageToken; 33 | // nextPageToken and prevPageToken are supplied by YouTube 34 | // and will allow us to retrieve the next set of results 35 | 36 | // log data 37 | console.log(data); 38 | // "data" contains all the data sent from YouTube API 39 | // by logging it, we can see that, and we can open the 40 | // "snippet" in the Console and see title, descrip, etc. 41 | // for each video (see http://api.jquery.com/jquery.get/ 42 | // for origin of "data") 43 | 44 | $.each(data.items, function(i, item) { 45 | // get output 46 | var output = getOutput(item); 47 | 48 | // display results on HTML page 49 | $('#results').append(output); 50 | }); 51 | 52 | } 53 | ); // end .get() method 54 | } // end search function 55 | 56 | -------------------------------------------------------------------------------- /jQuery YouTube API search/scripts/lecture12_backup_before_lightbox.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('#search-form').submit(function(e) { 3 | e.preventDefault(); 4 | }); 5 | }) 6 | // I don't get why this is needed -- isn't GET actually submitting 7 | // the form? It seems like by using preventDefault() we would be 8 | // preventing the GET request! But script doesn't work w/o it. 9 | 10 | 11 | // I added two args (they are blank if you use the search form 12 | // so that same function can be used for paging instead of copying 13 | // all the code TWICE into the Prev and Next Page functions. 14 | // Seems to work fine. 15 | function search(token, q) { 16 | // clear the containers we already have in HTML 17 | $('#results').html(''); 18 | $('#buttons').html(''); 19 | 20 | // grab the form field input 21 | // I added the if-test to streamline Prev and Next Page functions 22 | if (!q) { 23 | q = $('#query').val(); // id of the search input field in HTML 24 | } 25 | 26 | // send GET request to the API (jQuery method) 27 | // the URL for GET came from: 28 | // https://developers.google.com/youtube/v3/docs/search/list 29 | // also the options, such as part and q, come from there (long list) 30 | $.get( 31 | "https://www.googleapis.com/youtube/v3/search",{ // URL for GET 32 | part: 'snippet, id', 33 | q: q, 34 | pageToken: token, 35 | type: 'video', 36 | key: 'AIzaSyCH0i8znvwIBCWC_nZgFr8rmaUOW6AH1Hs' // my own key 37 | }, 38 | function(data){ // see below re: "data" 39 | var nextPageToken = data.nextPageToken; 40 | var prevPageToken = data.prevPageToken; 41 | // nextPageToken and prevPageToken are supplied by YouTube 42 | // and will allow us to retrieve the next set of results 43 | 44 | // log data 45 | console.log(data); 46 | // "data" contains all the data sent from YouTube API. 47 | // By logging it, we can see that, and we can open the 48 | // "snippet" in the Console and see title, descrip, etc. 49 | // for each video (see http://api.jquery.com/jquery.get/ 50 | // for origin of "data") 51 | 52 | $.each(data.items, function(i, item) { 53 | // get HTML output; see below for the function 54 | var output = getOutput(item); 55 | 56 | // display results on HTML page 57 | // output comes from getOutput() below 58 | $('#results').append(output); 59 | }); 60 | 61 | var buttons = getButtons(prevPageToken, nextPageToken, q); 62 | // create two buttons in HTML; see below for the function 63 | // buttons comes from getButtons() below 64 | $('#buttons').append(buttons); 65 | 66 | } 67 | ); // end .get() method 68 | } // end search function 69 | 70 | 71 | // Prev and Next Page functions 72 | // in the tute, the guy COPIED all the search() code and repeated it 73 | // in EACH page function -- NUTS. So instead I pass the new vars into 74 | // the search() function 75 | function prevPage() { 76 | var token = $('#prev-button').data('token'); 77 | var q = $('#prev-button').data('query'); 78 | // above does not exist in HTML; is written by getButtons() below 79 | search(token, q); 80 | } 81 | 82 | function nextPage() { 83 | var token = $('#next-button').data('token'); 84 | var q = $('#next-button').data('query'); 85 | // above does not exist in HTML; is written by getButtons() below 86 | search(token, q); 87 | } 88 | 89 | 90 | // build the output to be displayed in our HTML 91 | function getOutput(item) { 92 | 93 | // the guy in the tutorial is not clear about this at all. See: 94 | // PNG "data items returned by GET request.png" (my file). 95 | // You can dig into the data via the console and find these 96 | // parameter names that way: Object > Items > 0-5 > id, snippet 97 | var videoId = item.id.videoId; 98 | var title = item.snippet.title; 99 | var description = item.snippet.description; 100 | var thumb = item.snippet.thumbnails.medium.url; 101 | var channelTitle = item.snippet.channelTitle; 102 | // sometimes this is empty 103 | var videoDate = item.snippet.publishedAt; 104 | 105 | // build output string with HTML for one video 106 | // we're building two divs to float left & right inside a single
  • 107 | // all styled in the CSS 108 | var output = '
  • ' + 109 | '
    ' + 110 | '' + 111 | '
    ' + 112 | '
    ' + 113 | '

    ' +title+ '

    ' + 114 | '

    By ' +channelTitle+ ' on ' +videoDate+ '

    ' + 115 | '

    ' +description+ '

    ' + 116 | '
    ' + 117 | '
    • ' + 118 | '
    ' + 119 | ''; 120 | 121 | return output; 122 | } 123 | 124 | 125 | // build the buttons to be displayed in our HTML 126 | function getButtons(prevPageToken, nextPageToken, q) { 127 | var prevButton = ''; 130 | 131 | var nextButton = ''; 134 | 135 | if(!prevPageToken){ 136 | var buttonOutput = '
    ' + 137 | nextButton + '
    '; 138 | // probably should add if-not-nextPageToken but not going to 139 | } else { 140 | var buttonOutput = '
    ' + 141 | prevButton + ' ' +nextButton+ '
    '; 142 | } 143 | 144 | return buttonOutput; 145 | } 146 | -------------------------------------------------------------------------------- /jQuery accordion/css/lecture18.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: Verdana, sans-serif; 11 | font-size: 100%; 12 | color: #000; 13 | background: #752E57; 14 | } 15 | 16 | #container { 17 | margin: 20px auto; 18 | max-width: 700px; 19 | border: 1px solid #999; 20 | padding: 20px; 21 | background: #DEB6CD; 22 | } 23 | 24 | #title { 25 | background: #333; 26 | color: #ccc; 27 | padding: 20px; 28 | text-align: center; 29 | margin-top: 20px; 30 | border-bottom: 2px solid #DEB6CD; 31 | } 32 | 33 | 34 | /* heading and text styles */ 35 | 36 | h1, h2 { 37 | font-family: Cambria, Georgia, serif; 38 | font-size: 200%; 39 | font-weight: normal; 40 | line-height: 1.4em; 41 | } 42 | 43 | h2 { font-size: 160%; } 44 | 45 | p { 46 | margin-bottom: 20px; 47 | line-height: 1.4em; 48 | } 49 | 50 | 51 | /* DL list styles */ 52 | 53 | #faq img { 54 | margin: 10px 8px 0 8px; 55 | vertical-align: bottom; 56 | } 57 | 58 | dt { 59 | font-family: Cambria, Georgia, serif; 60 | font-size: 140%; 61 | font-weight: bold; 62 | background: #5E2044; 63 | color: #fff; 64 | padding-bottom: 25px; 65 | border-top: 2px solid #DEB6CD; 66 | border-bottom: 2px solid #DEB6CD; 67 | cursor: pointer; 68 | } 69 | 70 | dd { 71 | background: #E3C3D5; 72 | padding: 10px; 73 | padding-bottom: 20px; 74 | line-height: 1.4em; 75 | } 76 | /* in the tutorial he hides the answers with CSS. Bad idea, because 77 | any user lacking JS will never see the answers. */ 78 | 79 | 80 | 81 | /* class to be used by jQuery */ 82 | .rotate { 83 | -moz-transform: rotate(90deg); 84 | -webkit-transform: rotate(90deg); 85 | transform: rotate(90deg); 86 | } 87 | 88 | 89 | /* links */ 90 | 91 | a:focus { 92 | outline: 2px solid #069; 93 | } 94 | a:link, a:active, a:visited { 95 | color: #00c; 96 | text-decoration: underline; 97 | } 98 | a:hover { 99 | color: #00f; 100 | text-decoration: none; 101 | } 102 | 103 | -------------------------------------------------------------------------------- /jQuery accordion/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery accordion/images/arrow.png -------------------------------------------------------------------------------- /jQuery accordion/lecture18.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lecture 18 jQuery FAQ accordion 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |

    jQuery FAQ accordion

    16 | 17 |

    Facts about Southeast Asia

    18 | 19 | 20 |
    21 | 22 |
    How many countries are in Southeast Asia?
    23 |
    There are 10 nations in the Association of Southeast Asian Nations (ASEAN): Brunei, Cambodia, Indonesia, Laos, Malaysia, Myanmar (Burma), the Philippines, Singapore, Thailand, and Vietnam.
    24 | 25 |
    Which languages are spoken in Southeast Asia?
    26 |
    There are many more languages than nations. In Brunei, Malaysia, and Indonesia, the primary language is similar (Bahasa Indonesia and Bahasa Malaysia), but there are literally hundreds of languages spoken throughout the archipelago of Indonesia. Mandarin Chinese and other Chinese languages are spoken throughout Malaysia and Singapore, as well as several Indian languages. Filipino (Tagalog) and English are spoken in the Philippines. Cambodia, Laos, Myanmar (Burma), Thailand, and Vietnam each have their own national languages, and of those, only Vietnam uses the Latin alphabet.
    27 | 28 |
    What is the religion of Southeast Asia?
    29 |
    Various religions are practiced throughout the region. Brunei, Indonesia, and Malaysia are majority Muslim, with Indonesia being the largest Muslim nation in the world. Cambodia, Laos, Myanmar (Burma), and Thailand are majority Buddhist. In Vietnam, under a communist government, many people might not admit to practicing a religion, but there are plenty of Buddhist temples and Roman Catholic churches. The Philippines is mostly Roman Catholic. In Singapore, you'll find a mix of Buddhists, Muslims, Taoists, Roman Catholics, and Hindus.
    30 | 31 |
    What foreign influences have shaped Southeast Asia?
    32 |
    Before the 12th century CE, Indian culture and religion played a large role in many countries of the region. Chinese traders traveled by land and sea far to to west, carrying with them cuisine, building techniques, business practices. Arab traders also came in large numbers and even settled in the coastal areas. Much later, the Portuguese, Dutch, Spanish, and British came in search of spices and other trade goods. The French came later still, making colonies of Vietnam, Cambodia, and Laos.
    33 | 34 |
    What are the forms of government in Southeast Asia?
    35 |
    Thailand (which never was colonized by a European power) still has a king and an elected legislature, although there was a military coup in 2014. Cambodia is also a constitutional monarchy. Malaysia is nominally a democracy and also maintains a system of regional hereditary rulers (sultans), one of whom serves as king. Brunei is ruled by the sultan. Laos and Vietnam are communist states. Myanmar (Burma) has had a parliamentary government since 2011, after years of rule by a military junta. The Philippines and Indonesia are republics, headed by a president. Singapore is a parliamentary republic.
    36 | 37 |
    38 | 39 |
    40 | 41 | 42 | -------------------------------------------------------------------------------- /jQuery accordion/scripts/lecture18.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // --------------------------- 3 | // simple accordion menu or FAQ list, with rotating image 4 | 5 | 6 | // hide all answers 7 | $('dd').hide(); 8 | 9 | var action = "click"; 10 | var speed = "500"; 11 | 12 | $('dt').on(action,function() { 13 | // get next element in DOM 14 | $(this).next() 15 | .slideToggle(speed) 16 | .siblings('dd') 17 | .slideUp(); // close all siblings 18 | 19 | // get image for the active question 20 | var current = $(this).children('img'); 21 | // remove rotate class from any other img 22 | $('img').not(current).removeClass('rotate'); 23 | // toggle rotate class on the current img 24 | $(current).toggleClass('rotate'); 25 | 26 | }); 27 | 28 | 29 | // ------------------------ end 30 | }); 31 | -------------------------------------------------------------------------------- /jQuery content slider/css/lecture9.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | margin: 20px auto; 11 | background: #333; 12 | color: #fff; 13 | font-family: Verdana, sans-serif; 14 | font-size: 100%; 15 | line-height: 1.5em; 16 | } 17 | 18 | #container { 19 | width: 965px; 20 | margin: 40px auto; 21 | overflow: hidden; 22 | } 23 | 24 | header { 25 | text-align: center; 26 | padding: 20px 0; 27 | } 28 | 29 | h1 { 30 | font: normal 4em/1em Georgia, serif; 31 | margin: 10px 0; 32 | } 33 | 34 | h2 { 35 | font-size: 140%; 36 | font-weight: bold; 37 | margin-bottom: 5px; 38 | } 39 | 40 | #prev, #next { 41 | float: left; 42 | margin-top: 130px; 43 | cursor: pointer; 44 | z-index: 100; 45 | position: relative; /* without this, they don't lay on top */ 46 | } 47 | 48 | #prev { 49 | margin-right: -45px; 50 | } 51 | 52 | #next { 53 | margin-left: -45px; 54 | } 55 | 56 | #slider { 57 | float: left; 58 | overflow: hidden; 59 | width: 940px; 60 | height: 350px; /* necessary */ 61 | padding: 3px; 62 | border: 3px solid #666; 63 | position: relative; /* see above */ 64 | } 65 | 66 | .slide { 67 | position: absolute; 68 | } 69 | 70 | .slide-copy { /* text inside */ 71 | position: absolute; 72 | bottom: 0; 73 | left: 0; 74 | padding: 20px; 75 | margin-bottom: 15px; 76 | background: #666; 77 | background: rgba(0,0,0,0.5); 78 | } 79 | 80 | -------------------------------------------------------------------------------- /jQuery content slider/images/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/arrow-left.png -------------------------------------------------------------------------------- /jQuery content slider/images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/arrow-right.png -------------------------------------------------------------------------------- /jQuery content slider/images/slide1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide1.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide2.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide3.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide4.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide5.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide6.jpg -------------------------------------------------------------------------------- /jQuery content slider/images/slide7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/macloo/projects-javascript-jquery/8ba14be31df0f72c1136fece8b9f87a9b1577c0b/jQuery content slider/images/slide7.jpg -------------------------------------------------------------------------------- /jQuery content slider/lecture9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lecture 9 jQuery Content Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |

    jQuery Content Slider

    16 |
    17 | 18 | Prev 19 |
    20 | 21 | 22 |
    23 |
    24 |

    Slider One

    25 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.

    26 |
    27 | 28 |
    29 | 30 | 31 |
    32 |
    33 |

    Slider Two

    34 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.

    35 |
    36 | 37 |
    38 | 39 | 40 |
    41 |
    42 |

    Slider Three

    43 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.

    44 |
    45 | 46 |
    47 | 48 | 49 |
    50 |
    51 |

    Slider Four

    52 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.

    53 |
    54 | 55 |
    56 | 57 | 58 |
    59 |
    60 |

    Slider Five

    61 |

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.

    62 |
    63 | 64 |
    65 | 66 | 67 |
    68 | Next 69 | 70 |
    71 | 72 | 73 | -------------------------------------------------------------------------------- /jQuery content slider/scripts/lecture9.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { // do not delete 2 | // ---------------------------------------------------------------------------- 3 | 4 | // simple content slider with no auto-play options 5 | 6 | // slider options 7 | var speed = 500; // fade speed, in milliseconds 8 | 9 | // add active class to first slide 10 | $('.slide').first().addClass('active'); 11 | 12 | // hide all slides 13 | $('.slide').hide(); 14 | 15 | // show first slide 16 | $('.active').show(); 17 | 18 | // click action event handlers (next and prev) 19 | $('#next').on('click', function() { 20 | $('.active').removeClass('active').addClass('oldActive'); 21 | // check to see if we have reached the final slide 22 | if ($('.oldActive').is(':last-child')) { 23 | $('.slide').first().addClass('active'); 24 | } else { 25 | $('.oldActive').next().addClass('active'); 26 | } 27 | $('.oldActive').removeClass('oldActive'); 28 | $('.slide').fadeOut(speed); 29 | $('.active').fadeIn(speed); 30 | }); 31 | 32 | $('#prev').on('click', function() { 33 | $('.active').removeClass('active').addClass('oldActive'); 34 | // check to see if we are on the first slide 35 | if ($('.oldActive').is(':first-child')) { 36 | $('.slide').last().addClass('active'); 37 | } else { 38 | $('.oldActive').prev().addClass('active'); 39 | } 40 | $('.oldActive').removeClass('oldActive'); 41 | $('.slide').fadeOut(speed); 42 | $('.active').fadeIn(speed); 43 | }); 44 | 45 | 46 | // ---------------------------------------------------------------------------- 47 | }); 48 | -------------------------------------------------------------------------------- /jQuery content slider/scripts/lecture9_b.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { // do not delete 2 | // ---------------------------------------------------------------------------- 3 | 4 | // content slider with auto-play options - setInterval() and clearInterval() 5 | // note: does not include ability to restart auto-play 6 | // auto-play simply ceases if you click Prev or Next arrows 7 | 8 | // slider options 9 | var speed = 500; // fade speed, in milliseconds 10 | var autoswitch = true; // auto-play on 11 | var autoswitchSpeed = 3000; // sliding speed 12 | 13 | // add active class to first slide 14 | $('.slide').first().addClass('active'); 15 | 16 | // hide all slides 17 | $('.slide').hide(); 18 | 19 | // show first slide 20 | $('.active').show(); 21 | 22 | // click action event handlers - now they call named functions 23 | $('#next').on('click', function() { 24 | clearInterval(autoplay); // stops slider auto-playing 25 | nextSlide(); 26 | }); 27 | $('#prev').on('click', prevSlide); 28 | 29 | // start auto-playing 30 | if (autoswitch) { 31 | var autoplay = setInterval(nextSlide, autoswitchSpeed); 32 | } 33 | 34 | function nextSlide() { 35 | $('.active').removeClass('active').addClass('oldActive'); 36 | // check to see if we have reached the final slide 37 | if ($('.oldActive').is(':last-child')) { 38 | $('.slide').first().addClass('active'); 39 | } else { 40 | $('.oldActive').next().addClass('active'); 41 | } 42 | $('.oldActive').removeClass('oldActive'); 43 | $('.slide').fadeOut(speed); 44 | $('.active').fadeIn(speed); 45 | } 46 | 47 | function prevSlide() { 48 | clearInterval(autoplay); 49 | $('.active').removeClass('active').addClass('oldActive'); 50 | // check to see if we are on the first slide 51 | if ($('.oldActive').is(':first-child')) { 52 | $('.slide').last().addClass('active'); 53 | } else { 54 | $('.oldActive').prev().addClass('active'); 55 | } 56 | $('.oldActive').removeClass('oldActive'); 57 | $('.slide').fadeOut(speed); 58 | $('.active').fadeIn(speed); 59 | } 60 | 61 | // ---------------------------------------------------------------------------- 62 | }); 63 | --------------------------------------------------------------------------------