Play sound when Tab is Active - javascript

Hello I have hear my script to play sound when Tab is not Active, how I can change this to play also when I'm on the Tab?
'document.addEventListener('chatLoaded', function(event) {
event.chat.audioControl.loadSoundFile('http://www.soundjay.com/misc/sounds/handbag-lock-4.mp3');
document.addEventListener('newMessage', function(event) {
var chat = event.chat;
if (!chat.isActiveTab()) {
event.chat.audioControl.play();
}
});
});'

Correct me if I'm wrong but If I got your question right and when you said "tab" you meant the browser tab, that seems pretty simple to me. All you have to do is remove the if statement, then it'll play the sound every time the event is triggered:
document.addEventListener('newMessage', function(event) {
event.chat.audioControl.play();
});
If with "tab" what you meant was an HTML element, you can use blur and focus events to keep track of focusing state. In this case there's also solutions to check about user visibility in the browser tab, which Shota Noniashvili answer is covering.

Use focus() and blur() function to detect if tab is active or not.
Or you can use page visibility API (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

Related

How to preventDefault and override browser's back button behavior?

Sorry if duplicate, but I don't understand how I can use the basic approach in my case.
I need to hide some div, when user presses back button in browser. That is all what I need. The page must not to be reloaded. I tried this way:
window.onpopstate = function (event) {
event.preventDefault();
alert("Back button pressed");
myDiv.style.display = 'none';
}
But this doesn't work at all. Even alert doesn't fire. And the browser goes back as always.
How to make it work? First of all this must works in mobile browsers.
Will the using of window.location.hash trigger page reloading or not?
Short answer: You can't change it.
Long answer:
You should first set a State then get it with event handler.
So, simply, when user clicks on a specific section of your document, for example a <a>, you set a State then when he clicks on back button ( of browser ) you've got a fired event.
someElement.addEventListener( 'click', function( e ) {
history.pushState({ state: 'someElement was clicked' }, 'title', 'some-element.html' );
})
Now, as back button pressed, you've got an alert ( as presented in your question ).
For furthur information check here: Manipulating the browser history( mdn )
No, changing the location hash will not do a page reload (this is where all Single Page Applications are based upon.
Preventing the behaviour after the back button is clicked (which will trigger a page reload) is not really an option. Best you can do is warn the user:
window.onbeforeunload = function() {
return 'Sure you want to leave?';
};

window tab pressed event

I want my html5 canvas game to automatically pause when the user opens up another tab inside the browser. What is the name of the event that is fired when a user does this?
$(window).blur( function() {
});
or in js:
window.onblur = function() {
}
There is no "new tab opened" event. But pausing on the blur event will do what you want - whenever the window loses focus the game will pause. You can then resume game in the focus event.
As an alternative to the blur event suggested in another answer, you could use the new window.hidden property of HTML5.
Good places to read up on this are:
https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API
http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
The biggest problem using this specification today is that you'll have to cater for vendor prefixes to handle it in all browsers. But if you ignore that it really comes down to:
if (!window.hidden) {
// do whatever you normally do to render a frame
}
There are corresponding visibilitychange events in case you'd prefer to keep the detection out of your game loop.

jQuery click event - How to tell if mouse was clicked or enter key was pressed?

I have a usability concern on a web site of mine. I have a set of tabs, each containing a form. When you click on the tab link, it gives focus to the first textbox in the tab content body. Mouse-oriented people love this "feature". The problem is when keyboard-oriented users use the TAB key on their keyboard to go through the tabs. They hit enter on the tab they want to look at, the click event fires and the tab shows up, but focus is given to the textbox, adjusting their tab order completely. So when they hit tab again, they want to go to the next tab on the screen, but since focus was moved inside the form, they can't easily get to the next tab using the keyboard.
So, inside the click event I need to determine if they actually clicked on it with a mouse button. Is this possible? My first attempt was this:
$("#tabs li a").click(function(e) {
var tab = $(this.href);
if(e.keyCode != 13)
$("input:first", tab).focus();
});
But keyCode is always 0. The which property is also always 0. Please help!
Here's the solution I came up with, it's surprisingly simple. I trapped keydown on the tab links, and triggered the click event when keyCode was 13. Luckily, the trigger function allows us to pass extra parameters to the event handler...
$("#tabs li a").keydown(function(e) {
if(e.keyCode == 13) {
$(this).trigger("click", true);
e.preventDefault();
}
});
So I just had to change my click handler to receive the new parameter and use it...
$("#tabs li a").click(function(e, enterKeyPressed) {
if(enterKeyPressed)
alert("Enter key");
else
alert("Clicked");
});
I put up a demo on jsFiddle as well. Thanks to everyone who read the question.
An even simpler solution that worked for me was to just check whether there were any mouse coordinates passed with the event.
document.addEventListener('click', function(e) {
//if the event object is passed with mouse coordinates,
if(e.screenX && e.screenY){
//The mouse was clicked
}else{//The enter key was pressed}
});
Would a global "focus" variable work, which disable focus on mouse setting after tab usage on a given tab until a mouse is moved to a new block.
This would not be the feature your requesting, but I believe it might give you what your looking for.
eg. mouse hoovers option 5, you hit tab, now you store the 5 in the variable, disallowing focus to 5 until something else been focused on, but as soon something else is focused, global is turned back to -1.
Not cleanest workaround I admit that freely.

Capture "done" button click in iPhone's virtual keyboard with JavaScript

I'm wondering if there's a way to capture the iPhone's virtual keyboard's done button event, using JavaScript?
Basically, I just want to be able to call a JS function when the user clicks done.
I was unable to track the 'done' button being clicked. It didn't register any clicks or keypresses. I had to addEventListeners for change, focusout and blur using jquery (because the project already was using jquery).
You need to do some kind of this:
$('someElem').focusout(function(e) {
alert("Done key Pressed!!!!")
});
It worked for me, hope it will help you as well.
After searching and trying this solution
basically is say:
document.addEventListener('focusout', e => {});
tested on IPhone 6s
This question is kinda old, but I've found a hacky way recently to make this working.
The problem with the 'blur', 'focusout' events is that they fire even if user just tapped outside the input/textarea, and did not press the 'Done' button, in my case, UI should behave differently depending on what exactly have happened.
So to implement it, I've done the next thing:
After showing the keyboard (the input received the focus), add click handler on the window via the addEventListener function. When user clicks on the window, remember the timestamp of the click in the variable (let's call it lastClick = Date.now())
In the blur event handler, set a timeout for 10-20 ms to allow other events happening. Then, after the timeout, check if the blur event happened in a time difference lower for example than 50-100 ms than the lastClick (basically Date.now() - lastClick < 50). If yes, then consider it as a 'Done' button click and do corresponding logic. Otherwise, this is a regular 'blur' event.
The key here is that tapping on keyboard controls (including Done button) does not trigger the click event on the window. And the only other way to make keyboard hide is basically tap on other element of the page and make the textarea lose focus. So by checking when the event happened, we can estimate whether that's a done button click or just blur event.
The answer by oron tech using an event listener is the only one that works cross platform.
document.getElementById("myID").addEventListener("focusout", blurFunction);
function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}
"Change" event works fine
document.querySelector('your-input').addEventListener('change',e=>
console.log('Done button was clicked')
);
attach a blur event to the text box in question. The done fire will fire this event.
The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})

Event for when user switches browser tabs

I'm looking for an event which will fire whenever the user switches away from the page to another tab, and another event which fires when the user switches back to the tab again.
window.onblur and window.onfocus don't seem to work correctly across all browsers
Is there a proxy I could look at in order to synthesize this event?
You can also try and use VisibilityAPI.
document.addEventListener("visibilitychange", function() {
if (document.hidden){
console.log("Browser tab is hidden")
} else {
console.log("Browser tab is visible")
}
});
See also here on Stackoverflow (possible duplicate)
You might try using a framework, such as MooTools or jQuery which provide cross-browser support. They should be able to detect with more reliability the blur and focus events for the browser window.
I personally have used jQuery with much success:
$(window).blur(function(e) {
// Do Blur Actions Here
});
$(window).focus(function(e) {
// Do Focus Actions Here
});

Categories

Resources