Bonjour j'ai fait un script avec jquery qui me permet,
- D'avoir une seule page sur mon site découper en plusieurs block
- Chaque block prend la taille de la résolution de l'utilisateur
- Chaque block change de taille si l'utilisateur change sa résolution sans recharger.
- Chaque block est accessible via un jolie scroll jquery
- Chaque scroll est recalculer si l’utilisateur redimensionne sa fenêtre.
L'ensemble de mes scenario fonctionne mise a part un qui est le cas ou un utilisateur réduit sa fenêtre et clique sur un lien.
Il se retrouve bien au bon endroit mais il ne lui est plus possible de scroller normalement.
Le bug est présent sur tout les navigateur et je pense que ça viens de ma fonction resize sans arriver a corriger le problème.
Avec vous une idée d’où ça peut venir?
Voici mon code html
Mon code js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>01_declaration_d_objets</title> <meta name="description" content="" /> <meta name="author" content="sylvain.bousselier" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" media="all" href="css/commun.css" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/fonctions.js"></script> </head> <body> <div id="content"> <ul id="menu" style="position:absolute;"> <li> <a href="liens1.html" data-link="slide1">slide 1</a> </li> <li> <a href="liens2.html" data-link="slide2">slide 2</a> </li> <li> <a href="liens3.html" data-link="slide3">slide 3</a> </li> <li> <a href="liens4.html" data-link="slide4">slide 4</a> </li> </ul> <div class="slide1 slide"> slide 1 </div> <div class="slide2 slide"> slide 2 </div> <div class="slide3 slide"> slide 3 </div> <div class="slide4 slide"> slide 4 </div> </div> </body> </html>
et mon css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 var scrollSlide = { init:function(slideHeight){ if(jQuery('.slide').size()){ $('.slide').height(slideHeight); var i; var slideNb = $('.slide').length; for(i = 0; i<=slideNb; i++){ var $this = $('.slide')[i]; var position = slideHeight * i; $($this).attr('data-pos', position); } scrollSlide.startScroll(slideHeight) } }, startScroll:function(slideHeight){ $('#menu a').each(function(slideHeight){ var $that = this; $($that).live('click',function(e){ var dataLink = $($that).attr('data-link'); $('.slide').each(function(slideHeight){ if($(this).hasClass(dataLink)){ $('body,html').animate({ scrollTop: $(this).attr('data-pos') },800) } }); return false; }); }); } }; $(document).ready(function(){ var userRes = $(window).height(); scrollSlide.init(userRes); $(window).resize(function() { userRes = $(window).height(); scrollSlide.init(userRes); }); })
Si vous voulez l'essayer chez vous
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 body, h1,h2,h3,h4,h5,h6,p,ul,li{ margin:0; padding:0; } .slide1{ background-color:pink; } .slide2{ background-color:green; }
Merci par avance pour votre aide
Partager