Inserting HTML/Javascript code into the body of a Wordpress site through Visual Composer

Asked

Viewed 438 times

0

Hello!

I’m trying to insert a custom table (html/javascript code) in the body of a page of my Wordpress site.

This table: http://piscinafacil.com.br/tabela2.html

Currently the table is without the javascript part

Code:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Planos Mensais de Limpeza de Piscinas</title>
  <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  
<style>

body { background: #fff; font: 400 12px "Open Sans", "Helvetica Neue", sans-serif; color: #333; text-align: center; padding: 4em 15em; }

/*TÍTULOS*/
h1 { font-weight: 300; font-size: 5em; line-height: 1.35; margin: 0 0 .125em; }
h1 + p { font-size: 1.5em; color: #999; max-width: 30em; margin: 0 auto 3em; }

/*TABELA*/
table { width: 100%; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*TABELA - FONTS BASE*/
th { font-family: inherit; font-size: .875em; line-height: 1.45; color: #444; vertical-align: middle; padding: 1em; }
td { font-family: inherit; font-size: 1.5em; line-height: 1; color: #444; vertical-align: middle; } 
th { font-weight: 600; }

/*TABELA - BORDAS INICIAIS*/
colgroup:nth-child(1) { width: 15%; border: 0 none; }
colgroup:nth-child(2) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(3) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(4) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(5) { width: 10%; border: 1px solid #ccc; }

/*TABELA - HEADER*/
thead th { background: #def4fe; background: -moz-linear-gradient(top,  #ffffff 0%, #f5f5f5 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#f5f5f5 100%); text-align: center; position: relative; border-bottom: 1px solid #ccc; padding: 3em 0 2em; font-weight: 400; color: #999; }

thead th:nth-child(1) { background: transparent;  }
/*thead th:nth-child(3) {  }*/
thead th h2 { font-weight: 800; font-size: 20px; line-height: 1; color: #59c7fb; } /*Títulos plano*/
thead th h2 + p { font-size: 18px; line-height: 1; } /*Preços plano*/
/*thead th:nth-child(3) h2 {  }*/
/*thead th:nth-child(3) h2 + p {  }*/

/*TABELA - BODY*/
tbody th { background: #fff; border-left: 1px solid #ccc; }
tbody th span { font-weight: normal; font-size: 87.5%; color: #999; display: block; } /*Fonte da descrição dos benefícios*/

tbody td { background: #fff; text-align: center; }

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td { background: #f5f5f5; border: 1px solid #ccc; border-width: 1px 0 1px 1px; } /*Formatação das linhas da tabela*/
tbody tr:last-child td { border-bottom: 0 none; } /*Formatação da borda do botão comprar*/

/*TABELA - FOOT*/
tfoot th  { padding: 1em 0.5em; border-top: 1px solid #ccc; }
tfoot td  { text-align: center; padding: 1em 0.5em; border-top: 1px solid #ccc; }
tfoot a  { font-size: 12px; font-weight: bold; color: #fff; text-decoration: none; text-transform: uppercase; display: block; padding: 1.125em 2em; background: #1bbde8; border-radius: .5em; }


/*CHECKLIST ICONS*/
.fa-check {
  color: #b7e000;
}

.fa-times {
  color: #AF3D11;
}

</style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <body>
<img src="https://piscinafacil.com.br/wp-content/uploads/2016/07/logo-piscina-facil-manutencao-com-responsabilidade-tecnica.png?x63376" height="100px">
  <h1>Planos Mensais</h1>
  <p>Confira nossos planos para todos os tipos de piscina.</p>

Estado 
	<select name="estado"> 
		<option value="estado">Selecione o Estado</option> 
		<option value="ac">SC</option> 
	</select>
<br>
Cidade
	<select name="cidade"> 
		<option value="cidade">Selecione a Cidade</option> 
		<option value="ac">Florianópolis</option> 

	</select>
<br><br>
Tipo de Piscina
	<select name="tipo"> 
		<option value="tipo">Residencial</option> 
		<option value="ac">Coletiva</option> 

	</select>
<br>
Volume da Piscina
	<select name="volume"> 
		<option value="volume">Até 50m²</option> 
		<option value="ac">de 51m² até 100m²</option> 

	</select>

<br><br><br>


	<table>

		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>

	    <thead>
	    	<tr>
	    		<th>&nbsp;</th>
	    		<th>
	    			<h2>VIRTUAL</h2>
	    			<p>R$ </p>
	    		</th>
	    		<th>
	    			<h2>INVERNO</h2>
	    			<p>R$ </p>
	    		</th>
	    		<th>
	    			<h2>+ FÁCIL</h2>
	    			<p>R$ 190,00</p>
	    		</th>
	    		<th>
	    			<h2>ZERO CLORO</h2>
	    			<p>R$ </p>
	    		</th>
	    	</tr>
	    </thead>

	    <tfoot>
	    	<tr>
	    		<th>&nbsp;</th>
	    		<td><a href="#">ADERIR</a></td>
	    		<td><a href="#">ADERIR</a></td>
	    		<td><a href="#">ADERIR</a></td>
                        <td><a href="#">ADERIR</a></td>
	    	</tr>
	    </tfoot>

	    <tbody>
	    	<tr>
	    		<th>Quantidade de Visitas/Mês </th>
	    		<td>0</td>
	    		<td>2</td>
	    		<td>
                             <form>
                             <SELECT NAME = "menu" SIZE=1>
                             <OPTION>4
                             <OPTION>8
                             </SELECT>
                             </form>
                        </td>
	    		<td>
                             <form>
                             <SELECT NAME = "menu" SIZE=1>
                             <OPTION>4
                             <OPTION>8
                             </SELECT>
                             </form>
                        </td>
	    	</tr>
	    	<tr>
		    	<th>Quantidade de Visitas/Mês - Supervisor Operacional </th>
		    	<td>0</td>
	    		<td>0</td>
	    		<td>0</td>
	    		<td>0</td>
	    	</tr>
	    	<tr>
	    		<th>Controle Técnico </th>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Anotação de Função Técnica </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Análise da Água in Loco <span>Análise dos parâmetros: pH, Cloro Residual, Alcalinidade e Turbidez</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></i></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Análise da Água em Laboratório Credenciado </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Limpeza Física <span>Aspiração, Peneiração, Escovação, Limpeza de bordas, etc...</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Limpeza Química <span>Aplicação de Produtos</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Consultoria Técnica <span>Instalação Elétrica, Hidráulica, Bombas e Filtros</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Assessoria Completa para Regularização da Piscina <span>Vigilância Sanitária e Prefeitura</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Manutenção Preventiva de Filtro e Bomba </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Fornecimento de Guardião de Piscinas </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	</tr>
	    </tbody>

	</table>

</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>

I’m trying to insert the table into the body of a site page made Wordpress.

The site was fully developed with the aid of Visual Composer. I’m trying to insert the table through the raw HTML, element of Visual Composer.

inserir a descrição da imagem aqui

However, when inserting the code into raw HTML, the layout of WHOLE PAGE ends up being disfigured (Menu, font-size, etc). I believe the css of this table is changing all the rest of the content.

I would like to know why, this table code inserted in raw HTML, is changing the layout of the whole page, and how I can proceed so that the code does not change the layout of WHOLE page?

Thanks for your attention!

javascript html wordpress

  • someone to help? :)

  • Does anyone have any idea what it might be?

  • Probably a <iframe> solved the problem

  • @brasofilo So, I was able to insert by iframe, what happens is that using the Chrome browser, sometimes it blocks the content and says that the page is trying to load scripts from non-authenticated sources. And with this the table that I am trying to insert via iframe, is blocked and will only be shown if the user releases this blocked content. The problem is that to release this content one has to go in a "shield" that is shown in the browser address bar, which must go unnoticed by many users. You know why it happens?

  • The iframe link there in your question is HTTP and the site runs HTTPS, wouldn’t that be?

  • @brasofilo So actually up there I put the link in http, but inside the iframe it is in https. The page where I’m trying to insert iframe, is from a site created in wordpress, and the page that is within iframe, was developed without the aid of wordpress, html only, javascript, css. But it is on the same server as this Wordpress site. Page of the wordpress site: https://piscinafacil.com.br/residential/ (in the middle of the page is iframe) Page of the table inside the iframe: https://piscinafacil.com.br/tabela_teste.html#

Show 1 more comment
No answers

Browser other questions tagged javascript html wordpress

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