I just created a Facebook application and it can be found here:
http://apps.facebook.com/tufuturo-ecoflora/
The deal is that when a Facebook user adds the application to it's profile and allows it it shows like inside an iframe with a gray or black fade that seems to be weird. Don't know why!!!!
Can you replicate this behaviour??
Can you tell me please if this is normal and how can I fix it??
Thanks!!!!
I haven't installed it to my profile, but even by default it shows gray fade that comes from this div in your iframe:
<div onclick="top.location.href=window.location.href" style="opacity: 0.5; position: absolute; top: 0px; left: 0px; min-width: 9999px; min-height: 9999px; width: 100%; height: 100%; z-index: 1000001;"></div>
You are redirecting the user to the authorization page at some point (via a Location header) (the https://graph.facebook.com/oauth/authorize URL). Instead, you want to echo out some JavaScript to do the redirect on the top frame:
<script>
top.location = 'https://graph.facebook.com/oauth/authorize?client_id=113054992072493&redirect_uri=http://www.jeanpaulruizvallejo.com/jeanpaul/arkix/Ecoflora/Tu_futuro_v_3/prueba01_redirect.php&scope=publish_stream,user_about_me,user_birthday,user_photos';
</script>
Or you could use the JS SDK which has the FB.login() function to make this transparent, for example: http://apps.facebook.com/fbrelll/auth/session
Already solved it by myself using a mix of session vars and asking the case, in one time I make a php header location and in another I make a JS top.location.
Related
How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
Just finished installing G+, Facebook Like and Tweet buttons onto my site (www.biginjapan.co) on each individual post. My issue though is that when you press the FB Like button the popup box opens up so you can share the article if desired, but part of it appears behind the sidebar. It looks like this:
Picture showing my problem
Am not sure if you'll need any code to advise me here, but if you do please let me know. All I want to do is make the Facebook popup appear above the sidebar so you can view it properly.
In your content div
#content {
overflow: hidden;
float: left;
width: 619px;
padding: 0pt 15px;
}
Remove overflow hidden.
Remove the line overflow: hidden for #content. it's on line 247.
It is layer issue. It can be handle by z-index. For the slider layer (content), use lower z-index means
.slider{ z-index: -1; }
For the popup layer (content ) use higher z-index than slider
.popup{ z-index: 123; }
Facebook's mobile examples use the script: http://connect.facebook.net/en_US/all.js. This script adds to the div fb-root. My mobile site is 320px wide and I use the viewport meta setting. Including Facebook's script causes a big extra space on the right side of the actual content because it's settings it's contents to 575px wide. I tried including code to replace the 575px with 320px ("#fb-root").val().replace("575px","320px"); but that hasn't helped -- maybe I'm doing it wrong (using jQuery).
Anyone know how to restrict this to 320px?
Update:
Found a bug a report on this with two work-arounds:
Set status to false in the FB.init. I can verify that this does fix the problem for me, but breaks the ability for users to login.
Move <div id="fb-root"></div> directly under <body>. This didn't work for me.
Source:
http://bugs.developers.facebook.net/show_bug.cgi?id=18528
I used the following css style rule to beat this 575px #fb-root width problem:
#fb-root > div { left:-575px !important; }
That works because, if you locate the #fb-root node in, say, Firebug's HTML tree-viewer, you'll find that it contains a child div that is styled as follows:
position: absolute; top: -10000px; height: 0pt; width: 0pt;
i just set this in the css by default
#fb-root{display:none}
and when i need to use the FB dialogs(when calling FB.ui), i do this:
$('#fb-root').show();
and in the callback of the FB.ui, i do this
$('#fb-root').hide();
so here is an example:
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
this works for me, and i have tested on some devices.
The code you've provided seems to only replace the value in the code, which has, by that point, already fired. You might try to setting the width with jquery's .css() method on fb-root. Make sure this is fired after the fb js sdk is included, or put into the callback method if loading asynchronously.
Or just wrap it in another div, set its height and width, and the put overflow:hidden;
So, facebooks somehow adds a 1px border to your appplication when using an iFrame.
Is there any way to get remove this?
I checked the source code, and it has frameborder="0"
My .php also contains:
html, body, iframe, div {
border: 0px;
margin: 0px;
padding: 0px;
}
what to do?
(or do I just have to live with only having 748 px?)
I found out it was because I was using some old setting for embedding my app. This setting is no longer available, so this is of no use anymore!
anyway, the facebook frame code has a bug, it should use frameBorder="0" instead of frameborder (note the capital B, needed for it to work in ie7 and below)
I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!