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();
));
}):
Related
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.
My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.
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 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/
My web application uses alert and confirm boxes to display information when a link is clicked.
All browsers display these boxes properly except for Chrome. When I click on a link in Chrome, all I get is the box displayed with one word "Javascript" inside.
It has to work correctly in all browsers, even if the box displayed is constructed a little different in each. It barely works in IE but it does work and if you are going to use that crippled excuse for a browser, you deserve it! ;)
I didn't think this simple problem required a demo in jsfiddle and every one knows what an alert or confirm box looks like, nevertheless if someone needs more clarification please don't just not answer at all, but let me know.
Thanks,
Paul
well alert box is a browser component, therefore all browser vendor uses their own implementation. Since you want same result on all browser, the best you can do is use your own code to produce the result like using modalpopup which will be static around all browser
If you want to ensure cross platform and cross browser compatibility i would use something like:
jQuery Dialogs
Would be alot handier and ensure it looks/works the same everywhere.
Please note jQuery is just an example and any other alert/confirm like JavaScript/CSS would do the job just don't rely on the browser!
Please also note that browsers can change there implementation at any time leaving you stuck if you dont use your own!