Problemi con lo "slittamento" verso l alto di un div

**mirko000** · 03-09-2014, 17:08

Ciao!
Ho una paginetta html nella quale quando pigi "PUSH", "Prova" slitta verso l'alto ma "Ciao" non lo segue.

Potete aiutarmi?
Grazie in anticipo

codice:

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
    $('#FilterBott').click(function(){
        var hidden = $('#vertical_slide');
        if (hidden.hasClass('visible')){
            hidden.animate({"top":"-352px"}, 300).removeClass('visible');
            //$('.Displ').css( "display", "none" );
        } else {
            hidden.animate({"top":"0px"}, 200).addClass('visible');
            //$('.Displ').css( "display", "block" );
        }
    });
});
</script>
</head>
<body style="width: 50px;">
    <div id="FilterBott">PUSH</div>
    <div class='Displ' style="overflow: hidden; float: left;">
        <div id="vertical_slide" style="position: relative; top: 0px;" class="visible">Prova</div>
    </div>
    <div>Ciao</div>
</body>
</html>

**KillerWorm** · 03-09-2014, 18:19

Ciao, col posizionamento relativo non puoi ottenere ciò che chiedi
http://www.html.it/pag/14235/posizio...egli-elementi/ cito:

In pratica, con il posizionamento relativo (position: relative;), si va a modificare la posizione naturale di un elemento traslandola attraverso l’uso di top, left, bottom o right. Un elemento posizionato relativamente non è rimosso dal flusso della pagina, ma solo spostato. In sostanza, un elemento posizionato relativamente è come se lasciasse una sorta di segnaposto nella posizione in cui naturalmente dovrebbe essere.

Prova invece ad usare margin-top ed eliminare il position:relative.
Una cosa del genere:

codice:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
    $('#FilterBott').click(function(){
        var hidden = $('#vertical_slide');
        if (hidden.hasClass('visible')){
            hidden.animate({"margin-top":"-352px"}, 300).removeClass('visible');
            //$('.Displ').css( "display", "none" );
        } else {
            hidden.animate({"margin-top":"0px"}, 200).addClass('visible');
            //$('.Displ').css( "display", "block" );
        }
    });
});
</script>
</head>
<body style="width: 50px;">
    <div id="FilterBott">PUSH</div>
    <div class='Displ' style="overflow: hidden; float: left;">
        <div id="vertical_slide" class="visible">Prova</div>
    </div>
    <div>Ciao</div>
</body>
</html>

**mirko000** · 04-09-2014, 09:09

Grande! Grazie

Discussione: Problemi con lo "slittamento" verso l alto di un div

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con lo "slittamento" verso l alto di un div

Permessi di invio