My webapp uses a
<fb:login-button>
which is XFBML (eXtended Facebook Markup Language) and is rendered to:
<fb:login-button login_text="" class=" fb_iframe_widget" fb-xfbml-state="parsed" fb-iframe-plugin-query="app_id=[my app ID]&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&><span style="vertical-align: top; width: 0px; height: 0px;"><iframe name="f1987cba84" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.facebook.com/plugins/login_button.php?app_id=[my app ID]&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df15dab5c84%26domain%3Dmyapp.com%26origin%3Dhttp%253A%252F%252Fmyapp.com%252Ff1e9e1d5b8%26relation%3Dparent.parent&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&size=xlarge" style="border: none; visibility: hidden;"></iframe></span></fb:login-button>"
For some reason, the button contains a 1000 x 1000 px iframe. Of course, this doesn't actually display as 1000 x 1000 pixels on the webpage, but it's enough to confuse all browsers into temporarily displaying a scrollbar while the button is rendering, on page load.
Is there any way to stop this scrollbar flickering, aside from the hack of hiding the scrollbar in CSS using overflow:hidden and then setting document.body.style.overflow = 'visible'; in Javascript once the button is finished rendering?
If you don't need a 1000 pixel iframe, you can always just specify a different width using CSS.
http://jsfiddle.net/jjordanca/6UEHp/
HTML:
<p>Hi.</p>
<iframe width="1000px" height="300px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.microsoft.com"></iframe>
<p>Bye.</p>
CSS:
iframe {position: relative; width: 500px;}
Notice that the CSS width specification overrides the inline width specification.
Alternatively you could add the following CSS to the parent div (the one with class="fb-like"):
width: 48px; height: 20px; overflow: hidden; text-align: left
Related
I'm having a problem with my coding on my website. Basically I've inserted the following html code on the page which is my section (section-743):
> <div>
> <div>
> <iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0"
> allowfullscreen></iframe>
and then the following CSS to set the video into the static image:
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div iframe {
body.home
box-sizing: border-box;
background: url(http://www.ildottoredellepiante.it/formazione/wp-content/uploads/2017/05/laptop-png-6754.png) center center no-repeat;
background-size: contain;
padding: 1% 17.5% 19.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How can I tell in CSS to show the image and video ONLY in the "section-743" of the website? Rather than like now is showing everywhere in blog post and other widget where it shouldn't show.
I've tried to add:
.section-743
and
#section-743
at the beginning of the CSS but unfortunately it didn't work. Any idea how can I fix this? Basically the laptop image should show ONLY in a parallax section of my website rather than anywhere else.
I look forward to hearing from you.
Thank you for your help in advance! It's a lot appreciated!
Take a look at this article: https://www.w3schools.com/css/css_syntax.asp
What you're looking for are ID and class selectors. These, however, are not magic, and require you to assign them to elements on your page.
I added IDs to the DIV tags from your example (and I added the closing DIV tags):
<div id="outerDiv">
<div id="innerDiv">
<iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now, you can reference the DIV tags in your CSS like this:
#outerDiv {
/* outer div style */
}
#innerDiv {
/* outer div style */
}
#innerDiv iframe {
/* iframe inside innerDiv style */
}
Notice that last one, which allows you to reference the IFRAME that is inside innerDiv.
Keep in mind that your IDs must be unique for the entire page.
I'm looking to lock down and iframe that I currently have.
I want it so that anyone can hover over it and the pointer finger will appear, but it just disables all abilities to click within it. I've tried using the pointer-events: none; css option but that disables everything.
I cannot seem to find anywhere online that would make this possible with an iframe, any ideas?
A straightforward solution could be to use a div as a catcher on top of you iframe which has CSS property cursor: pointer;, this will emulate the pointer effect and you will block all interactions within the iframe.
#catcher {
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1000;
}
<div id="catcher">
<iframe src="https://www.google.com" width="100%" height="100%">
</iframe>
<div>
I think this may be helpfull for you :
<div title="Your title Here" style="pointer-events: none !important; cursor: pointer;">
<iframe id="clock1" src="http://google.com" frameborder="0" width="110" height="110"
style="pointer-events: none !important; cursor: pointer;"></iframe>
</div>
Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.
<body style="margin: 0 auto;">
<iframe src="some.html" frameborder="0"
style="overflow:hidden;
display:block; position: absolute; height: 100%; width: 100%">
<p style="">
Your browser does not support iframes.
</p>
</body>
add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/
Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:
<style>
/* Unless you use normalizer or some other CSS reset,
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>
<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only.
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content,
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document,
so no borders and scrollbars will appear.
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>
See demo
See seamless property browser compatibility.
*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"
Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: http://www.catholiccourier.com/?mobileFormat=true . For some reason, when I try to re-size the browser window, the image inside the fixed div does not seem to shrink properly. If I resize the window abruptly the image shrinks, but it wont resize the same way as the header logo for example. Also it does not seem to stay centered. I have tried margin:0 auto; and text-align:center on the outer div, but it does not seem to work. There are some script tags inside the div as well as noscript, and I am wondering if they may be the cause of the issue.
You can see all of the code in the live website, but here is a copy of some of the code.
<div id="adSpace" align="center">
<script language="javascript" src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=9311&SiteID=2&Random=1375796513537"></script>
<a href="http://catholiccourier.com/banman/a.aspx?Task=Click&ZoneID=43&CampaignID=265&AdvertiserID=79&BannerID=242&SiteID=2&RandomNumber=655331242&Keywords=" target="_Blank" class="ui-link">
<img src="http://catholiccourier.com/banman/ads/3/HOLY-SEP-REWORK_fix.gif" width="728" height="90" alt="Holy Sepulchre Cemetery 585-458-4110" align="Center" border="0">
</a>
<br>
<noscript>
<a href="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Click&Mode=HTML&SiteID=2&PageID=9311" target="_blank"> <img src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&Mode=HTML&SiteID=2&PageID=9311" width="728" height="90" border="0" alt=""></a>
</noscript>
</div>
Please help and thank you.
you can use position:absolute for your div
.ui-mobile #adSpace {
position: absolute;
bottom: 0;
background-color: #e6e6e6;
width: 100%;
height: auto;
max-height: 90px;
z-index: 9999;
text-align: center;
}
I check out the w3school , and it shows that the ondbclick event is "Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title."...
But I really want to do something when the iframe is being dbclick, how can I do so?
W3School reference:
http://www.w3schools.com/TAGS/ref_eventattributes.asp
Observe the load-event of the iframe and once it fired you can assign the ondblclick to the document inside the iframe.
<iframe src="some.htm"
onload="this.contentWindow.document.ondblclick=function(){alert('it work\'s');}">
</iframe>
Note: this will be restricted by same-origin-policy, if the document inside the iframe is on another (sub)Domain than the parent window.
This is possible using CSS trick: put empty div on top of the iframe and catch the double click event of that div element. Here is the code required:
<div style="position: relative;">
<div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 100;">
<iframe src="myotherpage.html" width="500" height="300"></iframe>
</div>
<div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 999;" ondblclick="alert('frame double clicked');"></div>
</div>
The "heart" of this is setting the z-index of both, with the DIV having bigger value and of course having them both the same size.
Using jQuery it should be pretty simple (though not trivial) to make it "generic" by adding the extra div on page load and applying the required CSS on the fly.