I am working on a metro app right now and I'm looking to enable multitouch. I've browsed around google, but I can't seem to find any API to support it. Can someone point me in the right direction to support multitouch actions in a Windows 8 Metro app?
What exactly are you trying to do? There are Touch, Pointer (an abstraction around touch/mouse/stylus), and Manipulation events on every UI element
In JavaScript you can use the event.pointerId to detected multiple touch inputs. This identifier gives every new input an id. When you want to get multiplie touches for a move with the finger, you can use the MSPointerMove Event and this id. I'am using jQuery, but the bind and unbind function won't work, because the event isn't attached. You have to use plain Javascript to get multitouch working:
var pointerId=0;
//add a Eventlistner to the Down Event (compareable to mousedown and touchstart)
$('#button1')[0].addEventListener("MSPointerDown",function(event) {
pointerId=event.pointerId; //save the pointerId to a (in this case) global var
window.addEventListener("MSPointerMove", moveHandler, false);
//The handlers should also be removed on MSPointerUp.
//You can't use jQuery unbind for this, it dosn't work.
//use window.removeListener("MSPointerMove",moveHandler);
},false);
//define the moveHandler and check the pointer ID
var moveHandler = function(event) {
if(pointerId==event.pointerId) {
//If the pointerId is the same, the moving comes from one finger
//For example we can move the button with the finger
$("#button1").css({'top':event.pageY,'left':event.pageX,'position':'absolute'});
}
}
Following is a full example with a foreach to attach the event-handlers to more than one button. If you start this application you will get 4 squares that you can move around with multiple fingers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery.js"></script>
<script>
function start() {
//add a Eventlistner to the Down Event (compareable to mousedown and touchstart)
$(".button").each(function (i, element) {
var pointerId = 0;
$(element)[0].addEventListener("MSPointerDown", function (event) {
pointerId = event.pointerId; //save the pointerId to a (in this case) global var
window.addEventListener("MSPointerMove", moveHandler, false);
}, false);
//PointerUp handler
window.addEventListener("MSPointerUp", upHandler, false);
//define the moveHandler and check the pointer ID
var moveHandler = function (event) {
if (pointerId == event.pointerId) {
$(element).css({ "top": event.pageY-50, "left":event.pageX-50 });
}
}
//remove the moveHandler on PointerUp
var upHandler = function (event) {
if (pointerId == event.pointerId) {
window.removeListener("MSPointerMove", moveHandler);
}
}
});
}
</script>
</head>
<body>
<div class="button" style="width:100px;height:100px;background-color:#F80;position:absolute;"></div>
<div class="button" style="width:100px;height:100px;background-color:#08F;position:absolute;"></div>
<div class="button" style="width:100px;height:100px;background-color:#fff;position:absolute;"></div>
<div class="button" style="width:100px;height:100px;background-color:#4cff00;position:absolute;"></div>
</body>
</html>
With this approch, you can use 4 Fingers at the same time.
Take a look at this post Touch Input for IE10 and Metro style Apps
Sample script from post:
<script>
function handleEvent(event) {
var currentPointers = event.getPointerList();
if (currentPointers.length == 1) {
event.target.style.backgroundColor = "red";
} else {
event.target.style.backgroundColor = "green"; //multiple touch points are used
}
}
document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);
</script>
Try ManipulationDelta of any control...
you can find whether a touch is multitouch or not by detrmining the Scale property of any manipulation event args....
private void AssetMap_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.Cumulative.Scale != 1)
{
//indicates that it is multitouch
}
hope it will help you...
Related
I am developing an ASP.NET web application. in which have a home page,
when we press F2 in home page we need to load item Master page &
when press F4 in home page we need to load city Master page.
I don't know how to open these pages in ASP.NET C# using short cut keys..
Can any one help me?
write a javascript code onkeypress
function keypress() {
switch (event.keyCode) {
case ascii of f2:
//redirect/or load item master
}
}
or
<script type="text/javascript">
document.attachEvent('onkeyup', KeysShortcut);
// Now implement the KeysShortcut
function KeysShortcut ()
{
if (event.keyCode == 49)
{
document.getElementById('<%= button1.ClientID %>').click();
}
}
</script>
Using linkbutton Example...
C#
Note : The javascript, depending on the keycode, invokes the click event of the element, in our case the link button. The element is obtained by using document.getElementById(' '<%=Control.ClientID%>'').
Note: While using Master Pages, you need to refer to the control using the control's ClientID. I have directly used the ID generated.
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript" src="shortcut.js"> </script>
</head>
Page 1
Add a javascript file to the project called shortcut.js. Add the following code to the javascript file.
function HomeKey()
{
if(event.keyCode == 72)
{
document.getElementById('ctl00_ContentPlaceHolder1_btnHome').click();
}
}
now on backside
C#
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "Home", "document.attachEvent('onkeyup',HomeKey);", true);
}
sorry if my english is poor.
I've a question, i think that the problem is my poor knowledge of javascript but.. i know that you can help me about this.
i've a page with an imagebutton, i use this for delete data and i need a confirmation dialog box. Alertify is pretty, i use altertify alert in server side like this:
string myScript2 = "alertify.error('message.')";
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(),
Guid.NewGuid().ToString(), myScript2, true);
return;
and work fine!
but i don't understand how to use alertify.confirm.
for example i've used
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../js/alertify.min.js"></script>
<!-- include the core styles -->
<link rel="stylesheet" href="../../js/alertify.core.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="../../js/alertify.default.css" />
<script type="text/javascript">
$("#btElimina").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
but nothing to do...i can't use onclientclick because alertify is a non-blocking instead a modal windows...
can you help me to understand? not to write code for me, but, to understand and make me viable
thank you
Henry
Replace alertify.success("You've clicked OK"); with return true;
and alertify.error("You've clicked Cancel"); with return false;
Also change this:
$("#btElimina").on('click', function () {
to this:
$("#<%=btElimina.ClientID%>").on('click', return function () {
I used this and it is working:
My button is :
<asp:ImageButton ToolTip="Çıkış" ID="ImageButton1" ImageUrl="Image/Exit.png" runat="server" OnClick="btnLogout_Click" />
My script is:
<script type="text/javascript">
$("#ImageButton1").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
__doPostBack("<%=ImageButton1.UniqueID%>", "");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
Here when i clicked "cancel" button returns false and doing nothing but when you clicked ok button i am doing postback for related button and you can write your own code in server side
protected void btnLogout_Click(object sender, EventArgs e)
{
Session.RemoveAll();
Response.Redirect("~/Login.aspx");
...
}
I can't comment on the last comment below as I don't have 50 reputation, so I'm posting an answer simply to elaborate on Ratna's answer.
As per Ratna's answer, you should use server tags to refer to ASP.Net controls (controls with runat="server") to ensure that you get the control regardless of what ASP.Net renames the control to.
So to reiterate Ratna's answer:
Instead of
$('#btElimina').on(..
use
$('#<%= btElimina.ClientID %>').on(..
to make sure that you get the correct clientside control id in your jQuery script.
I have a condition , where i have to use toggle class plus delete the class of all other list in a drop down menu ,
for instance if i select any product from the list , all the other products background position should be 0,0 , also on clicking the
same selected product again the bacground position should go back to 0,0. something similar to toggle . I just cant get the both functionality work together.
any ideas on how to get it working or any other way of doing it below is the code which i have tried so far:
for toggle i used the following jquery code :
<script type="text/javascript">
$(document).ready(function() {
$('.option-list.swatch.brass label').on("click", function() {
$(this).toggleClass('not-selected selected-value');
});
});
</script>
To change the background position of all the other list labels apart from the selected ones
<script type="text/javascript">
$(document).ready(function() {
$('.option-list.swatch.brass label').on("click", function() {
$(".option-list.swatch.brass label").each(function() {
$(this).css("background-position", "0px 0px");
});
$(this).css("background-position", "0px 50px");
});
});
</script>
<ul>
#foreach (var pvaValue in attribute.Values)
{
<li>
<label for="" class="not-selected" style="background-image:url(#(pvaValue.MenuIcon));width:50px;height:49px;">#pvaValue.Name</label>
}
</li> </ul>
<style type="text/css">
label.not-selected{background-position:0px 0px;}
label.selected-value{background-position:0px 50px;}
</style>
It is occurring because of Javascript conflict. The one which is called earlier will be overridden by later click bound function..
I would say, combine the logic from both the click bounds..
$('.option-list.swatch.brass label').on("click", function() {
//FIRST LOGIC
$(this).toggleClass('not-selected selected-value');
//SECOND LOGIC
$(".option-list.swatch.brass label").each(function() {
$(this).css("background-position", "0px 0px");
});
$(this).css("background-position", "0px 50px");
});
This should solve your problem. It's okay to call both the logic in one click event function. :-)
I know this is probably a very beginner question that I just can't seem to find the answer to but anyway.
How do you allow a muli-line HTML edit box to allow tabs to be put into it?(rather than tab going to the next control)
I would prefer to do this without javascript also.
You cannot do this without JavaScript. Here's a sample done with jQuery if you want to go that route.
See here:
<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
}else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
}else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
}else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item,String.fromCharCode(9));
setTimeout("document.getElementById('"+item.id+"').focus();",0);
return false;
}
}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>
Wild hunch but I think you'd want to have multiple HTML edit boxes on the page, then use javascript (like jQuery) to place them into separate tabs.
The tabs will require some sort of javascript to create the interaction.
(ugh. Disregard. I was thinking visual user interface tabs. Not the tab character.)
<input id="textbox" />
<script language="JavaScript">
<!--
var textbox = document.getElementById("textbox");
if (textbox.addEventListener)
textbox.addEventListener("keydown", this.textbox_keyHandler, false);
else if (textbox.attachEvent)
textbox.attachEvent("onkeydown", this.textbox_keyHandler);
function textbox_keyHandler(e)
{
if (e.keyCode == 9)
{
var textbox = document.getElementById("textbox");
textbox.value += "\t";
if(e.preventDefault) e.preventDefault();
return false;
}
}
// -->
</script>
Is it possible with the wmd editor to add a button to let the user upload an image to the web server and place the corresponding img markdown in the textbox? If not, will another good inplace editor do it? Context: I'm using asp.net mvc, C# and I am a true beginner with javascript.
A brief perusal of the WMD seems to indicate that this feature is not supported directly and that the control is not particularly pluggable.
That being said, there's nothing stopping you from creating a button/upload-field/whatever that sends an image to your servers and injects the appropriate:
<img src="http://your.server.com/path/to/attachments/..." />
Into the control's underlying textarea.
Here's a variation to the minimal example that comes with WMD:
<!DOCTYPE html>
<html>
<head>
<title>WMD minimal example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos,
this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
int i = 50;
function Add()
{
$("#myTextarea").insertAtCaret("![alt text][" +(i++)+"]");
// You'll need to add the link too, at the bottom
}
</script>
</head>
<body>
<form>
test
<textarea id="myTextarea" style="width: 500px; height: 200px;">*This* is a minimal example.</textarea>
</form>
<div class="wmd-preview"></div>
<script type="text/javascript" src="wmd/wmd.js"></script>
</body>
</html>
But it's only the beginnings as you can probably tell. This markdown editor looks better
I wrote a blog post that explains how I solved this. In the post, I use PHP - if you're comfortable converting my PHP logic into ASP.NET, you may find it helpful!