3
I’m running some tests with a script where the user can only proceed to the next step if the corresponding checkbox is checked, I managed with the help of @Sam to perform this configuration, but now I have a layout problem, He was disfigured and I confess I did not understand why. I’m using a page from a framework I acquired that can be seen here:
My page looks like this, the html
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
<h1 class="page-title txt-color-blueDark"><i class="fa fa-pencil-square-o fa-fw "></i> Termo de Uso</h1>
</div>
</div>
<section id="widget-grid" class="">
<div class="row">
<article class="col-sm-12 col-md-12 col-lg-6">
<div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false">
<header>
<span class="widget-icon"> <i class="fa fa-check"></i> </span>
<h2>Termo de Adesão </h2>
</header>
<div>
<div class="jarviswidget-editbox">
</div>
<div class="widget-body">
<div class="row">
<form id="wizard-1" novalidate="novalidate">
<div id="bootstrap-wizard-1" class="col-sm-12">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li class="active" data-target="#tab1">
<a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
</li>
<li data-target="#tab2" class="disabled">
<a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
</li>
<li data-target="#tab3" class="disabled">
<a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
</li>
<li data-target="#tab4" class="disabled">
<a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong>Termo 1 </strong> - Uso da Internet </h3>
<div class="row">
<div class="col-sm-12">
<h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
<p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
<p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
<p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
<p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
<br />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<div class="checkbox">
<label>
<input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
<span>Aceito os termos do serviço</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
<input class="form-control " placeholder="Data" type="text" name="datat1" id="datat1" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<br>
<h3><strong>Termo 2</strong> - Acesso a Dados</h3>
<div class="row">
<div class="col-sm-12">
<h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
<p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
<p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
<p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
<p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
<br />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<div class="checkbox">
<label>
<input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
<span>Aceito os termos do serviço</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
<input class="form-control " placeholder="Data" type="text" name="datat2" id="datat2" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong>Termo 3</strong> - Uso da Internet</h3>
<div class="row">
<div class="col-sm-12">
<h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
<p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
<p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
<p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
<p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
<br />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<div class="checkbox">
<label>
<input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
<span>Aceito os termos do serviço</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
<input class="form-control " placeholder="Data" type="text" name="datat3" id="datat3" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong>Step 4</strong> - Save Form</h3>
<br>
<h1 class="text-center text-success"><strong><i class="fa fa-check fa-lg"></i> Complete</strong></h1>
<h4 class="text-center">Click next to finish</h4>
<br>
<br>
</div>
<div class="form-actions">
<div class="row">
<div class="col-sm-12">
<ul class="pager wizard no-margin">
<li class="previous disabled"><a href="javascript:void(0);" class="btn btn-lg btn-default"> Anterior </a></li>
<li class="next"> <a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Próximo </a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</article>
</section>
The script
pageSetUp();
var pagefunction = function() {
loadScript("js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js", runBootstrapWizard);
function runBootstrapWizard() {
// COMEÇO DO SCRIT
$(document).ready(function() {
var checks = $(".checkbox[name^=CheckTermo]");
$('.form-bootstrapWizard').bootstrapWizard({
onNext: function(){
setTimeout(function(){
checks.trigger("change");
}, 100);
return verifica();
},
onTabClick: function(){
return verifica();
}
});
function verifica(){
var tab_ativa = $(".tab-content .active");
var check = tab_ativa.find(".checkbox[name^=CheckTermo]");
if( check.is(':checked') ){
$(".next").removeClass("disabled");
$(".form-wizard .active").next().removeClass("disabled");
return true;
}else{
$(".next").addClass("disabled");
$(".form-wizard .active").prev().addClass("disabled");
return false;
}
}
checks.on("change", verifica);
checks.trigger("change");
});
// FIM DO SCRIPT
$("#CheckTermo1").click(function () {
if($("#CheckTermo1").is(':checked')){
var d = new Date();
dataHora = (d.toLocaleString());
// Mostrando data no campo
$('#datat1').val(dataHora);
} else {
// Mostrando data no campo
$('#datat1').val("");
}
});
$("#CheckTermo2").click(function () {
if($("#CheckTermo2").is(':checked')){
var d = new Date();
dataHora = (d.toLocaleString());
// Mostrando data no campo
$('#datat2').val(dataHora);
} else {
// Mostrando data no campo
$('#datat2').val("");
}
});
$("#CheckTermo3").click(function () {
if($("#CheckTermo3").is(':checked')){
var d = new Date();
dataHora = (d.toLocaleString());
// Mostrando data no campo
$('#datat3').val(dataHora);
} else {
// Mostrando data no campo
$('#datat3').val("");
}
});
var $validator = $("#wizard-1").validate({
rules : {
CheckTermo1: {
required : true
},
CheckTermo2: {
required : true
},
CheckTermo3: {
required : true
}
},
messages : {
CheckTermo1 : "Informe o check 1",
CheckTermo2 : "Informe o check 2",
CheckTermo3 : "Informe o check 3"
},
highlight : function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight : function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorElement : 'span',
errorClass : 'help-block',
errorPlacement : function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#bootstrap-wizard-1').bootstrapWizard({
'tabClass' : 'form-wizard',
'onNext' : function(tab, navigation, index) {
var $valid = $("#wizard-1").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
} else {
$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step').html('<i class="fa fa-check"></i>');
}
}
});
};
// load fuelux wizard
loadScript("js/plugin/fuelux/wizard/wizard.min.js", fueluxWizard);
function fueluxWizard() {
var wizard = $('.wizard').wizard();
wizard.on('finished', function(e, data) {
$("#fuelux-wizard").submit();
console.log("submitted!");
$.smallBox({
title : "Congratulations! Your form was submitted",
content : "<i class='fa fa-clock-o'></i><i>1 seconds ago...</i>",
color : "#5F895F",
iconSmall : "fa fa-check bounce animated",
timeout : 4000
});
});
};
};
// end pagefunction
// Load bootstrap wizard dependency then run pagefunction
pagefunction();
The image of how the layout is with the code inserted is like this:
But it should be like this:
I believe the problem is in this stretch, but I could not solve, if I comment this part the layout is correct but the functionality is lost.
$('.form-bootstrapWizard').bootstrapWizard({
onNext: function(){
setTimeout(function(){
checks.trigger("change");
}, 100);
return verifica();
},
onTabClick: function(){
return verifica();
}
});
You have already tried temporarily removing JS to see if CSS is correct again?
– hugocsl
Yes, if I remove it the layout is correct @hugocsl, I did not put this in the question.
– adventistapr
So see if you didn’t need to change some sort of li tag to span or something, or if you needed to "encapsulate" an ul into a div or something. Because this kind of thing usually breaks css rules like
container > filhoai if u put an element between one and another breaks the css rule typecontainer div > filhoai css ceases to be applied correctly understands– hugocsl
Ever tested without setTimeout? Type only ...
onNext: function(){
 
 checks.trigger("change"); return verifica();
 },...– hugocsl
Hello @hugocsl, finish removing this part of the code and continue in the same way, strange thing.
– adventistapr
Do you have the accessible link of this project? Because regardless of having been disfigured, with CSS it should be possible to make other classes to fix this
– hugocsl
Hello @hugocsl, this project is from our intranet.
– adventistapr
It is that without being able to simulate this problem it is difficult to give you a solution. But because in your example ai of the image has this blue button with the 1 inside? In the original it doesn’t have this.... Does it have some fixed size in px, or Fz part of the original CSS? Vs is using some extra CSS besides the plugin? Did you change the width of the LI or put padding or margin there? Look at this http://prntscr.com/lx50bd
– hugocsl
So this problem of defacing the layout is when I enter this code here: $('.form-bootstrapWizard'). bootstrapWizard({ onNext: Function(){ setTimeout(Function(){ checks.Trigger("change"); }, 100); Return(); }, onTabClick: uncFtion(){ Return checks(); } }); .
– adventistapr