We Keep Coding

Is there a way to make an Iframe expandable as needed?

Is there a way to make an Iframe expandable as needed? I have a web page with an Iframe to a second web page on a same server. The second web page has an expandable table. What I would like is when someone views the second page throught the Iframe and clicks on the table to expand, the Iframe will also expand to fit the size.

<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var f = document.getElementById("mainframe");
function resize() {
var h = "";
var w = "";
if (f.contentDocument) {
h = f.contentDocument.documentElement.offsetHeight + 20 + "px";
(f.contentDocument.documentElement,"").getProperty Value
("width");
} else if (f.contentWindow) {
h = f.contentWindow.document.body.scrollHeight + 5 + "px";
} else {
return;
}
f.setAttribute("height",h);
f.parentNode.setAttribute("height",h);
}
if (window.addEventListener) {
f.onload = resize;
} else if (f.attachEvent) {
f.attachEvent("onload", resize);
} else {
return;
}
resize();
}
//]]>
</script>
<iframe name="frm" id="mainframe" src="URL HERE" frameborder="0" allowtransparency="no" scrolling="no" target="_self" height="150"></iframe>
And here's the HTML code:
Name Of Page

If the page is in same domain in that case following solution should work.
Make iframe automatically adjust height according to the contents without using scrollbar?

Alertify in a asp.net c# page

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.

how to get selected text in webbrowser control

I am able to get the selected text of a webbrowser control in WPF by the following:
IHTMLDocument2 doc1 = webBrowser.Document as IHTMLDocument2;
IHTMLDocument3 doc = webBrowser.Document as IHTMLDocument3;
IHTMLSelectionObject currentSelection = doc1.selection;
if (doc1.selection.type == "Text")
{
IHTMLTxtRange range = (IHTMLTxtRange)doc1.selection.createRange();
}
This works just fine and if I set the value of range.text to something else it changes the value of the text. The only issue I'm having is on web pages such as Gmail that have some kind of WYSIWYG editor on it, the selection.type is always 'None'. I suspect it is because the text editor is technically a child document. I'm not sure how to find child documents and check to see if text is selected. Can anyone help me? Thanks!

You could check if document.activeElement is a frame and has contentWindow property (document.activeElement.contentWindow != null) Then you could use contentWindow.document to get to the frame's inner document. Do this recursively until you find a frame with document.selection != null.
To illustrate this:
main.html:
<!DOCTYPE html>
<body>
<iframe src="iframe.html"></iframe>
</body>
iframe.html:
<!DOCTYPE html>
<head>
<script>
window.onload = function()
{
window.focus();
document.execCommand("SelectAll", false);
}
</script>
</head>
<body contentEditable="true">
This is editable
</body>
C#:
var text = this.wb.Document.InvokeScript("eval", new object[] {
"document.activeElement.contentWindow.document.selection.createRange().text" });
MessageBox.Show(text.ToString());
Shows:
This is editable

How do I detect multitouch actions in a Windows 8 metro app?

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...

How to allow tabs in an HTML Edit box?

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>