We Keep Coding

Adjust height of iframes of cross-origin-domains

I am trying to pull data from eBay to an iframe. The problem is it does not adjust the height of its contents and leaves a large gap below. I tried taking the offsetHeight of iframe Body, but as it is CROSS-DOMAIN, I can not pull any properties out of it. Please let me know if there are any ways to achieve this by JS or even CSS.
I have already tried all I could find from StackOverflow, but it just doesn't seem to apply here.
<script>
function onLoad() {
console.log(
"height",
document.getElementById("target").contentWindow.document.body.offsetHeight
);
}
</script>
<div class="test">
<iframe
id="target"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"
onload="onLoad()"
class="iframe"
frameborder="0"
height="auto"
width="100%"
src="https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1"
title="Sellers description of item"
></iframe>
</div>
Here is a pen to visualize

There is a way to achieve this, but you will need to use a proxy for cross-domain-request. You can do this with PHP. Create a php file - content.php with the following code :
<?php
$queryString = substr($_SERVER["QUERY_STRING"], 4);
$fileContents = file_get_contents($queryString);
echo $fileContents;
?>
The code above is a simple proxy server in PHP to remove the cors issue.
Your HTML will look something like this :
<div id="iframeHolder">
<iframe id="iframe"
onload='iframeResizer()'
scrolling="no"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
src="content.php?url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1" height="100%" width="100%" ></iframe>
</div>
<script type="text/javascript">
function iframeResizer(){
let iframeHolder = document.getElementById('iframeHolder')
let iframe = document.getElementById('iframe')
let iframeHeight
let iframeHolderHeight
iframeHeight = iframe.contentWindow.document.body.offsetHeight;
console.log(iframeHeight)
iframeHolderHeight = iframeHolder.style.height = iframeHeight + 'px'
}
</script>
And css will be something like :
#iframeHolder{
height: 100%;
position: relative;
}
iframe{
position: absolute;
height: 100%;
top: 0;
left: 0;
}
Here, you will pass the URL to content.php page, where it will parse the request, and return the response. Since content.php is in the same origin, it will resolve the cors issue.
P. S. :
$queryString = substr($_SERVER["QUERY_STRING"], 4);
This code in php is because $_SERVER["QUERY_STRING"] will be
url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1
This is an invalid URL because of 'url=' prefix. substr() function will remove it.

You can use this library: iframe-resizer
It allows you the to automatically resize of the height and width of cross domain iFrames to fit their contained content.

Loading image from parent frame to child

I have an upload button on my main page that submits to a php form, then returns the image back to the main page. What I am trying to do now is get the image element to load to an Iframe in the parent page as a variable that I can put in a div. Everything is functioning properly until the image will not display in the part of the Iframe, I think I am close but cannot see what is wrong in my code.
index.html
just the javascript , iframe, and id where the messages appears
<script type="text/javascript">
function updatepicture(pic) {
document.getElementById("image").setAttribute("src", pic);
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>
iframe.html
<script type="text/javascript">
function updatepicture(pic){
document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
<div class="caption2">
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
</div>
I had this working at one point but mistakenly changed something and now it is not working but I know I am close. Any help is appriciated
upload.php
<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
// file uploaded
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "";
parent.document.getElementById("file").value = "";
window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
</script>
<?php
} else {
// the upload failed
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
</script>
<?php
}
} else {
// the file is too big
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
</script>
<?php
}
}
?>
index.html (submit form)
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />
Upload message will go here.

Change this line:
document.getElementById("image").setAttribute("src",pic);
to this:
document.getElementById("productImage").setAttribute("src",pic);
And change this:
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
to this:
<img id="productImage" alt="Product" height="416" width="417">

You are using incorrect id there:
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
You should use productImage instead of message. Use this:
$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);

How do i limit results in a while loop with jQuery and PHP

I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>

in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"

pass the url from php via javascript pop-up

url.php
<?php
include "../googlelogin/src/Google_Client.php";
include "../googlelogin/src/contrib/Google_Oauth2Service.php";
include "../fblogin/src/facebook.php";
//FOR FACEBOOK LOGIN//
$fbconfig['appid' ] = "329433909112888";
$fbconfig['secret'] = "ca2bdc9990b0b2ad0763abcka79dce60c91f";
$fbconfig['baseurl'] = "http://localhost/sbs/fblogin/index.php?rd=hm";
$facebook = new Facebook(array(
'appId' => $fbconfig['appid'],
'secret' => $fbconfig['secret'],
'baseurl'=>$fbconfig['baseurl'],
'cookie' => true,
));
$loginUrl = $facebook->getLoginUrl(
array('redirect_uri'=>$fbconfig['baseurl'],
'scope' => 'email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me, user_hometown,user_photos ,user_work_history',
)
);
//FOR GOOGLE LOGIN//
$client = new Google_Client();
$client->setApplicationName("Google UserInfo PHP Starter Application");
$client->setApprovalPrompt('auto');
$client->setClientId('777637661406-cp7kekelp1l5i0se9f576sqf36a0q4lc.apps.googleusercontent.com');
$client->setClientSecret('uztEmqG1CFt06752lqtRZjZ-');
$client->setState('hm');
$client->setRedirectUri('http://localhost/sbs/googlelogin/index.php');
$client->setDeveloperKey('AIzaSyD3HiHElDciE6Pb5UfZtDdNWe_kiKNk6rg');
$oauth2 = new Google_Oauth2Service($client);
$authUrl = $client->createAuthUrl();
?>
I want to pass the FACEBOOK , TWITTER AND GOOGLE url in via java script in the pop up . I know the PHP part but I don't know the JS part
pop.js
function sin(){
var lbox = new LadduBox();
lbox.init({"width":495, "height":242, "HTML":'<div style="width:495px; height:242px; background-color:#ffffff; border:2px solid orange;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="485" height="152" style="font-family:arial; font-size:20px; font-weight:bold;"><tr><td align="right" colspan="3"><img src="images/untitled-1.png" style="margin:10px; cursor:pointer;" id="btnClose"/></td></tr><tr><td height="30" colspan="3"> <div style="font-family:arial; font-size:20px; color:#ff6c00; padding-left:200px;">SIGN IN</div></td></tr><tr><td><div style="margin:10px; font-size:14px;">EMAIL<br><input type="text"/></div><br><div style="margin-left:10px; margin-top:-10px; font-size:14px;">PASSWORD<br><input type="text"/></div></td><td><img src="images/orbar.png" /></td><td align="center"><img src="images/redfb.png" style="margin-bottom:7px;"/><br><img src="images/redgoogle.png" style="margin-bottom:7px;"/><br><img src="images/redtwitter.png" /></td></tr></div>', 'btnCloseId':'#btnClose'});
lbox.fire();
}
When the user click on the sign-in button , this pop-up will show . I want FACEBOOK , TWITTER AND GOOGLE URL in the pop-up but i don't know how to pass it in javascript .

"When the user click on the sign-in button, this pop-up will show":
Now, the popup code will be inside a PHP file. Include url.php in this file at top, then you can access those $authUrl or $loginUrl anywhere in this file.

Now, in your sin(), you have HTML inside your lbox.init. There you can put these urls as below. BUT, REMOVE sin() FROM INSIDE YOUR JS FILE, AND PUT IT IN THE PHP FILE IN HEAD SECTION. Because, JS file cannot have PHP code.
<div style="width:495px; height:242px; background-color:#ffffff; border:2px solid orange;">Facebook LoginGoogle Login</div>
Just an example, you can put this anywhere you want within the html. If you want to put PHP inside .js file, you have to do something like below:
AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js
<FilesMatch "\.(js|php)$">
SetHandler application/x-httpd-php
</FilesMatch>
Add the above code in .htaccess file and run php inside js files

Get image src from a image in a slideshow

I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.

These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the