we have a left oriented website with wallpaper commercial. So the center of the page is pushed to the left. It would great if we could define a area/point where the fancybox align to.
like:
padding: 100px 300px 0 0;
topRatio would not help for this.
Thanks for help,
Ulli
You can push the box using option "margin" - http://jsfiddle.net/jftDF/
Related
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
I could not find an anwser to my question, beside it is hard to explain it in a few words.
my FB App is an iFrame Canvas, when I set the width to "fluid" the top status bar is left aligned.
when I change to fixed width, I am expecting that I got the same layout like FB always is, the status bar centerd, and my app next to the realtime app activity tab.
But the FB layout is still like "fluid" and my content is fixed width (760px) and is centerd, so I have white space all around it.
I want just the normal FB Layout, statusbar centered, my content is centered right next to it should be the activity tab and only left from my content should be whitespace.
Can anyone tell me how i can set it up right?
Here some screenshots to clarify:
expected: http://oi39.tinypic.com/t88dat.jpg
fixed: http://i40.tinypic.com/24drivk.jpg
fluid: http:// i44.tinypic.com/2po31tt.jpg
greetings
Try having the body style be {position: relative; left: someValue;}, where someValue is calculated based on the window width. So it would be something like someValue=(windowWidth - facebookSidebarWidth - yourcontentWidth) / 2;
I think you can subscribe to the window resize event and dynamically change the left float value according to the above.
I'd like to right align the Facebook like button, so that regardless of whether 0 or 10,000,000 people have liked it it lines up with the right side of the page. Is this possible?? I've looked everywhere to no avail.
Thanks for helping!
This is what we're looking to do, but right now we have to set a fixed width on the like button, so if the like count is 1 - the page isn't aligned properly, or if the like count is 250 the page isn't aligned properly.
You can wrap the facebook button inside a div, and set the div overflow hidden, just to make sure that it wont exceed the fixed width.
.mybutton{
width:50px;
overflow:hidden;
}
You can see this jsfiddle.
http://jsfiddle.net/62sCG/1/
I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.
So, I work on a Facebook FBML App. What I want is simple. Just have a div shows in the center of the page, and scroll with the page. i.e. always in the center.
It would be easy with normal JS. I just use the pageYOffset
However, in Facebook using FBJS, I am not sure what I should use. It doesn't have getPageYOffset().. and I tried getScrollTop().. it doesn't seem the right thing.
So, anyone knows how?
Have you ever seen something like this done on FB before? It sounds to me like FBJS is causing you the problem with its lack of API options.
One way to do it in normal JS is to get the position of the sliders, both Right and bottom, and also the whole screen size, and then determine where the center of the viewable window is based on the full frame size and the slider offsets.
All of those variables should be defined or be retrievable via javascript for you to grab and manipulate, and then it is simply updating the css values on a div to move the window to the correct location. you can then poll the state of the window sliders or monitor their event and retrieve their position as it is updated to recalculate the center of the window.
If FBJS has no facility to determine window size or slider position, then you have a much harder problem on your hands.
Use css
#myDiv {
/* Keep position fixed (scroll invariant) */
position: fixed;
/* Center */
left: 50%;
top: 50%;
/* Set width and margin to account for half of width */
width: 200px;
margin-left: -100px;
/* Set height and margin to account for half of height */
height: 100px;
margin-top: -50px;
}
The first 3 lines would center the upper left corner on the page.
The next 4 lines set the width, and then shift the div back and up so that the center is centered.
More info from w3Schools about position.
How about using Facebook's call myDiv.getAbsoluteTop()? This won't keep the object fixed, but it will at least start at the proper position.
Just one other idea -- you could generate an image, and set the image as the background, which I think you can keep fixed. It depends what you're after exactly though.