Foros del Web - Ver Mensaje Individual

manuparquegiralda · #15 (**permalink**) 21/06/2017, 02:28

Vale ya está solucionado. Verás, la plantilla que tienes está preparada para ser una sola página scrollable. Por lo que al pulsar los enlaces del menú lo que hace es arrastrar el scroll a una división concreta que es dada a través del atributo data-nav-section qeu tienen los enlaces.

Lo que te pasaba es que cuando en la página portfolio que tu has creado al pulsar estos links intentaba arrastrar el scroll a la división que no existe en portfolio, por eso no hacía nada.

Este efecto lo ejecuta esta función en el main.js, te la explico un poco para que lo entiendas.

Código Javascript:

Ver originalvar clickMenu = function() {
    var topVal = ( $(window).width() < 769 ) ? 0 : 58; // If en linea que ajusta el topval en función del ancho de la pantalla.
 
    $(window).resize(function(){
        topVal = ( $(window).width() < 769 ) ? 0 : 58;  // If en linea que ajusta el topval en función del ancho de la pantalla cuando se redimensiona. 
    });
 
    if ( $(this).attr('href') != "#") {
        // Pone a la escucha el evento click en los enlaces del menú, tanto el que está en el HTML como el que crea el javascript.
        $('#fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){ 
            // Coge el data del enlace para redirigirlo a la división correspondiente
            var section = $(this).data('nav-section'); 
 
            // Si la división correspondiente existe
            if ( $('div[data-section="' + section + '"]').length ) {
                // Anima el scroll hasta la división
                $('html, body').animate({
                    scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
                }, 500);    
 
           }
           event.preventDefault();
 
        });
    }
};

Para que cojas un poco el concepto de jQuery, el siguiente código es el que pone a la escucha los links y es donde está la clave de tu fallo:

Código Javascript:

Ver original$('#fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){

Si te fijas en esta línea lo que se le está diciendo a jQuery es que los enlaces dentro del elemento con id fh5co-main-nav (#fh5co-main-nav a) y los enlaces centro del elemento con id fh5co-offcanvas (#fh5co-offcanvas a), se pongan a la escucha.

Fíjate que son selectores CSS lo que entiende jQuery. El .click, dice que los enlaces mencionados serán escuchados cuando se haga click y se ejecutrará la siguiente función que está entre los paréntesis y es la que anima el scroll.

Bien volviendo a los selectores CSS que se ponen a la escucha, fíjate que se usa el pseudo elemento :not[class="external"].

Código Javascript:

Ver original$('#fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])')

Lo que esto significa es que se escucharán los enlaces que no tengan class="external" Por tanto, lo que tienes que hacer para que funcione es sencillamente cambiar la clase de los enlaces del menú de .transition a .external

Código HTML:

Ver original<div id="fh5co-header">
    <div class="container">
        <!-- Mobile Toggle Menu Button -->
        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
        <div id="fh5co-logo">
            <a class="transition" style="color: #000000">LHPHOTOGRAPHER<span>.</span></a>
        </div>
        <nav id="fh5co-main-nav">
            <ul>
                <li><a href="index.html#fh5co-home" class="external" data-nav-section="home">HOME</a></li>
                <li><a href="index.html#fh5co-portfolio" class="external" data-nav-section="portfolio">PORTFOLIO</a></li>
                <li><a href="index.html#fh5co-about" class="external" data-nav-section="about">ABOUT</a></li>
                <li><a href="index.html#fh5co-contact" class="external" data-nav-section="contact">CONTACT</a></li>
            </ul>
        </nav>
    </div>
</div>

Con esto ya te funcionarán los enlaces y te llevarán a index.html ya que no estarán a la escucha al tener la clase external. No sé si me he explicado bien.

Por otro lado, la división que dices que no está en el HTML pero sí en el inspector de elementos es precisamente el menú del slider móvil. Es decir, los enlaces que no te funcionaban. Se crean con la siguiente función:

Código Javascript:

Ver originalvar offcanvasMenu = function() {
 
    $('body').prepend('<div id="fh5co-offcanvas" />');
    $('#fh5co-offcanvas').append($('#fh5co-main-nav').clone());
 
    setTimeout(function(){
        $('#fh5co-offcanvas').prepend('<a href="#" class="js-fh5co-offcanvas-close fh5co-offcanvas-close" />');
        $('#fh5co-offcanvas #fh5co-main-nav').attr('id', '');
    }, 200);
};

La función .prepend() de jQuery lo que hace es insertar al principio del elemento dado, en este caso $( "body" ). La función .append() Lo que hace es añadir al final del elemento dado.

Fíjate, añade al principio del body la división <div id="fh5co-offcanvas" />.
Añade al final de la división con ID fh5co-offcanvas (Es la que acaba de insertar al principio del body) un clon del menu nav : $('#fh5co-offcanvas').append($('#fh5co-main-nav').clone());.

Y bueno, no voy a extenderme más. Es puro jQuery que puedes estudiar aquí: https://api.jquery.com/

En definitiva, cambia la clase transition de los enlaces por la clase external y te funcionará bien.

CONSEJOS PARA TU PÁGINA TU PÁGINA

Te voy a dar algunos consejos para tu web.

1º, Las imágenes que tienes son increiblemente pesadas. Las 11 imágenes de la carpeta sliders tienen todas más de 1MB de tamaño. Si en el inspector de elementos le das a la pestaña network podrás ver lo que pesa cada uno de los recursos que se descargan. Bien pues solo en esas imágenes se descargan 13,9MB.

Imagina que alguien visita tu página desde el móvil pues tan solo con entrar en tu página de inicio ya gastará 14MB de datos (UNA BARBARIDAD). Las que tienes en portfolio están mejor optimizadas. Pero yo te aconsejaría que redujeses el tamaño de las imángenes lo máximo posible. Para eso, pásalas por photoshop, reduce el ppp de las imágenes y pásalas por algún compresor como http://compressjpeg.com/.

Por otro lado en la página de index no se ve bien cuando lo miras desde un móvil. Para comprobar si la página es responsive, no debes hacerlo cambiando el tamaño de la ventana simplemente. Cuando abres el inspector del navegador, a la izquierda de las pestañas tienes un icono con un móvil, si haces click, verás que puedes simular diferentes dispositivos, iPhone, iPad, Nexus... bien utiliza esto para comprobar como se vería tu página desde los diferentes dispositivos. Muchas veces comprobarás que lo que se ve biene en un Nexus, no se ve bien en un iPhone porque cambia el user Agent.

Cuando desarrolles, las herramientas para desarrolladores son fundamentales, úsalas siempre y antes de seguir, léete un par de tutoriales para aprender a usarlo y después sigues con el desarrollo de la web.

También échale un vistazo al javascript y usa el manual de jQuery para saber que es lo que está haciendo tu página. Si no lo haces te volverás a encontrar con problemas que no sabrás solucionar.

Bueno, un saludo y suerte