sito one page

[yabuki]

Salve ho costruito un sito one-page, con 5 section,e appliccando il plug-in scrollto..riesco ad animare il tutto, poi ho effetuato il resize delle sezioni...,ma quando lo effetuo...ad esempio sono posizionato sulla section3.. questa sal verso l alto e va sopra le altre

$(window).resize(function(){
$('section').css({
height: ($(window).height())

});

});



$(window).resize();

come posso risolvere?

come

 

[Nefyt]

Potresti postare la struttura dell'intera pagina o la parte in html col css? Perché almeno possiamo verificare l'effetto

 

[yabuki]

Potresti postare la struttura dell'intera pagina o la parte in html col css? Perché almeno possiamo verificare l'effetto

html

<div id="container">
<section id= concept>

<div id="col1">
<img src="img/logo.jpg">
</div><!--colonna logo-->
<div id="col2">
<img src="img/bottiglia.jpg">
</div>
<div class="clear"></div>

</section>
<!---------------------fine concept------------------------------>
<section id = concept2>
<div id="logo_small">
<img src="img/logo_small.jpg">
</div>
<!-- logo small-->
<div id="mappa">
<img src="img/map.jpg">
</div>
<!-- mappa -->
<div class="clear"></div>
</section>
<section id = product>
<div id="bigleft">
<div id="unoleft"><img src="img/logopiccolo.jpg"></div>
<div id="dueleft"><img src="img/leftsotto.jpg"></div>
</div><!-- chiusura bigleft-->

<div id="bigright">
<div id="descrizione">
<h3>Product</h3>
</div><!-- descrizione prodotto -->
<div id="bottiglie">

<!-- <div id="pro1" class="button_uno" ><a></a></div>
<div id="pro2" class="button_due" ><a></a></div>
<div id="pro3" class="button_tre" ><a></a></div>
<div id="pro4" class="button_for" ><a></a></div> -->

<div id="prod1"> <a href="#box" class="button-overlay"></a></div>
<div id="prod2"> <a href="#box2" class="button-overlay"></a></div>
<div id="prod3"> <a href="#box3" class="button-overlay"></a></div>
<div id="prod4"> <a href="#box4" class="button-overlay"></a></div>




</div><!--div bottiglie -->
</div><!-- chiusura bigright -->
<div class="clear"></div>
</section>

</div>

jquery

$(document).ready(function() {

;$(window).resize(function(){
$('section').css({
height: ($(window).height())

});

});



$(window).resize();

<!------------------------------------------SCROLLPAGESCRIPT----------------------------------------------->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(function() {

$('.cmenu a').bind('click',function(event){
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2000,'easeInOutExpo');


event.preventDefault();
});
});

</script>

 

[yabuki]

html


jquery

<!------------------------------------------SCROLLPAGESCRIPT----------------------------------------------->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(function() {

$('.cmenu a').bind('click',function(event){
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2000,'easeInOutExpo');


event.preventDefault();
});
});

</script>

la parte css

/*---------------------------*/



section{
height:auto;
margin:0px;
width:100%;
float:left;

}

#concept{
width: 1024px;}


#concept2{
width: 1024px;
}
/*-----------------SEZIONE PRODOTTI---------------------------*/

#product{
width:1024;}

all interno delle sezioni ci sono poi altri div dentro..,non ho postato tt il foglio.css

 

[Nefyt]

Il problema credo che sia il fatto che tu aggiungi l'altezza totale della pagina ogni volta, dovresti aggiungere o diminuire l'altezza a seconda delle tue esigenze

 

[yabuki]

intendi quando faccio il resize?

 

[yabuki]

non ho idea di come procedere..,esseno anche nuovo di jquery..,pensavo bastasse il resize della section,invece... i div salgono panico

 

[Nefyt]

Controlla se l'altezza è salita o è scesa e aggiungi o diminuisci di un tot a seconda di esse

 

[yabuki]

ma questo devo farlo nell'evento resize? ho bisogno anche di un timer?

 

[Nefyt]

ma questo devo farlo nell'evento resize? ho bisogno anche di un timer?

Si nel resize, ti basta memorizzare l'altezza e la larghezza precedente in altre variabili

 

[yabuki]

non ho capito!...,sarà che sono alla seconda volta che uso jquery..,e non so dove mettere le mani:hammer: