cs952

Adding JavaScript to Automatically Update the Year

Video - m10-01
Open the template.dwt file.
Scroll to the footer, and find the "year" for the copyright.
Replace the "year" with this text to see how JavaScript documnet.write works:

<script> document.write(2001); </script>

The JavaScript 'write' method bascially writes content to the web page. But JavaScript can do more than just write content to a page, it can run little programs. Rather than just displaying the number 2001, we can have JavaScript display the sum of 2001+14. Modify your code as shown below:

<script> document.write(2001+14); </script>

As you can see, the sum of 2001+14, or 2015 is now shown. JavaScript has many built it tools, including the 'Date' object. Update your code again:

<script> document.write(new Date().getFullYear()); </script>

Using this little bit of code will always display the current year in your copyright.

jQuery Navigation Update

Video - m10-02
Test your website. Notice that no matter what page you select, only the Home icon is highlighted
Select the home/active element in the Status bar, and remove the class 'active'
In the Status bar, remove the sr current class
Near the end of the template page, after the bootstrap.js, paste in this additional code:

<!-- Change the active state of the navigation -->
<script>
    $(function() { // update the li active class
        var contentURL = window.location.pathname.split( '/' );
        var endURL = contentURL[contentURL.length-1];
      $('a[href="' + endURL + '"]').closest("li").addClass('active');
      $('a[href="' + endURL + '"]').closest("li.dropdown").addClass('active');
      $('a[href="' + endURL + '"]').append( '<span class="sr-only">(current)</span>'  );
    });            
</script>

This code has two parts, the first part uses JavaScript to find out the current URL of the page you are on. To see how this works, you can optionally paste this line of code in for testing at the end of your javascript, but before the closing <script> tag.:

window.alert ('The current URL is ' + endURL );

You will see a message that displays the current URL.
Once JavaScript "knows" the current URL, it searches the page for any links that have the same URL, and assigns the links to the 'active' class.
Save All and then press F12 to Preview in a web browser
Close the template.dwt

Adding the jQuery Fancybox / Homepage / Gallery

Video - m10-03
Open the template.dwt
We will be adding the Fancybox lightbox to the website. More about fancybox.
While we will not be using Fancybox on every page, this is such a useful tool, we will add it to the template so the code is available when ever we decide to use Fancybox.
Copy the fancybox folder in the 'tutorial/images' folder to the 'images' folder
Copy the fancybox.css file to the css folder
Copy the fancybox.js file to the js folder
As a general rules of thumb, css files are added to the head of a web page, and javascript files are added to the end of a web page.
Drag the fancybox.css file from the css folder to the css file links area in the head of the template file. The fancybox.css file should go after the font awesome cdn css file.
Drag the fancybox.js file from the js folder in Dreamweaver to the script region at the end of the body of the template file.

Paste this javascript to initialize fancybox (this code is also in the examples/text_files.txt):

<script type="text/javascript">
	$(document).ready(function() {
	$('.fancybox').fancybox();
	});
</script>

Save all
Update All pages
Close template.dwt
Video - m10-04
Open the index.html home page.
First we will link an image to a word.
Highlight a word in your opening text that can link to an image that you have. In this example, I will highlight the words "the humble pencil."
In Property inspector, in the Link attribute, use the "browse for file" icon to locate the image you want to link to. In this case, I selected 'pencil-gallery_four-pencils from the gallery folder
In the Property inspector, enter an appropriate title for the image. In this case, I will use "The Humble Pencil."
Set "target=_blank"
Press F12 to prompt you to save your work, and preview in a browser
Save Changes
In the web browser click on the words you just added an image link to. Your browser should open up that image in a new window.
Return to Dreamweaver.
Use the Property inspector to assign the anchor tag to the class of "fancybox." You will see many variations on the "fancybox" class, but you want the basic "fancybox".
Press F12 to prompt you to save your work, and preview in a browser.
Click on the words you linked to again. Your browser should open up that image in the center of the page, without leaving the website.
Save All
Open the gallery.html page
Be sure that you have linked every image to itself, and provided a "alt" and "title" for the image. This was covered in module 6, creating the gallery page.
You will also need to complete the above steps for a Fancybox / Lightbox / Homepage first.
Switch to Code view.
As you may recall, all the images on this page have something in common, they can be targeted using the css selected #photoGallery img. We can use jQuery to target all theses images and apply the necessary classes and attributes without typing all the code ourselves. Add the following script at the end of the javascript section, in the editable refion "addScript":
```

<script>
	$(document).ready(function() {
		$("#photoGallery img").each( function() {
			$(this).parent('a').attr('class', 'fancybox');
			$(this).parent('a').attr('data-fancybox-group', 'gallery');
			$(this).parent('a').attr('title', this.title);
		});
	});
</script>
```
Press F12 to prompt you to save your work, and preview in a browser
Clicking on the image should open up a large image, on the same page.

Adding the jQuery Audio Player

Video - m10-05
Open the media.html page
We will be adding the audioplayer jQuery to the media gallery page. More about audio player
Switch to Code view.
Copy the audioplayer.css file to the css folder
Copy the audioplayer.js file to the js folder
As a general rule of thumb, css files are added to the head of a web page, and javascript files are added to the end of a web page.
Drag the audioplayer.css file from the css folder to the editable region in the head of the media.html file.
Drag the audioplayer.js file from the js folder to the addScript editable region at the bottom of the page.

Paste this javascript to initialize audio player:

<script>
	$( function() { $( 'audio' ).audioPlayer(); } );
</script>

Press F12 to prompt you to save your work, and preview in a web browser
You will notice that the native HTML5 audio player has been replaced. This new jQuery audio player will look the same, and work the same, on any modern web browser.
Save All

Wayne Joness
West Los Angeles College, cs952
Fall