elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Cómo eliminar 3 pestañas sin perder información de la página "contacto"
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Cómo eliminar 3 pestañas sin perder información de la página "contacto"  (Leído 5,725 veces)
Antoniio

Desconectado Desconectado

Mensajes: 121



Ver Perfil
Cómo eliminar 3 pestañas sin perder información de la página "contacto"
« en: 28 Agosto 2018, 08:38 am »

Hola, buenas. Estoy modificando mi página de reciclaje, todo iba perfecto, estaba a punto de terminar pero no puedo eliminar 3 pestañas o páginas del código que están en blanco sin que se pierda la información de la página de "Contacto".
Antes que nada, esta es la página: https://recyclingtheworld.info/
Lo que quiero eliminar son estas tres pestañas:


Pero cuando intento borrar esa parte del código, osea esto del index.html:
Código
  1. <!-- PROYECTOS -->
  2.      <div class="section myWork" id="section4">
  3.        <div class="container">
  4.          <div class="workTitle"></div>
  5.          <!-- Proyecto 1 Freelancer -->
  6.          <div class="row">
  7.            <div class="col-lg-6 col-md-10 col-sm-11 col-xs-10 projects freelancerImg"></div>
  8.            <div class="description col-lg-6 col-md-10 col-sm-10 col-xs-10 text-justify freelancerText"></div>
  9.          </div>
  10.        </div>
  11.      </div>
  12.      <!-- proyecto 2 LabCar -->
  13.      <div class="section myWork" id="section5">
  14.        <div class="container">
  15.          <div class="row">
  16.            <div class="description col-lg-6 col-md-10 col-sm-10 col-xs-10 text-justify labcarText"></div>
  17.            <div class="col-lg-6 col-md-10 col-sm-11 col-xs-10 projects labcarImg"></div>
  18.          </div>
  19.        </div>
  20.      </div>
  21.      <!-- proyecto 3 Catbook Red Social -->
  22.      <div class="section myWork" id="section6">
  23.        <div class="container">
  24.          <div class="row">
  25.            <div class="col-lg-6 col-md-10 col-sm-11 col-xs-10 projects catbookImg"></div>
  26.            <div class="description col-lg-6 col-md-10 col-sm-10 col-xs-10 text-justify catbookText"></div>
  27.          </div>
  28.        </div>
  29.      </div>
  30.      <!-- proyecto 4 Art Gallery -->
  31.      <div class="section myWork" id="section7">
  32.        <div class="container">
  33.          <div class="row">
  34.            <div class="description col-lg-6 col-md-10 col-sm-10 col-xs-10 text-justify artText"></div>
  35.            <div class="col-lg-6 col-md-10 col-sm-11 col-xs-10 projects artImg"></div>
  36.          </div>
  37.        </div>
  38.      </div>

Si elimino eso los circulos ya no aparecen, eso es lo que quiero, que ya no se vean esos 3 circulos pero a la vez, toda la información de la pestaña "Contactos" también queda en blanco, y no entiendo por qué si no modifico nada de eso. Qué podrá ser?, alguien podría ayudarme por favor?, se lo agradecería mucho.

Un saludo!!



Aquí está el Js que se usa, supongo que puede estar el error ahí:

Código
  1. $(document).ready(function() {  
  2.  /*
  3.   * Inicialización biblioteca
  4.   */
  5.  $('#pagepiling').pagepiling({
  6.    menu: '#menu',
  7.    anchors: ['page1', 'page2', 'page3', 'page4', 'page8'],
  8.    sectionsColor: ['#FFFFFF', '#FFF', '#FFF', '#6B4A90', '#2C3E50'],
  9.    navigation: {
  10.        'position': 'right',
  11.    },
  12.  
  13.    afterRender: function() {
  14.      $('#pp-nav').addClass('custom');
  15.      $('#pp-nav span').addClass('navigation');    
  16.    },
  17.  
  18.    afterLoad: function(anchorLink, index) {
  19.      if (index > 1) {
  20.        $('#pp-nav').removeClass('custom');
  21.      } else {
  22.        $('#pp-nav').addClass('custom');
  23.      }
  24.      // Sección 2
  25.      if (index === 2) {
  26.        $('.me').html('');
  27.        $('.textAboutMobile').html('');
  28.        $('.textAboutDesktop').html('');
  29.        // foto
  30.        $('.me').append(`<img src="assets/img/perfil_camila.png" alt="" class="">`);
  31.        $('.me img').addClass('animated fadeInLeft');
  32.        // texto
  33.        if($(window).width() <= 768) {
  34.          $('.textAboutMobile').append(`<div id="aboutMeMobile"><h1></h1></div>`);
  35.          $('#aboutMeMobile').addClass('animated fadeInRight');
  36.        } else {
  37.          $('.textAboutDesktop').append(`<div id="aboutMeDesktop"><h1>Sobre Nosotros</h1><p> <span>¡Recycling The World</span></p> <p>Bienvenidos  a Reciclando El Mundo, nuestro maravilloso proyecto para ayudar a sobrevivir y mejorar nuestro medio ambiente. Una de las claves  fundamentales para la existencia  de la vida en nuestro planeta, es un medio ambiente limpio, libre  de virus, bacterias, y otros organismos contaminantes.
  38. Por ello,  en nuestro maravilloso proyecto trabajamos en un conjunto de ideas, de las cuales pudimos fusionar y llegar a ubicarlas de manera que todas puedan combinarse.
  39. Reciclando El Mundo es el fruto de tal combinación, como primera instancia nuestro proyecto principal será la construcción de plantas recicladoras de residuos, que serán esparcidas alrededor del mundo, sabemos que el 60% (cada vez mas) del total de la  basura del planeta, es basura que se puede reciclar (Volver a usar), aquí es donde todo empieza a funcionar.
  40. </p>
  41.              </div>`);
  42.          $('#aboutMeDesktop').addClass('animated fadeInRight');
  43.        }
  44.  
  45.      }
  46.      if (index !== 2) {
  47.        // foto
  48.        $('.me img').removeClass('fadeInLeft');
  49.        $('.me img').addClass('fadeOut');
  50.        // texto
  51.        $('#aboutMeMobile').removeClass('fadeInRight');
  52.        $('#aboutMeMobile').addClass('fadeOut');
  53.        $('#aboutMeDesktop').removeClass('fadeInRight');
  54.        $('#aboutMeDesktop').addClass('fadeOut');
  55.      }
  56.      // Sección 3
  57.      if (index === 3) {
  58.        // título
  59.        $('.skillTitle').html('');
  60.        $('.skillTitle').append(`<h1>STAFF</h1>`);
  61.        $('.skillTitle h1').addClass('animated fadeIn');
  62.        // imagenes del staff
  63.        $('.skillLogo').html('');
  64.        $('.skillLogo').append(`<div class="col-lg-2 col-md-2 col-sm-3 col-xs-3 col-lg-offset-1">
  65.              <img src="assets/img/DANILO.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  66.              <img src="assets/img/GABRIEL.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  67.              <img src="assets/img/BRENDA.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  68.              <img src="assets/img/MARIANO.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  69.              <img src="assets/img/ANGEL.png" alt=""></div><div class="col-lg-offset-1 col-lg-2 col-md-2 col-sm-3 col-xs-3">
  70.              <img src="assets/img/KIEN.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  71.              <img src="assets/img/DANIEL.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  72.              <img src="assets/img/JEFF.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3 mobile">
  73.              <img src="assets/img/KAT.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
  74.              <img src="assets/img/Jesus.png" alt=""></div><div class="col-lg-2 col-md-2 col-sm-2s col-xs-2">
  75.              <img src="assets/img/MILAGROS.png" alt=""></div>`);
  76.        $('.skillLogo img').addClass('animated fadeIn');
  77.      }
  78.      if (index !== 3) {
  79.        $('.skillTitle h1').removeClass('fadeIn');
  80.        $('.skillTitle h1').addClass('fadeOut');
  81.        $('.skillLogo img').removeClass('fadeIn');
  82.        $('.skillLogo img').addClass('fadeOut');        
  83.      }
  84.      // Sección 4
  85.      if (index === 4) {
  86.        // título
  87.        $('.workTitle').html('');
  88.        $('.workTitle').append(`<h1>NOTICIAS</h1>`);
  89.        $('.workTitle h1').addClass('animated fadeIn');
  90.        // imagen
  91.        $('.freelancerImg').html('');
  92.        $('.freelancerImg').append(`<img src="assets/img/freelancer_forma.png" alt="freelancer_project">`);
  93.        $('.freelancerImg img').addClass('animated fadeInLeft');
  94.        // descripción
  95.        $('.freelancerText').html('');
  96.        $('.freelancerText').append(`<div id="text"><h2>Crece hasta el 40% la recogida selectiva de basura en Cataluña</h2><p>Los catalanes separan cada vez más los residuos. El año pasado, el 40% de los residuos municipales que se generan en Cataluña se recogió de forma selectiva, un porcentaje que supone un notable salto en positivo: del 7% respecto a 2016. En total, la basura separada suma 1,5 millones de toneladas, explicó ayer el director de la Agencia de Residuos, Josep Maria Tost. Los catalanes generan de media 509 kilos de basura al año, algo por encima de la media europea.</p>  
  97.  
  98.              <button class="btn"><a href="">ir a las Noticias</a></button></div>`);
  99.        $('#text').addClass('animated fadeInRight');
  100.      }
  101.      if (index !== 4) {
  102.        $('.workTitle h1').removeClass('fadeIn');
  103.        $('.workTitle h1').addClass('fadeOut');
  104.        $('.freelancerImg img').removeClass('fadeInLeft');
  105.        $('.freelancerImg img').addClass('fadeOut');
  106.        $('#text').removeClass('fadeInRight');
  107.        $('#text').addClass('fadeOut');
  108.      }
  109.  
  110.      // Sección 8
  111.      if (index === 8) {
  112.        // título
  113.        $('.contactTitle').html('');
  114.        $('.contactTitle').append(`<h1>CONTACTO</h1>`);
  115.        $('.contactTitle h1').addClass('animated fadeIn');
  116.        // navecita
  117.        $('.contactIcons').html('');
  118.        $('.contactIcons').append(`<a id="ufito" class="ufoContact" href="mailto:admin@recyclingtheworld.info" data-toggle="tooltip" data-placement="right" title="Escribe: admin@recyclingtheworld.info"><img id="ufo" src="assets/img/UFO.png"></a>`)
  119.        $('#ufo').addClass('animated zoomInRight');
  120.        $('[data-toggle="tooltip"]').tooltip();
  121.        // github y linkedin
  122.        $('.RRSS').html('');
  123.        $('.RRSS').append(`<a id="github" href=""><span class="icon-github"></span></i></a>
  124.            <a id="linkedin" href=""><span class="icon-linkedin2"></span></i></a>`)
  125.        $('.RRSS').addClass('animated zoomIn');
  126.        // footer
  127.        $('.footer').html('');
  128.        $('.footer').append(`<p>Recycling The World | 2018</p>`);
  129.        $('.footer p').addClass('animated fadeIn');
  130.      }
  131.      if (index !== 8) {
  132.        $('.contactTitle h1').removeClass('fadeIn');
  133.        $('.contactTitle h1').addClass('fadeOut');
  134.        $('#ufo').removeClass('zoomInRight');
  135.        $('#ufo').addClass('fadeOut');
  136.        $('.RRSS').removeClass('zoomIn');
  137.        $('.RRSS').addClass('fadeOut');
  138.        $('.footer p').removeClass('fadeIn');
  139.        $('.footer p').addClass('fadeOut');
  140.      }
  141.  
  142.    } // afterLoad
  143.  })  // pagepiling
  144. }); // document.ready
  145.  



Mod: No hacer doble post. Utilizar el botón: Modificar para agregar contenido.


« Última modificación: 28 Agosto 2018, 20:11 pm por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Cómo eliminar 3 pestañas sin perder información de la página "contacto"
« Respuesta #1 en: 28 Agosto 2018, 20:09 pm »

Todo ese codigo que tienes es horrible, no sigue ningún estándar, ninguna lógica, nada. Te sugiero de verdad que quemes todo eso y empieces de nuevo utilizado prácticas mejores para responsiveness, modificación del DOM en general y sobre todo no robar el scroll.

Dicho eso, el problema está en que usas la clase .section en más elementos de los que pretendes mostrar. Puedes cambiar el selector de ese plugin que usas (pagePiling), al inicializarlo mediante el parámetro sectionSelector.
https://github.com/alvarotrigo/pagePiling.js#options

Saludos



En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines