Tips for plan page and how to fix error: Uncaught Typeerror: Cannot read Property 'scrollHeight' of Undefined

Asked

Viewed 299 times

0

Good morning, everyone! I’m trying to make a page of plans: https://codepen.io/jkarlos96/pen/KRjrKV

  • I’m just having trouble with the scroll effect. You can see that only with club plans it works and others do not work. According to the browser is causing this error: Uncaught Typeerror: Cannot read Property 'scrollHeight' of Undefined

  • Besides, I wish he was back on top according to when you click the button but, it only goes down it does not go up.

Could someone please help me ?

  • If someone also has some hint for me to save lines in the code of the buttons of the categories, this was the only way I could make it work.
javascript jquery

2 answers

0

The condition:

if ('#clublist' + id) {}

will always be true. That’s why the error says there is no element #clublist4, for example.

Try:

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

etc....

Regarding the tip to save lines, I believe there is no need to have a specific class for each category (.planClub, .planEscola, etc.).

0


No need to use several ids to change similar elements, so you are hostage to have to create various methods for each id, making your job more complicated to maintain and inflate the code too much.

For similar elements, try to use classes, because this way you can catch the elements by index (index). See the example below for optimized code where clicks and methods are done independently of ids, avoiding repetitions and leaving 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>
<script src="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>

  • About the button of the categories, I liked that the code became smaller, I will only think about changing the colors of the layout that as you see: Only the Club and Family Buttons that have a different change. /* .buttonClub:hover, .buttonEscola:hover, .buttonInvestidor:hover, .buttonFamilia:hover, .buttonActive{ */&#xA;.buttonDefault:hover, .buttonActive{&#xA; background: #e8c29c;&#xA; border-top-color: #D2AA82;&#xA; border-bottom-color: #D2AA82;&#xA;}&#xA;&#xA;.buttonClub:hover, .buttonClubActive{&#xA; border-left-color: #D2AA82;&#xA;}&#xA;&#xA;.buttonFamilia:hover, .buttonFamiliaActive{&#xA; border-right-color: #D2AA82;&#xA;}

  • and in the matter of the button see more, it looks good too, only the problem is that each category will have a different size. because each plan will have its different information and with different quantities ie, will change the size.

  • This is easy to solve...

  • You can use the method .slide jquery instead of adding a class.... o .slide descend to div of the size it has, do not need to fix a height.

  • and in the matter of . Immaterial, this was the main, just because it is not working in other planes, only in the first if. I wanted to make it cooler, when you click on the button see more then the scroll goes down and goes up according to the button. But he’s only going down, he’s not going up, and he’s only working on the first if. Besides, the animation is also cooler.

  • seriously? how do I do with . slide ?

  • opa I thank. Unfortunately javascript not yet know how to develop, I have difficulties kkk

  • vlw :). the complete website is: https://juarysantos.com/ &#Xa

  • The slide doesn’t work in this case, but it didn’t even need to pq the CSS Transition already solves. See now how it turned out, maybe you need some adjustment to your site, but then you test and tell me.

  • It was great, thanks, only on mobile that was spending too much, but the rest was great, I’ll update there for you to see

  • I put it here to make it easier to see: https://juarysantos.com/price.html

  • the "School" was excellent, only others passed too

  • Take a look now. I was only able to scroll after the CSS animation, because when the animation is running, jQuery cannot calculate the distance of the elements to the top.

  • was great, thank you very much :)

Show 9 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.