Quando una pagina è piuttosto lunga (in verticale) può essere utile far comparire un popup che consenta alcune azioni come per es. tornare in cima, salvare i dati, o far comparire una bella pubblicità, che se qualcuno vi paga per inserirla va sempre bene.
Io ho usato questa funzione nella pagina degli
aforismi che ormai è lunghissima .
Ho disseminato delle ancore qua e là (non troppo a caso in realtà ma in corrispondenza delle categorie) e, quando l'utente scrolla la pagina in giù, gli compare in basso a destra un piccolo popup con i link che gli consentono di spostarsi tra le varie categorie.
Il tutto è piuttosto semplice e si risolve in poche righe di codice.
Questo è il codice che dovete utilizzare nella pagina .aspx per creare un esempio.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<%--Javascript che gestisce il popup--%>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop()-550;
var c = $('#comments').offset();
if(y>(c.top-$(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div class="main-container">
<div class="box" id="comments">
<h1> DIV BASE</h1>
<br /><br />
4444<br />4444<br />4444<br />4444<br />
4444<br />4444<br />4444<br />
... Qui ci mettete una lunga sequenza di 4
in modo che la pagina venga un bel po' lunga.
</div>
</div>
<%-- POP UP --%>
<div id="the_box" class="popUpBassoDx" style="display: none">
<div class="title">
contenuto del popUp
</div>
</div>
</asp:Content>
In questo esempio ho considerato che ci fosse la master page, per cui il codice viene inserito tra i tag <asp:Content>
La cosa fondamentale è dividere il contenuto in due div. In questo caso io ho fatto un "main-container" e un "the_box". Il javascript provvederà a posizionare il secondo sul primo allo scroll della pagina.
L'unica altra cosa di cui potreste avere bisogno è una classe css.
Io ho usato questa:
.popUpBassoDx
{
display: block;
border-left: 1px solid #728EB8;
border-top: 1px solid #728EB8;
border-bottom: 1px solid #B9C9EF;
border-right: 1px solid #B9C9EF;
padding: 2px;
overflow: hidden;
position: fixed;
right: 2px;
bottom: 20px;
background: #E0E9F8;
width: 20%;
}