Apagar/Ocultar conteúdo HTML

15 respostas Resolvido
P

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?

15 Respostas

E

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)

P

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>
E

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?

P

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.

E

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 >.<’

P

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

W

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.

E

: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.

P

Não funcionou :frowning:

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

Muito obrigado pela força

P

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);
P

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'
					});
E
Solucao aceita

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>' +
P

Obrigado emanuele… vlw mesmo pela paciência.

E

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

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

P

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

Criado 28 de agosto de 2017
Ultima resposta 30 de ago. de 2017
Respostas 15
Participantes 3