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)
Related
I just tried chosen and in my initial tests (FF) worked fine, but now checking in another browsers is not.
In Firefox, Explorer, Edge is showing fine but in Opera or Chrome doesn't show anything, nor is clickable but inspecting the source, the list elements are present.
I see the sample page in chrome and is working, so, something is wrong on my side but I am not able to even start to look at it. Any advise is welcome.
Versions: (doesn't work)
Chrome: 44.0.2403.157
Opera: 12:16 (1860)
Version working:
Firefox 40.0.3
IE: 11.0.9600.17937
Jquery: 1.6.4 (downloaded yesterday and served locally, not in the CDN)
Chosen 1.4.2 (downloaded yesterday)
You can see in the image the behavior. IN FF, IE the drop down shows the countries as expected.
You can try this now in http://eventos.ai.org.mx/encuentro/registration.php and you can get the files if you need.
Also is the same screen in FF.
Thanks for your time and any help,
In your stylesheet chosen.css on row 160 there is a defined class .chosen-container .chosen-results. Add a floating property to the class:
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 287px;
-webkit-overflow-scrolling: touch;
float: left;
width: 99%;
}
float: left; will push it to the place.
width: 99%; will set the correct width for every row.
I have just added new Facebook like box for my website but unfortunately the dark color scheme not function properly.
Attached is the iframe code:
<iframe style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 250px; HEIGHT: 520px; OVERFLOW: hidden; BORDER-TOP: medium none; BORDER-RIGHT: medium none" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fifocussolutions.com.my&width=250&height=520&colorscheme=dark&show_faces=true&border_color&stream=true&header=true& " frameborder="0" scrolling="no"></iframe>
It will not allow me to add in allowTransparency code inside the iframe.
Can you help?
The facebook "lightbox" effect isn't accomplished with iframes. It's done using absolute positioned divs. There are a number of javaScript libraries out there that make it very easy to create a facebook-like lightbox. Google for facebook lightbox and select one you like.
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
I'm using figure element in an UIWebView.
On IOS5.0 and later, the figure is rendered correctly...
On iOS4.3 the rendering is not correct.
Is there a way to emulate element with a javascript library ?
I found the solution tx Matijs remark.
After adding this CSS, it works now!
figure {
text-align: center;
padding-top: 20px;
display: block;
}
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.