HTML and CSS Reference
In-Depth Information
<div id=ad>
<div id=close>X</div>
<div id=cta class=button>Click Here</div>
var ad = document.querySelector('#ad');
var cta = document.querySelector('#cta');
var close = document.querySelector('#close');
cta.addEventListener('click', expandAd, false);
close.addEventListener('click', collapseAd, false);
function expandAd () { = '500px'; = '360px'; = 1;
function collapseAd () { = '300px'; = '160px'; = 0;
If you've followed along, keep a close eye on the boldface sections of the Listing 5-9 code. In its CSS, transition:
all 1s ease-in-out; has been added to all the elements to be moved—in this case, our ad, our CTA, and our
new Close icon. In the HTML markup, a new div element is added inside our section container by writing <div
id=close>X</div> . This is what will close the expanded ad experience. Finally, take a look at the JavaScript toward
the end of the listing's code. The minimal JavaScript code first declares variables to reference the objects in our DOM.
In this case, it's our ad, the CTA button, and the new Close icon. Next, event listeners are added for the user's mouse
click by writing cta.addEventListener('click', expandAd, false); and close.addEventListener('click',
collapseAd, false); . Doing this allows handling the user's action appropriately and calls expandAd and collapseAd ,
respectively. Inside the expand method the ad's width is expanded to 500 pixels, the button is moved on its left
property, and the Close icon's opacity is toggled by setting it to a value of 1. (The opacity property is another almost
finalized feature in the CSS3 specification; it gives the ability to adjust the fill of an element or image between 0 and 1.)
Conversely, the ad is reset to its original setting by calling the collapseAd function. Figure 5-9 shows what you'll get in
the browser if you click on the CTA button.
Search WWH ::

Custom Search