0
I have the following code:
<?php
if(!isset($_GET["p"])) {
echo $phpUtil->erro ("Produto inexistente!");
} else {
$imagemAdd = "<img src='../_img/add.png' style='height:40px;' />";
$produto = $produtosDao->pesquisaProdutoId($_GET["p"]);
if(!isset($_GET["p"]) || $produto == null) {
echo $phpUtil->erro ("Produto inexistente!");
} else {
$categoria = $categoriasDao->pesquisaNomeCategoria($produto->getIdCategorias());
$linkCategoria = "<a href='index.php?categoria=".$categoria['idCategorias']."'>".$categoria['nome']."</a>";
echo "<div class='fotosProduto'>";
require_once "_required/carousel.php";
echo "</div>";
echo '
<div class="detalhesProduto">
Categoria: <strong>'.$linkCategoria.'</strong><br /><br />
Produto: '.$produto->getNome().'<br />
'.nl2br($produto->getDescricao()).' <br /> <br /><br />
R$ '.$phpUtil->formataMoeda($produto->getPrecoUnitario()).' <br />
<div>
Estimativa do valor do Frete:<br />
<input type="text" class="typeTextPequeno" id="cep" pattern="[0-9]{2}[.][0-9]{3}[-][0-9]{3}" placeholder="Digite o CEP" required /> <span class="verFrete">Calcular Frete</span>
<div class="freteResultado" style="display:none;"></div> <br />
</div><br /><br />
<div class="comprar"></div><br />
</div>
';
if($produto->getEstoque()==0) {
echo '<script>
$(".comprar").html("Produto Sem estoque no momento");
</script>';
} else {
echo '<script>
$(".comprar").html("<a href=\"carrinho.php?acao=adicionar&idProduto='.$produto->getIdProdutos().'\"> '.$imagemAdd.'</a>");
</script>';
}
$semFoto = "<img src='../_img/semFoto.png' alt='Sem Foto' title='Sem Foto' />";
}
?>
<?php } ?>
And the JS
$(".verFrete").click(function () {
$(".freteResultado" ).css("display","none");
if($("#cep").val() =='') {
alert ('Preecnha o CEP');
$("#cep").focus();
return false;
} else {
$.ajax({
type: "POST",
url: "_required/calculaFrete.php",
data: {cep: $("#cep").val(), peso: '<?php echo $produto->getPeso(); ?>', precoUnitario: '<?php echo $produto->getPrecoUnitario(); ?>'},
dataType: 'json'
}).done(function(response){
if(response["erro"]) {
$(".freteResultado").html(response["erro"]);
} else {
texto = "Preco PAC : R$ "+response["precoPac"].toFixed(2)+"<br />";
texto += "Preco Sedex: R$ "+response["precoSedex"].toFixed(2);
$(".freteResultado").html(texto);
}
$(".freteResultado" ).show("slow", function() {});
});
}
});
The idea here is when you click the button, the JS is activated that will calculate the freight. This is being done.
But as soon as you calculate the freight, a div below with the values that pushes the button down. However, when the button drops, the correct one would be to push the rest of the site (base) together. And that’s not what happens: The button is on putting to the base.
How to fix this?
<!doctype html>
<html>
<head>
<title>Magic for Baby</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="author" content="no-cache" />
<meta name="generator" content="Magic for Baby" />
<meta name="description" content="Magic for Baby" />
<meta name="keywords" content="Confecção, Confecção Infantil, Infantís, Muriaé, Muriaé-MG, Acessórios, Roupas de bebês, Bodys, Macacão de bebê, Récem nascido, Babydools, Pijamas, Camisas de super heróis, Vestidos de bebês, Kids, Baby, Bebê, Linha noite, Moda bebê, Moda infantil, Mijão, Regata, Camisa, Blusa, Calça, Tapa-Fraldas" />
<meta name="url" content="http://www.magicforbaby.com.br" />
<meta name="Audience" content="all" />
<meta name="language" content="pt-BR" />
<meta name="rating" content="general" />
<meta name="robots" content="ALL, follow" />
<meta name="googlebot" content="ALL" />
<meta name="classification" content="Confecção, Têxtil"/>
<meta name="distribution" content="global" />
<meta http-equiv="reply-to" content="[email protected]" />
<link rel="shortcut icon" type="image/x-icon" href="../_img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../_global/_css/estilo.css">
<link rel="stylesheet" type="text/css" href="../_global/_css/loja.css">
<link rel="stylesheet" type="text/css" href="../_global/_css/menuLoja.css">
<link rel="stylesheet" type="text/css" href="../_global/_css/jquery.cycle2.css">
<link rel="stylesheet" type="text/css" href="../_global/_css/lightslider.css">
<script type="text/javascript" src="../_global/_js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../_global/_js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="../_global/_js/lightslider.js"></script>
<script type="text/javascript" src="../_global/_js/jquery.mask.js"></script>
<script type="text/javascript" src="../_global/_js/mascaras.js"></script>
<!--[if lt IE 9]>-->
<script type="text/javascript" src="../_global/_js/css3-mediaqueries.js"></script>
<!--[endif]-->
<script>
window.onload=function(){
$(".tudo").fadeIn("slow");
$(".carregando").fadeOut("slow");
}
</script>
</head>
<body>
<div class="carregando"><img src="../_img/carregando.gif"><br>Carregando...</div>
<div class="entrada">
<div class="sessoes"><div class="home">
<a href="../index.php">
<img src="../_img/home.png" />
</a>
</div>
<div class="busca">
<form action="?busca" method="post" id="busca">
<input class="typeTextMedio" required placeholder="Código ou Nome do Produto" type="text" name="busca"><input class="btnPesquisa" type="submit" value="Buscar">
</form>
</div>
<div class="conta">
<a href="painel.php">Minha Conta</a> || <a href="login.php?acao=logout">Sair</a>
</div>
<div class="carrinho"></div></div>
</div>
<div class="topo">
<div class="sessoes">
<div class="logo"><a href="index.php"><img src="../_img/logo.png" /></a></div>
<div class="banner"><div class="cycle-slideshow slide"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide">
<a href='index.php?lancamentos'>
<img style="width:890px;height: 117px;" src="../_img/_banner/_loja/lancamentos.jpg" />
</a>
</div>
<div class="slide">
<a href='index.php?oportunidade'>
<img style="width:890px;height: 117px;" src="../_img/_banner/_loja/oportunidades.jpg" />
</a>
</div>
<div class="slide">
<a href='index.php?freteGratis'>
<img style="width:890px;height: 117px;" src="../_img/_banner/_loja/fretegratis.jpg" />
</a>
</div>
</div></div>
</div>
</div>
<div class="conteudo">
<div class="sessoes">
<div class="menu"><ul class='menuPrincipal'><li>
<a href='index.php?categoria=10'>
<img src='../_img/semFoto.png' style='height:30px' alt='Sem Foto' title='Sem Foto'> Body
</a>
</li><li>
<a href='index.php?categoria=11'>
<img src='../_img/semFoto.png' style='height:30px' alt='Sem Foto' title='Sem Foto'> Mijão
</a>
</li></ul></div>
<div class="meio"><div class='fotosProduto'><script>
$(document).ready(function() {
$('#vertical').lightSlider({
gallery:true,
item:1,
vertical:true,
verticalHeight:295,
vThumbWidth:50,
thumbItem:8,
thumbMargin:4,
slideMargin:0
});
});
</script>
<h1 class='h1CentralisadoAvisos'>Produto sem fotos cadastradas ainda</h1></div>
<div class="detalhesProduto">
Categoria: <strong><a href='index.php?categoria=10'>Body</a></strong><br /><br />
Produto: Body P<br />
Body em tecido... <br /> <br /><br />
R$ 32,00 <br />
<div>
Estimativa do valor do Frete:<br />
<input type="text" class="typeTextPequeno" id="cep" pattern="[0-9]{2}[.][0-9]{3}[-][0-9]{3}" placeholder="Digite o CEP" required /> <span class="verFrete">Calcular Frete</span>
<div class="freteResultado" style="display:none;"></div> <br />
</div><br /><br />
<div class="comprar"></div><br />
</div>
<script>
$(".comprar").html("<a href=\"carrinho.php?acao=adicionar&idProduto=25\"> <img src='../_img/add.png' style='height:40px;' /></a>");
</script>
<script>
$(".verFrete").click(function () {
$(".freteResultado" ).css("display","none");
if($("#cep").val() =='') {
alert ('Preecnha o CEP');
$("#cep").focus();
return false;
} else {
$.ajax({
type: "POST",
url: "_required/calculaFrete.php",
data: {cep: $("#cep").val(), peso: '0.11', precoUnitario: '32.00'},
dataType: 'json'
}).done(function(response){
if(response["erro"]) {
$(".freteResultado").html(response["erro"]);
} else {
texto = "Preco PAC : R$ "+response["precoPac"].toFixed(2)+"<br />";
texto += "Preco Sedex: R$ "+response["precoSedex"].toFixed(2);
$(".freteResultado").html(texto);
}
$(".freteResultado" ).show("slow", function() {});
});
}
});
</script></div>
</div>
</div>
<div class="base">
<div class="sessoes"><div class="baseEsquerda">
<label style="font-weight:bold; color: #fff; font-size:15px;">Mapa do Site</label><br />
<ul class="menuBase">
<li><a href="index.php" title="Principal">Principal</a></li>
<li><a href="carrinho.php" title="Carrinho">Carrinho</a></li>
<li><a href="contato.php?form" title="Contato">Fale Conosco</a></li>
<li><a href="?freteGratis" title="Frete Grátis">Frete Grátis</a></li>
<li><a href="?lancamentos" title="Lançamentos">Lançamentos</a></li>
<li><a href="?oportunidades" title="Oportunidades">Oportunidades</a></li>
</ul>
</div>
<div class="barraBase"><hr class="hr" /></div>
<div class="baseDireita">
<label style="font-weight:bold; color:#FFF; font-size:15px;">Magic for Baby</label> <br />
Rua Sebastião José Rodrigues, 195<br />
Telefones: 3721 4603, 9 8888 4603<br />
</div>
<script>$(".carrinho").append("<div class='carrinhoMais'><a href='carrinho.php'>CARRINHO</a> R$<label class='totalCarrinho'>127,87</label></div>");</script></div>
</div>
<div class="final">
<div class="sessoes"><div class="finalEsquerda">Copyright© 2016 Magic for Baby. Todos os direitos reservados.</div>
<div class="finalDireita">Desenvolvido por :<a href="mailto:[email protected]?subject=Contato"><img align="right" class="imgFinal" src="../_img/carcleo.png" height="35" /></a></div></div>
</div>
</body>
</html>
Probably your problem is in html, try to put it below the button: <div style="clear: Both"></div>
– Roberto de Campos
If it doesn’t work, put the html to analyze..
– Roberto de Campos
had already tried it. And that’s all the content. But if you find it interesting, I can render in the browser and post everything, content, base...
– Carlos Rocha
do that, please
– Roberto de Campos
I put there at the end of the question
– Carlos Rocha
I couldn’t test because your external css and javascript files are missing, if you don’t have a domain on the web where I can test, pass me those external files, please.
– Roberto de Campos
I can even make a zip with the files but it won’t solve because it has a lot of shipping calculation done in php (class calculaFrete.php)
– Carlos Rocha
No problem, I just need the layout anyway
– Roberto de Campos
www.hotplateprensas.com.br/aa.zip
– Carlos Rocha