mitsuzero blackout mitsuzero blackout - 1 year ago 123
CSS Question

Open different php files on one div

I want to ask about how to open different PHP files in one div.

I have a

div. The dashboard file is divided in 2 parts - one is the menu (with include ("menu.php");)also the menu.php has a CSS MENU ... and (I want to link to the different php files and the Div who is the principal where I want to load the different files....

Is that possible?

Code for: dashboard.php:

<body id="main">
<header id="topbar">
<img src="./img/logo_toco_small.png">
<nav id="menu">
<?PHP include ("menu.php"); ?>
<hr class="dashboard">
<div id="principal" class="target"></div>
<footer class="footer">
<?PHP include ("footer.php"); ?>

This is the menu.php

<ul class="flatflipbuttons">
<li><a href="" class="ttip" title ="Inicio" data-tooltip="Inicio" href="./dashboard.php"><span class="fa fa-home fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Clientes" data-tooltip="Cientes" ><span class="fa fa-users fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Proveedores" data-tooltip="Proveedores"><span class="fa fa-truck fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Usuarios" data-tooltip="Usuarios"><span class="fa fa-user fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Partes" data-tooltip="Partes"><span class="fa fa-puzzle-piece fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Productos" data-tooltip="Productos"><span class="fa fa-dropbox fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Proyectos" data-tooltip="Proyectos"><span class="fa fa-th-list fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Compras" data-tooltip="Compras"><span class="fa fa-dollar fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Movimientos" data-tooltip="Movimientos"><span class="fa fa-undo fa-fw"></span></a></li>
<li><a href="" class="ttip" title ="Reportes" data-tooltip="Reportes"><span class="fa fa-line-chart fa-fw"></span></a></li>
<li><a title ="Cotizacion" target="principal" class="ttip" data-tooltip="Cotizaciones"><span class="fa fa-calculator fa-fw"></span></a></li>
<li><a href="./exit.php" class="ttip" data-tooltip="Salir" title ="Salir" ><span class="fa fa-sign-out fa-fw"></span></a></li>

menu and dashboard php files are in the same dir. thanks in advance.

Answer Source

I love this way:

$(function() {

  if (Modernizr.history) {

    // history is supported; do magical things

    // hijack the nav click event
    $(".flatflipbuttons").on( "click", "a", function(event) {

      _href = $(this).attr("href");

      // change the url without a page refresh and add a history entry.
      history.pushState(null, null, _href);

      // load the content
      loadContent(_href); // fear not! we're going to build this function in the next code block


  } else {

    // history is not supported; nothing fancy here


// set up some variables
var $mainContent = $("#principal"),
    $pageWrap    = $("#main"),
    baseHeight   = 0;

// calculate wrapper heights to prevent jumping when loading new content
baseHeight = $pageWrap.height() - $mainContent.height();

function loadContent(href) {

    .fadeOut(200, function() { // fade out the content of the current page
        .load(href + " #main-content", function() { // load the contents of whatever href is
          $mainContent.fadeIn(200, function() {
              height: baseHeight + $mainContent.height() + &quot;px&quot;




Some changes to HTML

<body id="main">

   <header id="topbar"><img src="./img/logo_toco_small.png"></header>
   <nav id="menu"><?PHP include ("menu.php"); ?></nav>
   <hr class="dashboard">   

   <div id="principal" class="target">
      <div id="main-content">

          //  Main content goes here...


   <footer class="footer"> <?PHP include ("footer.php"); ?></footer>


//  menu.php
<ul class="flatflipbuttons">
    <li><a href="dashboard.php" class="ttip" title ="Inicio" data-tooltip="Inicio"><span class="fa fa-home fa-fw"></span></a></li>
    <li><a href="users.php"  class="ttip" title ="Clientes" data-tooltip="Cientes" ><span class="fa fa-users fa-fw"></span></a></li>
    <li><a href="exit.php" class="ttip" data-tooltip="Salir" title ="Salir" ><span class="fa fa-sign-out fa-fw"></span></a></li>

This answer is taken from CSS-Tricks

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download