Modal Windows (Also Known As a Lightboxes), a Photo Viewer, and a Responsive Slider

Content panels allow you to showcase extra information within a limited space. In this chapter, you will see several examples of content panels that also give you practical insight into creating your own scripts using jQuery. In this chapter, you will see how to create many types of content panels: accordions, tabbed panels, modal windows (also known as a lightboxes), a photo viewer, and a responsive slider. Each example of a content panel also demonstrates how to apply the code you have learned throughout the book so far in a practical setting. Throughout the chapter, reference will be made to more complex jQuery plugins that extend the functionality of the examples shown here. But the code sampies in this chapter also show how it is possible to achieve techniques you will have seen on popular websites in relatively few lines of code (without needing to rely on plugins written by other people). 8 CONTENT PANELS ACCORDION TABBED PANEL An accordion feature s titles which, when clicked, Tabs automatically show one panel, but when you expand to show a larger panel of content. click on another tab, the panel is changed. MODAL W INDOW PHOTO VIEWER When you click on a link for a modal window (or Photo viewers display different images within the "lightbox"), a hidden panel will be displayed. same space when the user clicks on the thumbnails. THE FLOWER SE RIES !At,....~,... ftH"CWtl> ........... ~.-...,,. ........ ................-~ ~toe~ ---___,,ilo;o'ol ::-.:.~I')'.-- ___ _,,.., ~."""'" .... ,,_,.,,.... -._......,,~-· ~ ...... - • )s.1$/ lhc.~ RES PONSIVE SLIDER CREATING A JQUERY PLUGIN The slider allows you to show panels of content that The final example revisits the accordion (the first slide into view as the user navigates between them. example) and turns it into a jQuery plugin. THEY SAY NO TWO MARSHMALLOWS ARE THE SAME. .. A.I k~t our (he()" at iMciroicor ~do. Thain &«lust they crafl Qeb dd.ldoo, Wtdt inJMduall)' Ly hand 11slo1t a.ll·nat11ral ;nsrrecliwts. CONTENT PANELS 8 SEPARATION OF CONCERNS As you saw in the introduction to this book, it is considered good practice to separate your content (in HTML markup), presentation (in CSS rules), and behaviors (in JavaScript). In general, your code should reflect that: You ca n also place event listeners and calls to • HTML is responsible for structuring content functions in JavaScript files rather than adding them • CSS is responsible fo r presentation to the end of an HTML document. • JavaScript is responsible for behavior If you need to change the styles associated with an Enforcing this separation produces code that is element, rather than having styles written in the easier to maintain and reuse. While this may already JavaScript, you can update the value of the cl ass be a familiar concept to you, it's important to attributes for those elements. In turn, they can remember as it is very easy to mix these concerns in trigger new rules from the CSS file that change the with your JavaScript. As a rule, editing your HTML appearance of those elements. templates or stylesheets should not necessitate editing your scripts and vice versa. W hen your scripts access the DOM, you can uncouple themJrom the HTML by using cl ass selectors rather than tag selectors. 9 CONTENT PANELS ACCESSIBILITY & NO JAVASCRIPT When writing any script, you should think about those who might be using a web page in different situations than you. ACCESSIBILITY NO JAVASCRIPT Whenever a user can interact with an element: This chapter's accordion menu, tabbed panels, • If it is a link, use <a> and responsive slider all hide some of their content • If it acts like a button, use a button by default. This content would be inaccessible to visitors that do not have JavaScript enabled if we Both can gain focus, so users can move between didn't provide alternative styling. One way to solve them focusable elements using the Tab key (or other this is by adding a c 1ass attribute whose value is non-mouse solution). And although any element can no-js to the opening <html> tag. This class is then become focusable by setting its tabi ndex attribute, removed by JavaScript (using the repl ace() method only <a> elements and some input elements fire a of the String object) if JavaScript is enabled. click event when users press the Enter key on their The no-j s class can then be used to provide styles keyboard (the ARIA ro 1e= 11 button 11 attribute will targeted to visitors who do not have JavaScript not simulate this event). enabled. W:iilftll cll/no-js.html <!DOCTYPE html><html class= 11 no-js"> ••• <body> <div class= 11 js-warning 11 >You must enable JavaScript to buy from us</ div>  <scri pt src="js/ no-js.js" ></script> </body> </ html > JAVASCRIPT cll/js/no-js.js var el Oocument = document.documentElement; elDocument . className = el Document .className.replace(/ (Al\s)no- js(\s l $)/ , '$1'); CONTENT PANELS e ACCORDION When you click on the title of an accordion, its corresponding panel expands to reveal the content. An accordion is usually created within an unordered list (in a <u l >element). Each <l i > element is a new item in the accordion. The items contain: • A visible label (in this example, it is a <button>) • A hidden panel holding the content (a <div>) Clicking a label prompts the associated panel to be shown (or to be hidden if it is in view). To just hide or show a panel, Other tabs scripts include liteAccordion and zAccordion. you could change the value They are also included in jQuery UI and Bootstrap. of the cl ass attribute on the associated panel (triggering a new CSS rule to show or hide it). But, in this case, jQuery will be used to animate the panel into view or hide it. HTMLS introduces <details> and <sumary> elements to create a similar effect. but (at the time of writing) browser support was not widespread. Therefore, a script like this would still be used for browsers that do not support those features. 8 CONTENT PANELS ACCORDION WITH ALL PANELS COLLAPSED When the page loads, CSS rules are used to hide the panels. LABEL 1 COLLAPSED LABEL 2 COLLAPSED Clicking a label prompts the LABEL 3 COLLAPSED hidden panel that follows it to ACCORDION WITH SECOND PANEL EXPANDED animate and reveal its full height. This is done using jQuery. LABEL 1 . COLLAPSED Clicking on the label again would hide the panel. CONTENT 2 EXPANDED LABEL 3 COLLAPSED ANIMATING CONTENT WITH SHOW, HIDE, AND TOGGLE jQuery's .show(}, .hide{}, and The three methods are all • toggle () methods animate the shorthand for the animate () showing and hiding of elements. method. For example, the BOX HEOGHT I show() method is shorthand for: jQuery ca lculates the size of the box, including its content, and $(' . accor di on-panel ') any margins and padding. This . animate( { • MARGIN • BORDER • PADDING height: 'show' , helps if you do not kn ow what paddingTop: ' show ' , content appears in a box. • togg 1e () saves you writing paddi ngBott om: 'show', conditional code to tell whether ma r ginTop : 'show', (To use CSS animation, you the box is already being shown marginBottom: ' show ' would need to calculate the box's or not. (If a box is shown, it hides } ) ; height, margin and padding.) it, and if hidden, ·it will show it.) CONTENT PANELS 8 CREATING AN ACCORDION Below you can see a diagram, rather like a flowchart. Now let's take a look at how the diagram is These diagrams have two purposes. They help you: translated into code. The steps below correspond to the numbers next to the JavaScript code on the i) Follow the code samples; the numbers on the right-hand page and the diagram on the left. diagram correspond with the steps on the right, and the script on the right-hand page. Together, the 1. A jQuery collection is created to hold elements diagrams, steps, and comments in the code should whose cl ass attribute has a value of accordion. help you understand how each example works. In the HTML you can see that this corresponds to the unordered list element (there could be several ii) Learn how to plan a script before coding it. lists on the page, each acting as an accordion). An event listener waits for the user to click on one This is not a "formal" diagram style, but it gives you of the buttons whose cl ass attribute has a va lue of a visual idea of what is going on with the script. accordion-control . This triggers an anonymous The diagrams show how a collection of small, function. individual instructions achieve a larger goal, and if you follow the arrows you ca n see how the data 2. The preventDefault () method prevents flows around the parts of the script. browsers treating the the button like a submit button. It can be a good idea to use the 0 Event: c1 i ck on tab preventDefaul t () method early in a function so J that anyone looking at your code knows that the ANONYMOUS FUNCTION: form element or link does not do what they might Shows/hides the corresponding panel expect it to. e Prevent default action of button I 3. Another jQuery selection is made using the e Get button user clicked on this keyword, which refers to the element the user I clicked upon. Three jQuery methods are applied to 0 Get accordion panel after that button that jQuery selection holding the element the user +I clicked on.

Modal Windows (Also Known As a Lightboxes), a Photo Viewer, and a Responsive Slider

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support