Apagar/Ocultar conteúdo HTML

Pessoal,

Está acontecendo um conflito de js na minha página, e está aparecendo o menu que criei só em texto, e fica uma linha com todas as opções do menu nessa linha sem formatação.

E é abaixo de um Gantt em js (por isso o conflito), então queria meio que ocultar o apagar o que for abaixo dele.

Tem como?

Oi Pacato,

Tu pode compartilhar teu código ou mostrar que tipo de erro está acontecendo? Assim fica mais fácil pra ajudar.

De qualquer forma, se teu elemento tem uma classe, adiciona um display: none nele. (se eu entendi corretamente o que tu quer)

Olá emanuelespies tudo bom?

Infelizmente ele está replicando o menu (não sei como) e adicionando ele como linha de texto (sem formatação) para a última linha da página.

Status Report Geral - PED



		<!-- Header -->
			<header id="header">
				<h4><img src="http://segurogaucho.com.br/wp-content/uploads/2015/12/logo-porto-seguro-face.jpg" width="30" height="30" alt="PED"><a href="index.html">Proteção e Monitoramento</a></h4>
				<nav id="nav">
					<ul>
						<li><a href="home.jsp">Home</a></li>
						<li class="current"><a href="statusGeral.jsp">Status Geral</a></li>
						<li class="submenu">
							<a href="#">Projetos</a>
							<ul>
								<li><a href="emAndamento.jsp">Em andamento</a></li>
								<li><a href="paradoCancelado.jsp">Parado/Cancelado</a></li>
								<li><a href="concluido.jsp">Concluído</a></li>
								<li><a href="alarmeMais.jsp">Alarme Mais</a></li>
						</li>
						<li><a href="#" class="button special">Logar</a></li>
					</ul>
				</nav>
			</header>
	</div>
	<!-- End Menu -->


















<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/prettify.js"></script>


<script>

	$(function() {

		"use strict";

		$(".gantt").gantt({
			source: [{
				name: "Sprint Teste",
				desc: "Analysis",
				values: [{
				//ano/mes/dia  cores ganttBlue, ganttRed, gantOrange, ganttGreen
					from: "/Date(new Date('2015-01-02').getTime())/",
					to: "/Date(new Date('2015-12-02').getTime())/",
					label: "Projeto teste", 
					customClass: "ganttRed"
				}]
			},{
				name: " ",
				desc: "Scoping",
				values: [{
					from: "/Date(new Date('2016-01-02').getTime())/",
					to: "/Date(new Date('2017-12-02').getTime())/",
					label: "Scoping", 
					customClass: "ganttBlue"
				}]
			},{
				name: "Sprint 1",
				desc: "Development",
				values: [{
					from: "/Date(1323802400000)/",
					to: "/Date(1325685200000)/",
					label: "Development", 
					customClass: "ganttGreen"
				}]
			},{
				name: " ",
				desc: "Showcasing",
				values: [{
					from: "/Date(1325685200000)/",
					to: "/Date(1325695200000)/",
					label: "Showcasing", 
					customClass: "ganttBlue"
				}]
			},{
				name: "Sprint 2",
				desc: "Development",
				values: [{
					from: "/Date(1326785200000)/",
					to: "/Date(1325785200000)/",
					label: "Development", 
					customClass: "ganttGreen"
				}]
			},{
				name: " ",
				desc: "Showcasing",
				values: [{
					from: "/Date(1328785200000)/",
					to: "/Date(1328905200000)/",
					label: "Showcasing", 
					customClass: "ganttBlue"
				}]
			},{
				name: "Release Stage",
				desc: "Training",
				values: [{
					from: "/Date(1330011200000)/",
					to: "/Date(1336611200000)/",
					label: "Training", 
					customClass: "ganttOrange"
				}]
			},{
				name: " ",
				desc: "Deployment",
				values: [{
					from: "/Date(1336611200000)/",
					to: "/Date(1338711200000)/",
					label: "Deployment", 
					customClass: "ganttOrange"
				}]
			},{
				name: " ",
				desc: "Warranty Period",
				values: [{
					from: "/Date(1336611200000)/",
					to: "/Date(1349711200000)/",
					label: "Warranty Period", 
					customClass: "ganttOrange"
				}]
			}],
			navigate: "scroll",
			scale: "weeks",
			maxScale: "months",
			minScale: "days",
			itemsPerPage: 10,
			onItemClick: function(data) {
				alert("Item clicked - show some details");
			},
			onAddClick: function(dt, rowId) {
				alert("Empty space clicked - add an item!");
			},
			onRender: function() {
				if (window.console && typeof console.log === "function") {
					console.log("chart rendered");
				}
			}
		});

		$(".gantt").popover({
			selector: ".bar",
			title: "I'm a popover",
			content: "And I'm the content of said popover.",
			trigger: "hover"
		});

		prettyPrint();

	});

</script>

Se tu tira o gantt tudo funciona?

Minha sugestão para debugar (pois com o código que tu me passou não consegui):
-> Mude a classe do elemento .gantt para outra coisa qualquer
-> Mude as classes do submenu e do menu para outras coisas (talvez o código do gantt esteja conflitando

O erro persiste?

Persiste…

Vou ter que fazer uma baita varredura nos .css e .js
Por isso queria tentar fazer alguma gambiarra para tentar limpar tudo o que tiver depois do gantt.

Tem como tu subir esses códigos em algum lugar tipo https://codepen.io/pen/? Ou até fazer upload em algum lugar? Aí quem sabe eu consiga ser mais útil >.<’

Obrigado mesmo emanuele… mas aqui tudo é bloqueado… tudo mesmo… não sei nem como consigo acessar o fórum ainda…

Opa, te daria a sugestão de ir tirando algumas coisas do seu código, até que tudo volte a funcionar isso para encontrar o que está ocorrendo de conflito, depois vai corrigindo.

Se tiver o erro que gera no console ajudaria para que pudessemos te ajudar melhor.

:frowning:

Então tenta o que o wolmir sugeriu mesmo.

E talvez tu possa usar um jquery para ocultar tudo depois do gantt.

Tipo algo assim:

$('body').find('.gantt').nextAll().hide();

É uma gambiarra né :confused: O ideal era achar o problema pra corrigir.

Não funcionou :frowning:

Mas vou fazer isso então, para ver onde está esse benedito…

Muito obrigado pela força

Quando eu coloco a classe main.js para cima (antes do body) ele some essa linha, mas acaba bloqueando o dropdown.

/*
	Twenty by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

(function($) {

	skel.breakpoints({
		wide: '(max-width: 1680px)',
		normal: '(max-width: 1280px)',
		narrow: '(max-width: 980px)',
		narrower: '(max-width: 840px)',
		mobile: '(max-width: 736px)'
	});

	$(function() {

		var	$window = $(window),
			$body = $('body'),
			$header = $('#header'),
			$banner = $('#banner');

		// Disable animations/transitions until the page has loaded.
			$body.addClass('is-loading');

			$window.on('load', function() {
				$body.removeClass('is-loading');
			});

		// CSS polyfills (IE<9).
			if (skel.vars.IEVersion < 9)
				$(':last-child').addClass('last-child');

		// Fix: Placeholder polyfill.
			$('form').placeholder();

		// Prioritize "important" elements on narrower.
			skel.on('+narrower -narrower', function() {
				$.prioritize(
					'.important\\28 narrower\\29',
					skel.breakpoint('narrower').active
				);
			});

		// Scrolly links.
			$('.scrolly').scrolly({
				speed: 1000,
				offset: -10
			});

		// Dropdowns.
			$('#nav > ul').dropotron({
				mode: 'fade',
				noOpenerFade: true,
				expandMode: (skel.vars.touch ? 'click' : 'hover')
			});

		// Off-Canvas Navigation.

			// Navigation Button.
				$(
					'<div id="navButton">' +
						'<a href="#navPanel" class="toggle"></a>' +
					'</div>'
				)
					.appendTo($body);

			// Navigation Panel.
				$(
					'<div id="navPanel">' +
						'<nav>' +
							$('#nav').navList() +
						'</nav>' +
					'</div>'
				)
					.appendTo($body)
					.panel({
						delay: 500,
						hideOnClick: true,
						hideOnSwipe: true,
						resetScroll: true,
						resetForms: true,
						side: 'left',
						target: $body,
						visibleClass: 'navPanel-visible'
					});

			// Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
				if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
					$('#navButton, #navPanel, #page-wrapper')
						.css('transition', 'none');

		// Header.
		// If the header is using "alt" styling and #banner is present, use scrollwatch
		// to revert it back to normal styling once the user scrolls past the banner.
		// Note: This is disabled on mobile devices.
			if (!skel.vars.mobile
			&&	$header.hasClass('alt')
			&&	$banner.length > 0) {

				$window.on('load', function() {

					$banner.scrollwatch({
						delay:		0,
						range:		1,
						anchor:		'top',
						on:			function() { $header.addClass('alt reveal'); },
						off:		function() { $header.removeClass('alt'); }
					});

				});

			}

	});

})(jQuery);

Identifiquei que é nesse bloco abaixo, quando eu tiro, some, mas até agora não vi onde afetou, pq “parece” tudo normal:

			// Navigation Panel.
				$(
					'<div id="navPanel">' +
						'<nav>' +
							$('#nav').navList() +
						'</nav>' +
					'</div>'
				)
					.appendTo($body)
					.panel({
						delay: 500,
						hideOnClick: true,
						hideOnSwipe: true,
						resetScroll: true,
						resetForms: true,
						side: 'left',
						target: $body,
						visibleClass: 'navPanel-visible'
					});

Se eu entendi bem, pelos códigos vistos la em cima, tu já tem um ID chamado “nav” que é um navigation menu. E nesse JS tu ta adicionando um que procura por um nav com ID #nav.

Tenta mudar esses IDs, ou remover isso:

'<nav>' +
'</nav>' +
1 curtida

Obrigado emanuele… vlw mesmo pela paciência.

Que isso! Não tem que agradecer não.

Notei que tu marcou como ‘solução’, deu certo então? :smiley:

1 curtida

Deu sim, achei que seria mais trabalhoso, mas funcionou.