Stop settimeuout when being on div

Question

Stop settimeuout when being on div

Navigation

#1 by (1 votes)

0

I have this code:

function Menuopciones(pagina,menu) {
timeout = 600;
var thread; 
$("#"+pagina).mousemove(function(){ 
    $("#"+menu).removeClass('oculto').addClass('bounceIn');
    clearTimeout(thread);
    thread = setTimeout(mousestopped, timeout);
});
function mousestopped(){ $("#"+menu).removeClass('bounceIn').addClass('oculto'); };
$("#"+menu).hover(function(){ $(this).css("opacity", "1"); }, function(){ $(this).css("opacity", ""); clearTimeout(thread); });
}

What I'm trying to do is that when I'm about $("#"+menu) the setimeout stops so that I do not hide the menu.

What can I be doing wrong?

function Menuopciones(pagina,menu) {
timeout = 600;
var thread; 
$("#"+pagina).mousemove(function(){ 
	$("#"+menu).removeClass('oculto').addClass('bounceIn');
	clearTimeout(thread);
	thread = setTimeout(mousestopped, timeout);
});
function mousestopped(){ $("#"+menu).removeClass('bounceIn').addClass('oculto'); };
$("#"+menu).hover(function(){ $(this).css("opacity", "1"); }, function(){ $(this).css("opacity", ""); });
$("#"+menu).draggable();
}

#Pagina { width:500px; height:500px; background-color: #CCC; }

.oculto { display: none; }

.MenuDocumentos { position: absolute; width: 290px; height: 100px; margin: 0 0 0 -140px; left: 50%; top: 50%; text-align: center; font-size: 40px; padding: 15px 5px; background-color: rgba(0, 0, 0, 0.32); border-radius: 10px; z-index: 999; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; }
.MenuDocumentos i { margin: 5px 10px; }
.DocGuardar:hover { color: green; }
.DocImprimir:hover { color: #2179ff; }
.DocEnviar:hover { color: #2179ff; }
.DocBorrar:hover { color: red; }
.MenuDocumentos select { 
font-size: 20px;
text-align: center;
margin-top: 10px;
padding: 10px 30px;
border-radius: 10px;
border: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none; }

@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:0.4;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:0.4;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}
@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:0.4;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:0.4;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.bounceIn { -webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn; opacity:0.4 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<script>Menuopciones('Pagina','MenuOpciones');</script>

<div id="MenuOpciones" class="MenuDocumentos oculto">
	<i class="fas fa-check DocGuardar" title="Guardar"></i>
	<i class="fas fa-print DocImprimir" title="Imprimir"></i>
	<i class="far fa-paper-plane DocEnviar" title="Enviar"></i>
	<i class="fas fa-recycle DocBorrar"></i>
	<p><select>
		<option selected value="">Opciones</option>
		<option value="Verpedido">Ver</option>
		<option value="sinvalor">Imprimir</option>
		<option value="proforma">Imprimir 2</option>
		<option value="eliminar">Eliminar</option>
	</select></p>
</div>

<div id="Pagina"></div>

I can not get the snippet to work, in fact now it does not work on the web either, it is known that I had pagespeed activated and it was pulling cache ... I will try to fix it and update the code here

javascript jquery

asked by Killpe 18.12.2017 в 21:42

source

1 answer

I have a conceptual problem about this error: Exception in thread "main" java.lang.ClassCastException: java.lang.String can not be cast Python3 - NameError: name 'select_range' is not defined

score 1 · Accepted Answer

The only thing you had to do to "retain" the visibility of the menu when you were on it was to stop the execution of setTimeout() at the moment of doing the hover on the menu.

I leave your functional code.

$(document).ready(function(){
    function Menuopciones(pagina, menu) {
        timeout = 600;
        var thread; 
        
        $("#"+pagina).mousemove(function(){
            $("#"+menu).removeClass('oculto').addClass('bounceIn');
            clearTimeout(thread);
            thread = setTimeout(mousestopped, timeout);
        });
        
        $("#"+menu).hover(function(){ 
            clearTimeout(thread);
        });

        $("#"+menu).draggable();

        function mousestopped(){ 
            $("#"+menu).removeClass('bounceIn').addClass('oculto'); 
        };
    }

    Menuopciones('Pagina','MenuOpciones');
});

#Pagina { width:500px; height:500px; background-color: #CCC; }

.oculto { display: none; }

.MenuDocumentos { position: absolute; width: 290px; height: 100px; margin: 0 0 0 -140px; left: 50%; top: 50%; text-align: center; font-size: 40px; padding: 15px 5px; background-color: rgba(0, 0, 0, 0.32); border-radius: 10px; z-index: 999; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; }
.MenuDocumentos i { margin: 5px 10px; }
.DocGuardar:hover { color: green; }
.DocImprimir:hover { color: #2179ff; }
.DocEnviar:hover { color: #2179ff; }
.DocBorrar:hover { color: red; }
.MenuDocumentos select { 
font-size: 20px;
text-align: center;
margin-top: 10px;
padding: 10px 30px;
border-radius: 10px;
border: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none; }

@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:0.4;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:0.4;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}
@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:0.4;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:0.4;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.bounceIn { -webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn; opacity:0.4 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<div id="MenuOpciones" class="MenuDocumentos oculto">
    <i class="fas fa-check DocGuardar" title="Guardar"></i>
    <i class="fas fa-print DocImprimir" title="Imprimir"></i>
    <i class="far fa-paper-plane DocEnviar" title="Enviar"></i>
    <i class="fas fa-recycle DocBorrar"></i>
    <p><select>
        <option selected value="">Opciones</option>
        <option value="Verpedido">Ver</option>
        <option value="sinvalor">Imprimir</option>
        <option value="proforma">Imprimir 2</option>
        <option value="eliminar">Eliminar</option>
    </select></p>
</div>

<div id="Pagina"></div>

I recommend you add your code within an event ready() to document to run once you have loaded all the elements of the site