Hopping someone can help with this.
When someone clicks 'Like' on one of our product pages the comment section that drops down goes behind the twitter/google social buttons and I can't seem to pin point exactly where the problem lies. I have tried setting overflow to visible/auto and no luck, yet when I change the height it appears ok (although I don't want to change the height but rather it appear over the top).
The code is below around the facebook button:
<div class="product-link">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"
scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>
</div>
Also a link to a product page (probably a bit more useful) : http://foscam-uk.com/foscam-fi8910w.html
Thanks a lot for your help.
Regards
The combination of height and overflow on the iframe does not seem to work as you expected it to.
My suggestion: Embed the iframe into DIV element, and format that DIV element as follows:
<div id="foobar"><iframe …></div>
#foobar {
height: 30px:
overflow: hidden;
position: relative;
z-index: 1;
}
#foobar:hover {
overflow: visible;
}
After that, the comment bar should show up over the twitter/g+ buttons.
But the “faces” of users that have already liked your page will then show up over the twitter/g+ buttons. I’d suggest you remove the parameter &show_faces=true from your iframe’s URL, since showing the faces will not really fit into the page layout you’re going for.
Related
I am using iframe on my site. Now I want to make the scroll on the right side of the iframe invisible. I've searched the whole internet but all the codes I've found don't work.
This is my iframe
<iframe src="../pages.php" width="100%" height="650px" class="gitartik"></iframe>
last piece of code I tried
.gitartik{
overflow-y: scroll;
}
.gitartik::-webkit-scrollbar {
width: 0px;
}
``
CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.
JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).
To do so First of all remove this part below from the code
.gitartik::-webkit-scrollbar {
width: 0px;
}
Then go to your html and find the iframe for example:
<iframe src="exampleisfake.co.in">
Then edit the iframe tag as shown below:
<iframe src="exampleisfake.co.in" scrolling=no>
add just like shown above:
scrolling=no
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
I am preparing now custom home page to my browser. I would like to few divs displays my favorite websites. However, since I do not have lots of space, I would like to display only the small fragments, with major sections. Is there a way to put excerpts with HTML? I mean the display, for example, to google put in a frame displaying only google-doodle and bar display (shift of tens of pixels to the right and down). I using this code, but i can't add right and down shift :
<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>
I will be grateful for any advice.
Warning : Google website it's only examples. I need to put in a few divs completely different pages. I am not concerned here with a static screenshot, but about full-working piece of the pages.
I make a graphic depicting what I mean :
I've created a jsfiddle with - what I believe is - what you're looking for: http://jsfiddle.net/ctwheels/3g47mjtk/
Set the width and height of iframe to the webpage size and then clip it down to the size you want. You can remove scrolling="no" in the iframe tag if you'd like.
HTML
<div id="outerdiv">
<div id="innerdiv">
<iframe width="600" height="660" src="http://www.wikipedia.org" scrolling="no" frameborder="0"></iframe>
</div>
</div>
<p>Set #outerdiv to size of #innerdiv. Blue background is so you can see what has happened to the iframe</p>
CSS
#outerdiv {
position: relative;
width:300px;
height:300px;
background-color:blue;
}
#innerdiv {
position: absolute;
top:-160px;
left:-200px;
clip:rect(160px 400px 360px 200px);
}
If Chrome is your browser, then I believe there's functionality to get screenshots/snapshots of your favorite websites built into its extensions business (which is really just lots of javascript and stuffs). Might want to look into creating an extension for Chrome that becomes your default/new-tab business (there are already a bunch out there in the Chrome Store).
i have a rather strange question:
Is there a possibility to open a only a specific div element of a website in my browser?
The reason why i want to know is, because i want to embed only the stream element of this website:
http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001
The page is rather new, so they dont offer a share embed code function yet, therfore i thought about creating an Iframe which shows the stream, like this:
<iframe height="433" width="770" frameborder="0" src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001"></iframe>
While this iframe shows the whole site, i want only to show the stream element. I checked the code of the side and the div element called "player-wrap" shows pretty much what i need.
Any ideas?
Your best option may be to contact them and request embed functionality. It's maybe not their top priority so if you must, a possible workaround could be this (modified from the SO post found here).
div{
width: 960px;
height: 424px;
overflow: hidden;
}
iframe{
position: relative;
top: -300px;
width:100%;
height:800px;
}
<div>
<iframe src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001" autoscroll="false"></iframe>
</div>
http://jsfiddle.net/daCrosby/5PMyu/
I think the best way to do it is to use jQuery's load function to return the iframe.
For example your code would be this which would return the wrapping div of the video which is called .palyer_wrap and insert it into #target-div.
$('#target-div').load('www.azubu.tv/channel/live_small.do?cn_id=2196420951001 .palyer_wrap');
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.