We are developing a website using MVC 5. We would like to automatically simulate a keypress (F11) when one of the views loads. This must happen automatically on view load.
The whole purpose of this is to make the browser fullscreen.
So far we have the following code bellow which works when testing locally but when we release it live to Azure, it does not work.
[DllImport("user32.dll")]
public static extern int SetForegroundWindow(IntPtr hWnd);
[STAThread]
public ActionResult StudentView()
{
while (true)
{
Process[] processes = Process.GetProcessesByName("chrome");
foreach (Process proc in processes)
{
SetForegroundWindow(proc.MainWindowHandle);
SendKeys.SendWait("{F11}");
}
Thread.Sleep(5000);
return View();
}
}
We have also tried some of the solutions in this question but again it does not work when the website is released to live. Simulating Key Press c#
Please assist us to make the browser full screen when view loads. Thanks in advance.
I am afraid you'll need a different approach. Not all browsers will use F11 to go full screen.
Importing the user32.dll, and simulating the key-press will only work, if executed on a windows client - locally, not from azure. There are some full screen options for browsers - but I am not sure if they fit you case. Video playback components are able to request full screen; you might want to dig into that.
Otherwise, if you target a specific OS or browser, you can create a custom client side app or plugin.
As for the javascript part, you can find an example here: https://www.w3schools.com/howto/howto_js_fullscreen.asp, but I am not sure if it will fit you requirements.
Here's one of the examples:
source: https://www.w3schools.com/howto/howto_js_fullscreen.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
background-color: yellow;
}
/* Firefox syntax */
:-moz-full-screen {
background-color: yellow;
}
/* IE/Edge syntax */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
/* Style the button */
button {
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.</p>
</body>
</html>
Related
I'm trying to generate HTML page ( C# Razor View ) that will be converted to PDF ( using wkhtmltopdf )and printed on pre-printed stationery.
My problems is, that the pre-printed stationery has a header ( easy )
and tear-off part at the bottom (4cm) which should be blank until the very last page where some additional information is printed.
The whole invoice is being generated as
<table><thead></thead><tbody></tbody></table>
So how can I set margin of X on every page except the last printed
and on that last printed page instead of margin actually print something?
Tried to use with last-child selector but that did not work.
Perhaps some other solution will be more suitable for this using .Net Core ( some linux apps can be used as well )?
You can use the CSS #page rule to specify the page margins. You can also use this to specify additional margins for left & right-hand pages (to account for binding) and for the first page but not, it would seem, for the last page!
/* Default left & right is 2cm, top & bottom margin is 4cm */
#page { margin: 4cm 2cm }
/* First page, 10 cm margin on top */
#page :first {
margin-top: 10cm;
}
/* Left pages, a wider margin on the left */
#page :left {
margin-left: 3cm;
margin-right: 2cm;
}
/* Right pages, a wider margin on the right */
#page :right {
margin-left: 2cm;
margin-right: 3cm;
}
Further reading: https://www.w3.org/TR/CSS21/page.html#page-box
Finally I got to the bottom of that.
As the top of the page should not be a problem ( can be handled the same way as well , but the table thead is another option )
My solution is:
wkhtmltopdf test.html --footer-html footer.html output.pdf
And the whole trick is withing the footer.html file:
<!DOCTYPE html>
<html>
<head>
<script>
var mainHeader = "test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>";
var secondHeader = "OOOOOOOOOOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPPOPO<br>";
function selectHeader() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = decodeURIComponent(z[1]);
}
if (vars["page"] == vars['topage']) {
document.getElementById('main').innerHTML = secondHeader;
} else {
document.getElementById('main').innerHTML = mainHeader;
}
if (vars["page"] == vars['frompage']) {
document.getElementById('test').innerHTML = secondHeader;
}
}
</script>
</head>
<body onload="selectHeader()">
<div style="min-height: 6cm; background-color: aqua; max-height: 6cm; overflow:visible;">
<div id="main" onload="selectHeader()">
</div>
</div>
</body>
</html>
ps.
Read somewhere that without !DOCTYPE html it might not work.
Thanks for all the help
I am having trouble finding an iframe. I want to switch to this iframe then click on an element within it.
I have tried finding the iframe using Id, Xpath, TagName, and CssSelector but my test times out while looking for the element each time.
This is the iframe as it appears in the page source:
<div xmlns="http://www.w3.org/1999/xhtml" id="dashboardView" style="display: block;">
<iframe id="dashboardViewFrame" border="0" scrolling="no" frameborder="0"
style="visibility: visible; height: 607px; width: 1280px; background-color: transparent;"
src="HtmlViewer.ashx?Dd_ContentId=6a8a44ae-2bd5-4f3c-8583-e777279ad4f2"></iframe>
</div>
<iframe xmlns="http://www.w3.org/1999/xhtml" id="dashboardViewFrame" border="0" scrolling="no"
frameborder="0" style="visibility: visible; height: 607px; width: 1280px; background-color:
transparent;" src="HtmlViewer.ashx?Dd_ContentId=6a8a44ae-2bd5-4f3c-8583-e777279ad4f2"></iframe>
Here is my current code:
public static bool IsAt
{
get
{
try
{
var dashboardiFrame = Driver.Instance.FindElement(By.Id("dashboardViewFrame"));
//todo switch to iframe
//todo find element within iframe
return true;
}
catch
{
return false;
}
}
}
Can someone please suggest a way to find the iframe and switch to it?
some times you have to sleep around 5 second till page load completely then find frame.
try this
thread.sleep(50000);
IwebElement Frame = Driver.SwitchTo().Frame("id of the frame");
//then any element inside frame should get by this line
Frame.FindElement(By.id("ID of element inside frame");
The main problem was that my test opened a new window, but my test was looking for elements on the old window. I resolved that by switching to the new page using:
Driver.Instance.SwitchTo().Window(Driver.Instance.WindowHandles.Last());
Then I could switch to the iframe also by also using SwitchTo() as shown below:
public static bool IsAt
{
get
{
try
{
Driver.Instance.SwitchTo().Window(Driver.Instance.WindowHandles.Last());
var DBViFrame = Driver.Instance.FindElement(By.Id("dashboardViewFrame"));
Driver.Instance.SwitchTo().Frame(DBViFrame);
var dataEntryButton = Driver.Instance.FindElement(By.Id("HyperlinkDataEntry"));
dataEntryButton.Click();
return true;
}
catch(Exception ex)
{
return false;
}
}
}
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...
I want to print from aspx page (body part {}). But I don't want to open print dialog box. i have already installed more then one printer are in my computer. But when i click on print button its directly print in my default printer. How can i do it or is it possible to do it in web application?
Print is handled by the browser, not your ASPX page. So you can't do this.
You can't do that for all browsers. Printing is client side, and you can't pass the print dialog.
There is a old script, but it doesn't work anythere exept IE and Netscape. And it is very old:
function printit() {
if ((navigator.appName == "Netscape")) {
window.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, -1); WebBrowser1.outerHTML = "";
}
}
yes you can, but you'll need to use a third party class\assembly that does it like
pdf.sharp
or just write one yourself...
add iframe
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>
and use follwing javascript function
function printform() {
var content = document.getElementById('<%= PrintDivID.ClientID %>').innerHTML;
var pri = document.getElementById("ifmcontentstoprint").contentWindow;
pri.document.open();
pri.document.write(content);
pri.document.close();
pri.focus();
pri.print();
}
input[disabled='disabled']
{
background-color:#FFFBF0;
color: #28B51D;
}
I am using the following code, but it doesn't work in IE.
It works in the rest of the Browsers.
Since you tagged your question as javascript, here is my advice for IE : include an ie-only script with an ie-triggering html comments, that adds a ie-disabled class to every disabled input. If the status of inputs can change after the initial page load, add a timed observer to your page that sets the class properly.
input[disabled], input.ie-disabled
{
background-color:#FFFBF0;
color: #28B51D;
}
javascript file, included with conditional comment:
function checkDisabled() {
var inputs = document.getElementsByTagName('INPUT');
for(var i=0, l=inputs.length; i<l; i++) {
if(inputs[i].disabled) {
if(inputs[i].className.indexOf('ie-disabled')==-1)
inputs[i].className = inputs[i].className+' ie-disabled';
} else {
inputs[i].className = inputs[i].className.replace('ie-disabled', '');
}
}
}
setInterval(checkDisabled, 1000); // check every second
Here is a test (for IE). Note that the color css attribute is ignored by IE for disabled inputs. If you really need a green text, use readonly instead of disabled.