Consider the following example: (live demo)
HTML:
<div>div</div>
<iframe></iframe>
CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Result:
Why the iframe is not centrally aligned like the div? How could I centrally align it?
Add display:block; to your iframe css.
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
best way and more simple to center an iframe on your webpage is :
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video
Depending on the video source and if you want to have old videos become responsive your tactics will need to change.
If this is your first video, here is a simple solution:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
And add this css:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Disclaimer: none of this is my code, but I've tested it and was happy with the results.
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
link
If you can't access the iFrame class then add below css to wrapper div.
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left: auto;margin-right: auto;
Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally.
Give me THUMBS UP VOTE if you like.👍⯅.
style > img & iframe > this is your tag name so change that if you're want any other tag in center
<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
</style>
</head>
<body >
<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180" />
</body>
</html>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
use it and embed facebook in iframe in center of html page
I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.
I want to display the legends in separate like in this.
here's my code.
var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height',80);
barGraphQty = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
legend: {
display: false
},
}
});
myLegendContainer.innerHTML = barGraphQty.generateLegend();
});
HTML code
<div class="col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Legends</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="legend"></div>
</div>
</div>
</div>
CSS
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
display:block !important;
text-decoration: line-through !important;
}
[class$="-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10
please help me.
Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.
What you really need is generating custom HTML legend using legendCallback together with some CSS.
Please take a look at the following posts to see how this could be done:
https://stackoverflow.com/a/63216656/2358409
https://stackoverflow.com/a/63202664/2358409
I have just added a Google Adsense ad to my page. I have a navbar on my page that is fixed to the top of the screen. The adsense ad is inside a DIV that normally behaves normally and displays under the navbar, but once the ad is displayed the ad displays ontop of the navbar.
Navbar code:
#navbar {
position: fixed;
width: 100%;
height: 66px;
background-color: #1C1C1C;
}
<div id="navbar">
<!-- Orange bar in Navbar-->
<div id="topbar"></div>
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="divider"></div>
<!--Raffles Button-->
<p class="button">Raffles</p>
<!--Divider-->
<div class="divider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="divider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
<div id="signin">
</div>
<div id="profile">
</div>
</div>
Ad DIV:
div#ad300x600 {
margin-left: 50px;
height: 600px;
width: 300px;
background-image: url("miscimg/YUADBLOCK.jpg");
background-size: 0 0;
float: left;
}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- csgohumblelargeskyscraper -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-xxx"
data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I have tried giving the Ad DIV a z-index: -100; and the Navbar a z-index: 1; but that hasn't helped. How can I make the ad display under the Nav bar. Also something that would be nice instead would be if the ad wouldn't move. But if I give it the position: fixed; tag it pops into the top right corner of the screen and stays there.
http://i.stack.imgur.com/Wts4Q.png
(The grey is the Navbar the white is the Ad)
Seems that if I do an exaggerated amount of z-index like "99999999999" it works fine. Sorry to have posted this and figured out a solution myself.
I'd like to disable the Comment box that pops up when a user clicks the Facebook (fbml) Like button I've placed on my site. Is this possible to do? I can't find any details in the documentation.
Simplest fix to hide the comment box after Facebook Like (XFBML version not the iframe one) is as given:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Put the CSS style in any of your CSS file and see the magic, it works :)
Putting the iframe in a appropriately sized div with overflow set to hidden resolved this issue - although this is only actually hiding the problem as such.
I use this in my CSS:
.fb-like{
height: 20px;
overflow: hidden;
}
and render the Facebook button with the normal HTML5 code, something like this:
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
gr-
What I did is crate a div for the "like" button like this:
<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>
And this is the CSS :
.fb_like {
overflow: hidden;
width: 90px;
}
I like Mohammed Arif's solution and I choose it as the best answer. But in case FB changed classes, then the below will always work..
FB.Event.subscribe('edge.create', function(response) {
$('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
FB.XFBML.parse();
});
where "like_button_holder" is "YOUR" div id holding the facebook like button code
The cleaner solution that works (as of May 2014)-
First of all make sure the the <div class="fb-like" has data-layout property as button-
<div class="fb-like" data-layout="button"........></div>
Just add this CSS-
.fb-like{
overflow: hidden !important;
}
That's it!
Demo
Not to be a Debby Downer here, but doesn't hiding the comments box violate Facebook Policy?
IV. Application Integration Points
d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.
https://developers.facebook.com/policy/
I couldn't get the display: none option to work with the HTML 5 version of the button. Instead I targeted the div that the like button button is created in and set the overflow to hidden.
Dropping the following in my main css file did the trick:
#fb_button{
overflow:hidden;
}
Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).
Using AddThis? Do this:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
If the like button disappears when you click "like" and you have a container div to hide the comment pop-up, then use the following solution:
create a container div to place the fb-like button in and give it the following css:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
I managed to circumvent the Facebook like button comment pop-up issue by implementing the IFRAME version instead. I took the following steps to do so:
Visit https://developers.facebook.com/docs/plugins/like-button/
Change the 'URL to Like' to your Facebook page URL
Select any other options (Layout, Action Type, etc) as desired
Press the 'Get Code' button
Select the IFRAME version
Make sure you select your Facebook application where it says 'This script uses the app ID of your app'
Implement the provided code in your application
From what I can see, the like button with IFRAME implementation does not trigger any pop-up. It simply functions as a like button. This was my desired outcome.
Good luck.
Here is the code to have the Like button working as just a standard button along with Twitter and Linkedin. Hope it helps.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB</title>
<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; }
.social ul li { float: left; margin-right: 10px; }
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="social">
<ul>
<li class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe>
</li>
<li class="twitter">
Tweet
</li>
<li class="linkedin">
<script type="IN/Share" data-url="http://www.smh.com.au/"></script>
</li>
</ul>
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=333450970117655";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
</body>
</html>
Lets try this one:
FB.Event.subscribe('edge.create', function(response) {
var $parent = $('[href="'+response+'"]').parent();
$parent.empty();
$parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
FB.XFBML.parse();
});
As i have done ok, the comment popup will be disabled when:
Show faces: -> uncheck it
Get Code: -> choose IFRAME option
If you use the newer HTML5 button, and you should as it's forward compatible and suggested by Facebook, it's easy, going off from what others have said:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
The second class is a bonus for those using the AddThis plugin.
The overflow height options mentioned above shouldn't be used when show-faces=true. Otherwise, it will hide the faces.
In my case (with the XFBML version) I've added to the tag this:
width="90" height="20" style="overflow: hidden;"
So the end result is:
<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>
It's hiding correctly the comment popup.
Hiding the comment box work but can create problem if you have clickable element behind the comment flyout box.
You have to hide it and remove it from the DOM post like.
Here is the CSS to hide the comment box:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Here is the JQuery way of removing the DOM element:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
Here is the pure javascript way using provided widget from the callback:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
If you want to show only the like button, you may try something like this
HTML:
<div class="fb_like">
<div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
<div class="like_counter_hider"></div>
</div>
CSS:
.fb_like {
overflow: hidden;
width: 80px;
height: 20px;
}
.like_counter_hider {
position: absolute;
top: 0;
left: 45px;
width: 35px;
height: 20px;
background-color: #f3f3f3; /*you'll have to match background color*/
z-index: 200;
}
Setting overflow to hidden might help. Do this in your main css file..
#fb_button{
overflow:hidden;
}
How about just make the iframe that contains the like button the same size as the button:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
That's it.
I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?
Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps