WebDialogs - The Lost Manual — R1 09 November 2009

thomthom

Of more interest now... how to invalidate the maximise option (i.e. to keep the WebDialog panel at the original specified size) since max_width and max_height don't perform this function. Has anyone a suggestion?

By setting the resize argument of WebDialog.new.

Dan Rathbun

@marksup said:

..., but as a direct result my <body scroll='no'> statement became ignored and a vertical scrollbar appeared. This was solved by using <body style='overflow-y:hidden'> instead.

@marksup said:

I also lost the use of 1.chr as the first space for textarea text - since 32.chr (the standard space) had always been ignored (except on a MAC!).

(a)

You MIGHT be able to use named entities (NE) or numeric character references (NCR), see:

[ISO Latin-1 Character Set](http://msdn.microsoft.com/en-us/library/aa752007(v)
[Additional Named Entities for HTML](http://msdn.microsoft.com/en-us/library/aa752008(v)
[Character Entities for Special Symbols](http://msdn.microsoft.com/en-us/library/ms537499(v)

Their use may depend upon if the textArea object's canHaveHTML property is true
nbsp = ' ' # non-breaking space
or
nbsp = ' ' # non-breaking space
note: 32.chr is ' '

If you need more than 1 space (say 4 spaces,) do this to append spaces to your html:
html = '' # start with empty html string html << nbsp * 4 html << textline
.. etc ... then:
wd.execute_script("document.getElementbyID('myTextArea').innerText='#{html}';")

or perhaps use methods: [insertAdjacentHTML](http://msdn.microsoft.com/en-us/library/ms536452(v) or [insertAdjacentText](http://msdn.microsoft.com/en-us/library/ms536453(v)

(b)

Or perhaps you can use escaped characters, see:
[Special Characters (Windows Scripting - JScript)](http://msdn.microsoft.com/en-us/library/2yfce773(v)

(c)

The last alternative is to use padding or margin properties for your textArea object:

[marginLeft](http://msdn.microsoft.com/en-us/library/ms530804(v)* [paddingLeft](http://msdn.microsoft.com/en-us/library/ms530835(v)

Dan Rathbun

@marksup said:

I became alarmed at the significant differences in the appearance of my WebDialogs depending on the active browser (IE9, IE8, Chrome or Firefox) and so, based on the excellent advice above, added the following to my HTML...

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
> 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
> <html xmlns='http://www.w3.org/1999/xhtml' xml;lang='en'><head><meta http-equiv='X-UA-Compatible' content='IE=8; charset=iso-8859-1'/></head>

This did wonders for the consistency, but as a direct result my <body scroll='no'> statement became ignored and a vertical scrollbar appeared. This was solved by using <body style='overflow-y:hidden'> instead.

@unknownuser said:

(http://msdn.microsoft.com/en-us/library/ms535205(v)":rkw7axk6]In standards-compliant mode, the html element represents the entire surface onto which a document's contents can be rendered. When the !DOCTYPE declaration does not specify standards-compliant mode, and with earlier versions of Internet Explorer [< IE6,] the body object represents the entire surface onto which a document's contents can be rendered.

... so when using standards-compliant mode, you can use:
<html scroll='no'>
.. or if you prefer to use the overflow-y property:

@unknownuser said:

(http://msdn.microsoft.com/en-us/library/ms530829(v)":rkw7axk6]With Microsoft Internet Explorer 6 and later, when you use the !DOCTYPE declaration to specify standards-compliant mode, this property applies to the html object.

You can handle both situations by creating a STYLE tag (or load a separate .css file,) and apply it to both the HTML and BODY elements. here's a snippet:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml;lang='en'>
  <HEAD>
    <META http-equiv='X-UA-Compatible' content='IE=8'/>
    <MEAT http-equiv='Content-Type' content='text/xhtml; charset=iso-8859-1'/>
    <META http-equiv='MSThemeCompatible' content='Yes'>
    <STYLE>
      html,body { overflow-y ; hidden; }
    </STYLE>
  </HEAD>
  <BODY>
    <!-- your body here -->
  </BODY>
</HTML>

Dan Rathbun

@thomthom said:

Note! Because WebDialogs are embedded browser controls they behave differently than a normal website on Windows. Internet Explorer 8, as a browser, will default to Super Standard mode when you use Strict DOCTYPE. But when embedded as a WebBrowser object it will default to IE7 compatibility mode.

Yes I have noticed this... I used a Strict DOCTYPE, and set the compatibilty mode to "EmulateIE8", but %(#8000BF)[document.documentMode] still returns "7". (dang it!)

@thomthom said:

Microsoft says that you have to set a registry key for the application that embeds the WebBrowser to make it use IE8 rendering mode.

I cannot find reference to this registry key... do you still have a link ?

@thomthom said:

But of course we can't do that for Sketchup since some plugins might rely on the IE7 mode.

I CAN (and need to,) because I am writing a subclass that will expect Strict mode, with the highest compatibility under MSIE, so as to take advantage of CSS3 and HTML5, if available.

@thomthom said:

But what you can do is include the meta tag <meta http-equiv="X-UA-Compatible" content="IE=8"/>. Note that this meta tag should be placed at the top of the <head> tag.

Beware that the user agent string will still report MSIE 7.0 for embedded WebBrowsers - even though you use IE8 mode. This differs from when you test the same HTML in the normal web browser where it returns MSIE 8.0. To check the rendering mode: document.documentMode.

Even using this tag along with a proper DOCTYPE tag, does not run the WebDialog in IE8 mode. Certain CSS 2.1 properties (as well as Transitional CSS3 properties available to IE8 and higher,) are not being honored.

The min-width, max-width, min-height and max-height CSS properties are the ones I am wanting to use, mostly that are not honored.

thomthom

Got some sample code there Dan?
I have Edge mode working in my dialogs by just adding the meta tag and valid markup. Using the latest HTML5 and CSS3 features of IE10.

Dan Rathbun

I think the major problem is that the "%WINDIR%/system32/shdocvw.DLL" on my machine is old. It's version: 6.0.2900.5512

But on mother's XP machine (that has automatic updates ON,) it's newer, version: 6.0.2900.5770
(EDIT: Looks like this machine had 963027 applied, and mine did not.)

.. so I missed an update, no doubt. (I'm using the mskbfiles site to try and track down updates I need to apply.)

Comparing to IE9/10 does not help my XP machines. I'm dealing with IE8, right now.

thomthom

Not a major version difference though, just a revision diff.

Jim

Thomthom, is the manual available as a Google doc, or possible in a dvcs repo?

thomthom

@jim said:

Thomthom, is the manual available as a Google doc, or possible in a dvcs repo?

I have been writing up a new one. Initially I was writing up for my blog, but it does make more sense as a Google Doc.

"Dvsc"?

Jim

@thomthom said:

"Dvsc"?

As a github repo, using github pages to host the doc as a web site.

thomthom

Hm.. using the Wiki feature of a GitHub repo. ...and I'd think there are packages that can convert Markdown text into a document like PDF. That would be nice.

And it could be community maintained.

Jim

@thomthom said:

Hm.. using the Wiki feature of a GitHub repo

I was thinking more of using the pages that each repo has. For example, http://sketchup.github.com/sketchup-stl/

GitHub Pages

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHub Pages (pages.github.com)

Sort of like free hosting by github.

And it could be community maintained.

thomthom

hm.. interesting. Wasn't aware of this Pages feature. Nice.