emulare frames e ridimensionamento con Jquery

**theboss280489** · 04-06-2013, 15:45

Salve a tutti.
Mi sto imbattendo in una problematica alquanto complicata:
Ho una pagina di questo tipo (Esempio) in cui un header è fisso mentre la parte sottostante è scrollabile. Ho anche la necessità di dover ridurre mediante un semplice pulsante la parte superiore per portarla per esempio da 300px a 100px.
Mi sono affidato a Jquery ma riscontro qualche problema dovuto sicuramente ad un mio errore:
Intero codice della pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>
<script src="./slider_files/jquery-1.4.2.js" type="text/javascript"></script><style type="text/css"></style>

<script type="text/javascript">
function mostraDivScorrevole(){
$("#header").animate({"height": "100px"}, { duration: 1000 });
}
</script>
    
    <style>
	body{ 
 margin:0; 
 } 
 #header{ 
 overflow:auto; 
 width: 100%; 
 height: 300px; 
 position: absolute; 
 top: 0; 
 left: 0; 
 background: #09d;
 } 
#content{
 width:100%; 
 height:100%; 
 overflow:auto; 
 }  
 @media screen{ 
 body>#header{ position: fixed;}
 }
	</style>
    
</head>

<body>
<div id="header">Ciao e prova di scorrimento
Scorrimento</div>
<div id="content">
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio dignissim qui blandit praesent luptatum pvii delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonu.
Lorem ipsum dolor sit amet, sic PVII excelsior elit, sed diam nonummy nibh euismod Design Packs ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et Al et Gerry odio digni
</div>
</body></html>

Problema penso di css: Come mai il secondo livello risulta sotto il primo? E' possibile decidere un margine da quello in alto e mantenerlo anche durante la chiusura?
Mi spiego meglio: Se ho la facia superiore e la fascia inferiore distanziati di 10 pixel, quando chiudo il div superiore è possibile mantenere questa distanza?

Problema 2 dovuto a Jquery: come faccio per far riaprire il div dopo averlo chiuso?
Grazie

**Nobody33** · 04-06-2013, 18:55

Soluzione al problema 2:

codice:

<script>
 $(document).ready(function(){
     $("a#prova").click(function(){ 
                $("#header").slideToggle('800')
                });
          });

</script>
<body>
prova


<div id="header" style="width:100%; height:300px; background:#f00;">prova prova prova</div>
</body>

Problema 1:

Non ho capito bene cosa intendi con

Come mai il secondo livello risulta sotto il primo?

Ma credo che tu possa risolvere mettendo un altro contenitore nel header; sarà poi quello che si apre e si chiude.

Discussione: emulare frames e ridimensionamento con Jquery

Strumenti discussione

Ricerca discussione

Visualizza

emulare frames e ridimensionamento con Jquery

Permessi di invio