We Keep Coding

jQuery preventDefault according to a :hover state on Mobile

Please help me to figure out how to handle the situation. We have a link. There is :hover css rule for that link that expands an additional block of links.
$('li').children('a').on('click', function(e) {
if ( $(this).siblings('div').is(':hidden') ) {
e.preventDefault();
}
});
ul {
list-style-type: none;
border: 1px solid black;
background-color: white;
}
a {
display: block;
height: 30px;
line-height: 30px;
}
li:hover div {
display: block;
}
li div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
<li>
Google
<div>
GMail
Maps
</div>
</li>
</ul>
The idea: Need to preventDefault for the first link until the additional links expanded. On desktop you won't spot the difference (if only you remove the :hover CSS rule, and try to click on the first link, it won't work since the rest links are hidden). Right behavior: User hovers first link, sees the others, and after that he is able to click on the first link.
The problem starts on mobiles since hover and click are the same. When user clicks on the first link, it will perform href, even though the additional links were hidden at the moment of clicking. But since the :hover rule applies at the same time of clicking on the link, JS treat it as if links were already opened and doesn't prevent default. Means my current IF statement is FALSE on mobile devices a second before actual click. Please help me to find the right approach.
A solution without using jquery-mobile is warmly welcomed! Thank you!

Here is a possible solution: Always run preventDefault. And base on the visibility of the div, decide to show the links or go to the href.
$('li').children('a').on('click', function(e) {
e.preventDefault();
var $links = $(this).siblings('div');
if ($links.is(':hidden')) {
$links.show();
} else {
window.location.href = this.href;
}
});
ul {
list-style-type: none;
border: 1px solid black;
background-color: white;
}
a {
display: block;
height: 30px;
line-height: 30px;
}
li:hover div {
display: block;
}
li div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
<li>
Google
<div>
GMail
Maps
</div>
</li>
</ul>
PS: It is more likely to be a user experience problem to me. On touch devices, we don't really have hover event. Therefore it is hard to provide same experience as desktop. Usually there would be a slightly different design on mobile devices, like a dropdown menu toggles on tap or touchstart events in this case.

Is it possible to prevent hidden elements jumping into view on focus

I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.
For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?
Thanks in advance
(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)
Example Code:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
Visible Link
Hidden Link
</div>

In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).
The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)
Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.

Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.

Close icon on dynamic div

I have a div which I create dynamically. I also switch the div's visibility using display:none and display:block. I want to create a close icon for that div using plain Javascript and CSS. Is that possible?
I have tried using an simple X icon for changing the visibility.
Here is my CSS:
.dhSeriesToolbar {
max-height: 200px;
width:400px;
background-color: black;
z-index:999;
display:none;
overflow:auto;
border: 2px solid #33ccff;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
position:absolute;
}

It would be better to see your code to help you better. But the idea is the following: add an icon (<img>) in your <div> element, and bind a Javascript call to the onclick event that will hide (or remove, regarding your needs) the <div>.

yes possible...do like this
// javascript part
myfunction(){
document.getElementById("divShowHide").setAttribute("style", "display:none;");
}
// html part
<img src="icon.png" onclick="myFunction()"/>

you could also play with visibility:hidden

You can create a close icon too dynamically along with that div e-g
$("body").append("<div class='dynamically_created_div'><a href='javascript:void(0);' onclick='closeDiv()'></a></div>");
function closeDiv() {
$(".dynamically_created_div").hide();
}

Grid of photos - multiple select/highlight? Toggle?

I've a grid of photos. What I need is the user to be able to click on the photos of people they want to invite to an event. Upon first click I'd like it to alter the CSS/styling (for example add a border or change transparency) then on second click revert back to original style. So toggle I guess.
So that a user can click say three images and those three would have a green border showing they've been selected. Then if he'd like to deselect he simply click again and it reverts back to the original style.
How is this possible? CSS? Javascript? JQuery?
So far all I've got is the table of photos:

HTML
<div class="user">john</div>
<div class="user">doe</div>
<div class="user">larry</div>
<div class="user">sergey</div>​
CSS
.user {border: 1px solid #ededed; cursor: pointer; width: 100px; padding: 10px; margin-bottom: 10px}
.active {border: 1px solid #0066cc; background: #eeeeee;}​
jQuery
$('.user').on('click', function() {
$(this).toggleClass('active');
});​
Fiddle - http://jsfiddle.net/qgGne/

How to make round buttons

How would I make round buttons using HTML and CSS? I tried to use a background image, and make it a certain size, but that doesn't seem to work. Specifically, I would like to make a circular button, which on a click would launch a Javascript script.

With border-radius.
http://jsfiddle.net/12w83vtn/
button {
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #000;
}

You can do this quite simply with css3:
HTML -
<div id="button">
</div>
CSS -
#button {
width:100px;
height: 100px;
border-radius:100%;
background-color:red;
}
And use an onclicked event to make it a button.

Two ways:
1.) Create images with rounded corners and set the inbetween with css colors.
2.) Use css properties which are limited to some browsers (FF use a set, safari some others, not sure if chrome use yet another set).
Check this list

border-radius need not be a percentage. Try setting it in pixels instead.