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.
Related
I asked something similar before, but I guess I wasn't really clear and that's maybe why my question was voted down twice. Let me see if I can make a point here.
I'm using Nivo Slider on a website I'm working on I'm and very glad with its behavior, especially because it resizes automatically when I'm using different viewport sizes. It works great on my monitor, it works great on my smartphone and it works great on my tablet. It resizes like magic!
I've read all the code and I couldn't find how Nivo Slider does it. No media queries or viewport metatags. I'm really interested in making my website resize the way Nivo Slider does.
Would love to hear from all of you who are familiar with Nivo Slider or who might give me a helping hand.
If necessary: http://dev7studios.com/plugins/nivo-slider
I like to use it like this, to get responsive without problems:
css
#nivoSlider, #nivoSlider img{width:100%;height:auto !important}
HTML:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoSlider" class="nivoSlider">
<img src="" />
</div>
</div>
Just figured it out: it uses width:100%. I didn't realize it could be that easy.
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
left:0;
margin-top:100px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
I'm trying to nest an iframe inside a div to fix the height of the iframe by fixing the height of the div.
My problem is the amount of the iframe that shows on a desktop browser is different from the amount that shows on a mobile browser (safari and chrome of iOS). It's like 3em on mobile does not equal 3em on desktop
Below is the div/iframe html:
<div name="iframe-div" style="height:3em; overflow:hidden; font-size:12px">
<iframe src="http://blog.mycitylives.com/2012/02/twn-links/" frameborder="0" scrolling="no" " width="90%" height="810px">
</iframe>
</div>
It's being displayed on the iframe src link above.
the 'em' unit is a relative measurement, literally referring to the width/height of the 'm' character for the font type and font size. so, i would expect the size of a mobile to naturally be smaller than a desktop. the css interal to the iframe page may be causing conflicts as well.
try using pixels or a percentage instead.
I'm having a slight issue with my width=100% css rule. On desktop browsers it's fine, however on mobile, it only uses 100% of the device width. So On a phone I'll end up have a div that spans 480px rather than across the entire horizontal screen.
Thanks for your help!
#intro {background-color: #1F1F1F; width: 100%; margin: auto; display:block;}
#intro-inner {height:450px; width:1105px; padding-top:50px;display:block;margin:0 auto;position:relative;}
On the HTML page, the intro inner div is inside the intro div. The background color is blue. On a desktop the site appears fine. However on a mobile after the devise width, ex. 480px, the #intro div background and it's color ends.
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)
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.