{"id":1696,"date":"2017-02-28T23:11:21","date_gmt":"2017-03-01T04:11:21","guid":{"rendered":"https:\/\/rpchurchill.com\/wordpress\/?p=1696"},"modified":"2017-03-02T18:55:14","modified_gmt":"2017-03-02T23:55:14","slug":"different-options-for-empty-web-links","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2017\/02\/28\/different-options-for-empty-web-links\/","title":{"rendered":"Different Options for Empty Web Links"},"content":{"rendered":"<p>While working on yesterday&#8217;s post I noticed, apparently after far too long, that the Intro link on my site&#8217;s main page failed to run the animation when clicked.  More accurately, it would run a frame or two of it and then stop.  I dug around in the debugger, looked at various browser log (which led me to fixes for a couple of other minor items), and generally drove myself batty until I traced the problem back to the source.<\/p>\n<p>The original form of the link worked like this, in keeping with the format of the other links on the top navigation bar:<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      <nav class=\"navbar\">\r\n          <a href=\"p_roles\/roles.html\">Roles<\/a>\r\n          |\r\n          <a href=\"p_portfolio\/portfolio.html\">Portfolio<\/a>\r\n          |\r\n          <a href=\"p_resume\/resume.html\">Resume<\/a>\r\n          |\r\n          <a href=\"https:\/\/www.rpchurchill.com\/wordpress\">Blog<\/a>\r\n          |\r\n          <a href=\"p_contact\/contact.html\">Contact<\/a>\r\n          |\r\n          <a href=\"\" onclick=\"introClick()\">Intro<\/a>\r\n        <div class=\"clearer\"><\/div>\r\n      <\/nav>\r\n<\/pre>\n<p>The issue involves firing the <code>introClick()<\/code> function, which makes the <code>intro_div<\/code> element visible and kicks off the animation.  When the animation finishes it sets the <code>display<\/code> mode from &#8220;block&#8221; back to &#8220;none,&#8221; rendering the div invisible.  The problem was that the animation would run a frame or three and then the whole thing would disappear.  I couldn&#8217;t step through it or find anything in the log.  This was all the more frustrating because <em>it doesn&#8217;t happen when running the page from local disk, it only happens when running from a server<\/em>.  In any case I kept digging until I realized that the animation was being cut off because the entire page was getting reloaded.  I then looked around to see what might be causing that issue.  That&#8217;s when I spotted the likely culprit.<\/p>\n<p>I can&#8217;t remember the exact chain of ideas that came to mind but I know from developing the main static pages of my site that clicking on empty links causes the page to reload.  For simple pages this isn&#8217;t a big deal and it&#8217;s not an issue because the links were all eventually populated.  If you look at the bottom item in the above HTML, though, what do you see?  That&#8217;s right, an empty link.  Clicking on the &#8220;Intro&#8221; item at the right end of the menu on the main page kicked off a page reload request.  It might be delayed long enough to all the animation to run a handful of frames but ultimately the reload was going to squash everything.<\/p>\n<p>I then looked for alternative solutions.  Making the text a <code>span<\/code> resulted in something that couldn&#8217;t be clicked on and needed extra CSS to make the formatting consistent.  I used a pure anchor element with custom CSS and without an href property, which worked but the behavior of the mouse cursor was inconsistent (a text selector vs. the standard selection pointer).  I thought about using a button but making the format consistent would have been painful.  I did some <a href=\"http:\/\/stackoverflow.com\/questions\/5637969\/is-an-empty-href-valid\">light reading<\/a> about the pros and cons of different approaches and found none of them to be ideal, but the least bad option is shown below.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      <nav class=\"navbar\">\r\n          <a href=\"p_roles\/roles.html\">Roles<\/a>\r\n          |\r\n          <a href=\"p_portfolio\/portfolio.html\">Portfolio<\/a>\r\n          |\r\n          <a href=\"p_resume\/resume.html\">Resume<\/a>\r\n          |\r\n          <a href=\"https:\/\/www.rpchurchill.com\/wordpress\">Blog<\/a>\r\n          |\r\n          <a href=\"p_contact\/contact.html\">Contact<\/a>\r\n          |\r\n          <a href=\"javascript:void(0);\" onclick=\"introClick()\">Intro<\/a>\r\n        <div class=\"clearer\"><\/div>\r\n      <\/nav>\r\n<\/pre>\n<p>This solution leverages the simplicity and consistency of the  anchor and link approach while allowing keyboard activation support and not throwing too big a monkey wrench into accessibility support.  The approach work in the way akin to how astronomers describe comets, or at least their tails: &#8220;A comet is the closest thing you can have to nothing and still be something.&#8221;  Using the <code>javascript:void(0);<\/code> statement for the link gives you all the benefits of a link while suppressing all of the undesirable features of an empty link or a linkless anchor.  It is a something that is very close to being nothing, and that works for me.<\/p>\n<p>I&#8217;ve seen this in use over time one sites where links should work but don&#8217;t.  I&#8217;m guessing that in many cases the site&#8217;s maintainers were actively working on something in the background.  It&#8217;s also possible for the value to be generated as a default placeholder if some kind of automated content is not being generated correctly.  I will have a much better understanding of this going forward.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working on yesterday&#8217;s post I noticed, apparently after far too long, that the Intro link on my site&#8217;s main page failed to run the animation when clicked. More accurately, it would run a frame or two of it and &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2017\/02\/28\/different-options-for-empty-web-links\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[151,150,49,160],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1696"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1696"}],"version-history":[{"count":1,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1696\/revisions"}],"predecessor-version":[{"id":1697,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1696\/revisions\/1697"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}