Discussion :

[dhillig]

Bonsoir à tous,
J'ai un diaporama fullscreen et une barre des menus. Lorsque je clique sur un des liens, la "section une" placée à top:100% s'affiche, puis la "section deux" etc...
Mais si on scrolle vert le haut , on retombe sur le diaporama fullscreen (car placé avant section une), pas très joli joli
Y'a-t'il moyen quand cliquant sur "section une", que cette div soit considérée comme la première de la page ? J'entends par là on peut évidemment scroller vers le bas, vers le haut mais pas au dessus de section une. Un peut comme si le diaporama était devenu hidden (ou non). Faire en sorte que section une soit à top: 0 mais scrollable.
Ça me semble très compliqué et non faisable . Mais au cas où...
Bonne soirée,
dh

[SpaceFrog]

css overflow hidden

[dhillig]

Bonsoir SpaceFrog et merci pour ta réponse,
overflow: hidden ne fonctionne pas dans mon cas bien spécial
Attention, je ne pense pas que mon problème soit possible à résoudre (mais avec la magie des scripts... (?)
le début de mon body :

Code html :

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
<header class="main_header">
  <div class="menu">
    <div class="content"><a class="logo" href="#">Logo</a>
      <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
      <nav>
        <ul>
          <li><a href=".sec01">Section 01</a></li>
          <li><a href=".sec02">Section 02</a></li>
          <li><a href=".sec03">Section 03</a></li>
          <li><a href=".sec04">Section 04</a></li>
        </ul>
      </nav>
    </div>
  </div>
 
</header>
<h1><span><a href="#section01">Test</a></span><br>Navigation</h1>
<div id="bg">
  <div id="bg1">
   <h1>joli titre</h1>
    <div id="polina">
<h1>Polina</h1>
<p>Encore une page test</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<img src="../test/nwvjv57YA31u99f8jo1_540.jpg" width="515" height="810"  alt=""/> <a href=".sec01">Section 01</a>
</div></div>
  <div id="bg2">
    <div>
      <h1>Polina2</h1>
      <p>Aenean pharetraam <a href=".sec01">Section 01</a> tuntesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
    </div>
  </div>
  <div id="bg3">
    <div>
      <h1>Polina3</h1>
      <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</p>
    </div>
</div>
</div>

la div "bg" est "fullscreen".
Je souhaiterais qu'en cliquant sur les liens .sec01,02,03 et 04 et #section01 (qui ne sont que des div suivant la div bg) via

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1><span><a href="#section01">Test</a></span><br>Navigation</h1>

ou le menu, on ne puisse plus accéder par scroll à la div "bg".
Avoir l'impression que la div .sec01 (#section01) soit la première de la page, et ce qui suit soit scrollable.
Ne pouvoir accéder à la div bg (celle que je veux "masquer") que via

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="content"><a class="logo" href="#">Logo</a>

Désolé pour toutes les répétitions, mais je tente d'être compréhensible.
La logique voudrait que les liens cités plus haut fassent appel à une seconde page (avec les div .sec01,02,03 et 04 et #section01); mais je tente vraiment de contenir le tout dans un seul et même site onepage, en espérant que cela soit possible.
Merci encore pour ta réponse et bonne soirée,
dh

[SpaceFrog]

Un peu sur ce principe là ?
http://fiddle.jshell.net/7d3Luat4/

[dhillig]

Bonsoir SpaceFrog,
Je suis sur le cul si tu me permets l'expression Je ne pensais vraiment pas cela réalisable, C'EST EXACTEMENT ÇA !!! Malheureusement, pas fonctionnel chez moi. Pour tester j'ai changé la hauteur du fullscreen de 100 % à 300 px (le px est obligatoire, non ? etc... pour vraiment adapter ton Edit fiddle à ma page. Peut-être un conflit avec d'autres Scrolltop (?)... ou j'ai tout simplement oublié de dire certaines choses
Le lien (#section01 .sc01) sur le fullscreen ne figure que via des "fenêtres" (bg>div>div)
L'exemple :
http://codepen.io/jreaux62/pen/EVrdOM
Le menu lui n'apparait que lorsqu'on clique sur le lien figurant dans le bg>div>div (ou en scrollant un peu vers le bas). Le script du menu :

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
$(window).scroll(function() {
 
    if ($(window).scrollTop() > 100) {
        $('.main_header').addClass('sticky');
    } else {
        $('.main_header').removeClass('sticky');
    }
});
 
// Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_header').hasClass('open-nav')) {
        $('.main_header').removeClass('open-nav');
    } else {
        $('.main_header').addClass('open-nav');
    }
});
 
$('.main_header li a').click(function() {
    if ($('.main_header').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_header').removeClass('open-nav');
    }
});
 
$('nav a').click(function(event) {
    var id = $(this).attr("href");
    var offset = 0;
    var target = $(id).offset().top - offset;
    $('html, body').animate({
        scrollTop: target
    }, 500);
    event.preventDefault();
});

#section01 (.sec01) a lui un margin-top très élevé (pour éviter qu'il soit visible en scrollant vers le bas). Mais tu as compris à 100% ce que je désirais, ne plus avoir accès au fullscreen (bg) via le scroll.
Reste la hauteur de 100% dans les scripts, je n'ai jamais résolu ce problème; et jamais lancé de discussion à ce sujet (j'ai toujours réussi à "contourner" l'obstacle )
Encore merci pour ton aide ! TOP !!!
dh

[dhillig]

Bonsoir SpaceFrog,
J'ai tenté de trouver une solution, mais je n'arrive pas à faire fonctionner la fonction animate (qui fonctionne à merveille dans ton EditFiddle)
Dans ton script, lors d'un clic sur "my menu", la cible est "bg" (de 300 px de hauteur) avec une animation qui fait remonter (et fixe) cette div de 300 px.
Dans mon cas, le scroll "vers le haut" est toujours possible
La div suivante "section01" a, dans ma page, un margin-top de 3000px,
j'ai donc essayé ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    $('#mymenu ul li a').on('click' , function(e){
        e.preventDefault();
        nr=$(this).data('link')
        cible="#section01"+nr;
 
      $('#section01').animate({'scrollTop':(nr-1) * 3000  } )
    })
})

Logiquement (mais je suis nul en js) la div section01 devrait arriver à top -3000px (l'équivalent du margin-top). Mais comme précédemment, le scroll vers le haut est toujours possible.
Le problème viendrait-il des CSS ? J'ai tenté d'y changer pas mal de choses... rien y fait
Merci pour ton aide et bonne soirée,
dh

[dhillig]

Bonsoir à tous,
Ne pouvant résoudre mon problème par la fonction animate (dans mon cas), j'ai pensé à cette solution :
passer la div "bg" en z-index: 999,
passer le menu en z-index: 9999,
supprimer le margin-top de #section01 (et le reste) qui sera en z-index: 99 et donc masqué par la div "bg".
Maintenant que "tout est en place", est-il possible de rendre "hidden" la div "bg" lors d'un clic, et la faire réapparaître en cliquant sur "logo" (menu) ?
Je ne sais pas si l'idée est bonne ?
Bonne soirée et bon week-end à vous,
dh

[NoSmoking]

Bonjour,

Maintenant que "tout est en place", est-il possible de rendre "hidden" la div "bg" lors d'un clic, et la faire réapparaître en cliquant sur "logo" (menu) ?

Oui et tu as déjà utilisé cette méthode dans ton code !

[dhillig]

Bonjour NoSmoking,
Merci pour ta réponse

Veux-tu dire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$( function(){
 
    $('#mymenu ul li a').on('click' , function(e){
        e.preventDefault();
        nr=$(this).data('link')
        cible="#bg"+nr;
 
      $('#bg').et là je mets un hidden à bg ?  } )
    })
})

?
Bon week-end,
dh

[NoSmoking]

$('#bg').et là je mets un hidden à bg ? } )

par exemple oui ! (jQuery.hide()).

La pensée du jour :

Essayer c'est découvrir !

[dhillig]

re NoSmoking,

MERCI pour tes réponses et le lien JQuery (et MERCI encore à SpaceFrog dont le code est utilisé
Non seulement ça fonctionne, mais en plus le .hide en "slow" est très agréable visuellement.
Seul petit problème, la div "bg" étant "hidden", on y a plus accès par la barre des menus
J'ai donc rajouté qq lignes au script :

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
$( function(){
 
    $('#mymenu ul li a').on('click' , function(e){
        e.preventDefault();
        nr=$(this).data('link')
        cible="#bg"+nr;
 
      $('#bg').hide( "slow" );
    })
})
$( function(){
 
    $('.logo').on('click' , function(e){
        e.preventDefault();
        nr=$(this).data('link')
        cible="#bg"+nr;
 
      $('#bg').show( "slow" );
    })
})

Vu que ça fonctionne, sujet RESOLU !!! Mais mes lignes rajoutées sont-elles correctes ?
Encore merci à toi et à SpaceFrog !!!

Bon week-end !
dh

[NoSmoking]

Tu peux opérer un regroupement

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
$(function() {
 
  $('#mymenu ul li a').on('click', function(e) {
    e.preventDefault();
    nr = $(this).data('link')
    cible = "#bg" + nr;
 
    $('#bg').hide("slow");
  });
 
  $('.logo').on('click', function(e) {
    e.preventDefault();
    nr = $(this).data('link')
    cible = "#bg" + nr;
 
    $('#bg').show("slow");
  })
})

• Si l'élément de class logo n'est pas un lien ou autre bouton submit le e.preventDefault(); ne te sert à rien.

• Ta variable nr, utilisée en local, devrait être précédée du mot clé var, plus propre, mai à quoi te sert elle réellement ?

• A quoi te sert la variable cible ?

[dhillig]

• Si l'élément de class logo n'est pas un lien ou autre bouton submit le e.preventDefault(); ne te sert à rien.

Effectivement.

• Ta variable nr, utilisée en local, devrait être précédée du mot clé var, plus propre, mai à quoi te sert elle réellement ?

Je n'ai pas réussi à trouver la signification de cette variable

• A quoi te sert la variable cible ?

A rien apparemment
le nouveau code (fonctionnel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$( function(){
    $('#mymenu ul li a').on('click' , function(e){
        var nr=$(this).data('link')
      $('#bgfadewrap').hide( "slow" );
    })
})
$( function(){
    $('.logo').on('click' , function(e){
        var nr=$(this).data('link')
      $('#bgfadewrap').show( "slow" );
    })
})

Peut-on encore l'épurer ?
J'ai un autre petit soucis, la div "bg" étant fullscreen et avec un z-index supérieur, elle masque les autres div, ce qui était le but
Mais elle est scrollable, ce qui est stupide Peut-on empêcher le scroll ? Les CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
z-index:1;
top:0;
left:0;
bottom:0;
right:0; 
width:100%;
height:100%;
overflow:hidden;
position:absolute;

Je suis bien tombé sur ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function show(){
//ici gestion de l'affichage de la div
var body = document.querySelectorAll('body');
body[0].style.overflow = "hidden";//querySelectorAll renvoi un tableau
}

Mais impossible d'y comprendre qq chose
Merci pour ton aide
dh