Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Contenuto a comparsa post scorrimento

    Salve a tutti.
    Vorrei creare un effetto tale per cui un div compaia solo in seguito allo scorrimento verticale della pagina. Sono riuscito a metterlo a tempo, cioè che compaia dopo un tot di secondi, ma preferirei che avvenisse solo post scorrimento, a prescindere da quanto tempo ci metta l'utente.
    In altre parole, quando la pagina viene caricata, il contenuto di tale div deve rimanere nascosto finché l'utente non scorre verso il basso.
    Sapreste spiegarmi come realizzare tale effetto, o dove trovare una guida che possa aiutarmi?
    Grazie.

  2. #2
    Utente di HTML.it L'avatar di miauhaus
    Registrato dal
    Nov 2004
    residenza
    Torino
    Messaggi
    127
    Prova con jquery.
    codice:
    /* id:mioelemento che compare/scompare con scrolling */
    $(window).scroll(function(e){
        if ($(this).scrollTop() > 450) { // valori in pixel scrollati:poi compare .
            $('#mioelemento:hidden').slideDown();
        } else {
            $('#mioelemento:visible').slideUp();
        }
    });

  3. #3
    Ho provato con il codice da te suggerito, ma risolve solo in parte il problema. il div viene ancora caricato inizialmente, per un breve lasso di tempo, per poi sparire ed essere caricato solo post scorrimento. Se la finestra in cui si visualizza il sito è piccola, questo non si nota, ma se si ingrandisce si vede il contenuto apparire e scomparire dopo circa 1 secondo..

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Imposta il div a comparsa inizialmente con display:none
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Funziona solo parzialmente.. Mi spiego meglio..
    il codice in questione è il seguente:
    codice:
    <div id="bridgeSlide">
              <div id="news_header">
                <div class="news_line"></div> <!-- linea sinistra -->
                <h3>ULTIME NEWS</h3>
                <div class="news_line"></div> <!-- linea destra -->
              </div> <!-- END news_header -->
    
              <div class="items">
                <?php
                  $result = @mysql_query('SELECT imgURL, news_title, news_date, news_text, articleURL FROM News ORDER BY id DESC');
      
                  if (!$result) {
                    exit('<p>Error performing query' . mysql_error() . '</p>');
                  }
    
    
                  while ($row = mysql_fetch_array($result)) {
                    echo '<div class="item">';
                    echo '<img src="' . $row['imgURL'] . '"/>';
                    echo '<h6>' . $row['news_date'] . '</h6>';
                    echo '<h4>' . $row['news_title'] . '</h4>';
                    echo '<h5>' . $row['news_text'] . '</h5>';
                    echo '<p><a href="' . $row['articleURL'] . '">Leggi di pi&ugrave</a></p>';
                    echo '</div>';
                  }
                  ?>
              </div> <!-- END class items -->
            </div> <!-- END bridgeSlide -->
    
    
            <div id="pagination">
                <span class="left">&laquo;</span>
                <span class="right">&raquo;</span>
            </div> <!-- END pagination -->
    Ora, sia il div "news_header" sia il "pagination" funzionano come dovuto, ovvero non sono mostrati finché non si fa lo scroll.
    Il contenuto del div "items" invece non viene proprio caricato se metto display:none al div "bridgeSlide"

    Può dipendere dal fatto che il contenuto di "items" è in php?

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Mi sono perso, comunque ricordati che js (anche jquery) opera quando php a già finito di procedere pertanto verifica i flussi
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.