Ok so I have the embedded Comments box from the facebook developer page
https://developers.facebook.com/docs/plugins/comments#configurator
Everything loads up fine, except I have it in a Div separate from the code the page give you to embed with which has a background color and set to scroll so all the comments would be scrollable as it fills, yet when I add the embed code it removes my divs properties entirely
HTML
#reviews {
height:500px;
width:950px;
overflow-y: scroll;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
text-align:center;
margin:0 auto;
}
<div id="reviews">
<div class="fb-comments" data-href="https://chenacannabis.net" data- width="640" data-colorscheme="dark" data-numposts="5" >
</div>
</div>
Related
I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/
Firstly here's the fiddle
I am trying to integrate a iframe like a div, I know how do this if this was a normal iframe but this iframe has a slider inside it. As a result there are two scroll bars appearing on the right side.
HTML code:
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS code:
html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
Is there any way where I could make the iframe behave like a div so that the page will have a single scroll bar. overflow:none would remove the scroll from the iframe.
Any help would be appreciated.
The other answers already work well in this case, but I would just like to point out that the idea is to make the outer frame "non-existent", rather than making the iframe blend in with the page. This works in this case where the inner iframe is intended to fill the entire page.
However, unfortunately, there is no easy way to do "integrate an iframe like a div" in general (at point of writing).
There is an attribute <iframe seamless> that does exactly what you want (embed an iframe like a div), but that doesn't work in any major browser at the moment. See: http://caniuse.com/#feat=iframe-seamless. There are probably some ways to use Javascript to simulate this: e.g. https://github.com/ornj/seamless-polyfill has the page in the iframe use Javascript to communicate its scrollHeight (using postMessage) to the outer page, which then uses Javascript to change the height of the iframe so the entire page in the iframe can be shown without scrolling.
In this particular instance, with a full page iframe, set the margin of your body tag to 0:
html,body{
height:100%;
}
body{
margin:0;
}
.h_iframe iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Add overflow:hidden to your CSS like this. I tried it in your fiddle and it works.
html,body {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
You cannot write css to affect the inner contents of the iframe... but you can add an overflow: hidden; to your body.
I'm currently practicing some HTML 5 Web App development, but I can't even get my header to align properly.
visit http://www.sithhappens.net to see what I mean, (view page source to see my html)
and http://www.sithhappens.net/iphone.css
to see the CSS
I want the "Route.me" to align middle, and button (which is just a place holder till I implement a button there) to stay to the left. Thanks.
(Visit the webpage on your mobile device)
Here is the correct HTML, I have injected the styling into the HTML so you can see how it is done. The trick is to make the button position: absolute so it does not affect the spacing of the text "Route.Me".
<article>
<header><button style="
position: absolute;
">Button</button> <div align="center" style="display: block; text-align: center;">Route.Me </div>
</header>
</article>
use only
<div align="center" style="margin-top:-20px;">Route Me</div>
You will have to place button text in a <p> element. Set styles like this:
<div class="btn">Button</div>
<div align="center" class="txt" >Route.Me </div>
CSS
.btn {
float:left;
}
.txt {
display:block;
}
I'm trying to create a html document to be shown on iphone and ipad.
It's a simple one but I've some problems with the image position and I'm not sure if I should use relative or absolute position.
What I'd like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.
This code is working on portrait but not on landscape as the image will not be in the center if the page.
I'd like also to have some space between the image and the youtube frame.
This is my actual code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
<div align="center">
<img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing" width=90 height=130>
<p>
</p>
<iframe width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
</body>
</html>
There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.
In a pure css solution, you should do the following to the html.
<div class="container">
<img class="rndImage" src="http://myimage.org" alt="image is missing"/>
<iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
And add the following CSS in style block or in an attached css style sheet.
iframe.youtube
{
width:320px;
height:180px;
display:block;
margin:15px auto;
}
img.rndImage
{
display:block;
width:90px;
height:130px;
margin:15px auto;
}
div.container
{
position:relative;
width:100%;
margin:5px, auto;
}
The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.
I have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.