dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Do I need an alternative to iFrame?

  1. #1
    Join Date
    Apr 2008
    Posts
    15

    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:

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

    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?

    HTML Code:
    <?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>

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    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.

    HTML Code:
    // some code
    <div id = "myContainer">
       // include("someFile.php");
       // OR
      // read from your MySQL database
    </div>

  3. #3
    Join Date
    Apr 2008
    Posts
    15
    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?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    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 iframe 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 iframe, but the outer page itself (which is a much shorter page as it doesn't scale to fit iframe 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 iframe 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 Error404'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 <div> and including the file. But if anyone chooses to view the page in a browser window under 1200 pixels (the <p> element outside of the iframe also seems to have a fixed width) both methods will give the user annoying scrolling issues.

  5. #5
    Join Date
    Mar 2014
    Posts
    40
    Yes, it's clearly due to a size box problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles