I have an h3 tag, a paragraph and the facebook iframe Like button.
<h3>Spread out the word</h3>
<iframe src="//www.facebook.com/plugins/like.php?;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
<p class="txtlike">Like us on Facebook</p>
How would I be able to set the CSS so the like button is next to h3 tag (in the same row) and has full width possible so the button can expand (some different languages extend the button). The only way I have found that it works is to just put the iframe inside h3 and I know that is wrong.
This might help:
h3{
display: inline-block;
/*or...*/
display: inline;
}
Use following in your css. Hope it helps
h3
{
width:25%;
float:left;
}
iframe
{
width:75%;
}
change width accordingly.
Related
while there is no "src" attribute in the tag or the "src" linked to a resource which dose not existed,there'll display a border out of the tag.
just like this
//html code:
<div class="example" style="height:70px;width:100px">
<img src="404error.html">
</div>
//↑↑↑ in firefox
//↑↑↑ in chrome
// css code
.example img{
display:inline-block
height:30px;
margin:20px;
}
how can I hide this border // border:none; is useless
besides,there is another stange phenomenon.
That is,when I set "line-height" to a tag,the border of img which i said will move down,so it looks not around the picture at all.
and it just appear in chrome,but not in firefox.
like this.
//↑↑↑ in firefox
//↑↑↑ in chrome
//css code
.example img{
display:inline-block
height:30px;
margin:20px;
line-height:70px; //this is the difference
}
p.s. i use the "line-height" just for the words not the imgs.when i set .img{line-height:0;}it returns.i just want to know why.and how to hide the border.
thanks.
https://jsfiddle.net/s3Lvr9bs/1/
<div class="example">
<object data="https://developers.google.com/+/images/branding/button-gplus.png" type="image/jpg">
<img src="404error.html" alt="" />
</object>
</div>
.example {
display:inline-block;
background:#444;
border-radius: 5px;
padding:5px;
min-width:30px; min-height:30px;
}
object {display:block;}
You need:
img alt="" (hides in Firefox)
object data (gets the url for image)
object display block, to remove margins.
I have iframed an RSS feed and I want to cut off specific part on it.
Here's the iframe..
<iframe src="http://rss.ighome.com/gadgets/rss.aspx?desc=1&count=9&color=000&fs=12px&fw=bold&refresh=0&url=http%3a%2f%2fnews.yahoo.com%2frss%2f"
width="500"
height="400px">
</iframe>
If you scroll down to the bottom of the RSS feed, there is a word "More" that I want to cut out. How can I do so?
You can't control the content of the iframe, but you can place something over it so it hides the link.
Something like this:
HTML
<div id="iframe-wrapper">
<iframe src="http://rss.ighome.com/gadgets/rss.aspx?desc=1&count=9&color=000&fs=12px&fw=bold&refresh=0&url=http%3a%2f%2fnews.yahoo.com%2frss%2f" width="500" height="400px"></iframe>
<div id="iframe-overlay"></div>
</div>
CSS
#iframe-wrapper {
position:relative;
}
#iframe-overlay { /* Adjust values as needed */
height:17px;
width:480px;
background-color:#fff;
position:relative;
top:-24px;
left:5px;
}
I have a full page iframe, but in chrome the scroll bar initially loads then disappears, the room is there for it, and you can use it but it's not visible. Works perfect in safari and firefox and chrome on pc, however on a mac you see the well of the scroll bar, but the bar itself is missing.
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#me-content{
height:100%;
width:100%;
position:relative;
border:1px solid #ff9900;
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
<div id="me-branding-bar">
</div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>
http://jsfiddle.net/RYwty/
Why does the scrollbar disappear in an <iframe> when using Chrome on a Mac?
That's a pretty broad question when your <iframe> contains an entire page from an external site. Let's break it down into a few steps.
The following examples assumes that you use Chrome on a Mac.
Make a simple test
Create a very simple HTML page, put it in an <iframe>, and view it in Chrome on a Mac (DEMO).
The scrollbar does not disappear. Everything seems fine. So it's most likely something on the external site is causing the problem.
Debug the external site
The symptom is that the scrollbar actually appears for a very short time before it disappears, but the page is still scrollable. Maybe JavaScript is causing the problem? Let's disable JavaScript and try it out.
It turns out the scrollbar does not disappear when JavaScript is disabled. So something loaded by JavaScript is causing the problem. Further debugging reveals that a flash object is the culprit.
Make another test
Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.
<object type="application/x-shockwave-flash"></object>
It turns out the one with a flash object does not have a visible scrollbar.
Conclusion
The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.
But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.
<iframe src="<?php echo $url;?>"></iframe>
Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.
If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.
The code below seems to solve the iframe scrollbar problem in Chrome on a Mac.
This fix is cross-browser compatible with Firefox, Safari, and Opera on Mac and PC.
jsfiddle
HTML:
<div id="me-branding-bar"></div>
<div id="me-content">
<iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
</div>
CSS:
body,html{height:100%;overflow:hidden;}
#me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
#me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
#me-content iframe{border:1px solid #000;}
.iframeclass::-webkit-scrollbar {
width:10px;
}
.iframeclass::-webkit-scrollbar-track {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.02);
}
.iframeclass::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.3);
}
Remove the styles from your html and add scrolling="yes" >> http://jsfiddle.net/95Tes/
<!--same code as before just remove your css styles from the html -->
*{
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#me-branding-bar{
width:100%;
height:10%;
position:relative;
background-color:#ff9900;
display:block;
}
#me-content{
display:block;
height:90%;
width:100%;
position:relative;
border:none;
}
#me-content iframe{
border:none;
display:block;
overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}
ant try that link 1 link 2
jsfiddle
This code may help you.I do not have mac so please do not give any negative points,I hope.I want to say you do not use different style in css rule as well as html style.Here you used like that
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
See the image in the other tab or save the image at first and see it to more clear!
Please use this code which I have modified css as well as html
<style>
*{
margin:0px;
paddinig:0px;
}
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#clearboth {
clear:both;
}
#me-content{
height:calc(100% - 40px);
width:100%;
position:relative;
border:1px solid #ff9900;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
width:100%;
height:100%;
}
</style>
Here is the modified html
<div id="me-branding-bar">
</div>
<div id="clearboth"></div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
src="http://www.tsn.ca"></iframe>
</div>
Hope it will work!
Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ??
and i use the z-index but still it's not working.
I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:
<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>
And then in your stylesheet:
iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }
I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.
I already have used many stuffs like:
<iframe src="dynamic url"></iframe>
does work with IE but not with safari and FF.
and
some tweets like
div.iframe-link {
position: relative;
}
a.iframe-link1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
code:
<div class="iframe-link">
<iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
</iframe>
</div>
worked in FF and Safari not in IE7,8.
SO can anybody suggest what to do..
any help would be appreciated.
The Iframe is loading a dynamic address of image like::::
<div class="news_img01">
<div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
<iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
</iframe>
</div>
</div>
so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..
You could create a overlay to make the area over a iframe clickable. This worked for me.
<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
</div>
I found this code snippet from this thread here:
https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/
According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.
<div class="news_img01">
<a href="URL"
style="display: block; width:90px; height:60px; overflow:hidden;">
<img src="thumbnails/1188.gif" />
</a>
</div>
Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?
<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
<iframe ...></iframe>
</div>
By adding the following css rule, it will work as if the iframe were a clickable link.
div {
cursor: pointer
}
iframe {
pointer-events: none; // This is needed to make sure the iframe is not interactive
}
Set css property pointer-events to none on iframe tag.
a {
display : block; /* or inline-block */
}
a iframe {
pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
<iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>
If the iframe is loading an HTML page, just put your <a> tags in the source of that.
If it is just loading an image, why are you not using an <img> tag?
I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.
I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable
$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });
I have the same problem and I solved it with this code:
div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}
For me,it works for all browsers and IE8 as well.
Hope it helps :)
I faced such type of problem and solved by this:
a.iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}