Bonjour à tous !
Tout d'abord je remercie toute l'équipe d'Alsacréations qui m'offre tout un tas de tutos pour comprendre peu à peu la jungle de la programmation !
La dernière fois où j'ai touché aux lignes de code, jquery n'existait pas encore et mon padre vient de me demander de lui créer un portfolio sur internet.
Une bonne raison de me repencher sur le suget donc, et comme je suis friand des trucs interactifs, et ben j'ai redécouvert javascript sous un autre jour !
En raison de la faible teneur en contenu, j'ai décider d'opter pour le style single page avec des div's qui s'affichent à la demande.
Il y aurait autant de div's qu'il y a de créations à présenter et celles-ci pendrais la dimension de la fenêtre afin de cacher la page principale.
Je suis devant un gros mur depuis hier matin ^^"
En gros, je cache les divs hors de la page et je les ramène à l'écran grâce à un event.
Cela fonctionne, le div prend toute la page et j'ai bloqué le scroll du contenu principale pour que le visiteur reprenne sa lecture à l'endroit où il l'a laissé.
Et le problême est là, si le contenu du div slidé dépasse de la fenêtre, et ben il est impossible de consulter la partie hors de l'écran.
J'aimerais simplement que lorsque que l'on consulte une div, on puisse la faire défiler tout en bloquant le défilement de la page principale.
Désolé pour le pavet, mais comme c'est assez spécifique et que je ne trouve rien sur le web (mon anglais est assez limité ^^), je fais appel à votre lumière !
Voici le code :
css :
javascript :
Merci beaucoup ne vous attarder la dessus !
Ukberg.
Modifié par Ukberg (16 Feb 2013 - 01:43)
Tout d'abord je remercie toute l'équipe d'Alsacréations qui m'offre tout un tas de tutos pour comprendre peu à peu la jungle de la programmation !
La dernière fois où j'ai touché aux lignes de code, jquery n'existait pas encore et mon padre vient de me demander de lui créer un portfolio sur internet.
Une bonne raison de me repencher sur le suget donc, et comme je suis friand des trucs interactifs, et ben j'ai redécouvert javascript sous un autre jour !
En raison de la faible teneur en contenu, j'ai décider d'opter pour le style single page avec des div's qui s'affichent à la demande.
Il y aurait autant de div's qu'il y a de créations à présenter et celles-ci pendrais la dimension de la fenêtre afin de cacher la page principale.
Je suis devant un gros mur depuis hier matin ^^"
En gros, je cache les divs hors de la page et je les ramène à l'écran grâce à un event.
Cela fonctionne, le div prend toute la page et j'ai bloqué le scroll du contenu principale pour que le visiteur reprenne sa lecture à l'endroit où il l'a laissé.
Et le problême est là, si le contenu du div slidé dépasse de la fenêtre, et ben il est impossible de consulter la partie hors de l'écran.
J'aimerais simplement que lorsque que l'on consulte une div, on puisse la faire défiler tout en bloquant le défilement de la page principale.
Désolé pour le pavet, mais comme c'est assez spécifique et que je ne trouve rien sur le web (mon anglais est assez limité ^^), je fais appel à votre lumière !
Voici le code :
css :
#absaroke_content {
width: 100%;
background: #630;
}
javascript :
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
var $absaroke = $('#absaroke_content');
$absaroke.css({
position: 'absolute',
top: '-5000px',
'min-height': $('body').height()
});
/* --- */
$('#absaroke_link').click(function(event) {
event.preventDefault();
$absaroke.animate({
top: $(window).scrollTop(),
}, 1500, 'easeOutCirc');
currentScroll=$(window).scrollTop();
$(window).on('scroll',lockscroll);
});
/* --- */
$('#close').click(function(event) {
event.preventDefault();
$absaroke.animate({
top: '-5000px'
}, 2000, 'easeInExpo');
$(window).off('scroll');
});
/* --- */
$(window).resize(function() {
$absaroke.css('min-height', $('body').height());
});
Merci beaucoup ne vous attarder la dessus !
Ukberg.
Modifié par Ukberg (16 Feb 2013 - 01:43)