I have a WebView2 with a webpage opened. This webpage can change at any moment and will automatically update.
I need to monitor this page to capture the moment when it updates and execute a given method.
This is an example of the source code of the webpage:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-divProcessandoPagina" style="display: none; z-index: 1004; outline: 0px; height: auto; width: auto; top: 397px; left: 501px; padding: 0px; border: 0px; position: fixed;">
When the style "display" changes from "none" to "block", I have to execute a method in the application.
I've tried the NavigationStarted and NavigationCompleted events but the webpage updates just some parts of it's code, so, these events aren't triggered.
The problem is how can I monitor the webpage to when it changes, I can execute the method?
Related
i have created a video(mp4) with subtitle to play in all the browser.
Issue:
subtitle is not showing in safari browser alone but working fine in all other browser(chrome,firefox,ie)
Code:<video id="ScreenMediaPlayer" controls autoplay src="" type="video/mp4" runat="server">Your browser does not support the video tag.
</video>
<div id="divSubtitleholder" class="ShowScroll">
<div id="divSubtitle">
</div>
</div>
Css:
.ShowScroll
{
overflow-y: auto;
background-color: rgba(0,0,0, 0.5);
height: 75px;
top: 80%;
position: absolute;
font-size: 20px;
color: White;
text-align: center;
}
First of all test this on all your relevant browsers
http://iandevlin.github.io/mdn/video-player-with-captions/
You should see texts after clicking on the CC button and choosing a language
If that works check the sourcecode in this github repository
https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions
And here are some HTML5 video players
http://praegnanz.de/html5video/
All of the above was taken from this great article that you should read and try to apply to your case
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
This is an interesting one exercise for us, i think. I attached a link to an html page code. In fact I'm interested in one C#applet. I don't see it one a page, i only can see a scope of this applet. One field marked like "!important" but not used. I'm sure that it is doing something, but it needs to activate.
how can i check this applet or see what is it doing?
#myID
{
/*height: 0px !important;*/
height: 366px;
width: 800px;
}
#hiddenContainer
{
width: 800px;
position: relative;
margin: 0 auto;
}
<div id="hiddenContainer"><object id="myID" classid="http:CSharpApplet.dll#CSharpApplet.RocketControl"></object></div>
I have an asp placeholder object, within a div.
<div id="contentMenu" class="contentMenu">
<asp:PlaceHolder ID="plhMenu" runat="server">
</asp:PlaceHolder>
<div id="divMenuImage" class="menuImage">
<asp:Image ID="imgMenu" runat="server" ImageUrl="images/menu.gif" />
</div>
</div>
the div uses the following css:
.contentMenu
{
color: #ffffff;
left: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: absolute;
top: 85px;
width: 500px;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Items in the menu are added to the placeholder using calls such as:
plhMenu.Controls.Add(btnArrow);
plhMenu.Controls.Add(btnCategory);
Using the text-overflow property in the css is supposed to crop the text and show ellipses.
However, when the property "overflow : hidden" is in the css, all the menu disappears. Remove that propery and the menu appears, but the text-overflow doesn't work (it seems that overflow : hidden is required).
Any help in sorting this out would be very much appreciated as I have spent hours trying to figure out what is going on.
Thanks in advance.
You don't have a height on your container div, if you are adding items to the placeholder dynamically after the page is first drawn, then they might not cause the div to grow vertically.
You could try using overflow-x: hidden;?
I'm using the ConfirmButtonExtender on a Cancel button. Until recently I'd been running this code in Firefox and it was displaying just right (semi transparent background, simple modal popup).
However when I switched over to test this in IE, I get the generic looking 'javascript-style-alert-box" instead.
The ModalPopupExtender seems to work in both browsers correctly and I'm guessing that's because you have more control over the CSS with that (not sure though).
Have others ran into this issue with the ConfirmButtonExtender? I just wanted to check to see if there is a fix before I switch over to the ModalPopupExtender instead.
<div class="base-container-controls-100pct">
<asp:Button ID="UxCancel" runat="server" Text="Cancel" CssClass="button-sm" OnClick="UxCancelClick" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="UxCancel">
</asp:ConfirmButtonExtender>
</div>
CSS
.button, .button-sm, .button-ms, .button-md, .button-lg, .button-xl, .button-disabled, .button-status-close,
.button-grid, .button-grid-sm, .button-grid-ms, .button-grid-md, .button-grid-lg, .button-grid-xl
{
margin: 2px;
background-color: #0088C2;
color: #f2f2f2;
border-color: #DDDDDD #AAAAAA #AAAAAA #DDDDDD;
border-width: 1px;
border-style: none;
font-size: .8em;
height: 30px;
padding: 2px 12px 2px 12px;
cursor: pointer;
-moz-user-select: none;
}
.button-grid, .button-grid-sm, .button-grid-ms, .button-grid-md, .button-grid-lg, .button-grid-xl
{
height: 25px;
font-size: .8em;
}
.button-sm, .button-grid-sm
{
width: 75px;
}
.base-container-controls-100pct
{
width: 100%;
float: left;
padding: 0px;
margin: 0px;
border: none;
height: auto;
}
If it uses the standard Javascript window.confirm() (which is sounds like it does) then you have no control over the way it looks, as that is built into the browser itself. Firefox and Chrome (maybe others) changed the look of that from old popup javascript style alert box to a little nicer style a couple years ago. IE is still using the old standard style which you are seeing.
Sounds like you'll have to make a switch if you want to have more control over the look.
i am using "progid:DXImageTransform.Microsoft.AlphaImageLoader" to display iamge in div
My code is:
<body class="style_page" style="margin: 0px; background: white;" onload="onLoad()"
onunload="onUnload()" onresize="onResize()">
<div id="mediaPlayer" style="position: absolute; visibility: hidden;">
</div>
<div id="first" style="position: absolute; left: 50%; top: 0px; width: 800px; height: 600px;
font-size: 10pt; background: white;">
<div class="placeholder" style="left: 0%; top: 0%; width: 100%; height: 166%;">
<div class="outline" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='output6.jpg');">
</div>
</div>
</div>
It works fine in IE8 but doesn't work in Mozilla and google chrome
Plz help
Thanks
Mozilla, Opera, G.Chrome and other browsers doesn't support Microsoft filters for transform text and images(controls). I think that every brower producer use diferent method.
Try to find help on their sites, and you must write javascript functions to recognize browser whos load page you developed.