Presentation is loading. Please wait.

Presentation is loading. Please wait.

Advanced Training: WebCMS How-To Andrew Yuen. 2 Fact Sheet Overview General Links - Always remember to follow EPA Styles and consult with the EPA web.

Similar presentations


Presentation on theme: "Advanced Training: WebCMS How-To Andrew Yuen. 2 Fact Sheet Overview General Links - Always remember to follow EPA Styles and consult with the EPA web."— Presentation transcript:

1 Advanced Training: WebCMS How-To Andrew Yuen

2 2 Fact Sheet Overview General Links - Always remember to follow EPA Styles and consult with the EPA web standards when in doubt. - Avoid adding custom styles to the JavaScript field. - Remember ID’s are allowed but most CLASSES will be stripped. JavaScript Resources - We will be going over the majority of the available JavaScript files and libraries during this presentation. - A review process is in place for requesting new JavaScript files/libraries that are not available on the Drupal server. Tips - A JavaScript tip not mentioned: When using jQuery, always remember to replace $ with jQuery

3 3 Code https://wcms.epa.gov/sites/production/files/201 4-05/at_howto_code.txt

4 4 Training Agenda Accordions - How to create accordion panels that are controlled by external links Colorbox - How to add a image gallery, inline content and YouTube colorboxes to a basic page Dropdown Select Links - How to add select dropdown menu to a page Table, sortable - How to customize sortable tables Tabs - How to add a show all tab for printing purposes Image Maps - Working with responsive image maps inside accordions and tabs Reference: http://www2.epa.gov/webguide/web-style-guide

5 5 Accordions Accordions are a useful tool to group like content and to point users to deeper content. They should be used sparingly, and never simply to add visual appeal to a page or to fit large blocks of content within constrained spaces. Accordions are opened by click or by tab action, never on hover. If JavaScript is unavailable, all panels will be open by default. Accordions should not be nested within other accordions. The title or name of an accordion panel cannot be a link to a separate page or an external site. Working Example: https://www2.epa.gov/webguide/web-style- guide#accordions

6 6 In Drupal WebCMS, disable rich text in the body of the code and add the following example HTML. Your Accordion Title Your accordion's content How to: Add Accordions to a Page

7 7 First, we add a link to the page with a unique ID: Open Pane 1 Next we add the following JavaScript to open the accordion panel when a users clicks on the above link jQuery(document).ready(function() { jQuery("#openaccordion1").click(function(event){ // Target link with a specific ID var hash1 = jQuery(this).attr('href'); var thash1 = hash1.substring(hash1.lastIndexOf('#'), hash1.length); //Returns the position of the last occurrence of a specified value in a string. jQuery('.accordion').find('a[href*='+ thash1 + ']').closest('a').trigger('click'); // Trigger the appropriate accordion panel to open based on the value after the # }); Advanced How to: Open an Accordion Panel using a Link on the Page

8 8 Colorbox A colorbox is a kind of modal window: one that demands the user’s input before normal browsing can be resumed. Colorbox should be used sparingly especially when: –A large amount of content is being presented –You are designing the page for a mobile/tablet user –Same result can be accomplished another way Use a colorbox when: –Content presented is larger than the available area –Loading an additional page doesn’t make sense –Reducing the mental burden of additional content improves usability Working Example: https://www2.epa.gov/webguide/javascript-colorbox

9 9 Colorbox and Accessibility When you create a overlaid dialog, the input focus isn't handled correctly, and screen readers aren't able to tell that something is changed. If you want screen reader users to be aware that a dialog has popped up, then you’ll need to use Accessible Rich Internet Applications (ARIA) roles. –ARIA "roles" add additional meaning to HTML elements allowing browsers to communicate better with screen readers. –When an element with a role of dialog is made visible, the browser tells the screen reader that a dialog is present. –Dialogs should also have labels. You can specify a label using either the aria-label or the aria- labelledby attribute. OR New Message

10 10 First, we create a link, and give it a class of colorbox-inline. Point the href to the element you want to display when this link is clicked. Demo Next, create the content you want "hidden" and displayed only when the link is clicked. New Message Colorbox: Inline Content

11 11 Finally, we add the following JavaScript to the page: jQuery(document).ready(function() { // Hide the inline content jQuery("#hidden-content").css({'display':'none'}); // Open inlined content in "box" jQuery(".colorbox-inline").colorbox({inline:true,width:"50%"}); }); Colorbox: Inline Content

12 12 Warning: linking to the original image inserts a direct link to the original file. It is not a managed file, handled by the database, and links to the original file may break over time. As you upload each image that will be in your gallery, you must check the box to "link to the original image.“ Once you build a column of images, add the following, class="colorbox- gallery" role="dialog" to each link, like so: [[{"type":"media","view_mode":"media_small","fid":"209","attrib utes":{"alt":"","class":"media- image","height":"160","width":"160"}}]] Colorbox: Image Gallery

13 13 Finally, we add the following JavaScript to the page: jQuery(document).ready(function() { // Colorbox gallery jQuery('.colorbox-gallery').colorbox({rel:'colorbox-gallery'}); }); Colorbox: Image Gallery

14 14 You will want to link to the "embed" version of the video as seen here: After clicking "Share" and then "Embed," grab the URL from the code snippet. You will also want to check the "Use HTTPS" and "Enable privacy-enhanced mode" boxes and uncheck the "Show suggested videos when the video finishes" box. Colorbox: YouTube Video

15 15 We add the link information that you obtained from YouTube to the page: EPA's SmartWay: Anyway you ship it video Finally, add the following JavaScript to the page: jQuery(document).ready(function() { // Colorbox YouTube content jQuery(".colorbox-youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); }); Colorbox: YouTube Video

16 16 Dropdown Select Links Here's how to use a dropdown to redirect a page to another page or website. First, we create the dropdown box: Select a Link After you select a link, press go to jump to that link. Science and Technology Learn the Issues Laws and Regulations Working Example: https://www2.epa.gov/webguide/javascript-dropdown- navigation

17 17 Dropdown Select Links Then, we add the following JavaScript: jQuery(document).ready(function() { jQuery("#open-link").click(function () { var go_to_url = jQuery("#jump-link").find(":selected").val(); document.location.href = go_to_url; //redirect });

18 18 Advanced How to: Creating Multiple Dropdown Select Links Items First, we create multiple dropdown boxes each with unique ID’s both on the select and input tags: Select a Link After you select a link, press go to jump to that link. Science and Technology Select a Link After you select a link, press go to jump to that link. Learn the Issues

19 19 Advanced How to: Creating Multiple Dropdown Select Links Items Then, we add the following JavaScript: jQuery(document).ready(function() { jQuery("#open-link0").click(function () { var go_to_url = jQuery("#jump-link0").find(":selected").val(); document.location.href = go_to_url; //redirect }); jQuery("#open-link1").click(function () { var go_to_url = jQuery("#jump-link1").find(":selected").val(); document.location.href = go_to_url; //redirect });

20 20 Table Sorting After creating a table, table sorting can simply be added by adding the tablesorter class to the table tag: We will be going over some advanced configurations including how to: –Disable header sorting for certain columns –Automatically sort certain columns on page load Working Example: http://www2.epa.gov/webguide/web-style- guide#tablesorter Note: Datatables provides similar table sorting functionality.

21 21 Table Sorting Let’s start by using the following HTML which creates a simple sortable table: First Name Last Name Age Total Code continues on next slide >>

22 22 Table Sorting Peter Parker 28 $9.99 John Hood 33 $19.99 Clark Kent 18 $15.89

23 23 Advanced How to: Table Sorting Disable header sorting for certain columns We will being by removing the tablesorter class and replacing it with an id: Next, we add our JavaScript: jQuery(document).ready(function() { jQuery("#table_sort").tablesorter( { // Pass the headers argument and assign a object headers: { // Assign the first column (we start counting zero) 0: { Code continues on next slide >>

24 24 Advanced How to: Table Sorting Disable header sorting for certain columns // Disable it by setting the property sorter to false sorter: false }, // Assign the second column (we start counting zero) 1: { // Disable it by setting the property sorter to false sorter: false } ); } );

25 25 Advanced How to: Table Sorting Automatically sort certain columns on page load Modify our JavaScript: jQuery(document).ready(function() { jQuery("#table_sort").tablesorter( { // sort on the first column and second column, order asc // 0 for ascending and 1 for descending sortList: [[0,0],[1,0]] } ); } );

26 26 Tabs Sometimes you have related content that do not warrant their own pages, so you'd like to put them all on the same page. Similar to accordions, JavaScript tabs will show/hide content on your page via mouse clicks or keypresses. Working Examples: http://www2.epa.gov/webguide/javascript-page-tabs (just jQuery) http://www2.epa.gov/webguide/javascript-tabs (jQuery UI) Just jQuery Preferred method for tabs that require no configuration. Lightweight, does not require multiple javascript and css files. Allows linking to a particular tab by using #tab ID jQuery UI Requires additional javascript and css files Known issue where active tab does not remain highlighted Supports several advanced configuration options

27 27 Tabs Just jQuery Method Let’s start by using the following HTML which creates a simple sortable table: Tab One Tab Two Tab Three Tab Four This is a really simple tabbed interface Tab 1 Content Code continues on next slide >>

28 28 Tabs Just jQuery Method Tab 2 Tab 2 content Tab 3 Tab 3 content Tab 4 Tab 4 content. Link to tab #1.

29 29 Tabs Just jQuery Method Next, we add our JavaScript: jQuery(document).ready(function() { jQuery('#tabs > div').hide(); // hide all child divs jQuery('#tabs div:first').show(); // show first child dive jQuery('#tabsnav li:first').addClass('active'); jQuery('.menu-internal').click(function(){ jQuery('#tabsnav li').removeClass('active'); var currentTab = jQuery(this).attr('href'); jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active'); jQuery('#tabs > div').hide(); Code continues on next slide >>

30 30 Tabs Just jQuery Method jQuery(currentTab).show(); return false; }); // Create a bookmarkable tab link hash = window.location.hash; elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash if (elements.length === 0) { // if there aren't any, then jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab } else { elements.click(); } // else, open the tab in the hash });

31 31 Advanced How to: Tabs jQuery UI Method with Show All Let’s start by using the following HTML which creates a simple sortable table: Some Tab Show All Content 1 Content 2 Content 3 Content 4

32 32 Advanced How to: Tabs jQuery UI Method with Show All Next, we add our JavaScript. Let’s start by adding require js and css files: Code continues on next slide >>

33 33 Advanced How to: Tabs jQuery UI Method with Show All jQuery(document).ready(function() { var user_tabs = jQuery("#tabs").tabs({ show: function(event, ui) { if (ui.index == 4) { jQuery("div[id^='tabs-']").removeClass('ui-tabs-hide'); jQuery("div[id='tabs-5']").addClass('ui-tabs-hide'); } }); });

34 34 Responsive Image Maps Usually, resizing an image isn't an issue when using the One EPA responsive template; the image grows or shrinks and is still legible. However, when you're using image maps, the coordinates of the map are very important. Shrinking the image to fit the display will result in image map links no longer working properly. The solution to this issue is to use responsive image JavaScript. To go over how to implement responsive image JavaScript, we will start by creating a page that contains a tab with a responsive image. We will then create a page that contains an accordion with a responsive image. More Information: http://www2.epa.gov/webguide/javascript-responsive- image-maps

35 35 First, we will add the following HTML to the page: First Tab Second Tab Third Tab Content tab 1 goes here. Content tab 2 goes here. Advanced How to: Tabs and Image Maps Code continues on next slide >>

36 36 [[{"fid":"54833","view_mode":"full","type":"media","attributes":{"height":1 00,"width":150,"alt":"Responsive Test","class":"media-element file- full","usemap":"#mymap"}}]] Advanced How to: Tabs and Image Maps

37 37 We will make sure that the Responsive Image Maps jQuery file is in place: Next we initiate the Responsive Image Map Javascript when the user clicks the tab containing the Image Map. We are using the jQuery UI method. jQuery('#tabs').tabs(); jQuery('img[usemap]').rwdImageMaps(); jQuery( "#tabnav-3" ).click(function() { jQuery('img[usemap]').rwdImageMaps(); }); Advanced How to: Tabs and Image Maps

38 38 First, we will add the following HTML to the page: Your Accordion Title [[{"fid":"54833","view_mode":"full","type":"media","attributes":{"height":1 00,"width":150,"alt":"Responsive Test","class":"media-element file- full","usemap":"#mymap"}}]] Advanced How to: Accordions and Image Maps Code continues on next slide >>

39 39 Advanced How to: Accordions and Image Maps

40 40 We will make sure that the Responsive Image Maps jQuery file is in place: Next we initiate the Responsive Image Map Javascript when the user clicks the accordion containing the Image Map jQuery(document).ready(function() { jQuery( "#pane-1" ).click(function() { jQuery('img[usemap]').rwdImageMaps(); // Initiate Responsive Image Map after user clicks on the pane with ID defined above }); jQuery('img[usemap]').rwdImageMaps(); }); Advanced How to: Accordions and Image Maps


Download ppt "Advanced Training: WebCMS How-To Andrew Yuen. 2 Fact Sheet Overview General Links - Always remember to follow EPA Styles and consult with the EPA web."

Similar presentations


Ads by Google