javascript - change - title css

Cómo mantener los elementos no actualizados

Question

El objetivo principal es mantener no actualizado el logotexto <div class="small-7 medium-4 columns logo"> y el menú <nav class="pagedMenu" role="navigation"> , sin recorte en la página de actualización o mientras el contenido se carga de una página a otra. Además, el estado del menú debe conservarse de una página a otra.

He encontrado here una posible solución que podría resolver el problema ( puede usar ajax para buscar el contenido actualizado y usar jQuery para poner el nuevo contenido en la página y evitar la actualización por completo. De esta manera, los datos existentes en el la página permanecería intacta. dijo @ jfriend00)

Por lo tanto, he tratado de usar un complemento Ajax (llamado AWS ). En la página de opciones de AWS, supongo que he hecho lo correcto al señalar el wrapper como Ajax ID de contenedor y también pagedMenu como clase de contenedor de menú , Efecto de transición habilitado, No hay identificadores de contenedor ajax en blanco, no hay cargador seleccionado, ya tiene un pulso cargador implementado en el tema.

En este punto, todo lo que obtuve es un menú / menú lateral (shiftnav) / gestor de puntos de pulso / error de carga de contenido, generado quizás por una identificación errónea del contenedor Ajax y / o una clase contenedor de menú (?) O por un conflicto con un código JS / jQuery existente, no tan seguro.

También en la consola de Chrome hay un error:

Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4

Todo está volviendo a la normalidad en la actualización de la página, pero no ayuda en absoluto, siendo inútil.

También debo mencionar que para el menú intenté mantener el estado usando jQuery-Storage-API y storage=jQuery.sessionStorage; como puede ver en el archivo mynewmenu.js , pero eso no resolverá el problema de elementos no refrescantes.

Solo el menú jsfiddle, si esto ayuda a tener toda la imagen, here gracias a @Diego Betto .

Puedes usar este enlace en vivo como ejemplo ; hay una situación similar con lo descrito anteriormente - derecho de implementación Ajax (?) - y con respecto a la apariencia, el menú no se actualiza de una página a otra; si exploras libros , trabajos , etc., verás las secciones del menú; si hay un modelo que podría implementarse aquí, estaré encantado de encontrarlo.

LE: mientras tanto, probé otra solución de ajaxify hecha por @arvgta, gracias especiales, sin éxito pero, por lo que he encontrado por parte del autor, los elementos definidos deben ser div con id''s no clases. Por lo tanto, trataré de encontrar una forma de modificar de alguna manera el código para tener id en cambio en las clases.

Además, intentaré transformar e implementar en el archivo ajaxify.min.js, el elemento page-container ; jQuery(''#page-container'').ajaxify(); Volveré con noticias.

LE2: Intenté implementar la solución utilizando id''s en lugar de clases, pero aún así, las páginas no se están cargando correctamente.

En este punto tenemos un archivo ajax.min.js actualizado con estas líneas:

(function($){

  jQuery(document).ready(function(){
    jQuery(''#page-container'').ajaxify({requestDelay:400,forms:false});
  });

})(jQuery); 

Además, modifiqué el archivo de tema para tener id=page-container en su lugar si class=page-container .

En estas condiciones, al hacer clic en el menú, los enlaces cambian (como debería), los elementos de menú / logotexto parecen funcionar casi a la perfección (a veces se salta la posición), pero el contenido no se carga correctamente en todos los casos; Lo mismo aquí, todo vuelve a la normalidad en la actualización manual de la página (f5), pero no ayuda.

LE3: Parece que el conflicto es (al menos) entre el plugin Revolution Slider y Ajaxify.

errormessage = "Error del Control deslizante de revolución: tiene incluida alguna biblioteca jquery.js que viene después de los archivos js de revolución incluyen". ; = "" + = "
Esto incluye make elimina las bibliotecas del control deslizante de revolución y hace que no funcione. "" <= "" Span = ""> "

Enlace en vivo del sitio here . ¿Alguna idea / alternativa en esta área? (no está interesado en usar otras plataformas diferentes, diferentes temas de WordPress, etc. simplemente una solución en esta situación existente)

LE4: Por lo que puedo ver, hay muchos usuarios que votaron por la respuesta de Jake Bown que podría ser una solución; pero no puedo encontrar el motivo por el que no funcionó correctamente implementado en mi tema (sin errores), here Los elementos logotexto / menú todavía se están desvaneciendo en la actualización, no se mantienen actualizados. Cualquier pensamiento @Jake Bown / alguien?

LE final. Buzinas (gracias una vez más por su tiempo y esfuerzo) entregó la respuesta más cercana para mis necesidades, teniendo en cuenta el entorno de mi sitio (plugins instalados, etc.); Volveré con noticias tan pronto como tenga implementada la solución final. Gracias a todos.

Answer 1

VAYA AJAXED CON WORDPRESS

• demo: http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/

siga estos sencillos pasos (tomemos como ejemplo el tema "twentyfifteen" en la carpeta de plantillas de WP):

1. edite single.php , page.php , index.php y todas las demás páginas que tengan get_header() y get_footer() y reemplácelas respectivamente por el siguiente código:

NOTA: esto es importante porque si alguien (por ejemplo, motor de búsqueda) llega a sus páginas directamente desde el enlace, todavía está completamente disponible y funciona al 100%. (útil para SEO)

<?php 
//get_header()
if(!isset($_REQUEST[''ajax''])){
  get_header();
}
?>

<!-- other code --->

<?php
//get_footer()
if(!isset($_REQUEST[''ajax''])){
  get_footer();
}
?>

2. abra el header.php agregue el siguiente código dentro de la sección <head> al final

    <script>
!(function($) {
    $(function() {
        $(''.menu-item a, .widget-area a, .page_item a'').on(''click'', function(e) {
            e.preventDefault();
            var href = this.href;
            var query = href ? (href + (!//?/g.test(href) ? ''?'' : ''&'') + ''ajax=1'') : window.location;

            /* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
            /* ex: kill instance of running plugins */

            $(''#content'').hide().empty().load(query, function() {

                /* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
                /* ex: refresh or run a new plugin instance for this page */

                jQuery(this).show();
            });
        });
    });
})(jQuery);
    </script>

3. en el archivo header.php ponga el código debajo al final del archivo, 90% de las veces lo necesita debajo de la navegación. En este caso, ya tenemos esto en el tema "twentyfifteen" .

   NB: lo más probable es que tengas la etiqueta de apertura <div id="content" class="site-content"> dentro del archivo header.php y la etiqueta de cierre </div> en el archivo footer.php , esto no importa , puedes dejarlo como está.

<div id="content"></div>

• NOTA: considere esto una prueba de concepto; puede funcionar como está, pero aún necesita adaptarlo para satisfacer sus necesidades; es posible que necesite:

  1. Agregue un menú (en caso de que no esté ya configurado) yendo a Appeareace > Menus > [check Primary Menu] > Save Menu para activar el menú. está probado y funcionando.
  2. Es posible que desee agregar alguna otra clase a la función jQuery como .widget-area a para ajax también enlaces de widgets.
  3. Si está utilizando complementos de terceros , deberá asegurarse de que todas las dependencias de cada complemento se carguen también en la página principal desde la que desea que todo se muestre sin actualizar el contenido.
  4. Es posible que deba verificar y eliminar esos complementos de terceros antes de cargar una nueva página y ejecutar o actualizar el complemento necesario en la página cargada.

Answer 2

Por lo que dijo, creo que podría haber encontrado la solución que busca: ¿desea cargar contenido de forma dinámica sin alterar el logotipo ni la navegación? Si es así, esto podría ser lo que estás buscando .

En el ejemplo, las páginas se cargan desde un div dentro de la página pero podrían usarse para cargar otra URL o archivo:

$(''.viewport ul li a'').on(''click'', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($(''.''+link).length) {
     $(''.viewport span.body'').html($(''.''+link).html());
   }
});

Answer 3

TL; DR

He creado un plunker para ti , echa un vistazo, y juego con él todo el tiempo que puedas . ¡ Aprenderá mucho de eso!

Creo que estás intentando demasiadas cosas aquí, pero no pruebas lo más simple:

El objetivo principal es mantener actualizado el logotexto y el menú, sin recorte en la actualización de la página o mientras el contenido se carga de una página a otra. Además, el estado del menú debe conservarse de una página a otra.

Si quieres hacer eso, hay algunos pasos:

• Cree una página ''maestra'', que a partir de ahora vamos a llamar a index.html .
• Por lo tanto, nuestro índice debe tener la parte estática de nuestra página, por ejemplo, menú, logotipo, pie de página, etc.
• Entonces, nuestras ''subpáginas'' deben ser reducidas (no html , head , body , script , etiquetas de style , solo el contenido que debe mostrarse en nuestra página maestra).

• Hecho esto, ahora debemos cambiar nuestros enlaces para usar AJAX en lugar de hacer una actualización completa:

  /* we add a ''click'' event handler to our menu */
  document.getElementById(''menu-menu-2'').addEventListener(''click'', function(e) {
    var el = e.target;
  
    /* then, we see if the element that was clicked is a anchor */
    if (el.tagName === ''A'') {
      /* we prevent the default functionality of the anchor (i.e redirect to the page) */
      e.preventDefault();
      /* we show our spinner, so the user can see that something is loading */
      spinner.classList.remove(''hidden'');
  
      /* and we call our AJAX function, passing a function as the callback */
      ajax(el.href, function(xhr) {
        /* we get our main div, and we replace its HTML to the response that came
           from the AJAX request */
        document.getElementById(''main'').innerHTML = xhr.responseText;
        /* since the request was finished, we hide our spinner again */
        spinner.classList.add(''hidden'');
      });
    }
  });

• Ok, ahora nuestras páginas ya están funcionando a través de AJAX, y no recargan nuestro contenido estático.

Pero ahora, vemos que tenemos algunos problemas. Por ejemplo, si alguien intenta abrir una de nuestras páginas directamente a través de la URL, verá la página sin estilo, sin el menú / logotipo, etc. Entonces, ¿qué deberíamos hacer?

Tenemos algunos pasos más ahora:

• Simula que nuestros enlaces se están transfiriendo de manera efectiva entre páginas usando la API de historial:

  /* inside our ajax callback, we save the fake-redirect we made into the pushState */
  ajax(el.href, function(xhr) {
    document.getElementById(''main'').innerHTML = xhr.responseText;
  
    /* save the new html, so when the user uses the back button, we can load it again */
    history.pushState({
      html: main.innerHTML,
      title: el.textContent + ''| neuegrid''
    }, '''', el.href);
  
    /* (...) */
  });
  
  /* and outside it, we add a ''popstate'' event handler */
  window.addEventListener(''popstate'', function(e) {
    /* so, if we''ve saved the state before, we can restore it now */
    if (e.state) {
      document.getElementById(''main'').innerHTML = e.state.html;
      document.title = e.state.title;
    }
  });

• Y necesitamos que cuando el usuario ingrese directamente a otra página, por ejemplo, about-us , lo redirigamos al index.html , y luego cargue la página about-us desde allí.

• Así que creamos un archivo redirect.js y lo referenciamos en todas nuestras subpáginas:

  /* save the page that the user tried to load into the sessionStorage */
  sessionStorage.setItem(''page'', location.pathname);
  /* and them, we redirect him to our main page */
  location.replace(''/'');

• Y luego, en nuestra página index.html , vemos si hay alguna página en sessionStorage , y la sessionStorage , si es así, de lo contrario cargamos nuestra página de home .

  var page = sessionStorage.getItem(''page'') || ''home'';
  /* we look into the menu items, and find which has an href attribute 
     ending with the page''s URL we wanna load */
  document.querySelector(''#menu-menu-2 > li > a[href$="'' + page + ''"'').click();

Y eso es todo, hemos terminado ahora. Echa un vistazo al plunker que te he estado haciendo .

Y juega con él todo el tiempo que puedas , así aprenderás mucho de él.

¡Espero que te pueda ayudar! :)

Nota: solo como referencia, esta es nuestra función ajax :

function ajax(url, callback, method, params) {
  if (!method) method = ''GET'';

  var xhr = new XMLHttpRequest();
  xhr.open(method, url);

  if (callback) xhr.addEventListener(''load'', function() {
    callback.call(this, xhr);
  });

  if (params) {
    params = Object.keys(params).map(function(key) {
      return encodeURIComponent(key) + ''='' + encodeURIComponent(params[key]);
    }).join(''&'');
    xhr.send(params);
  } else {
    xhr.send();
  }
}