-
Conteúdo Similar
-
Por nilo7004b
Ola pessoal, sou novo aqui no fórum e desculpem qualquer erro, já procurei bastante pelo meu problema e não consegui encontrar nada a respeito. O meu problema é que eu estou desenvolvendo uma pagina web e após definir o background como um gradiente e adicionar divs aparecem umas manchas brancas pela pagina que vão alterando de posição a medida em que vai fazendo scroll na pagina, na imagem anexada tem o exemplo, gostaria de saber qual a origem do problema e como resolver. Desde já agradeço pela ajuda.
Obs.: as DIVs adicionadas não estão com a cor de background definida.
-
-
Por ShadowDLL
Olá pessoas,
Estou desenvolvendo um painel responsivo, porém, durante os testes do mesmo encontrei um erro ao abrir o 'navbar',
sendo assim, gostaria de pedir uma ajudinha de vocês se possível...
Bem, vamos lá!
[ Qual o Problema? ]
Ao abrir o 'navbar' na resolução para dispositivos móveis, o conteúdo presente em <div class="one-content"> deveria
ser 'jogado' para a direita sem redimensionar a largura dos itens conforme o 'navbar' é apresentado na tela, porém,
o mesmo está redimensionando a largura dos itens para ajustar-se na tela sem os 'jogar' para a direita...
Vale a pena ressaltar que o conteúdo só deverá ficar com uma parte "oculta" nas resoluções de dispositivos móveis.
[ Imagem do Erro ]
[ Imagem da Solução ]
[ Código com Erro ]
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="one-wrapper"> <div class="one-sidebar"></div> <div class="one-content"> <div class="one-navbar"> <div class="toggle"> <a class="toggle-btn"></a> </div> </div> <div class="container"> <form class="form-inline"> <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Remember my preference</span> </label> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> CSS
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'); .one-wrapper { align-items: stretch; display: flex; width: 100%; } .one-sidebar { background-color: #333c4e; transition: all 0.2s; min-width: 250px; max-width: 250px; color: #ffffff; } .one-sidebar.active { margin-left: -250px; } .one-content { background-color: #f0f1f3; align-items: stretch; transition: all 0.2s; min-height: 100vh; color: #666666; width: 100%; } .one-navbar { border-bottom: 1px solid #cccccc; background-color: #ffffff; padding: 10px; width: 100%; } .one-navbar .toggle { padding: 20px; } .one-navbar .toggle a { background: #000000; padding: 20px; } JS
$(function(){ $ ('.toggle-btn').click (function(){ $('.one-sidebar').toggleClass('active'); }); if ($(window).width() < 1000) { $('.one-sidebar').toggleClass('active'); } });
Desde já, agradeço!
-
Por fael97
Ola pessoa descupem-me pelo título mas tive que faze-lo.
é o seguinte estou ficando louco com um bug que está me ocorrendo e não sei resolve-lo.
bem, tenho uma tabela chamada conexões, nela tenho os campos (familia_um,familia_dois,ativo) e tenho outra tabela chamada familia com varios campos.
quero fazer assim, buscar todas as famílias na base e filtrar as conexões de uma determinada família. Se existe conexão entre a família x e y em conexões [familia_um = x e familia_dois = y], eu não vou pegar a família y(a família que está na tabela familias), ou seja quero pegar a família que não está em conexão com com as famílias de uma determinada família, acho que entenderam.
já fiz assim, criei um vetor chamado conexoes_array que guardará todas as famílias para que possa ser filtrado.
criei outro chamado familia_array que guarda as minhas conexões, ou seja cada família possui conexões na base como se fosse uma rede
agora tenho que verificar
agora está desenvolvendo mais, quero pegar a família de conexoes_array(a,c,e) que não está entre minhas conexões em familia_array(a,b,c,d,e), por tanto fiz assim
criei uma array chamado nova_conexao
Mas está aparecendo o seguinte erro, e assim por diante para outras chaves.....
( ! ) Notice: Undefined index: idfamilia in D:\wamp64\www\onfamily.com\nav\conexoes\sistema\busca_conexoes.php on line 110 Call Stack # Time Memory Function Location 1 0.0000 402080 {main}( ) ...\busca_conexoes.php:0
Oque faço para resolver este erro, e se caso houver uma outra solução para este meu problema, podem me ajudar?
-
Por Davi M.
Olá, queria a ajuda de alguém para tentar resolver um bug no meu slider, acontece que aparentemente ele funciona normalmente, mas em algum momento quando volto para olhar-lo as vezes ele começa a trocar as imagens de forma muito rápida, tipo em um e um segundo, mas logo para e funciona normal. Não consegui descobrir o porque. Duvido que vocês vão ter tempo e paciência de ficar olhando para o slider para ver o erro, então queria que vocês apenas olhassem para os códigos do meus slider e me dissesse se tem algo que eu estou fazendo de errado ou que poderia fazer melhor, afim de não term mais chances do slider ter esse bug. Obrigado.
Código:
<html>
<head>
<title>Slider</title>
<style>
/* SLIDER */
* {
margin:0;
padding:0;
}
.slides {
width: 100%;
height: 100%;
z-index: 200;
position: relative;
border-bottom: ridge blue 5px;
}
#imagem1, #imagem2, #imagem3 {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
z-index: 200;
}
#imagem2, #imagem3 {
display: none;
}
#imagem1 {
display: block;
}
/*Botões*/
#B1, #B2, #B3 {
z-index: 300;
font-size: 50px;
}
#B1v, #B2v, #B3v {
z-index: 300;
font-size: 50px;
}
#pausar1, #pausar2, #pausar3 {
z-index: 300;
font-size: 50px;
}
#continuar1, #continuar2, #continuar3 {
z-index: 300;
font-size: 50px;
display: none;
}
.textoSlider {
position: relative;
top: -250px;
text-align: center;
color: white;
font-size: 30px;
width: 80%;
z-index: 300;
}
.saberMais {
font-size: 20px;
font-weight: bold;
background-color: #00BFFF;
width: 150px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
cursor: pointer;
text-align: center;
position: relative;
bottom: 230px;
z-index: 300;
}
.saberMais:hover {
transform: scale(.9);
transition: 1s;
border-radius: 10px;
background-color: #1E90FF;
}
.saberMais a:hover {
color: orange;
}
.saberMais a {
text-decoration: none;
color: blue;
}
#controle {
display: flex;
justify-content: space-between;
}
.controleEstilo {
width: 10%;
height: 10%;
margin: 10px;
text-align: center;
color: white;
position: relative;
bottom: 240px;
}
.controleEstilo:hover {
color: #104af6;
transition-duration: 1s;
}
.introducaoSlider {
display: flex;
justify-content: center;
}
.tituloSlider {
font-size: 30px;
color: red;
}
@media only screen and (max-width: 1100px) {
.textoSlider {
font-size: 20px;
width: 95%;
}
}
</style>
</head>
<body>
<!-- SLIDER -->
<header>
<ul>
<li>
<div id="imagem1">
<img src="https://joaobidu.com.br/wp-content/uploads/2017/05/foto-de-lua-crescente-550x367.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 1</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais"><a href="#titulo1" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B1v">￩</div>
<div class="controleEstilo" id="pausar1">❙❙</div>
<div class="controleEstilo" id="continuar1">▷</div>
<div class="controleEstilo" id="B1">￫</div>
</div>
</div>
</li>
<li>
<div id="imagem2">
<img src="http://conexaoplaneta.com.br/wp-content/uploads/2016/05/cultivando-fases-da-lua-800.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 2</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais" ><a href="#titulo2" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B2v">￩</div>
<div class="controleEstilo" id="pausar2">❙❙</div>
<div class="controleEstilo" id="continuar2">▷</div>
<div class="controleEstilo" id="B2">￫</div>
</div>
</div>
</li>
<li>
<div id="imagem3">
<img src="https://abrilclaudia.files.wordpress.com/2017/11/lua_cheia.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 3</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais"><a href="#titulo3" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B3v">￩</div>
<div class="controleEstilo" id="pausar3">❙❙</div>
<div class="controleEstilo" id="continuar3">▷</div>
<div class="controleEstilo" id="B3">￫</div>
</div>
</div>
<li>
</ul>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//SLIDER
var counter = 0
var timer = setInterval(function() {
counter++
console.log(counter)
//Troca slider sozinho
if (counter === 10) {
$("#imagem1").fadeOut("slow")
$("#imagem2").fadeIn("slow")
} else if (counter === 20) {
$("#imagem2").fadeOut("slow")
$("#imagem3").fadeIn("slow")
} else if (counter === 30) {
$("#imagem3").fadeOut("slow")
$("#imagem1").fadeIn("slow")
//reset
} else if (counter > 30) {
counter = 0
}
//Pausar/Continuar slider 1
$("#pausar1").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar1").click(function(){
counter = 0
})
//Pausar/Continuar slider 2
$("#pausar2").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar2").click(function(){
counter = 10
})
//Pausar/Continuar slider 3
$("#pausar3").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar3").click(function(){
counter = 20
})
}, 500);
//variaves usadas para pausar/continuar slider
let continuar1 = $("#continuar1")
let continuar2 = $("#continuar2")
let continuar3 = $("#continuar3")
let pausar1 = $("#pausar1")
let pausar2 = $("#pausar2")
let pausar3 = $("#pausar3")
//Se clicar em pausar1 slide, pausar1 some e aparece continuar1
pausar1.click(function(){
//pausar some
$("#pausar1").css('display', 'none')
//continuar aparece
$("#continuar1").css('display', 'block')
})
//Se cliclar em continuar1, continuar1 some e aparece pausar1
continuar1.click(function(){
//continuar some
$("#continuar1").css('display', 'none')
//pausar aparece
$("#pausar1").css('display', 'block')
})
//Se clicar em pausar2 slide, pausar2 some e aparece continuar2
pausar2.click(function(){
//pausar some
$("#pausar2").css('display', 'none')
//continuar aparece
$("#continuar2").css('display', 'block')
})
//Se cliclar em continuar2, continuar2 some e aparece pausar2
continuar2.click(function(){
//continuar some
$("#continuar2").css('display', 'none')
//pausar aparece
$("#pausar2").css('display', 'block')
})
//Se clicar em pausar3 slide, pausar3 some e aparece continuar3
pausar3.click(function(){
//pausar some
$("#pausar3").css('display', 'none')
//continuar aparece
$("#continuar3").css('display', 'block')
})
//Se cliclar em continuar3, continuar3 some e aparece pausar3
continuar3.click(function(){
//continuar some
$("#continuar3").css('display', 'none')
//pausar aparece
$("#pausar3").css('display', 'block')
})
//Avançar
$("#B1").click(function() {
counter = counter = 10
$("#imagem1").fadeOut("slow")
$("#imagem2").fadeIn("slow")
})
$("#B2").click(function() {
counter = counter = 20
$("#imagem2").fadeOut("slow")
$("#imagem3").fadeIn("slow")
})
$("#B3").click(function() {
counter = counter = 30
$("#imagem3").fadeOut("slow")
$("#imagem1").fadeIn("slow")
})
//Voltar
$("#B1v").click(function() {
counter = counter = 20
$("#imagem1").fadeOut("slow")
$("#imagem3").fadeIn("slow")
})
$("#B3v").click(function() {
counter = counter = 10
$("#imagem3").fadeOut("slow")
$("#imagem2").fadeIn("slow")
})
$("#B2v").click(function() {
counter = counter = 0
$("#imagem2").fadeOut("slow")
$("#imagem1").fadeIn("slow")
})
//Para arruamar bug no firefox que não aceita height:100% no modo celular
var firefox = navigator.userAgent.indexOf('Firefox') > -1;
if (window = firefox){
alert("Firefox")
if (window.innerWidth < 1000) {
$(".slides").css('max-height', '580px')
$("header").css('max-height', '580px')
alert("1000")
}
}
</script>
</body>
</html>
-
