javascript - Changing focus to an element on click -
problem:
i have top arrow .fa-caret-up @ bottom of page, looking change focus after arrow clicked either window or logo .logo @ top left corner of page.
where i'm at
i see console.log("does work?") when tab it's not in normal tab order , takes me "leaving html content" in mac screen reader.
scripts.js
$(function() { // plays videos on click, beautiful $("video").click(function (e) { if(e.offsety < ($(this).height() - 36)) // check see if controls clicked { if(this.paused) this.play(); else this.pause(); } }); // smooth scroll butter $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrolltop: target.offset().top }, 1000); return false; } } }); // images // needs fixing on right track // var fadeimg = $("img").fadeto(0, 0); // $(window).scroll(function() { // fadeimg.each(function(i) { // = $(this).offset().top + $(this).height(); // b = $(window).scrolltop() + $(window).height(); // if (a < b) $(this).fadeto(500,1); // }); // }); // accessibility consideration, change focus nav header in story on click $('.chp1').click(function (evt){ $("#1").focus(); evt.preventdefault(); }); $('.chp2').click(function (evt){ $("#2").focus(); evt.preventdefault(); }); $('.chp3').click(function (evt){ $("#3").focus(); evt.preventdefault(); }); $('.chp4').click(function (evt){ $("#4").focus(); evt.preventdefault(); }); $('.chp5').click(function (evt){ $("#5").focus(); evt.preventdefault(); }); $('.fa-caret-up').click(function (){ $('.logo').focus(); console.log("does work?"); }); // if mouse hovers on "reading section", change 2 elements yellow $('.reading').mouseover(function(){ $('.fa-clock-o').addclass('yellow'); $('.min').addclass('yellow'); }); // if mouseout, change default colour $('.reading').mouseout(function(){ $('.fa-clock-o').removeclass('yellow'); $('.min').removeclass('yellow'); }); // if mouse hovers on "listen section", change 2 elements yellow $('.listen').mouseover(function(){ $('.fa-headphones').addclass('yellow'); $('.lis').addclass('yellow'); }); // if mouseout, change default colour $('.listen').mouseout(function(){ $('.fa-headphones').removeclass('yellow'); $('.lis').removeclass('yellow'); }); }); index.html
<nav> <div class="navgroup"> <a href="http://brandonsun.com" target="_blank"><img src="assets/img/branding/sq.png" alt="brandon sun logo. click image go main site." class="logo"></a> <p class="featuretitle" tabindex="0" role="heading">asbestos</p> <ul> <a href="#1" tabindex="0" class="chp1"><span class="acc">chapter 1: name of chapter.</span><li>1</li></a> <a href="#2" tabindex="0" class="chp2"><span class="acc">chapter 2: name of chapter.</span><li>2</li></a> <a href="#3" tabindex="0" class="chp3"><span class="acc">chapter 3: name of chapter.</span><li>3</li></a> <a href="#4" tabindex="0" class="chp4"><span class="acc">chapter 4: name of chapter.</span><li>4</li></a> <a href="#5" tabindex="0" class="chp5"><span class="acc">chapter 5: name of chapter.</span><li>5</li></a> </ul> </div><!-- /.navgroup --> </nav> <footer> <div class="thanks"> <p class="credits" tabindex="0"> photographer: <span class="bold" alt="bruce bumstead">bruce bumstead</span><br> reporter: <span class="bold" alt="matt goerzen">matt goerzen</span><br> developer: <span class="bold" alt="and andrew nguyen">andrew nguyen</span> </p> </div><!-- /.thanks --> <a href="#" id="#" tabindex="0"><span class="acc">go top of article</span><i class="fa fa-caret-up fa-2x" ></i></a> </footer>
brandon-boone correct in diagnosis of problem, however, change solution focus on anchor around image naturally focusable and, given can interacted-with, want focus on anyway.
change code to:
$('.fa-caret-up').click(function (){ $('.logo').parent().focus(); console.log("does work?"); });