I have the following bit of code I am using in order to show a map on my website:
<div class="embed-container maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d18730122.383938454!2d-7.362368!3d55.03634899999871!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x485fe22e4b6ff5d7%3A0xf32e6f9c480d1e1c!2sDee.ie+Ltd!5e0!3m2!1sen!2sca!4v1409609045175" width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>
The problem is, the marker is way off to the left and is not centered. Does this have something to do with the width being 100%? If so, how do I correct this?
EDIT:
What I noticed, is I have 2 monitors hooked up, could this be trying to center the map between both monitors?? It is technically perfectly centered if I look at it from that point of view.
I have resolved this issue by using the following jQuery:
$('.maps iframe').css('width', $(window).width()+'px');
Related
I'm trying to embed a Power BI report to my website in Wordpress using the HTML tool. Since when using the embedding version of the report of Power Bi, a button to share the report appears (and it really can't in this case), I found a solution here on how to "cut" the HTML element so that the down part wouldn't appear. I'm saying this just to explain why maybe the code down can look more complicated than needed. My problem now is that I'm trying to center this element on the page, but I don't know why I can't make it work in all PCs, since in mine it appears centered but in others that I tried it didn't.
This is the code that I have until now
<div id="content">
<div class="row-fluid">
<div class="aligncenter">
<div style="height:500px;width:400px">
<iframe width="600" height="400" src="LinkOfReport" frameborder="0" style="position: absolute; clip:rect(0px,1000px,344px,0px);
; zoom:162%;allowFullScreen=" true=""></iframe>
</div>
</div>
</div></div>
I don't understand much of HTML or CSS so if someone could explain me what I'm doing wrong I would appreciate it a lot!
I managed to understand what was happening. Basically, I copied part of the code from the question I mentioned in the post, since I needed to crop the HTML element. I understood that a part of it was forcing the element to start more to the left (the part of <div style="height:500px;width:400px">) and another one to keep the element fixed in the same place, independently of the size of the window (position: absolute)
I also changed the type of clip I was using, since from what I read, clip property is exclusive to absolutely positioned elements. So now I'm using clip-path property.
Summing up, this is my final code:
<div class="row-fluid">
<div class="aligncenter">
<iframe width="600" height="400" src="https://app.powerbi.com/view?r=eyJrIjoiYjE4ZDExNGQtNjgwYS00OTUwLTkzYjYtNjM1YjNjMGJkMjU4IiwidCI6ImU0YmQ2OWZmLWU2ZjctNGMyZS1iMjQ3LTQxYjU0YmEyNDkwZSIsImMiOjh9&pageName=ReportSection" frameborder="0" style="clip-path: inset(0 0 38px 0); zoom:162%"> </iframe>
</div>
</div>
Hope these explanations help anyone that is trying to start in HTML and CSS
I'm trying to make the scroll disappear to the iframe. The iframe came from another website domain. and the iframe is dynamic so every time it has a different content/output.
**Addition:**so the iframe is dynamic /product{any number could be here} that's why it's hard to add a fixed height.
also the height of for example URL/product1 = 2000px, URL/product2 = 2300px.
I did try this code:
<div style="overflow:hidden;>
<iframe src="https://www.example.com/product1"></iframe>
</div>
or
<iframe src="https://www.example.com/product1" style="overflow:hidden;"></iframe>
both doesn't work.
Also, I did try to use scrolling="no" attribute but that doesn't load the whole content.
I tried getting the height of iframe but it's throwing me a cross-origin frame error since its different domain.
Maybe anyone experienced this already? Thank you.
Work Properly. Its work for me.
<iframe src="<<URL>>" height="500" width="600" scrolling="no" style="overflow: hidden"></iframe>
I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
I am trying to show a particular location by embedding a Google map to my site using Maps Engine Lite. However I get this black bar (with the text Untitled Map as shown below) at the top of the map which I need to get rid of. Any ideas how to proceed with this -
There are no implemented options to hide the bar, but it could be done via CSS.
example assuming a desired iframe-size of 580x160
<div style="height:160px;display:inline-block;overflow:hidden;border:1px solid #000">
<iframe style="position:relative;top:-27px; border:none;"
src="/path/to/embedmap"
width="580" height="187"></iframe>
</div>
The iframe is wrapped in a div with a height set to the desired height. The height of the iframe is set to the desired height +27px . Via top:-27px; the iframe will be moved 27px upwards, the bar disappears.
Make a frame by changing the start of the cut.
I want to insert a html code but make an indentation so that it appears only part of the picture.
I use the code below but I want to change the start point of the cropping frame. When I use this code it starts the cut in point 0.0 and would like to start at a different point.
Code:
<div style="width:430px; height:300px; overflow:hidden;">
<iframe width="530" height="400" frameborder="0" scrolling="no" src="https://skydrive.live.com/embed?cid…
</div>
I don't know if I understand you correctly, but it seems that you only want to show a part on an image, right? Maybe the CSS-property "clip" can help you.