Tips for plan page and how to fix error: Uncaught TypeError: Can not read property 'scrollHeight' of undefined

Question

Tips for plan page and how to fix error: Uncaught TypeError: Can not read property 'scrollHeight' of undefined

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good morning everyone! I'm trying to make a plans page: link

I'm having trouble scrolling. You can see that only with the club plans does it work and the others does not work. According to the browser is causing this error: Uncaught TypeError: Can not read property 'scrollHeight' of undefined

Could someone please help me?

javascript jquery

asked by anonymous 25.05.2018 / 16:43

2 answers

0

The condition:

if ('#clublist' + id) {}

will always be true. So the error says that there is no element #clublist4 , for example.

Try:

if ($('#clublist' + id).length) {}
if ($('#escolalist' + id).length) {}

etc ...

For the sake of saving rows, I believe there is no need to have a specific class for each category ( .planClub , .planEscola , etc).

25.05.2018 / 17:02

How to display the tr's side by side with the td's one below the other inside the html table? Select VIEW returns zero

score 0 · Accepted Answer

You do not need to use multiple% s of% s to change similar elements, so you're stuck having to create multiple methods for each id , making your job more complicated to maintain and inflate code too.

For similar elements, try to use classes, because you can get the elements from index (index). See the example below with the optimized code where clicks and methods are done independently of id s, avoiding repetitions and making the code much leaner:

//Botões de Categoria
$('.buttonDefault').click(function() {
   
   var bt = $(this);
   var idx = bt.index();

   $('.buttonDefault').removeClass("buttonActive buttonFamiliaActive planActive buttonClubActive");
   $('.plans').removeClass("planActive");
   bt.addClass("buttonClubActive buttonActive");
   $(".plans:eq("+idx+")").addClass("planActive");

});

//Botão "Ver Mais" para expandir a caixa com as informações dos planos
$('.verMais').click(function() {

   var bt = $(this);
   var idx = bt.closest(".priceColuna").index(".priceColuna");
   var lista = $(".list:eq("+idx+")");
   var winHeight = window.innerHeight/2;
   var altIni = 240;
   
   if(bt.hasClass("verMaisActive")){
      var tlista = altIni;
   }else{
      var thislista = $("li", lista);
      var tlista = 0;
      for(var x=0; x<thislista.length; x++){
         tlista += $(thislista[x]).outerHeight();
      }
   }

   bt.toggleClass("verMaisActive");
   lista.css("height", tlista+"px");

   var flag = false;
   lista.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
      
      if(!flag){
         flag = true;
         
         if(tlista == altIni){
            var scrolTo = $(".priceColuna");
            var scrolAdj = -15;
         }else{
            var scrolTo = $(".buttonComprar");
            var scrolAdj = -winHeight;
         }

         $('html, body').animate({
            scrollTop:
               scrolTo.eq(idx).offset().top + scrolAdj
         }, 800);
      }
   });

});

.price{
	padding: 150px 15px;
}

.price h2{
	text-align: center;
}

.price h2 b{
	color: #94a4cf;
}

/*Botões de escolha de categoria ==========================================================*/
.priceButtons{
	height: 160px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.buttonClub, .buttonEscola, .buttonInvestidor, .buttonFamilia{
	width: 200px;
	height: 50px;
	background: #fff;
	text-align: center;
	display: inline-block;
	margin-top: 50px;
	margin-bottom: 50px;
	cursor: pointer;
	font-size: 1em;
	padding-top: 10px;
	border-top: 2px solid #252833;
	border-bottom: 2px solid #252833;
	text-transform: uppercase;
	font-weight: 700;
	transition: all 0.3s ease;
}

.buttonClub{
	border-radius: 10px 0 0 10px;
	border: 2px solid #252833;
}

.buttonFamilia{
	border-radius: 0 10px 10px 0;
	border: 2px solid #252833;
}

.buttonEscola{
	border-right:2px solid #252833;
}

/* .buttonClub:hover, .buttonEscola:hover, .buttonInvestidor:hover, .buttonFamilia:hover, .buttonActive{ */
.buttonDefault:hover, .buttonActive{
	background: #e8c29c;
	border-top-color: #D2AA82;
	border-bottom-color: #D2AA82;
}

.buttonClub:hover, .buttonClubActive{
	border-left-color: #D2AA82;
}

.buttonFamilia:hover, .buttonFamiliaActive{
	border-right-color: #D2AA82;
}

/*Colunas com os planos ==================================================================*/
.planClub, .planEscola, .planInvestidor, .planFamilia{
	display: none;
}

.planActive{
	display: block;
	animation: planos 0.3s;
	animation-fill-mode: both;
	-webkit-animation: planos 0.3s;
	-webkit-animation-fill-mode: both;
	-moz-animation: planos 0.3s;
	-moz-animation-fill-mode: both;
	-o-animation: planos 0.3s;
	-o-animation-fill-mode: both;
}

@keyframes planos{
	from{opacity: 0; transform: scale(0);}
	to{opacity: 1; transform: scale(1);}
}
@-webkit-keyframes planos{
	from{opacity: 0; transform: scale(0);}
	to{opacity: 1; transform: scale(1);}
}
@-moz-keyframes planos{
	from{opacity: 0; transform: scale(0);}
	to{opacity: 1; transform: scale(1);}
}
@-o-keyframes planos{
	from{opacity: 0; transform: scale(0);}
	to{opacity: 1; transform: scale(1);}
}

/*Coluna de planos*/
.priceColuna{
	width: 100%;
	border: 1px solid #969696;
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
}

/*Nome dos planos*/
.priceName{
	background: #252833;
	width: 100%;
	padding: 30px 15px;
	color: #fff;
	
}

.priceName h5{
	margin:0 auto;
	text-align: center;
	text-transform: uppercase;
}

.priceName p{
	color: #fff;
	text-align: center;
	margin:0 auto;
}


/*Preço dos planos*/
.priceCusto{
	height: 70px;
	color: #D2AA82;
	background: #F4F4F4;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #969696;
}

.priceCusto h3{
	margin:0;
}

.priceCusto h3 b{
	font-size: 0.6666666666666666em;
	color: #969696;
	font-weight: 300;
}

/*Informações dos planos*/
.priceInfos{
	padding: 5px 20px;
}

.priceInfos ul{
	height: 240px;
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin:0;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
}

.priceInfos ul li{
	text-align: center;
	padding: 20px 0;
	border-bottom: 1px solid #969696;
	font-size: 0.875em;
}

/*Botão comprar*/
.buttonComprar{
	width:150px;
	background: #D2AA82;
	border: 2px solid #a68667;
	border-radius: 50px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.125em;
	font-weight: 700;
	margin:0 auto;
	margin-bottom: 10px;
	transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
}

.priceColuna a{
	text-decoration: none;
}

.buttonComprar:hover{
	border: 2px solid #8997bf;
	background: #a7b9e9;
}

/*Botão ver mais*/
.verMais{
	margin:0 auto;
	margin-bottom: 20px;
	background: #F4F4F4;

	text-align: center;
	cursor: pointer;
	border: 1px solid #969696;
}
.verMais::after{
	display: inline-block;
	vertical-align: middle;
	content: '';
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-top: 5px solid #303543;
}

.verMaisActive::after{
	border-top: none !important;
	border-bottom: 5px solid #303543;
}

.listActiveClub{
	height: 680px !important;
}

.listActiveEscola{
	height: 804px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<section class="container price">
		<h2>Como <b>cobramos</b> por nossos serviços</h2>
    
    <!-- Botões de Categorias-->
    <div class="priceButtons">
			<div class="buttonClub buttonDefault buttonActive buttonClubActive">Clubes</div>
			<div class="buttonEscola buttonDefault">Escolas</div>
			<div class="buttonInvestidor buttonDefault">Investidores</div>
			<div class="buttonFamilia buttonDefault">Familia</div>
		</div>

		<!--planos do clube-->
		<div class="planClub plans planActive">
			<div class="row">
				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Clubes</h5>
							<p>clubes</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$480<b> / mês</b></h3>
						</div>
						<!--informações-->
						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO1</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDOfim</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->

				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Clubes</h5>
							<p>clubes</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$480<b> / mês</b></h3>
						</div>
						<!--informações-->
						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO1</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDOfim</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->

				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Clubes</h5>
							<p>clubes</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$480<b> / mês</b></h3>
						</div>
						<!--informações-->
						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO1</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDOfim</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->
			</div><!--row-->
		</div><!--planos do clube-->

  
    
    <!--planos de escola-->
		<div class="planEscola plans">
			<div class="row">
				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Escola</h5>
							<p>Escola</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$300<b> / mês</b></h3>
						</div>
						<!--informações-->

						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->

				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Escola</h5>
							<p>Escola</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$300<b> / mês</b></h3>
						</div>
						<!--informações-->
						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->

				<div class="col-12 col-md-6 col-lg-4">
					<div class="priceColuna">
						<!--nome-->
						<div class="priceName">
							<h5>Escola</h5>
							<p>Escola</p>
						</div>
						<!--preço-->
						<div class="priceCusto">
							<h3>R$300<b> / mês</b></h3>
						</div>
						<!--informações-->
						<div class="priceInfos">
							<ul class="list">
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
								<li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
                <li>CONTEUDO</li>
							</ul>
							<div class="verMais"></div>
							<a href=""><div class="buttonComprar">Adquirir</div></a>
						</div>
					</div>
				</div><!--coluna-->
			</div><!--row-->
		</div><!--planos do escola-->
  
	</section>