I am creating a web app, similar to the like box code from Facebook: http://developers.facebook.com/docs/reference/plugins/like-box/.
When users paste it in web application they should be able to get the like box including feeds if they have selected the stream, while generating the like box code.
I have used following code to do this; but the problem is I am not able to retrieve the pictures of the users who liked the page.
How do I retrieve their profile information?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Feeds</title>
<script type="text/javascript">
function getPage()
{
var getCont=document.getElementById("txarea").value;
document.getElementById("getContent").innerHTML=getCont;
}
</script>
</head>
<body>
<input type="text" id="txarea" />
<input type="button" id="fbBtnClick" value="Click" onclick="getPage();"></input>
<div id="getContent">
</div>
</body>
</html>
So I have tested this out and the following seems to be the problem:
The height of the iframe is being set to 427px by default the pictures are loading but are hidden becuase the height of the iframe is not long enough
By default facebook gives the following:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
Changing that too:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=567" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px;height:567px;" allowTransparency="true"></iframe>
Will show the pictures.. So I think you will have to take input from your users and then change the height then set it.
Related
I'd like an iframe to load only when the user scrolls down the page and it comes into the viewport. This has been answered (link below) but I'm not very good with javascript and I can't work out how to combine the 2 bits of code in the answer.
Can anyone help? It would be great if someone could combine the bits of javascript for me.
Charlie
Having iframe load after scrolling down on page
Here's what I did:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>FS checker test</title>
<style>
<!--
#iframe1 {
background-color: #ccc;
margin: 1800px 10px 10px 10px;
height: 500px;
width: 500px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<iframe id="iframe1" frameborder="0" scrolling="no" src="about:blank" data-src="http://www.mets.com"></iframe>
<script>
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
}
}
</script>
</body>
</html>
Your brackets are nested incorrectly. Indenting your code will make this sort of problem much easier to spot. Also make sure you have the browser developer tools open to the console, so you can see error messages.
This should work (provided you've also installed the jquery-visible library on the page):
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
// or you could omit the 'else' clause, since it's not doing anything
}
}
I have a very simple button that opens a login popup window. The button is placed inside an iframe. The button resides on a different web site than the main page. When running this on my dev/stage site, all using http, all works as expected, the login pops up with no menubar or extra stuff. As soon as I copy to production and try and load the iframe content over https (main page still http) then Microsoft Edge ignores my settings to not show menubar, etc. and opens the button in a normal browser window, in another session. This works fine in IE, Chrome, etc. I cannot find anything published that says Edge is doing something different for cross browser and https iframed inside an http page.
Here is the resulting html for the iframe and it's contents:
<iframe name="logInOut_btn_iframe" width="200" height="32" class="btn-login-iFrame" id="logInOut_btn_iframe" src="https://www.website.org/logInOut_btn_iFramed.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>State Bar of Arizona :: Login Status</title>
<link href="/favicon.ico" rel="SHORTCUT ICON">
<script language="JavaScript" type="text/javascript">
function loginPop() {
var loginWin = window.open("/loginPop.cfm" + decodeURIComponent( document.location.hash ), "SBA_Login" + Math.random(), config= "width=500,height=315,toolbar=no,menubar=no,scrollbars=no,location=no,directories=no,status=no,resizable=yes,top=" + ((screen.availHeight/2)-150) + ",left=" + ((screen.availWidth/2)-250));
loginWin.opener = self;
loginWin.focus();
}
</script>
</head>
<body>
Member Login
</body>
</html>
</iframe>
I've a problem with iframe. My first file filtre.html contain iframe with a basic code like this:
<iframe name="filtre_demo" src="http://localhost:8888/modules/filtredemo/filtre.php" scrolling="no" height="220" width="220" frameborder="no"></iframe>
This file filtre.php is a drop down dynamic list with 3 levels (PHP/MYSQL).
Filtre.php this file is actually a dynamic dropdown 3 levels and will find info in a DB. The submit sent to a URL and all working fine.
My problem is with iframe. When I click on submit, target page is found in this part of 220x220 instead of reloading the parent page.
I tried several solutions to no avail. Here is part of my php file (I deliberately truncated several parts) including the header location and the form:
$ligne=mysql_fetch_assoc($rech_lien);
$lien=$ligne['lien'];
header('Location:'.$lien.'');
<!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" xml:lang="fr">
<head>
</head>
<body style="font-size: 75%; width: 210px;">
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgcategories">
<fieldset style="border: 0px">
<select name="modele" id="modele" onchange="submit();">
<option value="-1">-Choisissez un modele-</option>
<select name="sous_categorie" id="sous_categorie">
<option value="-1">-Sous-cat-</option>
</select>
<input type="hidden" name="nb_listes" value="3" />
<br /><br />
<input type="submit" name="ok" id="ok2" value="Envoyer"/>
</form>
I also tried with javascript but without success. In this configuration there I removed the line:
header('Location:'.$lien.'');
Here is the javascript code in the header:
<!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" xml:lang="fr">
<head>
<script type="text/javascript">
parent.document.location.href="<?php echo $lien; ?>";
</script>
</head>
<body style="font-size: 75%; width: 210px;">
The problems in this case is that the document load loop.
Anyway, I'm stuck, I thank you in advance for your help.
Vincent
If I understand what's happening, the buttons are targeting the contents of the iframe and loading the page inside that, instead of the actual window? If that's the case, set the target attribute the either _parent or _top and that should target the actual window.
You can try this javascript code:
<?php
/*-------Your Php Code-----*/
\\Replace this code #header(location)
echo "<script>";
echo "window.location='yourloation.php';";
echo "</script>";
/*-------Your Php Code-----*/
?>
Was wondering how I can reload an iframe every x seconds, perferably not using javascript.
Thanks.
With a Refresh: x HTTP header or with an HTML element in the document loaded into the iframe:
<meta http-equiv="refresh" content="x" />
This element should be placed inside of the document's <head/> element.
If you do not have control over the document loaded into the frame or the server that it is served from, you have two options:
JavaScript.
Write another HTML page with the above <meta/> element and include an iframe in that page targeting the other page. So you will have an iframe inside an iframe: outer document -> iframe(inner document with meta-refresh) -> iframe(original iframe target)
EDIT: Regarding option #2, here's a decent generic iframe in PHP that gives some flexibility in terms of refresh time and style. Just call it with something like:
http://www.mydomain.com/genericIframe.php?url=http://my.domain.com/mypage.htm&refreshTime=60&style=putYourStyleAttribHere
Here's the PHP/HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generic Iframe</title>
<meta http-equiv="refresh" content="<?php print $_REQUEST['refreshTime']; ?>" />
</head>
<body>
<iframe src="<?php print $_REQUEST['url']; ?>" style="<?php print $_REQUEST['style']; ?>"></iframe>
</body>
</html>
The Goal:
On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page
Remove the preview when the mouse leaves
The Problem:
Solutions like FancyBox are too bloated
in FancyBox's case it ignores width and height for image elements, which makes it useless
Most of these "lightboxes" steal focus when they're called
Really, I'm just looking for a simple, efficient solution.
try something like this. the trick is position you can put the div wherever you want.
read something here. and you can read about hover here
here is an html example. (copy this to a text file and open it withyour browser)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js">
</script>
</head>
<body>
<ul>
<li class="">Lynx</li>
<li>Jaguar</li>
</ul>
<div id="picture" style="position:absolute; top:0px; right:0px;">
</div>
<script type="text/javascript">
var animal = {
"Lynx":
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
"Jaguar" :
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var hovered = function(e) {
//you can get what to show from the elemnt, instead of the content
// you could use an id.
var name = $(e.target).html()
$('#picture').append("<img src='" + animal[name] +"'/>")
}
var unhovered = function() {
$('#picture').empty();
}
//here you bind mouseenter and mouseleave
$('li').hover(hovered, unhovered);
</script>
</body>
Perhaps you're looking for a tooltip? You can use any html (including images) inside the tooltip.
http://flowplayer.org/tools/tooltip/index.html