Today I discovered that youtube has this cool feature that when a video is running and you click on the tab of the webpage you can mute the video. Then when you click again, the video returns to its original volume.
I have tried my best to explain better in this image
I was excited to know the the title of a webpage could detect clicks and I tried the following code.
document.getElementsByTagName("title")[0].addEventListener("click", function() {
alert("foo");
});
Didn't work. So I tried putting a button in the title like below.
<title><button>test</button></title>
...
...
...
document.getElementsByTagName("button")[0].addEventListener("click", function() {
alert("foo");
});
Didn't work. I have tried to find out through google but every post is about detecting whether the webpage is focused or not or maybe I just can't figure out the correct keywords (to google).
I really wan't to figure this out, so any help is much appreciated. I am using the latest version of Firefox (in case thats relevant).
Thanks in advance.
Unfortunately, it's not something that is achievable with javascript. It's a feature implemented by recent browsers like Chrome or Firefox. For instance, in IE the mute icon is not visible. Any webpage that emit sound will have this icon.
Related
Firefox seems to add it’s own ‘click anywhere to play’ behavior, it dims the poster and adds a play button. It works great, but the problem is that no other browsers seem to add that behavior automatically. So, I’ve had to implement a javascript workaround to allow ‘click anywhere to play’ in other browsers. They work great, but now it’s broken in firefox. The way it behaves, it seems like the javascript I put in there is getting a click and making it play, but then ff’s own ‘click anywhere to play’ catches the click too, and pauses it immediately. I can inch along the entire video, 1 or 2 seconds at a time, if keep clicking. As for the specific js workarounds that I've tried, many of the examples from these two threads:
How can I add click-to-play to my HTML5 videos without interfering with native controls?
and
Click the poster image the HTML5 video plays?
I was really hoping for a <video> attribute like click-anywhere="yes", but I think I'm out of luck there. Or, as a solution to my problem, something like the css: moz-click-anywhere:false; to allow the js to handle clicks exclusively.
The only solution I can think of is the browser detection route, but I’m hoping there’s a more elegant solution. If not, so be it, but it was worth asking.
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
I just couldn't get the code to work on certain browsers, basically whatever code you see on the resource url below has all been work-around-codes to get this work mainly for android browsers and windows 8. So this may be a little sketchy.
Currently, this code below shows the page layers when the buttons are clicked.
$(document).ready(function() {
$("#mouths9").click(function() {
$("#mouth").toggle();
I either want it to when a user clicks anywhere (other than the selected #mouth/div) to close the toggled layer #mouth.
every show() commands I have tried, doesn't show the layers on android devices, so the toggle has been, so far anyway the only thing that has worked.
Surely there's a better way of doing this? if anyone wants to see how far I have gotten the resource url can be seen at http://a1jw.com/mker/newChoopie/testing/stage7/
Is this what you are looking for?
$(document).ready(function() {
$("body").not("#mouths9").click(function(){
$("#mouth").hide();
});
$("#mouths9").click(function() {
$("#mouth").show();
));
}):
I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/
Using jQuery, is there a way to disable the click sound in IE that happens when you post?
The IE click sound is a feature of the browser that you can't control from JavaScript. The only way to disable it is in System Sounds in the Control Panel.
It may very well be possible using this solution: http://www.julienlecomte.net/blog/2007/11/30/
But in short, John is right about it being a browser sound not controlled by javascrípt or anyting else than a registry change, wich a website will not manage to do.
I know the above "trick" has worked before, so if nothing has changed it will still work.