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.
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'm a bit 'OCD' sometimes so this is really bugging me.
http://music.george-b.co.uk is the site I am working on.
I have two divs. Both contain some text (Formatted the same apart from colour) and an iframe. The problem is the second divs text appears higher above the iframe than the other div. The code for the two divs is this:
Div 1 (Normal spacing)
<div class="omot">
<h1>One Mic One Take</h1>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/287376712&color=00cc11&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Div 2 (Incorrect spacing)
<div class="xprtd">
<h5>XPORTED</h5>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/295617923&color=ff0000&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Although one text is h1 and the other h5 they are formatted identically with css (apart form colour). I really would like the spacing to be the same. If someone could help me fix this minor but really annoying issue I would be very grateful.
Thanks
The second block of text (h5) has different margin values than the first one (h1). The h1 has margin before and after of 0.67em while the h5 has margin before and after of 1.67em. You can examine this by inspecting the elements through browser dev tools.
One solution is to manually add css rules so that the margins are the same. Or change the h5 to a h1 or vice-versa.
We need to check your CSS too, the issue maybe there. Nevertheless, you should try using margin-top:<<a negative value here>> ex: margin-top:-15px;
Try that and feedback
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 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');