echo php page in iframe

jmlab · December 3, 2014

Hello,

I'm finishing a content manager, but I have a little problem with a iframe.

Let me explain:

I have a url stored in a table in a database, which is the path to a page called "galeria.php", which is a dynamic gallery.

This gallery is loaded on the site when the user clicks on a submenu button called "portfolio". The iframe loads the gallery when clicked the "portfolio" button.

So far so good. Loads exactly when and how I want.

The problem is that when we are not on the "portfolio" page, the iframe keeps the occupation of space, even having no content.

This causes on the website, unnecessary scroll.

In practice what I ask, is how to do that when the iframe has no content, it becomes "hidden" or not take up space on the page.

Thank you

QuickOldCar · December 3, 2014

It would be better to include the script

do checks on the data

display data if meets what you expected

tomjery · December 3, 2014

You also don't need the curly braces around your variable if you're concatenating in a string. I'm not sure if it throws an error if you do use them in this situation, but you don't need them.

adil

Edited December 3, 2014 by tomjery

jmlab · December 3, 2014

Hello, Thanks for the quick response

I think that is better if I show the code that I'm using.

<--- "index.php" --->

(This is the main file, where will be echo the "galeria.php")

<?php

ob_start();

require_once ('../includes/session.php');

include ('../includes/setup.php');

require_once ('../includes/functions.php');

ini_set('display_errors',0);

?>

<?php find_selected_pagePT(true); ?>

<?php

if(!isset($layout_context)) {

$layout_context = "public";

}

?>

<body>

<!--[if lt IE 7]>

<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

<![endif]-->

<?php include ('template/header.php'); ?>

<?php if ($current_page) { ?>

<?php echo $current_page["conteudo"]; ?>

</iframe>

</div>

<?php } else { ?>

<?php

$q = "SELECT * FROM slides WHERE imageslider_id = 1";

$r = mysqli_query($dbc, $q);

?>

<?php while ($artigo = mysqli_fetch_assoc($r)) { ?>

<div data-iview:thumbnail="../uploads/sliders/<?=$artigo['imagem']; ?>" data-iview:image="../uploads/sliders/<?=$artigo['imagem']; ?>">

</div>

<?php } ?>

</div>

<?php } ?>

</div>

<?php include ('template/footer.php'); ?>

------------------------------------------------------------------------

<--- "galleria.php" --->

(This will be called when i click on "portfolio" Button in my Menu, and will echo in mine index.php)

<?php

ob_start();

require_once ('../includes/session.php');

include ('../includes/setup.php');

require_once ('../includes/functions.php');

ini_set('display_errors',0);

?>

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<!--<script src="js/vendor/modernizr-2.6.2.min.js"></script>

$(document).ready(function(){

$('#imageslider').iView({

pauseTime: 5000,

pauseOnHover: true,

directionNavHoverOpacity: 0,

timer: "Bar",

timerDiameter: "50%",

timerPadding: 0,

timerStroke: 7,

timerBarStroke: 0,

timerColor: "#FFF",

timerY: 20,

timerX: 20,

timerPosition: "bottom-right",

captionOpacity: 1

});

$('#galeria').iView({

pauseTime: 4000,

pauseOnHover: true,

directionNav: true,

directionNavHide: false,

controlNav: true,

controlNavNextPrev: false,

controlNavTooltip: false,

directionNavHoverOpacity: 0,

timer: "Pie",

timerDiameter: 30,

timerPadding: 0,

timerStroke: 7,

timerBarStroke: 0,

timerColor: "#FFF",

timerY: 20,

timerX: 20,

captionOpacity: 1

});

</script>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

<div id="central">

<div id="conteudo_info">

<div id="cont-galeria">

<div class="container">

<?php

$q = "SELECT * FROM imagens WHERE galeria_id = 1";

$r = mysqli_query($dbc, $q);

?>

<div id="galeria">

<?php while ($artigo = mysqli_fetch_assoc($r)) { ?>

<div data-iview:thumbnail="../uploads/galerias/<?=$artigo['imagem']; ?>" data-iview:image="../uploads/galerias/<?=$artigo['imagem']; ?>"></div>

<?php } ?>

</div>

Hope anybody can help me

Thank you

Edited December 3, 2014 by jmlab

QuickOldCar · December 3, 2014

Don't iframe content from your own server, use include() instead

Separate coding logic from html in your script

Do a check on your result from the query before you output anything

If you actually have the data for your gallery then you can output any gallery scripts or html styling along with the data

Otherwise you can examine the current url and use either GET parameters or parse_url / preg_match to determine if the divider area will be included/iframed

Can use whichever $_SERVER variable you need, here is for a full current url

$current_url = filter_var("http://" . $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'], FILTER_SANITIZE_STRING);

if (!empty($_SERVER['QUERY_STRING'])) {
    $query_string = filter_var($_SERVER['QUERY_STRING'], FILTER_SANITIZE_STRING);
    $current_url .= "?" . $query_string;
}

jmlab · December 5, 2014

Hello Quick's,

Can you exemplify a code using include()?

Its still a bitt difficult for me to understand the logic of the code

In the code example, is the red text.

I don't remember if I told that the path for the gallery is on a database table in a column called "gallery_url", that store the path "gallery.php".

Thanks for the help!

Edited December 5, 2014 by jmlab

QuickOldCar · December 5, 2014

I use a totally different approach with a page controller,scripts and includes

in index.php to replace iframe

if(isset($current_page['galeria_url'])){
$include_page = trim($current_page['galeria_url']);
include($include_page);
//included script runs the query, don't show any output here
}

galleria.php

Your gallery script should query your database and see if is results

no html above and query first

only if has a result output additional html code and the results,any included scripts and such

Am sure you will need a few changes not needing something,adding something or changing paths

<?php
//work out your requires since this is included on a page
require_once ('../includes/session.php');
include ('../includes/setup.php');
require_once ('../includes/functions.php');

$q = "SELECT * FROM imagens WHERE galeria_id = 1";
$r = mysqli_query($dbc, $q);
if(mysqli_num_rows($r) > 0){
?>
<!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
       
        <!-- METATAGS  -->
       
        <!-- FONTS  -->
        <link href='http://fonts.googlea...talic,400italic' rel='stylesheet' type='text/css'>
        <!-- FONTS  -->

    <!-- FAVICON  -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- FAVICON  -->

<!-- INÍCIO CSS  -->       
        <!-- CSS Global  -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/galeriastyle.css" />
       
        <!-- CSS Global  -->
       
        <!-- MEDIA QUERIES  -->
       
        <!-- MEDIA QUERIES  -->
       
        <!-- CSS imageslider & Galeria de Fotos  -->
<link rel="stylesheet" href="css/iview.css" />
        <!-- CSS imageslider & Galeria de Fotos  -->
        <!-- FIM CSS  -->
       
        <!-- JS Geral -->
<script src="../js/respond.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
        <!-- JS Geral -->
       
         <!-- INÍCIO JS  -->
        <!--<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/respond.min.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>-->
       
        <!-- Accordion Menu -->
        <script type="text/javascript" src="../js/accordion_code.js"></script>
        <!-- Accordion Menu -->
       
        <!-- Imageslider & Galeria de Fotos -->
        <!-- Slideshow JS -->
<script src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/raphael-min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.js"></script>
       
        <script src="js/iview.js"></script>
        <script>
            $(document).ready(function(){
                $('#imageslider').iView({
                    pauseTime: 5000,
                    pauseOnHover: true,
                    directionNavHoverOpacity: 0,
                    timer: "Bar",
                    timerDiameter: "50%",
                    timerPadding: 0,
                    timerStroke: 7,
                    timerBarStroke: 0,
                    timerColor: "#FFF",
                    timerY: 20,
                    timerX: 20,
                    timerPosition: "bottom-right",
                    captionOpacity: 1
                });
                $('#galeria').iView({
                    pauseTime: 4000,
                    pauseOnHover: true,
                    directionNav: true,
                    directionNavHide: false,
                    controlNav: true,
                    controlNavNextPrev: false,
                    controlNavTooltip: false,
                    directionNavHoverOpacity: 0,
                    timer: "Pie",
                    timerDiameter: 30,
                    timerPadding: 0,
                    timerStroke: 7,
                    timerBarStroke: 0,
                    timerColor: "#FFF",
                    timerY: 20,
                    timerX: 20,
                    captionOpacity: 1
                });
            });
        </script>
        <!-- Slideshow JS -->
        <!-- Imageslider & Galeria de Fotos -->
        <!-- FIM JS  -->
       
        <!-- INÍCIO JAVASCRIPT  -->
<script type="text/javascript">
        function MM_swapImgRestore() { //v3.0
          var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }
        function MM_preloadImages() { //v3.0
          var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }
       
        function MM_findObj(n, d) { //v4.01
          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
          if(!x && d.getElementById) x=d.getElementById(n); return x;
        }
       
        function MM_swapImage() { //v3.0
          var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
        </script>
        <!-- FIM JAVASCRIPT  -->   

<!-- FIM HEAD  -->

<!-- INÍCIO CENTRAL  -->
<div id="central">
            <div id="conteudo_info">
              
                    <div id="cont-galeria">
                        <div class="container">
                            <div id="galeria">
                            <?php while ($artigo = mysqli_fetch_assoc($r)) { ?>
                            <div data-iview:thumbnail="../uploads/galerias/<?=$artigo['imagem']; ?>" data-iview:image="../uploads/galerias/<?=$artigo['imagem']; ?>"></div>
                            <?php } ?>
                            </div>
                        </div>
                    </div>
                       
          </div>           
        </div>          
        <!-- FIM CENTRAL  -->

<?php
}
?>

jmlab · December 5, 2014

Hello Quick's!

I have tested the code and it works partially (something is failing).

It has to do with javascript. The code does not run. The photos run all at once (the javascript path maybe !?).

Do you need to see anything more? More code?

Another thing is that the website is responsive. If the CSS run in gallery.php, how will i control the gallery CSS in Index.php?

Do you understand my question?

Sorry

Edited December 5, 2014 by jmlab

QuickOldCar · December 5, 2014

Check any paths and change them, try to use full absolute paths versus relative.

jmlab · December 5, 2014

UPDATE

Fixed the JS problem (There was an duplicate of the Gallery JS function in index.php and gallery.php)!

And I think that everything is working now!

Im gonna make some tests and I reply!

Can't thank you enough!!!

jmlab · December 5, 2014

Everything is working great!!

Thank you!

Edited December 5, 2014 by jmlab

Sign In

echo php page in iframe

Recommended Posts

jmlab

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

tomjery

Link to comment

Share on other sites

jmlab

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

jmlab

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

jmlab

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

jmlab

Link to comment

Share on other sites

jmlab

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information