Develop Reference

Idle timeout warning modal working on screen reader

I need help with a modal that fires when user is idle. It works great until I test on Firefox with NVDA running. There are issues with focus when using the arrow keys and when I swipe on a mobile. When the modal appears and the user uses arrow or swipes the focus will bounce from the yes button to the header after a few seconds if I wait to click it. I have loaded the working example to: https://jsfiddle.net/ncanqaam/
I changed the idle time period to one minute and removed a portion which calls the server to extend the user's session.
var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;
var lastActivity = new Date();
function getIdleTime() {
return new Date().getTime() - lastActivity.getTime();
}
//Add Movement Detection
function addMovementListener() {
$(document).on('mousemove', onMovementHandler);
$(document).on('keypress', onMovementHandler);
$(document).on('touchstart touchend', onMovementHandler);
}
//Remove Movement Detection
function removeMovementListener() {
$(document).off('mousemove', onMovementHandler);
$(document).off('keypress', onMovementHandler);
$(document).off('touchstart touchend', onMovementHandler);
}
//Create Movement Handler
function onMovementHandler(ev) {
lastActivity = new Date();
console.log("Something moved, idle time = " + lastActivity.getTime());
}
function hide() {
$('#overlayTY').removeClass('opened'); // remove the overlay in order to make the main screen available again
$('#overlayTY, #modal-session-timeout').css('display', 'none'); // hide the modal window
$('#modal-session-timeout').attr('aria-hidden', 'true'); // mark the modal window as hidden
$('#modal-session-timeout').removeAttr('aria-hidden'); // mark the main page as visible
}
if (state == "L") {
$(document).ready(function() {
//Call Event Listerner to for movement detection
addMovementListener();
setInterval(checkIdleTime, 5000);
});
function endSession() {
console.log('Goodbye!');
}
var modalActive = false;
function checkIdleTime() {
var idleTime = getIdleTime();
console.log("The total idle time is " + idleTime / oneMinute + " minutes.");
if (idleTime > sevenMinutes) {
var prevFocus = $(document.activeElement);
console.log('previously: ' + prevFocus);
var modal = new window.AccessibleModal({
mainPage: $('#oc-container'),
overlay: $('#overlayTY').css('display', 'block'),
modal: $('#modal-session-timeout')
});
if (modalActive === false) {
console.log(modalActive);
$('#modal-session-timeout').insertBefore('#oc-container');
$('#overlayTY').insertBefore('#modal-session-timeout');
modal.show();
$('#modal-overlay').removeClass('opened');
modalActive = true;
console.log(modalActive);
console.log('the modal is active');
$('.js-timeout-refresh').on('click touchstart touchend', function(){
hide();
modalActive = false;
prevFocus.focus();
addMovementListener();
lastActivity = new Date();
});
$('.js-timeout-session-end').on('click touchstart touchend', function(){
hide();
$('#overlayTY').css('display', 'none');
endSession();
});
}
}
if ($('#overlayTY').css('display') === 'block'){
removeMovementListener();
}
if (idleTime > timeoutPeriod) {
endSession();
}
}
}

Possibles solutions
Disable pointer-events on body when overlay is visible. this will restrict keyboard/swipe events on body elements
Use JS/jQuery to trigger focus on the yes button

The issue is with Voiceover Safari when a user swipes on an anchor or button the focus is set on these elements; however, if the element is an H2 it will not receive focus because natively it is not supposed to receive any. To compensate I attempted to set gesture events on the H2 but, Voiceover Safari needs time to read the element text or label out load, so it prevents any event from firing and this creates a problem when trying to set focus on a modal which loads from a timeout function rather than a clickable element. Hopefully Apple will address this in the future.

How to give a div a higher z-index on click with JS?

I asked this question yesterday hopefully this one is clearer as I've now provided a working example of my store.
I'm developing a Shopify Theme. I've been using Timber as my base and I'm currently having a problem with my Quick Cart and Quick Shop/View drawers.
I have 2 drawers on the right of my site, 1 for the cart and 1 for the product quick view option. The drawers currently slide open - #PageContainer moves to the left on click to reveal each drawer.
As they are currently sitting on top of each other I need to alter the JS so that on click the z-index changes so that the correct drawer being called is highest in the stack.
I'm not great with JS so not sure if this is a simple task?
Here is a link to my Dev Store
JS:
timber.Drawers = (function () {
var Drawer = function (id, position, options) {
var defaults = {
close: '.js-drawer-close',
open: '.js-drawer-open-' + position,
openClass: 'js-drawer-open',
dirOpenClass: 'js-drawer-open-' + position
};
this.$nodes = {
parent: $('body, html'),
page: $('#PageContainer'),
moved: $('.is-moved-by-drawer')
};
this.config = $.extend(defaults, options);
this.position = position;
this.$drawer = $('#' + id);
if (!this.$drawer.length) {
return false;
}
this.drawerIsOpen = false;
this.init();
};
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
Drawer.prototype.open = function (evt) {
// Keep track if drawer was opened from a click, or called by another function
var externalCall = false;
// Prevent following href if link is clicked
if (evt) {
evt.preventDefault();
} else {
externalCall = true;
}
// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
evt.stopPropagation();
// save the source of the click, we'll focus to this on close
this.$activeSource = $(evt.currentTarget);
}
if (this.drawerIsOpen && !externalCall) {
return this.close();
}
// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.$nodes.moved.addClass('is-transitioning');
this.$drawer.prepareTransition();
this.$nodes.parent.addClass(this.config.openClass + ' ' + this.config.dirOpenClass);
this.drawerIsOpen = true;
// Run function when draw opens if set
if (this.config.onDrawerOpen && typeof(this.config.onDrawerOpen) == 'function') {
if (!externalCall) {
this.config.onDrawerOpen();
}
}
if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
this.$activeSource.attr('aria-expanded', 'true');
}
// Lock scrolling on mobile
this.$nodes.page.on('touchmove.drawer', function () {
return false;
});
this.$nodes.page.on('click.drawer', $.proxy(function () {
this.close();
return false;
}, this));
};
Drawer.prototype.close = function () {
if (!this.drawerIsOpen) { // don't close a closed drawer
return;
}
// deselect any focused form elements
$(document.activeElement).trigger('blur');
// Ensure closing transition is applied to moved elements, like the nav
this.$nodes.moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });
this.$nodes.parent.removeClass(this.config.dirOpenClass + ' ' + this.config.openClass);
this.drawerIsOpen = false;
this.$nodes.page.off('.drawer');
};
return Drawer;
})();
Update
As instructed by Ciprian I have placed the following in my JS which is making the #CartDrawer have a higher z-index. I'm now unsure how I adapt this so that it knows which one to have higher dependant on which button is clicked. This is what I've tried:
...
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
$('.js-drawer-open-right-two').click(function(){
$(this).data('clicked', true);
});
if($('.js-drawer-open-right-two').data('clicked')) {
//clicked element, do-some-stuff
$('#QuickShopDrawer').css('z-index', '999');
} else {
//run function 2
$('#CartDrawer').css('z-index', '999');
}
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
...

The approach would be like this:
$('.yourselector').css('z-index', '999');
Add it (and adapt it to your needs) inside your onclick() function.

if you need to modify the z-index of your div when clicking a buton, you shoud put in this code on your onclick() function, else if you need to activate it when you looding the page you shoud put it on a $( document ).ready() function , the code is :
$('#yourID').css('z-index', '10');

You can use:
document.getElementById("your-element-id").style.zIndex = 5;
It's pure Javascript and sets the z-index to 5. Just bind this to onClick event!

How to stop window.scroll() after specific event?

I want to make the sticky-nav to act similar(scroll is off when the menu is expanded) to this website's nav(http://amandagerhardsen.com/#cloudbusting/4) when expanded.
How do I do it?
var Boxlayout = (function () {
var $el = $('#sticky-nav'),
$sections = $el.children('section'),
// work panels
$workPanelsContainer = $('#bl-panel-work-items'),
// close work panel trigger
$closeWorkItem = $workPanelsContainer.find('nav > span.hidemenu'),
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
// transition end event name
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
// support css transitions
supportTransitions = Modernizr.csstransitions;
function init() {
initEvents();
}
function initEvents() {
$sections.each(function () {
var $section = $(this);
// expand the clicked section and scale down the others
$section.on('click', function () {
if (!$section.data('open')) {
$section.data('open', true).addClass('bl-expand bl-expand-top');
$el.addClass('bl-expand-item');
}
}).find('span.hidemenu').on('click', function () {
// close the expanded section and scale up the others
$section.data('open', false).removeClass('bl-expand').on(transEndEventName, function (event) {
if (!$(event.target).is('section')) return false;
$(this).off(transEndEventName).removeClass('bl-expand-top');
});
if (!supportTransitions) {
$section.removeClass('bl-expand-top');
}
$el.removeClass('bl-expand-item');
return false;
});
});
// clicking on a work item: the current section scales down and the respective work panel slides up
$workItems.on('click', function (event) {
// scale down main section
$sectionWork.addClass('bl-scale-down');
// show panel for this work item
$workPanelsContainer.addClass('bl-panel-items-show');
var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
currentWorkPanel = $panel.index();
$panel.addClass('bl-show-work');
return false;
});
// navigating the work items: current work panel scales down and the next work panel slides up
$nextWorkItem.on('click', function (event) {
if (isAnimating) {
return false;
}
isAnimating = true;
var $currentPanel = $workPanels.eq(currentWorkPanel);
currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
var $nextPanel = $workPanels.eq(currentWorkPanel);
$currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function (event) {
if (!$(event.target).is('div')) return false;
$(this).off(transEndEventName).removeClass('bl-hide-current-work');
isAnimating = false;
});
if (!supportTransitions) {
$currentPanel.removeClass('bl-hide-current-work');
isAnimating = false;
}
$nextPanel.addClass('bl-show-work');
return false;
});
// clicking the work panels close button: the current work panel slides down and the section scales up again
$closeWorkItem.on('click', function (event) {
// scale up main section
$sectionWork.removeClass('bl-scale-down');
$workPanelsContainer.removeClass('bl-panel-items-show');
$workPanels.eq(currentWorkPanel).removeClass('bl-show-work');
return false;
});
}
return {
init: init
};
})();

Here is a fiddle: http://jsfiddle.net/77P2e/
Be careful to unlock scrolling again when done, or this could be very annoying for the user!
Setup code
var $window = $(window), previousScrollTop = 0, scrollLock = false;
$window.scroll(function(event) {
if(scrollLock) {
$window.scrollTop(previousScrollTop);
}
previousScrollTop = $window.scrollTop();
});
To lock scroll position:
scrollLock = true;
And to unlock again...
scrollLock = false;
As an example use, you could lock the window scroll position when the mouse enters the navigation area, and unlock it again when the mouse leaves:
$("nav")
.mouseenter(function(){ scrollLock = true; })
.mouseleave(function(){ scrollLock = false; });

In my opinion the accepted answer is not what should be achieved, as the window.scroll() function will be still running (endlessly), even if the 'event' has occured.
The window.scroll() function is an event handler. So use on() to bind the event and off() to unbind it (after the 'event' has occured).
$(window).on('scroll', function() { // bind event handler
var offset = $(window).scrollTop();
console.log("page Y-Offset: ", offset); // just to see it working
if(offset >= 100) $(window).off('scroll'); // unbind the event handler when the condition is met
});

The Javascript solution is a little janky for me, on mobile. It's like it scrolls a little bit and then snaps back into place.
However, I figured out a way to do it much more cleanly, without any jank, just by changing CSS's overflow property on the part you don't want to scroll. Here's the code in d3 but the concept should be pretty clear:
var body = d3.select('body');
var preventScroll = function () {
body.style('overflow', 'hidden');
},
allowScroll = function () {
body.style('overflow', 'scroll');
};
d3.select('#sticky-nav')
.on('touchmove', preventScroll)
.on('touchstart', preventScroll)
.on('touchend', allowScroll)
.on('touchcancel', allowScroll);

As I was using jquery animation,
if ($(window).scrollTop() >= $('.btn').offset().top + $('.btn').outerHeight() - window.innerHeight)
{
$(".tab").stop();
}
I did this and it worked.
.btn is the button. That .tab div would stop if it scrolls to that position.

If you're using jquery animation you can try using the stop() function on the animated object.

How can I get this function to work after a navigation menu bar link has been clicked?

Inside my function.js file I have two functions: the first one loads my pages using ajax. The other one is for minipulating tabbed content on my home page. Initially, both the functions work. However, when I click on any one of the menu bar links, and then click on the home link to return back to the home page, my tabbed area no longer works. I have a feeling that the organictabs() function is only getting called when index.html is first loaded. How can I change this so that organictabs() is called every time a new page is loaded?
// remap jQuery to $
(function($){})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function (){
initialize();
});
function initialize() {
//Click on nav to load external content through AJAX
$('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){
e.preventDefault();
$('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
}); //clicked on nav
//handle AJAX for left nav
$(function() {
$("#tabedarea").organicTabs();
});
}
//Click on nav to load external content through AJAX
// $('#topnav a').click(function(e){
// e.preventDefault();
// $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
// }); //clicked on nav
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$navtabs = base.$el.find(".navtabs");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hidetabs").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$navtabs.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
//var newHeight = base.$el.find("#"+listID).height();
//$allListWrap.animate({
// height: newHeight
//});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".navtabs li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 300
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);

Making use of the complete function on the jquery load will solve your problem I believe:
function initialize() {
//Click on nav to load external content through AJAX
$('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){
e.preventDefault();
$('#pages').load( e.target.href + ' #loadcontent', function() { $("#tabedarea").organicTabs(); }); //pages finished loading
});
}

Native Javascript Alert - style override remove new line functionality

I am using a simple jQuery plugin to style my javascript alerts. The problem being the usual methods for adding new lines does not appear to work. Here is the javascript for the plugin, any ideas?
(function($) {
$.fn.customAlert = function(options) {
var settings = {
'alertTitle' : 'Notice!',
'alertOk' : 'OK',
'alertClose' : 'x',
'draggable' : false
};
if (options) $.extend(settings, options);
if(document.getElementById) {
window.defaultAlert = window.alert;
window.alert = function(msgTxt) {
if ($('#modalDiv').length > 0) return; // Only ever show one alert
// The modal div to block out the rest of the document whilst the alert is shown
var modalDiv = $('<div></div>');
modalDiv.attr('id', 'modalDiv');
modalDiv.height($(document).height()); // Make overlay cover the whole window
// The alert container
var alertDiv = $('<div></div>');
alertDiv.attr('id', 'alertDiv');
// The alert title
var titleH1 = $('<h1></h1>');
titleH1.addClass('titleH1');
titleH1.text(settings.alertTitle);
// The alert text to display
var msgP = $('<p></p>');
msgP.text(msgTxt);
// OK button - will remove/close the alert on click
var okBtn = $('<a></a>');
okBtn.addClass('okBtn');
okBtn.text(settings.alertOk);
okBtn.attr('href', '#');
// X button - will remove/close the alert on click
var closeBtn = $('<span></span>');
closeBtn.addClass('alert-close');
closeBtn.text(settings.alertClose);
// Append elements to document body
alertDiv.append(titleH1);
alertDiv.append(msgP);
alertDiv.append(okBtn);
alertDiv.append(closeBtn);
$('body').append(modalDiv);
$('body').append(alertDiv);
// Center alert on page
$('#alertDiv').css('top', ($(window).height()/2) - ($('#alertDiv').height()/2)+'px');
$('#alertDiv').css('left', ($(window).width()/2) - ($('#alertDiv').width()/2)+'px');
// Make draggable
if (settings.draggable && $('#alertDiv').draggable) {
$('#alertDiv').draggable({
handle: 'h1',
opacity: 0.4
});
$('#alertDiv h1').css('cursor', 'move');
}
// Bind OK button to remove/close alert
$('#alertDiv .okBtn, #alertDiv .alert-close').bind('click', function(e) {
$('#alertDiv').remove();
$('#modalDiv').remove();
e.preventDefault();
});
};
}
};
})(jQuery);
I am guessing its a case of in this above finding /n and adding a <br> or </p><p>. I am unsure how to do that if even possible though.

Change this line:
msgP.text(msgTxt);
to
msgP.html(msgTxt);
and I think then you can use <br /> and other html tags.