mitsuzero blackout mitsuzero blackout - 2 months ago 6
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

dashboard.php
with
#principal
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">
</header>
<nav id="menu">
<?PHP include ("menu.php"); ?>
</nav>
<hr class="dashboard">
<div id="principal" class="target"></div>
<footer class="footer">
<?PHP include ("footer.php"); ?>
</footer>
</body>


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>
</ul>


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

Answer

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) {

      event.preventDefault();
      _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
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

function loadContent(href) {

  $mainContent
    .find("#main-content")
    .fadeOut(200, function() { // fade out the content of the current page
      $mainContent
        .hide()
        .load(href + " #main-content", function() { // load the contents of whatever href is
          $mainContent.fadeIn(200, function() {
            $pageWrap.animate({
              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...

      </div>
    </div>

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

</body>


//  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>
</ul>

This answer is taken from CSS-Tricks

Comments