Develop Reference

Why when faking a click on a link with document.getElementById("tabkategorierna").click(); all links stops working?

I have a link(link1) in my top navbar that opens a sliding down menu with links to different page(on desktop) . It sets a flag and then checks if it is opened or not when you click the link.(this works as it should-opening and closing the menu)
var flagga=true;
$$(document).on("click",".openstoramenyn", function(){
if(flagga){
$$(document).find('.storamenyn').animate({"top":"59px"}, { duration:300, easing: 'linear'});
flagga = false;
}else{
$$(document).find('.storamenyn').animate({"top":"-"+hojden+"px"}, { duration:300, easing: 'linear'});
flagga = true;
}
});
Then in that menu I have a link(link2 with id=tabkategorierna) that opens the popup menu.
Now, if I click on the link2 to open a popup menu it works every time to open the popup menu and link1 is always working.
But if I instead open the popup with the key event "s"(for search) then after the popup menu is closed, link1 is not working anymore - it won´t open the top menu!?
When I click on the key "s" on my keyboard I run a click event on the id=tabkategorierna to trigger it to fake a click on the link with id=tabkategorierna.
So this is the code for opening the popup with the key "s" and faking a click on the id=tabkategorierna link.
var mykeysearchFunc;
mykeysearchFunc = function(event) {
//o=79 s=83 f=70
if ((event.keyCode === 79) || (event.keyCode === 83) || (event.keyCode === 70)){
// Trigger the button element with a click
document.getElementById("tabkategorierna").click();
console.log(flagga)
event.preventDefault();
}
if ((event.keyCode === 67) || (event.keyCode === 27)){
app.popup.close();
event.preventDefault();
}
}
document.addEventListener("keydown", mykeysearchFunc)
So why does it work if I actually click on the link to open the popup menu and not when it is opened by running document.getElementById("tabkategorierna").click();
What is the difference between actually clicking on the link and run the fake click on it?
Why does link1 stop working after I run document.getElementById("tabkategorierna").click(); ?
Any help really appreciated, thanks.
If you click on the top "MENY" and then"TEST KATEGORIER" you will get the popup menu. if you just hit enter it will close and load a page. Thats how it should work. Now, if you instead open the popup menu with the key "s", it opens the popup menu and then you hit enter and it will load the search page again as it should. But now comes the problem, if you click on the first link you clicked the "MENY", it will not work anymore. That is my problem. https://xn--tervinnmera-w8a.se

You need to stop the animation when it has completed its action. It is hijacking other page elements from working on your page.
Try this code:
$$(document).find('.storamenyn').stop();
You can refer to this https://api.jquery.com/stop/

Prevent screen scrolling up when keyboard is shown in mobile Safari

I'm building an Angularjs app that has a at the bottom of one view.
Problem in mobile safari on iOS9:
When focusing the textarea the soft keyboard is shown and covers the lower part of the view.
How can I scroll the page up when the keyboard is visible so that the content (i.e. the textarea) is not covered?

Here is one way you might prevent scrolling. Add overflow:hidden to the document body when your inputs are in focus.
function toArray (collection) {
return Array.prototype.slice.call(collection);
}
function noScroll (event) {
if (event.type === 'focus') {
document.body.classList.add('no-scroll');
}
else if (event.type === 'blur') {
document.body.classList.remove('no-scroll');
}
}
var inputs = toArray(document.querySelectorAll('input'));
inputs.forEach(function(input){
input.addEventListener('focus',noScroll,false);
input.addEventListener('blur',noScroll,false);
});
.no-scroll {
overflow:hidden;
}
To scroll the page up, you could use document.body.scrollTop when the inputs are in focus and set the value to the desired location.

Hide element when touch outside of element without triggering new action

Hi I have a popover that shows up when a image is hovered. On desktop it works fine as expected when the mouse is hovered over the image.
However, on mobile, I would like to have the popover to open on one tap, and then close when clicked anywhere outside of the popover on the screen.
However, the tricky part is, since the images is placed on a grid close together, clicking outside of the popover would likely trigger another popover to open for another image closeby. Ideally, I would like to close the popover without having it triggering another event of opening up another popover. To trigger another popover, the user would have to click again.
fiddle: http://jsfiddle.net/allenchuang/hwu81fpq/
fiddle result: http://jsfiddle.net/allenchuang/hwu81fpq/embedded/result/
Here's what I come up with so far using jQuery..
$(document).on('touchstart', function (e) {
var container = $(".pop-over");
while(container.parent().is(":hover")) {
// if the target click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
e.preventDefault();
container.hide();
}
}
});
CURRENT BEHAVIOR: click on img1 -> opens popover1 -> click on img2 (or anyother element in body) -> closes popover1 but opens popover2.
IDEAL BEHAVIOR: click on img1 -> opens popover1 -> click on img2 (or anyother element in body) -> closes popover1 ( to trigger popover2 you need to click on image2 again)

Notification div - Dropdown close

I have a notification dropdown similar to what stackoverflow has. So when the user request the notifications window I open and close my dropdown div using .show and .hide.
Meanwhile I also want to close it when the user clicks anywhere outside my dropdown div.
My approach was to do the following on my layout.cshtml :
$(document).on("click", onDocumentClick);
function onDocumentClick(event) {
var target = $(event.target);
if (!target.hasClass('nbr-notifications')) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
}
My question and concern is : Is this the best way to do it? From the performance perspective? Since I am handling all clicks on my document everytime.

Couldn't you use this if you are not sure where the element would be?
$('body').on("click",".nbr-notifications", onClick)
.on('blur','.nbr-notifications',closeNotifications);
function onClick(event) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
function closeNotifications()
{
//close it
}
Here only responding to clicks on elements with the class 'nbr-notifications' rather than hooking event handler for all clicks and check if the target is the required one.

If you want the notification to disappear after it loses focus why not just bind a focusout event specifically to that element instead of click to the entire document.
http://api.jquery.com/focusout/
$('.nbr-notifications').on('focusout',function(){
//close functionality here. something like: $(this).hide();
});

How to differentiate between scrolling with the finger and scrolling by tapping the status bar?

I'm making a webpage for iOS. I would like to perform an action when the user scrolls to the very top of the page via tapping the status bar (a shortcut). I don't want to perform this action when the page is scrolled to the top via using finger swipes.
So far, I have this code, which will wrongfully get triggered in both cases:
Event.observe(
window,
"scroll",
function(event) {
if (window.scrollY <= 0) {
alert("You are at the top of the page, but I don't know how you got here");
}
}
);

Since this code is triggered after tap event, you can set a flag on that tap event which you can check later in this scroll event capture
Event.observe(
window,
"scroll",
function(event) {
if ( !flag )
{
if (window.scrollY <= 0) {
alert("You are at the top of the page, but I don't know how you got here");
}
}
flag = false;
}
);
This flag is set when you tap on that status bar