Ref this issue: How to make the Web Bluetooth Pair button work when run as chrome app
In my tests, the window which pops up when navigator.bluetooth.requestDevice is called is quite large, covers the html window from which it was invoked completely and the bottom of the window, containing the Pair and Cancel buttons are off the bottom of the screen and so not visible.
Is it possible to control and position of the requestDevice window?
<html>
<head>
<script type="text/javascript" src="bluetoothle.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Hello Bluetooth</h1>
<h2>Device Discovery</h2>
<button id="btn_discover">Discover Devices</button>
<div id="devices"></div>
</body>
</html>
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log('> Name: ' + device.name);
console.log('> Id: ' + device.id);
console.log('> Connected: ' + device.gatt.connected);
bluetoothle.selected_device = device;
console.log(bluetoothle.selected_device);
})
.catch(error => {
console.log('ERROR: '+ error);
});
No, there is no way to control the size of the device chooser window that requestDevice() opens. It will use a fixed maximum size. (I don't have those dimensions on hand while writing here.) chrome.app.window can be opened maximized to work around this in the short term.
(Also, while there may be reasons to develop a chrome app or to retrofit web bluetooth into a previous one, if you haven't seen that Chrome Apps are being deprecated on Windows, macOS, Linux, you should read the announcement.)
It looks like https://bugs.chromium.org/p/chromium/issues/detail?id=751819 has been filed to investigate this issue.
Related
I'm trying to make a feature where users type into a text box which produces suggestions as you type (like Google Instant), then those suggestions can be dragged into boxes on the page. It all worked fine until I discovered touch screen mobile devices don't work with HTML 5 drop and drag. I'm trying to get it work with jquery instead but it's not going smoothly.
The code below displays a draggable image and it works with touch screens and mice.
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
$('#touchme1').draggable({revert:true});
$('#drop').droppable({
drop: function( event, ui ) {
$(ui.draggable).remove();
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#faa'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
}
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>
The problem is that when the same code is used within the php file which is called to display search results, the drag and drop doesn't work on mobile devices (but it does on desktops).
I have a feeling you may need to attach an event handler to the #touch1 element. The code you posted only looks for #touch1 elements that already exist in the DOM, but as your element is loaded though AJAX, it will not be in the DOM when the page first loads.
You can use .on() to attach an event handler to the object.
$(document).on('mouseover', '#touchme1', function(){
$(this).draggable({revert:true});
});
In the above example I am using the mouseover event. However you will need to choose an event hander that will work for you with both touch devices and with a mouse.
Example jsbin: http://jsbin.com/agisom/2/edit
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
Is there a Firefox extension capable of blocking a single function from embedded javascript in a page?
<html>
<head>
<script type='text/javascript'>
function onLoad(){
setTimeout(annoying, 1800000);
}
function annoying(){
//do something annoying
}
function useful(){
//do something useful
}
</script>
</HEAD>
<BODY onload="onLoad()">
<!--rest of page goes here-->
</BODY>
</HTML>
Perhaps Greasemonkey is the way to go.
The answer below is quite detailed technical, sorry if I went too far ;)
It depends a bit on how the function annoying() is used by the scripts. I am not yet an expert in JavaScript, some more experienced person's voice could be useful.
If annoying() is used by functions like window.setInterval(), window.setTimeout(), you probably can't overwrite the function directly, because of JavaScript quirks with scoping (closures). When the code window.setTimeout(annoying, 600) is executed, a reference to the "old" annoying is stored and that "old" version is executed. You might then try to get rid of the code that is invoking window.setTimeout on annoying instead.
In other cases, you can add a function with the same name and de facto overwrite the function with the following Greasemonkey userscript:
function addScript(sourceCode)
{
var script = document.createElement('script');
script.innerHTML = sourceCode;
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild); // insert the script as a first child of <HEAD>
}
addScript('function annoying(){alert("overwritten")}');
If you have code like below (I am unable to provide live demo, because it works differently on JSFiddle perhaps because its sandboxing), and the userscript above is launched for that domain, then after 600 milliseconds after page loads, you will have "Nasty alert" alert, but then any time you click the text, you will have "overwritten" alert.
<html>
<head>
<script type='text/javascript'>
function annoying(){
alert("Nasty alert");
}
function useful(){
//do something useful
}
window.setTimeout(annoying, 600); // closure; binds to the function as it is at the moment of execution
</script>
</head>
<body>
<a onclick="annoying()">Click me</a>
</body>
</html>
I know how to block it per page... I have a script here that is bugging me:
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head>
<body onload="JavaScript:timedRefresh(300000);">
What these idiots refuse to consider is that if I'm looking around for solutions, I could wind up with 10+ of these page open and 90% of my CPU time is then dedicated to refreshing their pages in the background! grr
I have firebug handy for web development and I just enter this JS command into the console
timedRefresh = function(value){alert(value);}
smile, click ok, and go on my way.
I've posted a solution here: https://stackoverflow.com/a/9699686/6355
Since it's little more than a link here it goes again: http://userscripts.org/scripts/show/125936
This does not help but instead exacerbates the problem.
The following are particularly pernicious and ugly if javascript is enabled:
<script>
setInterval("alert('irritate')",10)
</script>
or
<script>
(function(){(function r(){alert('irritate');setTimeout(r,10)})()})()
</script>
though this can be stopped (and all future TimeOuts) by:
javascript:setTimeout=function(){}
perhaps as the URI of a bookmark, provided it can be clicked fast enough.
However,
setInterval("alert('irritate')",10)
can only be stopped by
javascript:setInterval=function(){}
BEFORE the script is run.
Good luck with:
<script>
(function(){(function r(){alert('irritate');r()})()})()
</script>
or even simpler
<script>
( function r(){alert('irritate');r()} ) ()
</script>
Setting alert=function(){} will stop all messages but the script and its recursion of r will not stop until SO or system time out. Also, r is not in the global environment so r=function(){} is ineffective.
Some FF versions need an interesting solution, found on SO, if the alert response is mandatory, to kill the annoying page w/o killing the browser and other open tabs, by using ctrl-F4 to close the tab of the offending page. To aid the manual reflex and dexterity required to do this fast enough, ctrl-Enter is used to respond to the prompt and while ctrl-Enter is pressed F4 is typed.
I am playing around with the HTML5 features, and I want div's (and similar containers like articles, sections, etc.) to be draggable. Consider the following code:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Draggable Object</title>
</head>
<body>
<h1>Test #1: A Simple Draggable Object</h1>
<div draggable="true">This text should be draggable.</div>
</body>
</html>
I tested in OS X the following browsers:
In Chrome 7.0 and Safari 5.0.2 I can successfully drag the text around, but in Firefox 3.6 and 4.0b6 I can neither drag the text nor mark it (as if it was usual text). Is this a bug or a feature?
How do I achieve that Firefox lets me drag around these tags without using jQuery ?
According to HTML5 Doctor, this won't work in Firefox without some JS help.
The HTML 5 spec says it should be as
simple as adding the following
attributes to the markup of the
elements in question:
draggable="true"
However, this doesn’t work completely
for Safari or Firefox. For Safari you
need to add the following style to the
element:
[draggable=true] {
-khtml-user-drag: element;
}
This will start working in Safari, and
as you drag it will set a default,
empty value with the dataTransfer
object. However, Firefox won’t allow
you to drag the element unless you
manually set some data to go with it.
To solve this, we need a dragstart
event handler, and we’ll give it some
data to be dragged around with:
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
// store the ID of the element, and collect it on the drop later on
event.dataTransfer.setData('Text', this.id);
});
}
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>