I have an iframe embedded inside a fan page of FB, and I want to show a fixed box (like a dialog box) at the center of the screen.
How can I do that?
UPDATE
Look at Work For Us app:
http://www.facebook.com/DiscoverIntel?ref=nf&sk=app_404596412628
When I click in the green button behind (named "Apply for this position") it always shows the "Thank you" dialog at the center of the screen.
I just got the same problem today. The solution is you just need to get scroll position of the viewport from the parent of the iframe which is Facebook URL. So, Facebook has provided JavaScript SDK for it already.
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/
You can use clientHeight, clientWidth , scrollTop and scrollLeft to calculate the center position.
You can't. The iframe fills a div element that's position style is set to relative. It's impossible and for good reason too. What if the center of the screen isn't over your iframe? Facebook doesn't want you doing anything crazy and messing with the presentation of the page itself (i.e. hiding advertisements, making a fake Facebook-looking elements, etc.).
But if you are looking to center an element within the iframe, you can do something like this:
<!DOCTYPE html>
<html>
<head>
<title>Centering an element with CSS</title>
<style type="text/css">
#center_container {
left: 50%;
position: fixed;
top: 50%;
}
#center {
border: 1px dashed #000; /* added to show size and position of element */
height: 100px;
left: -100px; /* -0.5 * width */
position: absolute;
top: -50px; /* -0.5 * height */
width: 200px;
}
</style>
</head>
<body>
<div id="center_container">
<div id="center">This tag is centered.</div>
</div>
</body>
</html>
Otherwise, you will have to stick to using JavaScript's popup box functions: alert(), confirm(), and prompt().
Related
I have this Google Apps Script web app. it should simply show a blue background that is the height of the view-height of the screen.
Here is the code
<html>
<head>
<style>
html, body {
margin: 0px;
height: 100vh;
background-color:lightblue;
}
</style>
</head>
<body>
</body>
</html>
The problem is that the body is not displaying as 100% of the available view-height. This is because some of the view-height is taken up by the "This app was created by another user" banner.
Instead, then, a scroll-bar appears on the right (screenshot attached). A scroll bar for the app iframe height set to 100vh + the height of the banner.
So when I add content to the body, that is greater than the height on the view-height, I get 2 scroll bars, one for the body (as it should be) and one for the iframe. Confusing the user.
Is there any way I can make the iframe be a height that gets rid of the scroll bar?
Changing body height to less than 100vh has no effect nor using % or px units.
note: I am not asking how to remove the banner. I am asking how to resize the iframe that houses the body despite the banner
thanks
EDIT: Added after scroll screenshot showing the banner going off the screen.
EDIT2: Ahh...Yes IE doesn't do it either, as well as FF. Seems to be Chrome specific
EDIT 3: also tried this style as per comments below
<style>
html, body, iframe#sandboxFrame, .full_size {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: lightblue;
}
</style>
EDIT 4: I've now raised an issue tracker here
html, body, iframe#sandboxFrame, .full_size {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
Deactivate these styles in the web browser using google chrome tools, then add 100vh to the element(s) that need it. You should be able to get the result you want then.
I tried this and the div magically takes full height on a GAS WEB APP, but sorry that I am not experienced enough to explain further...
#divID {
position: fixed;
height: 100%;
top: 0;
width: 100%;
}
I need to display simple under contruction page which has an image let us say 800x700px & i want this image to appear at the center of page both vertically & horizontally,
I tried different approach's but didn't work. Sample html below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; }
body { position: relative; background-image:url('images/bg.jpg');background-repeat:repeat; }
#mydiv {
position: absolute;
height: 100%;
width: 100%;
text-align:ceter;
}
</style>
</head>
<body>
</body>
</html>
This CSS can center your image regardless of the length.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
The secret is in the transform. Without it, it only puts the top left pixel of the image in the center, not the whole image beautifully.
Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.
Centering an image horizontally and vertically
Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.
You didn't have the ID set for the div, I have edited that, once that's done, the image will be horizontally aligned. Also, mydiv need not be positioned "absolute".
To vertically align the picture, the best solution without using javascript would be to give the img a margin-top with %.
#mydiv {
text-align: center;
}
#mydiv img {
margin-top: 15%;
}
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}
I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}
I have a page where while the page loads, I put an absolute DIV over all of my content with "height:100%" that states "the page is loading...".
However, it appears from the scrollbar that the height of the page is 100% + the height of the content.
This immediately goes away once the page loads and the overlay absolute positioned DIV is set to display:none.
This happens in Firefox 3, Chrome, IE6.
Any ideas on how to make height:100%, just 100% and not more?
<html>
<head>
<style type="text/css">
* html, * body {height: 100%; margin: 0; padding: 0}
#message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%}
#loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2}
#loading p {background: white; border: 2px solid #666; width: 180px}
</style>
</head>
<body>
<div id="grayout"></div>
<div id="loading"><p>Page is loading...</p></div>
<div id="content">
// content is dynamically loaded into this div via AJAX
</div>
</body>
</html>
Update: it appears the problem is that I have "top:45%". How do move that DIV to the center of the page (since it's a "page is loading message") without causing this same problem all over again?
If that element has vertical padding or margin, it’s added to the height of the block according to the CSS specification (see the visual formatting model for absolutely positioned, non-replaced elements).
Edit The top:45% is moving your element 45% down. Remove it (top:0) or set the element’s height to auto (default value).
Have you tried:
* html, * body {height: 100%; margin: 0; padding: 0;}
Which should remove all padding and margins from the page as well.
Try adding
overflow: hidden;
Absolutely positioned elements are taken out of the flow of the page, so the div probably isn't being fitted behind the content. Why is the container div being absolutely positioned in the first place?
Almost always, I start my CSS with the following line:
* {padding:0; margin:0}
This should fix your issue.
Re: // A LOT of content is dynamically loaded via AJAX
Does any of the dynamic data have unbreakable lines, or perhaps images or text that would exceed the space?
Your "loading" div is the full height of the window, and it's positioned 45% from the top, so it overflows the window by 45%, giving you a scroll bar.
Try moving it to the top of the page and centering the text vertically.
Ha posted HTML caused an issue without intro text..
<html>
<head>
</head>
<body>
<div style="height: 100%; background-color: blue;"></div>
</body>
</html>