2
The code causes the search button to disappear and then appears an input to enter the search
$('#dispara').on('click', function (event) {
event.preventDefault();
$('form div').addClass('active');
$('#dispara').css("display", "none");
//$('#caixa').focus();
document.form1.caixa.focus(); //coloca o focu no input para ativar teclado do celular
});
$('#retorna').on('click', function (event) {
event.preventDefault();
$('form div').removeClass('active');
//$('#caixa').blur();
document.form1.caixa.blur(); //retira o focu no input para desativar teclado do celular
$('#dispara').css("display", "block");
});form {
position:relative;
}
form div {
position:absolute;
top:0;
left:-100%;
width:100%;
overflow:hidden;
transition:all 1s ease-in;
}
form div.active {
left:0;
}
#retorna{
float:right;
}
#dispara{
margin:8px 0px 0px 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header data-role="header" data-position="fixed">
<h3 style="float:left;">Troca games</h3>
<form name="form1">
<button id="dispara" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all">Slide In!</button>
<div>
<input type="text" name="caixa"/>
<button id="retorna" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">No text</button>
</div>
</form>
<!-- Início navegação principal -->
<nav data-role="navbar">
<ul>
<li><a href="#esquerda"><img src="images/configuracoes.png"/></a></li>
<li><a href="home.php"><img src="images/home.png"/></a></li>
<li><a href="trocas.php"><img src="images/trocas.png"/></a></li>
<li><a href="jogos.php"><img src="images/jogos.png"/></a></li>
<li><a href="desejos.php"><img src="images/desejos.png"/></a></li>
</ul>
</nav>
</header>Page where the code is being called
<?php include 'restrictions.php'?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Troca Games - Games com economia</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<?php include 'header.php'?>
<?php include 'sidebar_conf.php'?>
<!-- data-position="fixed" fica fixo o menu -->
<!-- Início principal -->
<section data-role="content" style="padding:0;">
<div class="titulo">
<center><h1>Meus jogos</h1></center>
</div>
<?php include_once'meus_jogos.php' ?>
<div class="titulo">
<center><h1>Meus desejos</h1></center>
</div>
<?php include_once'meus_desejos.php' ?>
</section>
</div>
</body>
</html>
Ever tried to trade the "on" event for the "click" event? $('#shoot'). click(Function () {(...)})
– Salatiel
no, but I tried to trade the event on for the live event and also did not work
– Demetrius Fernandes
live has been obsolete since version 1.7 of Jquery if I’m not mistaken. Try clicking and tell me if it worked.
– Salatiel
I put the click and it keeps working, but only at the first execution, when it updates the page, it stops working
– Demetrius Fernandes
Demetrius what doesn’t work? can you explain better? in the example here it makes the slide in and slide out well, and the input appears and disappears...
– Sergio
What do you mean "when you refresh the page"? Is it a post, ajax, or simply after running the function? As @Sergio said it was not possible to produce/imagine which embarrassment exists.
– Tiago Gomes
It could be an error in your php making it impossible to render the rest of the page, inspect the page and see if everything you need is there.
– Marcelo Bonus
tried to enter button type? Example: <button type="button">
– Leonardo Costa