I'm developing Silverlight OOB application and I need to show web pages in it - I would like to do it through out WebBrowser control, but during page load I get lots of MessageBoxes with JavaScript errors.
Is there a way of hiding those MessageBoxes?
In winform WebBrowser control there is ScriptErrorsSuppressed property that can be used, but in SL there isn't.
I would be appreciated for any help.
Try turning off script debugging in the internet explorers advanced settings. Ultimately the control uses MSHTML to deliver the rendering, which in turn gets many of it settings from IE.
Today I've returned to this problem in my app and I was able to resolve it somehow. Because I need to show only a pages - without much user interaction on those pages - I solve it this way.
In code I create a html with iframe with attribute security="restricted" and then I inject url to this iFrame.
My code looks like this:
var html = new StringBuilder(#"<html xmlns=""http://www.w3.org/1999/xhtml"" lang=""EN"">
<head>
<meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
<title>{#pageTitle}</title>
<style type=""text/css"">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
</head>
<body>
<iframe id=""tree"" name=""tree"" security=""restricted"" src=""{#PageLink}"" frameborder=""0"" marginheight=""0"" marginwidth=""0"" width=""100%"" height=""100%"" scrolling=""auto""></iframe>
</body>
</html>");
html.Replace("{#pageTitle}", Title);
html.Replace("{#PageLink}", uri.ToString());
and then I'm using NavigateToString method of WebBrowser to load my html to it.
P.S. I've added this as an answer to accept this question.
Related
I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.
Here's an example.
Web version
Mobile version
In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.
Mobile version with 90vh
Of course now it works, but looks ugly and isn't responsive. How can I fix this?
I have followed this example, but it doesn't seem to help.
I fixed this. In case this same problem occurs to someone else in the future, here is my solution.
When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:
Rendering Map component
<div className="map-wrapper">
<Map/>
</div>
CSS
.map-wrapper {
width: 100%;
height: 100%;
position: fixed;
}
.map {
width: 100%;
height: 100%;
position: relative;
}
I designed a new site simple enough, with a top slider and menus. It seems that when I view the site via PC all is fine and in place.
When I view the site from a mobile phone (Android) it seems that the top slider is not centered.
The website address is: http://www.donoussa.gr
Thank you in advance.
There is a styling conflict where Bootstrap applies the following CSS:
.row {
margin-right: -15px;
}
I suggest overriding the CSS as follows:
.row {
margin-left: -15px;
margin-right: -15px;
}
You can override the CSS in Helix as per https://joomla.stackexchange.com/a/14219/120 or similar.
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
Is there any way to remove big control window from embedded mapsengine iframe?
Lets say im embedding 640x480 iframe of mapsengine and 1/4 of the screen takes mapsengine layer controls.
<iframe src="http://mapsengine.google.com/map/view?mid=z-CXoJOwaOdI.k77h0_UeoKiw" width="640" height="480"></iframe>
Super simple solution
Set the width at 517px or smaller. The control panel will disappear ... on desktop. It will magically appear on mobile.
Slightly More Complicated Solution
The CSS
<style>
#mapsengine-box-outer {overflow: hidden;}
#mapsengine-box-inner {
overflow: hidden;
width:590px;
height:590px;
border:5px solid #998;
border-radius:10px;
}
#mapsengine {margin: -30px 0 0 -350px;}
</style>
The HTML
<div id="mapsengine-box-outer">
<div id="mapsengine-box-inner">
<iframe id="mapsengine" width="1285" height="630"
src="https://mapsengine.google.com/map/embed?mid=*******">
</iframe>
</div>
</div>
I put up a page about this (including a mobile solution) on my site Maps Engine Manipulation – Removing iframe Controls (featureListPanel) and here's a CodePen to play with.
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)