Time to publish my small but also heavily curated collection of useful links for JavaScript.

MDN JavaScript – this is the best thing going for JS language reference. I wish we could backfill a decade of useful programmer comments like in the PHP manual, and you should search it with Google rather than its internal search function (just add MDN to your search term), but it is quite clear and includes browser support data.

jQuery Documentation – if you use jQuery, this is the place to see not only syntax and examples for its commands but whether they are current, present but deprecated, or absent from your version of jQuery.

MDN Web APIs – if your JavaScript is doing anything deep, you’ll find need for these. I would highlight DOM (especially Window) and Storage (as in localStorage and sessionStorage) in particular. Same caveat as before, though: MDN is far easier to search via Google.

Esprima Syntax Validator – a useful syntax checker! It won’t give you twenty spacing errors and then quit; it only worries about things that actually affect the validity of your code. This is the only JS syntax checker that has successfully improved my code, by finding missing or stray braces and similar.

Google Closure Compiler – this will concatenate and minify your JavaScript, which you can enter by directly pasting it in or by link.

CodePen and JSfiddle – these are both easy ways to share small programs and allow people to edit them.

Lynda.com – There are a lot of JS classes on Lynda.com, of variable type and quality, so I’ll just highlight a few. If you’ve programmed before, even if long ago and far away (and mostly in C++, which was my condition), Joe Chellman’s Introducing the JavaScript Language will be helpful. It’s a syntax course that highlights some potential gotchas where JS differs from other common languages. Joe also has project-based “for designers” courses in JavaScript and jQuery. Of course none of these courses is comprehensive, but I like Joe as an instructor because a) he warns you when there’s more complexity than he’s covering or when the value he’s using is design-specific or arbitrary, and b) his project courses have exercises. They are quick but they force you to immediately use what you just learned, which immensely improves the takeaway.

You can consider this the JavaScript follow-up to my posts about learning HTML, CSS, and PHP online. After doing the Lynda classes mentioned and other tutorials there and elsewhere that are less recommendable, I learned “episodically” – my initial use for JS was for small, self-contained programs that did one or two things, and I built up from there. It suited my learning style nicely but didn’t lend itself to a list of helpful tutorial links for others.

Library photo by jenikmichal on Pixabay.

The post Helpful Links for JavaScript appeared first on rweber.net.

Google Analytics has a suite of Enhanced Ecommerce tools that let you see which products are getting viewed and clicked on in pages that aggregate them, such as category pages. It can include position so you can see how much of a boost it is to be first in line. There’s some work involved in setting this up, though, and I thought I’d record it for my own and others’ reference.

The simplest way to do this is to push all of the products as one big group impression, which is how the Enhanced Ecommerce documentation tells you to do it. We wanted to be more subtle, though, and use impressions to learn whether people were interacting with the page; i.e., to send impressions only when the products had actually been in view.

Let’s suppose three carousels of products for which we want to track impressions and clicks. I’ll assume a very simple carousel markup, where the items inside the carousel div are links that have data attributes with all the product information. Throughout this I’ll be simplifying so that the core ideas aren’t muddied by syntax.

I’m going to walk through the JavaScript top down. First, the document.ready call; inside it we keep track of which carousel panels have been visible on the visitor’s screen, and push product impression information for the visible products when a carousel is first scrolled into view or is clicked through on to a previously-unviewed panel. We also push product click information when a product is clicked on.

Each of our three carousels in this example has three panels. If the number of panels per carousel changes depending on the size of the viewer’s screen, you’ll want to put in some window size checks and adjust accordingly.

What are those things being sent to the pushProductClick and pushProductImpressions functions? They are objects or arrays of objects, where the object properties are information about the product, which list it is in, and where in the list it occurs. I’ve used the namespacing syntax for a jQuery plugin here (I’ll also point you to a short and sweet Stack Overflow about the difference between $.myFunction and $.fn.myFunction).

Finally, we have the push functions themselves, which take the product object or array and execute the appropriate dataLayer.push command. The product click push is more complex than the product impression push; one gotcha I ran into is that the productObj object must be enclosed in square brackets, despite being only a single thing. The eventCallback is typically a window.location, but if you set that, a visitor who tries to open a link in a new tab will also get it in the current tab. Making that a simple return statement and not preventing default in the click handler (above) allows the data to be sent to GA while also allowing the visitor to interact with the link in the way they choose.

The Google Tag Manager side of the setup is pretty standard. It matches the setup in the Enhanced Ecommerce documentation except for one detail: the trigger for the product impressions is not the event gtm.dom but the event productImpressions, mirroring the product click setup. You have to dig down a bit to get the data layer turned on, and you can’t test it in preview mode, unfortunately, but the GTM side is simple enough that it’s not too worrisome once you’ve console.debugged your way to confidence that your product objects and arrays are correct.

Photo of beach sand on Baltrum Island, Germany by grafik_design on Pixabay.

The post Working with GA’s Enhanced Ecommerce (using GTM) appeared first on rweber.net.

I recently discovered there’s a major difference between .closest() in jQuery and vanilla JavaScript. It came up because Element.closest(), a fairly recent addition to JavaScript, is not supported in any version of IE or Edge (it was added to Firefox, Chrome, and Safari over the course of the first nine months of 2015). I was using .closest() to detect whether a click while a popup was open was within the popup or not, in order to close the popup when the visitor clicked outside of it. My efforts to fix the functionality on IE/Edge broke it everywhere, and in the process of fixing that I learned more about .closest() than I would have anticipated there was to learn.

In both cases, the idea is that (element A).closest(element B) tells you whether element B is an ancestor of element A (this is also considered true if they are the same element). Therefore (click target).closest(popup) tells you whether the click fell within the popup regardless of whether it also fell inside an element contained in the popup.

The first problem I ran into in switching to jQuery’s .closest() function is that it can only be run on jQuery objects. That is, event.target.closest() will try for the vanilla JavaScript version only; you need jQuery(event.target).closest() to trigger the jQuery version. Depending on what else you’re trying to accomplish you may have to untangle jQuery/non-jQuery conflicts.

The second problem is that these two versions of the same function do not have the same return values. At all. If element B is not an ancestor of element A, Element.closest() will return null; jQuery’s .closest() will return an empty object. My original code had checks like if ( !(click target).closest(popup) ), which fall apart upon switching to jQuery – no matter what, that if condition will evaluate to false, because even empty objects are truthy values in JavaScript.

Instead, I needed if ( $(click target).closest(popup).length === 0 ) to achieve the same logical outcomes. Once I made those changes everything worked again, and this time in IE/Edge as well as the rest.

Official sources: Mozilla Developer Network on Element.closest(), and jQuery API reference on $().closest(). Note on the latter page that while there is deprecation, it is only for the version of closest with two parameters.

At top: “Spot the Difference” image from Wikimedia Commons.

The post jQuery’s .closest() versus Element.closest() appeared first on rweber.net.

We’ve done some simple parallax on a couple of websites recently, using jQuery but no additional JavaScript libraries. It takes some hand-tweaking – and you have to know your items in advance – but is also much lighter weight than a plugin.

The simplest version is elements scrolling independently of the page and each other, for decorative effect – so where they are when isn’t so crucial. Each needs to be fixed position and you’ll likely want some horizontal placement in the form of margins or left/right values.

In the JavaScript we’ll manipulate the CSS top value according to the amount we’ve scrolled the page.

Bind a function to the scroll event, then within that function calculate how far the page has been scrolled and use it to compute a new top value for each parallaxed element. In this case, starting 800px from the top, the element will scroll one quarter as fast as the page itself. The initial value for top in the CSS should also be 800px, or the element will jump when the page is first scrolled (if you are starting with very large – i.e. always offscreen – top values they probably don’t need to match, but there’s also no reason not to match them).

By changing the initial value and the multiplier to how much the page has been scrolled, you can get a variety of rates and entry points. Careful of your opacity – with abstract images, one showing through another can be lovely, but with representative images it may just be weird and distracting.

Multiple Items with Coordination

Since using that version of parallax I was called on to create a more complicated version. In this, we’re scrolling many items separately from the page, but certain subsets of them have to align at points along the way. This made tweaking just starting point and rate of scroll completely impractical – it would have taken forever. It also made screen height an important consideration.

Algebra to the rescue: All of the parallax in this post is linear; that is, the calculation of the CSS top value from the amount the page has been scrolled is the equation of a line. We can make our choice of linear equation more deliberate with two points on the line and the following equation:

In this case, x is the amount of scroll and y is the top value. What are the two points? I used the point where the element should touch the bottom of the screen and the point when all of a batch of elements should be in their proper relative positions. You can get some complicated arithmetic, but fortunately JavaScript knows how to do that. I ended up with a helper function:

Since I had a good number of elements calling this function I expected calculating screen height once and then passing it as a function input was more efficient than calling that jQuery function repeatedly. The function above takes the inputs x₁, y₁, x₂, y₂, x, and returns y.

There’s more algebra to determine what the appropriate ending top value should be, dependent of course on number and desired alignment of items. I wanted three rows of items, equally spaced, with margins of 48px above, between, and below. I also wanted them to align that way when the page had been scrolled 1.25 times the screen height – they were “page two” but I needed the breathing room of that extra quarter-screen for the parallax effect.

Why not 3/4 screen height on that third item? Because that gave it far too long to get to its final position, and as a result it took forever to disappear off the top of the screen – long enough to overlap with “page three,” the items lined up when we’d scrolled 2.5 times the screen height. With 7/8 screen height it still lingers, but gets out of the way in time.

The post Parallax without Plugins appeared first on rweber.net.

Two things I’ve learned recently:

1. Don’t use “icons” as a folder name in a website directory if you’re on Apache. Everything inside will 404. Apparently Apache aliases any directory named icons to its own icons directory by default with no .htaccess override allowed. This falls into the “but why did it work on my computer?” category, since I didn’t change any defaults when I installed MAMP.
2. If you’re dynamically adding elements to a webpage and you want JavaScript (with jQuery) to react to clicks on them, you can’t use $('.desired-class').click(function(e) { … }); – that will only bind clicks to elements that already exist when the JavaScript is loaded. Instead, you need to bind a click handler to the entire page: $(document).on('click', '.desired-class', function(e) { … });

In other news, I added a new repo to Github over the weekend: a door prize program. We designed it for the Boston Small Business Expo as a way to entice people to give us their email addresses. It requires name and email, allows organization and phone number, and has a function to draw three winners and also export all entrants as a CSV file. If you want to use it and have questions around adapting it, let me know!

Lottery number globe from Pixabay.

The post Folders named ‘icons,’ click handlers, and a new repo appeared first on rweber.net.

Ever since I found it probably close to a year ago, I’ve been a big fan of the simple auto-playing slideshow on CSS-Tricks (though perhaps surprisingly I have yet to apply it to a Media Library Assistant-generated WordPress gallery). I’ve tweaked it multiple times to serve different purposes, and thought I’d share two.

The first tweak is more of a wrapper than a modification. It has two features: it loads the slideshow content via AJAX, and it has a small change to the CSS to smooth the beginning of the slideshow.

I wanted to load the slideshow dynamically so I could turn it off entirely on mobile, without a Very Helpful Browser loading the images in case they were used later, slowing down the site. The page itself had the slideshow as a banner header, and it was collapsed at small sizes, so I used its height as the test in the JavaScript. There was a #slideshow div which had a background image set in CSS (via a class JavaScript removed) in case someone’s JavaScript was disabled, and the slideshow images were in a separate file as naked HTML (though the file was .php for no particular reason) to be pulled in with jQuery.load().

As for the CSS, I found that trying to hide all but one image via CSS and have the JavaScript take over from there gave me a herky-jerky first transition. Instead, I hid everything in the CSS and used JavaScript to show the first image just as soon as the images were loaded up.

AJAXified slideshow JavaScript:

This and the JavaScript below need to be wrapped in a $(document).ready(function () { … }); to operate most smoothly.

CSS:

The second tweak makes it a double slideshow: question and answer. In situ it uses WordPress text widgets, the title for the question and the content for its answer, but you can do it with any paired elements. The code below assumes a div with both class and id slideshow-wrapper, holding divs with class slideshow-item, each holding a pair of divs: .question and .answer. There are two different timeframes. The loop moves from pair to pair, and within it the question appears first, then the answer, they stay put for a while for reading, and then both fade away.

The other change to this one is that there’s a lone single animation outside the setInterval loop. Your choices without this separate bit are to have both the question and the answer in view immediately upon loading the page, or to wait with blank space for the entire first interval.

Q&A slideshow JavaScript:

CSS:

Slide projector image by Jean-Jacques Milan via Wikimedia Commons

The post Tweaking the simple auto-playing slideshow appeared first on rweber.net.

Last time we set up the PHP (slash HTML, slash CSS) to dynamically generate Media Library Assistant gallery shortcodes and an album menu. Everything works without any JavaScript. Today we’re going to add JavaScript, with jQuery, to do three things.

1. Hide the album menu under a button, a la a mobile menu. This will prevent the problem of a menu that’s so large the gallery is four pages down.
2. Use AJAX to reload only the portion of the page containing the gallery. This will make for a smoother experience.
3. Push each new URL into the browser history, so that the back button works and individual albums can be bookmarked. It’s always a source of an annoyed “really?” when I try to go back to a page I bookmarked and find that the address leads to only the most general version of the page, not where I actually was.

Edit: Since I have made so many additions to Twenty Fifteen, I thought it would be useful to assemble them into a single child theme. You can see the Fancy Fifteen code on GitHub, or look at all posts here tagged fancyfifteen.

Here’s a pair of screenshots. You can’t tell in this because I didn’t make a ton of categories, but the menu will also drop over the photos. Again, at least for the time being, you can see and interact with this on my testing site.

All three steps are actually handled in one short jQuery-reliant JavaScript file.

Call it gallery-menu.js, put the following into it, and save it in your child theme folder:

Line 2 is sort of pre-Step-1. It’s for graceful degradation – it adds a class so we can style the menu and gallery separately depending on whether JavaScript is enabled or not.
Lines 3-6 control Step 1. They hide the menu to begin with and activate the button to show and hide it.

The rest is Steps 2 and 3. If you click a link within the menu, JS swoops in and stops the browser from following it (line 9). Then we construct the relevant piece of the desired URL from the link, using the data-slug attribute we added into the PHP last time, and furthermore tack on the specific div that holds the images (lines 10-11). Line 12 does the AJAX, Line 13 re-hides the menu as it would be were the page reloaded, and Line 14 pushes the new URL into the browser history.

And this is why hearts fly out of my eyes sometimes when I work with jQuery.

Edit 3 May: To get my lightbox plugin to apply to this gallery I had use JS to add a rel attribute to each link. The AJAX – or maybe simply do_shortcode – seemed to prevent the automatic application of the lightbox to the image links (which wasn’t the case with the Flickity slideshow). What you need will depend on what plugin you use, of course, but for WP Lightbox 2 I had to add $( '#current-album a' ).attr( 'rel', 'lightbox[album]' ); at line 7 and as a post-AJAX function to the .load call (see my notes on .load syntax).

Are we there yet?

Of course not. We have bonus steps to this part of the program as well.

Tack this onto the end of your functions.php file:

Insert this CSS just before the media queries in style.css:

And finally, insert this CSS inside the max-width: 43.75em media query (not the portrait one):

The styling could be way better, so play with it till you lose your mind.

The post Gilding the Gallery 3: Ajaxifying the filterable gallery appeared first on rweber.net.

Working on the filterable gallery I mentioned in the Flickity/MLA carousel post, there were a lot of little things I had to look up or work out by trial and error, some of which were ultimately quite simple but took a while to figure out. I want to lay them out for future reference, my own and potentially that of readers of the (forthcoming) post(s) about the gallery itself.

• If something that’s supposed to be clickable only works on part of its area, such as a div where only the bottom half is clickable, check for overhang. You can’t click through another div even if it’s empty.
• String concatenation: . for PHP, + for JavaScript.
• $.load puts the second thing into the first thing: $( ‘#wrapper’ ).load( ‘source-page.php #contents’ ), not $( ‘#contents’ ).load( ‘source-page.php #contents’ ). The latter will result in two divs with the id ‘contents’. This of course means you have to build your page with a wrapper div.
• $.load seems to require that the function to run after loading completes be an anonymous one. Putting in a named function doesn’t necessarily work (I found sometimes it did and sometimes it didn’t). That is, not $.load( ‘source.php’, setup() ); but instead $.load( ‘source.php’, function() { setup(); });
• If all you want is to add or change a query string (that is, ‘?attr=value’) on the current URL, $.load() needs only the query string itself. If you give it the page slug also, WordPress will show you the correct page, but the slug will be doubled in the URL. The same goes for window.history.pushState();
• Using WordPress’s get_terms to access a taxonomy nets you an array of objects. The PHP syntax to access pieces of an array is completely different than the syntax used to access pieces of an object. Remember that and things will work better.
• You can add whatever information you want to an anchor element by adding a data attribute; syntax is <a href="..." data-slug="...">, where “slug” would be whatever the kind of data is in your application.

John Steuart Curry’s painting Ajax via Wikimedia Commons.

The post Things I’ve (re)learned recently appeared first on rweber.net.

Edit: Since I have made so many additions to Twenty Fifteen, I thought it would be useful to assemble them into a single child theme. You can see the Fancy Fifteen code on GitHub, or look at all posts here tagged fancyfifteen.

The goal here: a front page carousel that could be easily updated, with just half a dozen or so selections from the most recent images added to the site. The pictures would be human-chosen. The carousel needed to be responsive and easy to navigate (for everyone; i.e., accessible), and ideally the whole shebang could coordinate with a filterable photo gallery to be created for the same site.

Enter Media Library Assistant. There are two functions of MLA that are important for this use: the addition of taxonomies to media library items directly, and the expansion of WordPress’s gallery shortcode into mla-gallery, with dynamic selection of media items by taxonomy, user-defined templates (as in direct control of the gallery’s HTML structure), and many other settings.

I figured I could apply a nice jQuery carousel to an MLA gallery of the correct form, and after looking around, Flickity seemed like the best candidate (with the implicit recommendation of CSS-Tricks). It is responsive, accessible, well-adapted to mouse/trackpad, keyboard, and touch, and styleable from the theme’s CSS file. After one significant (but easily remedied) hiccup we were in business!

Here’s how to set it up. There are some places where I made arbitrary decisions (such as downloading flickity.css but using a CDN for the .js file), but it should be easy to figure out how to make different ones.

For specificity, we’ll make a child theme to add this functionality to Twenty Fifteen. For now you can see this on my WordPress test site but there is no guarantee that will continue to be true indefinitely.

style.css:

Many themes set max-width: 100% on images for responsiveness purposes; it keeps them from exploding out of their housings when the browser gets smaller. However, you have to override it here or the images you can’t originally see may collapse to width 0. That was the hiccup I referred to – why is there blank white space when I click through the carousel?!? The last section highlights the gallery if you tab to it so you know you’ve tabbed to it; it’s straight off the Flickity website. I set a height of 200px; you can let it be determined by the images by removing that line of CSS and the line setGallerySize: false in carousel.js, below.

carousel.js:

functions.php:

Just put flickity.css, carousel.js, functions.php, and style.css (for your child theme) all into a folder called twenty-fifteen-flickity, zip it up, and upload it.

In Settings -> Media Library Assistant -> MLA Gallery (the middle tab), scroll to the bottom and create a template called carousel. Fill in the following boxes:
Open: <div id='carousel-gallery' class='carousel-no-js'>
Item: <div class='carousel-item'>
[+link+]
</div>
Close: </div>

In Media -> Assistant, tag all images for the slideshow with “featured” (or something else, and then change “featured” in the shortcode below).
Where you want the carousel, place the shortcode
[mla_gallery attachment_tag=featured mla_style="none" mla_markup="carousel" size=medium link=full]

Some notes:
– Most everything is adjustable from the CSS file, the MLA shortcode options, or the Flickity options.
– You’ll have to add appropriate styling for responsiveness, but no differently from usual.
– For graceful degradation the images start with the class carousel-no-js and carousel.js replaces that with carousel-js-on; I haven’t styled .carousel-no-js at all and wouldn’t count this as finished without doing so, but how to style it is a matter of taste.
– I threw a lightbox plugin onto the test site as well (Responsive Lightbox by dfactory) and it works without a squawk.

The post Gilding the Gallery: MLA + Flickity appeared first on rweber.net.