When I refresh my web page, the drop-down menus are dislodged and after 2 seconds they are placed well

Question

When I refresh my web page, the drop-down menus are dislodged and after 2 seconds they are placed well

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

At the time of refreshing my page the foldouts are dislodged but after a couple of seconds they are placed in their place. Is it possible that it's because of Jquery? or because when doing requests with php when reloading the page, this few seconds collapsed (because the css has not been generated well) ... someone knows what can be ?? The requests are made through PHP files but linked with AJAX (js) and the functions of deploying with Jquery.

I leave a capture.

Greetings

<?php
@session_start();

  $user_agent = $_SERVER['HTTP_USER_AGENT'];

function getBrowser($user_agent){

if(strpos($user_agent, 'MSIE') !== FALSE)
   return 'Internet explorer';
 elseif(strpos($user_agent, 'Edge') !== FALSE) //Microsoft Edge
   return 'Microsoft Edge';
 elseif(strpos($user_agent, 'Trident') !== FALSE) //IE 11
return 'Internet explorer';
 elseif(strpos($user_agent, 'Opera Mini') !== FALSE)
   return "Opera Mini";
 elseif(strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR') !== FALSE)
   return "Opera";
 elseif(strpos($user_agent, 'Firefox') !== FALSE)
   return 'Mozilla Firefox';
 elseif(strpos($user_agent, 'Chrome') !== FALSE)
   return 'Google Chrome';
 elseif(strpos($user_agent, 'Safari') !== FALSE)
   return "Safari";
 else
   return 'No hemos podido detectar su navegador';


}


$navegador = getBrowser($user_agent);

if ($navegador=="Google Chrome"){
   require ("config/userLogin.php");
}else {
  if(!isset($_SESSION['user'])){
header('location:/noautologin/noautologin.php');
  }
}




  require ("functions/controlpermisos.php");
  require ("config/conexiones.php");
  require ("querys/queryshome.php");
  require("querys/querysestructura.php");
  require ("functions/functions.php");
  require("functions/functionsestructura.php");

  $acceso=verificarUsuarioBest($_SESSION['user'],$intranetconn);
  if ($acceso == false){
header('location: /Intranet-BEST/noautologin/noautologin.php');
  }

?>

<!doctype html>
<html class="no-js" lang="es">
  <head>
<!-- FAVICON-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!--meta -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intranet BEST</title>

<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<!-- Estilos -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/notifications.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/ns-default.css" />
<link rel="stylesheet" href="css/ns-style-growl.css" />
<link rel="stylesheet" href="css/ns-style-other.css" />
<link rel="stylesheet" href="css/ns-style-bar.css" />
<link rel="stylesheet" href="css/mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">


<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/backoffice.css" />
<link rel="stylesheet" href="angular/styles/style.css" />


<?php
   echo currentModuleCSS();
?>
<!-- icono app para Apple -->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

<script src="js/vendor/jquery.min.js"></script>



<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>


  </head>
  <body ng-app="chatBest">

<!--
<div id="box-notifications" class="ns-box ns-other ns-effect-thumbslider ns-type-notice" style="position:fixed; bottom:0; right:0;"></div>
<button id="notification-trigger" style="position:absolute;top:0px;">
  <span class="content">Mostrar notificacion</span>
  <span class="progress"></span>
</button>-->
<?php
$permiso="acceso back-office";
$validar = controlAcceso($nick,$permiso,$intranetconn);
if ($validar == true){ ?>

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
  <aside class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <ul class="off-canvas-list">
      <li class="title-head-menu"><label>Backoffice Menu</label></li>
      <?php
      $permiso="acceso comunicaciones";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Comunicaciones<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/comunicaciones/gestion_comunicaciones.php')" >Gestor de entradas</a></li>
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/comunicaciones/agregarComunicado.php')">Añadir entrada</a></li>
      </ul>
   <?php } $permiso="acceso noticias";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Noticias<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/noticias/gestion_noticias_externas.php')" >Gestor de noticias</a></li>
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/noticias/anadir_noticias/index.php')" >Añadir noticia</a></li>
      </ul>
      <?php }
      $permiso="acceso buzon sugerencias";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Buzón sugerencias<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php')">Gestión sugerencias</a></li>

      <!--  <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Pendiente')">Pendientes</a></li>

        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Tramitandose')">Trámitandose</a></li>

        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Realizada')">Realizadas</a></li>


        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Rechazada')">Rechazadas</a></li>-->
      </ul>
      <?php }

      $permiso="creacion menu";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
       <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Menú cantina<span class="right"> + </span></a></li>
          <ul class="off-canvas-submenu">
            <li><a class="navlink" onclick="navbackoffice('modules/backoffice/menu/menu.php')" >Edición menú cantina</a></li>
          </ul>
      <?php }
        $permiso="gestion hph weekly";
        $validar = controlAcceso($nick,$permiso,$intranetconn);
        if ($validar == true){ ?>
         <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Hutchison Bulletin<span class="right"> + </span></a></li>
            <ul class="off-canvas-submenu">
              <li><a class="navlink" onclick="navbackoffice('modules/backoffice/hph-weekly/index.php')" >Añadir Hutchison Weekly Bulletin</a></li>
            </ul>
      <?php  } ?>
    </ul>


  </aside>
  <div class="off-canvas-content" data-off-canvas-content>
    <div class="title-bar title-bar-backoffice">
      <a href="#"><button type="button" class="menu-icon" data-toggle="offCanvas"></button></a>
      <a class="navlink" href="redirect.php"><img src="img/logos_nuevos/HPH_SOLO_SIMBOLO_WHITE.png"/></a>
      <span>Área de administración (Backoffice)</span>
    </div>
    <div class="content-frontoffice" id="content-frontoffice">

      <?php

        /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); 
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
      ?>
      <ng-view>  </ng-view>
    </div>
  </div>
</div>
  </div>
  <?php }else {

/* !!!!!! <<<<<----------------------- !!!!! */
 /* En estos ficheros se añade todo lo del front office (incluido la barra que da problemas*/
       /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); 
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
  } ?>


<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/notificationFx.js"></script>
<script src="js/mCustomScrollbar.concat.min.js"></script>
<script src="js/dropzone.js"></script>
<script src="js/jquery.airport-1.1.source.js"></script>
<script src="angular/js/dependencies/angular.js"></script>
<script src="angular/js/dependencies/angular-route.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="angular/js/dependencies/lodash.js"></script>
<script src="angular/js/app.js"></script>
<script src="angular/js/config.js"></script>
<script src="angular/js/controllers/chatController.js"></script>
<script src="angular/js/services/socketService.js"></script>

<script src="js/app.js"></script>
<script src="js/backoffice.js"></script>
<?php
   echo currentModuleJS();
 ?>
<input type="hidden" id="userConnected" name="name" value="<?php echo $_SESSION['user'] ?>">

<script>
                              
  var socket = io("http://localhost:3000");
  var username = "<?php echo $_SESSION['user'] ?>";
  socket.on('connect',function(){
    socket.emit('usernameConnected', username);
  });
</script>

  </body>
</html>

I think the error is in this part of the code

      if ($validar == true){ ?>
       <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Menú cantina<span class="right"> + </span></a></li>
          <ul class="off-canvas-submenu">
            <li><a class="navlink" onclick="navbackoffice('modules/backoffice/menu/menu.php')" >Edición menú cantina</a></li>
          </ul>
      <?php }
        $permiso="gestion hph weekly";
        $validar = controlAcceso($nick,$permiso,$intranetconn);
        if ($validar == true){ ?>
         <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Hutchison Bulletin<span class="right"> + </span></a></li>
            <ul class="off-canvas-submenu">
              <li><a class="navlink" onclick="navbackoffice('modules/backoffice/hph-weekly/index.php')" >Añadir Hutchison Weekly Bulletin</a></li>
            </ul>
      <?php  } ?>
    </ul>


  </aside>
  <div class="off-canvas-content" data-off-canvas-content>
    <div class="title-bar title-bar-backoffice">
      <a href="#"><button type="button" class="menu-icon" data-toggle="offCanvas"></button></a>
      <a class="navlink" href="redirect.php"><img src="img/logos_nuevos/HPH_SOLO_SIMBOLO_WHITE.png"/></a>
      <span>Área de administración (Backoffice)</span>
    </div>
    <div class="content-frontoffice" id="content-frontoffice">

      <?php

        /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); //Este hook es el variable, dentro de él controlaremos el módulo web que se está visualizando.
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
      ?>
      <ng-view>  </ng-view>
    </div>
  </div>
</div>
  </div>
  <?php }else {

       /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); //Este hook es el variable, dentro de él controlaremos el módulo web que se está visualizando.
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
  } ?>

jquery css ajax web

asked by PictorGames 19.12.2016 в 11:39

source

2 answers

Storage procedure with case Treaty attributes table PdfTable Java iText

score 1 · Answer 1

It is very likely that it is because the page is loaded first and then the CSS. You should separate the priority CSS (the one that affects the first display of the page) and place it in the top part of the head (or even inline to avoid having to load), the rest of the CSS can be placed under the body

link

score 0 · Answer 2

With what browser have you observed this? Have you tried with others? Sometimes "anomalies" of visualization can be observed with a specific browser due to how they interpret the code. If it happens to you with several browsers it will be your code, if the content of the menus depends on requests to the server there is that interval to see it correct, you will have to load data before displaying anything or looking for some other solution.