Closeable, moveable Popup Form from external URL

Add-in Express™ Support Service
That's what is more important than anything else

Closeable, moveable Popup Form from external URL
 
czetsuya




Posts: 44
Joined: 2011-05-01
Hi,

I managed to create a pop up form by manually adding element and attributes to IWebBrowser2->IHTMLDocument2.

Is there other simpler way, where I could add closeable and moveable feature to the popup form?

Thanks,
czetsuya
Posted 02 May, 2011 04:33:47 Top
Sergey Grischenko


Add-in Express team


Posts: 7224
Joined: 2004-07-05
Hi Czetsuya,

What exactly the form do you mean? Please show me a screenshot of the form.
Posted 02 May, 2011 05:17:44 Top
czetsuya




Posts: 44
Joined: 2011-05-01
Hi Sergey,

It's like this, I've created a div element and add an html content to it. Is it possible to make the moveableDiv moveable and closeable?


var formElement = HTMLDocument.createElement("div");
formElement.innerHTML = <ht ml><head></head><body>Hello World</body></html>;
formElement.style.setAttribute("id", "moveableDiv", 0);
formElement.style.setAttribute("position", "absolute", 0);
formElement.style.setAttribute("top", "20%", 0);
formElement.style.setAttribute("left", "30%", 0);
formElement.style.setAttribute("z-index", "4457165", 0);
doc2.body.insertAdjacentHTML("beforeBegin", formElement.outerHTML);


Is there an easier way to do this? Because I tried adding style element but it seems it doesn't work got: 0x800A0258 error.

Thanks,
czetsuya
Posted 02 May, 2011 05:56:54 Top
Sergey Grischenko


Add-in Express team


Posts: 7224
Joined: 2004-07-05
Another way is to inject the same script into a web page.
Posted 02 May, 2011 06:11:48 Top
czetsuya




Posts: 44
Joined: 2011-05-01
Hi Sergey,

Can you point me to an example of that?

Thanks,
czetsuya
Posted 02 May, 2011 06:16:18 Top
Sergey Grischenko


Add-in Express team


Posts: 7224
Joined: 2004-07-05
I don't have such an example. But you can use the code below to inject a script into a web page:

mshtml.IHTMLWindow2 window = HTMLDocument.parentWindow;


mshtml.HTMLDocument doc = this.HTMLDocument;
if (doc != null)
{

string js = "function ShowAlert(){alert(\"" + "Hello" + "\");}";

int j = 0;
mshtml.IHTMLElementCollection scriptCollection = doc.getElementsByTagName("script");
if (scriptCollection != null)
{
for (int i = 0; i < scriptCollection.length; i++)
{
mshtml.IHTMLScriptElement scriptElement = scriptCollection.item(i, i) as mshtml.IHTMLScriptElement;

if (scriptElement != null)
{
if (scriptElement.text != null)
{
if (scriptElement.text == (@"" + js + ""))
{
j++;
}
}
Marshal.ReleaseComObject(scriptElement);
}
}
Marshal.ReleaseComObject(scriptCollection);
}
if (j == 0)
{
mshtml.IHTMLElement headElem = (mshtml.IHTMLElement)((mshtml.IHTMLElementCollection)doc.all.tags("head")).item(null, 0);
if (headElem != null)
{
mshtml.IHTMLScriptElement scriptElem = (mshtml.IHTMLScriptElement)doc.createElement("script");
scriptElem.type = @"text/javascript";
scriptElem.text = @"" + js + "";
((mshtml.HTMLHeadElementClass)headElem).appendChild((mshtml.IHTMLDOMNode)scriptElem);

window.execScript("ShowAlert()", null);
}
}
}
Posted 02 May, 2011 06:24:32 Top
czetsuya




Posts: 44
Joined: 2011-05-01
Hi Sergey,

Is it possible to do the same approach with IHTMLStyleElement? I noticed that it doesn't have text property. I want to also inject style tag dynamically.

**Nevermind, I already figure out a way to do it.
Just use this method:
var styleSheet = doc2.createStyleSheet("", 0);

Thanks,
czetsuya
Posted 02 May, 2011 06:56:12 Top
Sergey Grischenko


Add-in Express team


Posts: 7224
Joined: 2004-07-05
Thank you for sharing your solution.
Posted 02 May, 2011 07:46:34 Top
czetsuya




Posts: 44
Joined: 2011-05-01
Hi Sergey,

While the above solution works on IE8, after several testing on IE7 I've verified it's not working.

Code is like this:


var doc2 = HTMLDocument;
var element = doc2.createElement("div");
element.innerHTML = "Content Html";
element.setAttribute("id", "popup", 0);

doc2.body.insertAdjacentHTML("afterBegin", element.outerHTML);
doc2.close();

var headElem = (IHTMLElement)(doc2.getElementsByTagName("head").item(null, 0));
if (headElem != null)
{
    var styleSheet = doc2.createStyleSheet("", 0);
    styleSheet.cssText = @".dragme { cursor: move; }";    
    
    const string js = "Javascript Here";

    var scriptElem = (IHTMLScriptElement)doc2.createElement("script");
    scriptElem.type = @"text/javascript";
    scriptElem.text = @"" + js + "";
    ((HTMLHeadElementClass)headElem).appendChild((IHTMLDOMNode)scriptElem);
}

//Javascript code is:
var ie = document.all;
var screenWidth = screen.width;
var screenHeight = screen.height;

var isDrag = false;
var x, y;
var dobj;

function moveMouse( e ) {
  if( isDrag ) {
    dobj.style.left = tx + event.clientX - x;
    dobj.style.top  = ty + event.clientY - y;
    return false;
  }
}

function selectMouse( e ) {
  var fobj       = event.srcElement;
  var topelement = "BODY";
	
  while (fobj.tagName != topelement && fobj.className != "dragMe") {
    fobj = fobj.parentElement;
  }
  
  if (fobj.className=="dragMe") {
    isDrag = true;
    dobj = document.getElementById("popup");	
    
	tx = parseInt(dobj.offsetLeft);		
    ty = parseInt(dobj.offsetTop);
	
    x = event.clientX;
    y = event.clientY;
    document.onm ousemove=moveMouse;
    return false;
  }
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

document.onm ousedown=selectMouse;
document.onm ouseup=new Function("isDrag=false");


It should make the div draggable and has a close button and working fine on IE8. But for IE7 it can't be drag and if close button is press it generates null exception.

Any idea?

Thanks,
czetsuya
Posted 15 May, 2011 21:47:50 Top
Sergey Grischenko


Add-in Express team


Posts: 7224
Joined: 2004-07-05
Hi Czetsuya,

I have never run into such a problem before. Probably IE7 doesn't support the draggable div. Please try to google this issue.
Posted 16 May, 2011 08:25:28 Top