/    Sign up×
Community /Pin to ProfileBookmark

Do I need an alternative to iFrame?

At the moment I have a page which basically pulls the information from a File in the /Upload folder in my FTP… But the iFrame is presenting some issues:

[url]http://gamesave.me/guide-details.php?id=32[/url]

If I mouse-over the text and I scroll up/down, I don’t have a problem, but if I move my mouse to the right into the blank space and I attempt to scroll up/down, the page becomes incredibly short. I would assume this is because the object being used on this page in an iFrame. Do I need to use an alternative to the iFrame? Or do I just add something to my code?

[code=html]<?php
if($_REQUEST[‘id’]==”)
{
header(“location:index.php”);
exit;
}
session_start();
ob_start();
include(“includes/config.php”);
$data=mysql_fetch_assoc(mysql_query(sprintf(“select * from game_guide where id=’%s'”,$_REQUEST[‘id’])));
if($data[‘id’])
{
$user_id=$data[‘user_id’];
}
else
{
$user_id=”;
}
if($user_id)
{
$dataadsense=mysql_fetch_assoc(mysql_query(sprintf(“select * from adsense where user_id=’%s'”,$user_id)));
}

?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html lang=”en”>
<head>
<title>GameSave.me (FAQ/Walkthrough) – Monetize your Game Guides!</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”css/style_sticky.css” />

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

</head>
<body>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_IN/all.js#xfbml=1&appId=545106498912954″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<div class=”header”>
<div id=”top”>
<div class=”logo”><a href=”index.php”><img src=”images/logo.png” alt=”” /></a></div>

<div class=”search_bar”>
<?php echo stripslashes($dataadsense[‘header’]); ?>
</div>
</div>
<div style=”clear:both;”></div>
<div class=”mainnav”>
<div class=”fb-like” data-href=”http://gamesave.me/guide-details.php?id=<?php echo $_REQUEST[‘id’]; ?>” data-layout=”standard” data-action=”like” data-show-faces=”false” data-share=”false”></div>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”en”>Tweet</a>
<div class=”g-plusone” data-size=”medium”></div>
<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<div style=”clear:both;”></div>
<div class=”content_box”>
<?php if($data[‘guide’]){ ?>
<p style=”overflow-y: hidden;”><iframe src=”upload/<?php echo $data[‘guide’];?>” width=”1600″ height=’1200′ frameBorder=”0″></iframe></p>
<p>

<?php
/*$myFile = “http://vtdesigns.in/projects/savegamenew/upload/”.$data[‘guide’];
$fh = fopen($myFile, ‘r’);
$theData = fread($fh, 5000000);
fclose($fh);
echo $theData;*/
?>
</p>
<?php }?></div>
</body>
</html>[/code]

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@Error404Mar 18.2014 — First issue is you're using mysql, when you should use either mysqli or PDO to read from your database if you want it to be accessible in the future.

An alternative to using iFrames in your case would be to wrap an include statement in a <div>, then you can make it scrollable or manipulate it however you like, especially if you want to organize the sections in a specific way. You'll find it's much easier, both in terms of styling, maintaining and from the user's experience, there won't be the issue you're having right now.

[code=html]
// some code
<div id = "myContainer">
// include("someFile.php");
// OR
// read from your MySQL database
</div>
[/code]
Copy linkTweet thisAlerts:
@MesdenauthorMar 18.2014 — I didn't code this webpage... So all I need to do is replace the iframe code with the <div id> and the php include?
Copy linkTweet thisAlerts:
@Sup3rkirbyMar 18.2014 — For the sake of full clarity, the reason for issue you observed in your original post is because of the width and height set on the [I]iframe[/I] on the page. If you are on a resolution with a width lower than 1600 pixels (or shrink your browser window) you'll find that you cannot replicate what you described (using the mouse wheel to scroll). On higher resolutions you run into that problem because when you place your mouse on the far-right side of the screen you are no longer scrolling the [I]iframe[/I], but the outer page itself (which is a much shorter page as it doesn't scale to fit [I]iframe[/I] content).

This could be corrected in some sense with simple CSS modifications. Simply setting the width of the iframe to 100% (rather than an absolute 1600 pixels) will have the [I]iframe[/I] scale horizontally. But as I dig into the code more I can see that it looks like you'd need to adjust a fair bit of your template in the end.

You can also use [B]Error404[/B]'s method of simply including the file directly rather than displaying it in a frame. This will mean the element you place it inside of will probably work out a bit better, but again it will come down to your CSS. The main takeaway might be that you will have an easier time dealing with the vertical scrolling replacing the frame with a [B]<div>[/B] and including the file. But if anyone chooses to view the page in a browser window under 1200 pixels (the [B]<p>[/B] element outside of the [I]iframe[/I] also seems to have a fixed width) both methods will give the user annoying scrolling issues.
Copy linkTweet thisAlerts:
@SamphywiiMar 20.2014 — Yes, it's clearly due to a size box problem.
×

Success!

Help @Mesden spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...