Algoritimo de seleçao, para alterar divs de posiçao?
Olá a todos!!
é o seguinte!!
tenho um programa rodando em web, porem me deparei com um problema grave, a ideia é a responsividade, ou seja que a pagina va se adaptando a cada resoluçao de monitor, a pagina é composta por elementos relativos, se for um tipo clicado no menu tera 3 elementos, se for outro tera 4, assim por diante ate 6.
como crio uma condiçao com javascript, para gerar um alerta la no css para mover as divs e remover as vazias.
hhhhhh hhhhhh hhhhhh
h h h h h h
h h h h h h
hhhhhh hhhhhh hhhhhh
este e basicamente o exemplo tenho tres tiles como fasso para testar o codigo e verificar q o do meio esta vaizio, com javascript, depois informar as css para mover os dois da ponta para o centro da pagia nao deixando espaço vazio, nao fasso ideia de onde começar???
vou colocar o codigo,
pensei em testar meu javascript do inicio, para verificar quantos retornos ele daria, dai chamaria outra pagina css vinculada e acrecentaria o link, porem nn sei oque vai acontecer com o link original da pagia e ai oque acham??
<DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo/3blocos.css" type="text/css" media="screen">
<link href='[https://fonts.googleapis.com/css?family=Fjalla+One'](https://fonts.googleapis.com/css?family=Fjalla+One) rel='stylesheet' type='text/css'>
<title>SUINO</title>
<script language="javascript">
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
document.oncontextmenu=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script type="text/javascript">
function calcularMoeda(){
//pego o value do campo1//
var valor1 = document.getElementById("campo1").value;
//remove os pontos e virgulas//
valor1 = valor1.replace(".", "");
valor1 = valor1.replace(",", "");
//realiza os calculos//
var total = valor1;
var icms = ((valor1*1.0303171641791045)-valor1);
icms = icms/100;
var pis = ((valor1*1.01665)-valor1);
pis = pis/100;
var soma = icms + pis;
//transforma em moeda//
total = MascaraMoedaValue("" + total + "",'.',',');
icms = MascaraMoedaValue("" + icms.toFixed(2) + "",'.',',');
pis = MascaraMoedaValue("" + pis.toFixed(2) + "",'.',',');
soma = MascaraMoedaValue("" + soma.toFixed(2) + "",'.',',');
//envia o resultado do calculo para o campo pre setado//
document.getElementById("total").innerText = total;
document.getElementById("icms").innerText = icms;
document.getElementById("pis").innerText = pis;
document.getElementById("soma").innerText = soma;
document.getElementById("total1").innerText = total;
document.getElementById("icms1").innerText = icms;
document.getElementById("pis1").innerText = pis;
document.getElementById("soma1").innerText = soma;
document.getElementById("total2").innerText = total;
document.getElementById("icms2").innerText = icms;
document.getElementById("pis2").innerText = pis;
document.getElementById("soma2").innerText = soma;
}//mascara para numeros completos
function MascaraMoedaValue(valor, SeparadorMilesimo, SeparadorDecimal){
var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';
if (strCheck.indexOf(key) == -1) return false; // Chave inválida
len = valor.length;
for(i = 0; i < len; i++)
if ((valor.charAt(i) != '0') && (valor.charAt(i) != SeparadorDecimal)) break;
aux = '';
for(; i < len; i++)
if (strCheck.indexOf(valor.charAt(i))!=-1) aux += valor.charAt(i);
len = aux.length;
if (len == 0) valor = '';
if (len == 1) valor = '0'+ SeparadorDecimal + '0' + aux;
if (len == 2) valor = '0'+ SeparadorDecimal + aux;
if (len > 2) {
aux2 = '';
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
valor = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
valor += aux2.charAt(i);
valor += SeparadorDecimal + aux.substr(len - 2, len);
return valor;
}
return valor;
}
function MascaraMoedaInput(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){
var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';
var whichCode = (window.Event) ? e.which : e.keyCode;
if (whichCode == 13) return true;key = String.fromCharCode(whichCode); // Valor para o código da Chave
if (strCheck.indexOf(key) == -1) return false; // Chave inválida
len = objTextBox.value.length;
for(i = 0; i < len; i++)
if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break;
aux = '';
for(; i < len; i++)
if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i);
aux += key;
len = aux.length;
if (len == 0) objTextBox.value = '';
if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux;
if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux;
if (len > 2) {
aux2 = '';
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
objTextBox.value = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
objTextBox.value += aux2.charAt(i);
objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
}
return false;
}
</script>
</head>
<body>
<div class="barra vermelho">
<h1>SUINO</h1>
<div class="logo">
<img src="midia/porco.png"/>
</div>
<div class="busca">
<h2>Informe o valor da compra abaixo: $$</h2>
<input type="text" id="campo1" onKeyPress="return(MascaraMoedaInput(this,'.',',',event))"/>
<button type="button" onclick="calcularMoeda()">calcular</button>
</div>
<div class="informacoes">
<br>
<br>
<br>
<li id="obs" align="justify">Crédito Presumido ICMS: 1 para cada 5, representando 20% a cada 4%, liquido 3,03%.</li>
<li id="obs" align="justify">Crédito Presumido Pis e Cofins: Valor da compra x Percentual Tributado x 60% x 9,25%.</li>
<li id="obs" align="justify">*Necessário liminar para isenção do Funrural.</li>
</div>
<div class="retorno">
<a href="menu.html"><h2>VOLTAR</h2></a>
<a href="menu.html"><img src="midia/retorno.png"/></a>
</div>
</div>
<div class="header">
<div class="linha">
<div class="tile cinza">
<div class="title">
titulo
</div>
</div>
<div class="tile cinza">
<div class="title">
titulo
</div>
</div>
<div class="tile cinza">
<div class="title">
titulo
</div>
</div>
<div class="tile cinza">
<div class="title">
titulo
</div>
</div>
<div class="tile cinza">
<div class="title">
titulo
</div>
</div>
</div>
</div>
</body>
</html>Discussão (1)
Carregando comentários...