Jump to content

echo php page in iframe


jmlab
Go to solution Solved by QuickOldCar,

Recommended Posts

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
Link to comment
Share on other sites

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 by tomjery
Link to comment
Share on other sites

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"; 
}
?>
 
<!-- INÍCIO BODY -->    
<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]-->
 
        <!-- Add your site or application content here -->
        <!-- INÍCIO ESTRUTURA WEBSITE  -->
        
        <!-- INÍCIO HEADER  -->
<?php include ('template/header.php'); ?>
        <!-- FIM HEADER  -->
        
        <!-- INÍCIO CENTRAL  -->
<div id="central">
        <div id="conteudo_info">
            
            <!-- Início Textos (título & Conteúdos) -->
            <?php if ($current_page) { ?>
                    <h1><?php echo htmlentities($current_page["menu_name"]); ?></h1>
                <?php echo $current_page["conteudo"]; ?>
        <!-- Fim Textos (título & Conteúdos) -->
                
                <!-- Início iFrame Externa -->
                <div class="calendar-container">
                    <iframe src="<?php echo $current_page["galeria_url"]; ?>" style=" border-width:0 " width="900" height="500" frameborder="0" scrolling="no">
                    </iframe>
                </div>
                <!-- Fim iFrame Externa -->
                
                <?php } else { ?>
                <!-- INÍCIO SLIDER GERAL -->
                <div id="cont-imageslider">
            
                  <div class="container">
                        <?php 
                            $q = "SELECT * FROM slides WHERE imageslider_id = 1";
                            $r = mysqli_query($dbc, $q);
                        ?>
                        <div id="imageslider">
<?php while ($artigo = mysqli_fetch_assoc($r)) { ?>
                        <div data-iview:thumbnail="../uploads/sliders/<?=$artigo['imagem']; ?>" data-iview:image="../uploads/sliders/<?=$artigo['imagem']; ?>">
                            <div class="iview-caption caption5" data-x="50" data-y="230" data-width="auto" data-transition="expandDown"><?=$artigo['tituloPT']; ?></div>
                            <div class="iview-caption caption6" data-x="50" data-y="310" data-width="auto" data-transition="wipeRight"><?=$artigo['descricaoPT']; ?></div>
                            <div class="iview-caption caption7" data-x="50" data-y="370" data-width="auto" data-transition="wipeLeft"><a href="index.php?page=<?=$artigo['alink']; ?>">+INFO</a></div>
                        </div>
                        <?php } ?>
                  </div>
                    
            </div>
                <!-- FIM SLIDER GERAL  -->
                <?php } ?>
            
            </div>
        </div>
        <!-- FIM CENTRAL  -->
        
         <!-- INÍCIO FOOTER  -->
<?php include ('template/footer.php'); ?>
        
        <!-- FIM FOOTER  -->
 
 
------------------------------------------------------------------------

 

 

<--- "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>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
 
<html lang="pt-pt">
 
<!-- INÍCIO HEAD  -->
<head>
        
        <!-- METATAGS  -->
        <meta charset="utf-8">
        <meta name="Desenvolvido por" content="JMlabDesign"> 
        <meta name="Desenvolvido por" content="JMlabDesign"> 
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link type="text/plain" rel="author" href="humans.txt" />
        
        <meta name="description" content="Mais do que uma empresa de serviços, procura ser um parceiro que integra o seu conceito e o aplica ao longo da relação duradoura que estabelecemos consigo e com a sua empresa.">
        <meta name="keywords" content="modelos, formações, eventos, outsourcing, promoções, merchandising, trabalho temporário, hospedeiras.">
        
        <title></title>
        
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <!-- METATAGS  -->
        
        <!-- FONTS  -->
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,700italic,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)&&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>
        <!-- FIM JAVASCRIPT  -->    
 
<!-- FIM HEAD  -->
        
        <!-- INÍCIO CENTRAL  -->
        <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>
                        </div>
                    </div>
                         
          </div>             
        </div>            
        <!-- FIM CENTRAL  -->
        
        <!-- INÍCIO FOOTER  -->
<!-- FIM FOOTER  -->
 
 
Hope anybody can help me :)
Thank you
Edited by jmlab
Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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". 

 

exampleDB.png

 

Thanks for the help!  :)

Edited by jmlab
Link to comment
Share on other sites

  • Solution

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
}
?>
Link to comment
Share on other sites

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 by jmlab
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.