-
Similar Content
-
By marcelocardoso
Fala galera...
Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
A nível de conhecimento, segue código para:::
1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...
CODE:
$(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;
Dicas, Sugestões como fazer, realizar, agradeço.
Obrigado.
-
By Guss
var carro = {
cor = "azul",
modelo = "fusca",
marca = "Volwagen,
kms = 10000,
combustivel = "gasolina"
}
-
By _FelipeOlvr
Oi pessoal, blz?
Bom, passei quase a tarde toda pra fazer o seguinte:
Imagina que o body tem scroll Y.
agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
-
By eduardaarosaa
Estou tentando fazer um validador de idade, mas meu onclick não está retornando como o esperado. O caminho para o aquivo externo está correto, já testei com um alert.
Meu HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Verificador de Hora</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
<h1>Verificador de Idade</h1>
</header>
<section>
<div>
<p>Ano de nascimento:
<input type="number" name="txtnumber" id="txtano">
</p>
<p>
Sexo:
<input type="radio" name="radiosex" id="masc" checked>
<label for="masc">Masculino</label>
<input type="radio" name="radiosex" id="fem" >
<label for="fem">Feminino</label>
</p>
<p>
<input type="button" value="Verificar" onclick="verificar()">
</p>
</div>
<div id="res">
Preencha os campos e veja o resultado.
</div>
</section>
<footer>
<p>© Eduarda Rosa</p>
</footer>
<script src="script/script.js"></script>
</body>
</html>
e o JS:
function verificar(){
var data = new Date();
var ano = data.getFullYear();
var fano = document.getElementById('txtano');
var res = document.querySelector('div#res');
if(fano.Value.length == 0 || fano.value > ano){
window.alert("Error, verifique os dados e tente novamente!");
}else{
window.alert("Ok");
}
}
-
By odenilson marques
Ola pessoal, estou precisando de uma força! segue a situação.
tenho 3 formulário em um projeto, sendo eles:
form_cad_empresa
form_cad_atividade
form_cad_processo
no form_cad_atividade e form_cad_processo tenho uma combobox que lista todas empresas cadastradas no form_cad_empresa, porém no form_cad_atividade e no form_cad_processo também tenho um link que redireciona o usuário para o form_cad_empresa para ele cadastrar a empresa caso não encontre a empresa na combobox do form_cad_atividade e form_cad_processo, porém gostaria que quando terminasse o cadastro do form_cad_empresa este teria que ser redirecionado para o form_cad_atividade ou form_cad_processo, ou seja ele retornaria para formulario que chamou o form_cad_empresa.
Alguém pode me da um norte?
-
