single page, limite sinistro del movimento contenuti

[stardom]

gentili esperti, vorrei chiedere un suggerimento sulla pagina http://www.agendadelvolo.info/index2.html
Come noterete, all'apertura della pagina, la prima divbox si ferma nel punto giusto, di fianco al menù. Ma al cliccare delle altre divbox l'allineamento va a margine left della pagina. Come faccio a fare in modo che si fermi sempre di fianco al menù?
Immagino di covber intervenire sul jquery, ma io non sono un esperto (questo sito è creato con un tutorial free).
Grazie per le eventuali risposte.

[Nobody33]

Nota: link non funzionante. Se qualcuno lo usa, deve togliere il punto alla fine del link.

[stardom]

link modificato.. grazie per la segnalazione
attendo speranzoso in un aiuto

[stardom]

forse se includevo i codici jquery, qualcuno mi poteva rispondere ...

localScroll

;(function($){var m=$.scrollTo=function(b,h,f){$(window).scrollTo(b,h,f)};m.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1};m.window=function(b){return $(window).scrollable()};$.fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||$.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow||b).document||b.ownerDocument||b;return $.browser.safari||f.compatMode=='BackCompat'?f.body:f.documentElement})};$.fn.scrollTo=function(l,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};if(l=='max')l=9e9;a=$.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=$(k),d=l,p,g={},q=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px)?$/.test(d)){d=n(d);break}d=$(d,this);case'object':if(d.is||d.style)p=(d=$(d)).offset()}$.each(a.axis.split(''),function(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='scroll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;if(a.over[i])g[c]+=d[s.toLowerCase()]()*a.over[i]}else g[c]=d[i];if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]}});t(a.onAfter);function t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)})};function u(b){var h='scroll'+b;if(!q)return k[h];var f='client'+b,i=k.ownerDocument.documentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);

ScrollTo

;(function($){var l=location.href.replace(/#.*/,'');var g=$.localScroll=function(a){$('body').localScroll(a)};g.defaults={duration:1e3,axis:'y',event:'click',stop:true,target:window,reset:true};g.hash=function(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.duration;$(a.target).scrollTo(0,a);a.duration=e}i(0,location,a)}};$.fn.localScroll=function(b){b=$.extend({},g.defaults,b);return b.lazy?this.bind(b.event,function(a){var e=$([a.target,a.target.parentNode]).filter(d)[0];if(e)i(a,e,b)}):this.find('a,area').filter(d).bind(b.event,function(a){i(a,this,b)}).end().end();function d(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==l&&(!b.filter||$(this).is(b.filter))}};function i(a,e,b){var d=e.hash.slice(1),f=document.getElementById(d)||document.getElementsByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&&b.onBefore.call(b,a,f,h)===false)return;if(b.stop)h.stop(true);if(b.hash){var j=f.id==d?'id':'name',k=$('<a> </a>').attr(j,d).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});f[j]='';$('body').prepend(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])}})(jQuery);

[Nobody33]

Ora la pagina linkata non va più, ovvero tutto si sposta in alto.
E poi, il codice postato tutto su una riga è illeggibile.

Inoltre, se posti il link da dove hai preso il tutorial, sarebbe utile.

[stardom]

il link della pagina è http://www.agendadelvolo.info/index2.html (ci sto lavorando ora e l'avevo modificata per un momento)

il plugin è Jquery ScrollTo di Ariel Fiesler ormai abbastanza noto): http://flesler.blogspot.it/2007/10/jqueryscrollto.html

il codice su una riga me lo ha messo in automatico il 3D

[Nobody33]

il codice su una riga me lo ha messo in automatico il 3D

Mi pare ovvio che il codice lo devi sistemare tu .

In ogni caso, lo script funziona perfettamente; l'errore è nel .css. Quando clicchi su un link (ad esempio #box1) il #box1 ti scrolla esattamente fino alla fine della finestra del browser.

Credo che basta fare un altro contenitore intorno a #container e lo posizioni dove ti piace, cosi lo sistemi.

Nel #container,
- invece di position:absolute dai una position: relative;
- invece di left: margin-left;
- idem per top;
- cancelli il margin:0;
infine,
-aggiungi overflow: auto;

Dovrebbe andare;

[stardom]

...si, come dici tu sicuramente funzionerebbe, ma io volevo evitare di fare box dentro box dentro box. In un certo senso, vorrei che il menù facesse da "muro" (come se fosse il margine left zero del browser) contro il quale il container si ferma, anche per evitare problemi con risoluzioni schermo diverse. Insomma, creare un offset da sinistra.

[Nobody33]

In ogni caso QUI hai un ottimo esempio.

[stardom]

....non ne vuole sapere di funzionare. Ho provato ad aggiungere un topcontainer come suggerito, ma niente.
Secondo me il problema non è il css ma il jquery. Anche analizzando i demo dell'autore non riesco ad individuare un codicillo che indichi il punto di fermata della box. Io non so leggere javascript, e quindi non lo individuo. So che è una cosa facile, ma non capisco dove intervenire.
Anzi, secondo me basta manipolare le seguenti righe nella pagina index:

<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>