Discussion :

[dhillig]

Bonsoir à tous,
Je suis actuellement sur un page utilisant, entre-autres, Scrollto. J'ai réussi plus ou moins à paramétrer InWiew (via la démo "jQuery-Plugin-To-Animate-Elements-When-They-Scroll-Into-View-inview). J'ai tenter d'y mettre ce travail test inview dans ma page scrollto, l'appel à la biliothèque

Code html :

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

annule tous le JQuery (ScollTo), mais aussi la video allSize (qui n'apparaît plus), la barre des menus n'est plus fixe etc...
J'ai tenté de mettre l'appel de la biblio un peu partout ... Rien n'y fait, est-il possible de travailler avec ces deux biblio ? (pas correct de travailler avec plusieurs biblio )
Mais le but recherché sur ma page Scrollto est d'avoir une <div> venant du top. Ce qui me semble impossible avec InView (puisque c'est la page d'accueil). InView n'intervient que lorsue la <div> devient visible, et non quand elle est déjà apparente.
Mon header ressemble à cela :

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
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
    </script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
	<script src="js/jquery.inview.js"></script> 
	<script src="js/main.js"></script>
	<script type="text/javascript">
        </script>

Alors là, rien ne fonctionne, par contre, si je supprime

Code html :

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"

Tout redevient parfait, mais plus d'effet inview. Quelqu'un aurait-il une idée du soucis, ou q-chose d'équivalent à InView ? Parallax peut-il se substituer à InView ?
Merci pour votre aide et BONNE SOIREE !
dh

[SpaceFrog]

peut être en mettant jquery en premier ?

[dhillig]

Bonsoir SpaceFrog et merci pour ta réponse,
Effectivement, plus de "bug" avec cet header (que je pensais avoir testé) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
	<script src="js/jquery.inview.js"></script> 
	<script src="js/main.js"></script>
	<script type="text/javascript"></script>

Malheureusement, toujours pas d'effet InView malgré des CSS fonctionnelles me semble t'il :

Code css :

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
.blocks, .blocks-2, .blocks-bottom, .blocks-top  {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #696;
	width: 100%;
	color: #9933FF;
}
.blocks div, .blocks-2 div, .blocks-bottom div, .blocks-top div {
	background-color: #ddd;
	width: 400px;
	margin: 0 auto;
	padding: 0px;
	line-height: 1.5em;
	-webkit-transition: -webkit-transform 0.8s, opacity 0.8s;
	-moz-transition: -moz-transform 0.8s, opacity 0.8s;
	transition: transform 0.8s, opacity 0.8s;
}
 
.block-bottom {
	opacity: 0;
	-webkit-transform: translateY(-800px);
	-moz-transform: translateY(-800px);
	transform: translateY(-800px);
}
 
.block-top {
	opacity: 0;
	-webkit-transform: translateY(800px);
	-moz-transform: translateY(800px);
	transform: translateY(800px);
}

Et la partie du body concerné :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="section-trois">
  <div class="blocks">
    <div data-class-in="" data-class-out="block-bottom">
      <p> Aenean viverra rhoncus pede. Phasellus magna. Donec mollis
        hendrerit risus. Maecenas ullamcorper, dui et placerat feugiat,
        eros pede varius nisi, condimentum viverra felis nunc et lorem.
        In ut quam vitae odio lacinia tincidunt. </p>
      <p> Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum
        eget, diam. Ut non enim eleifend felis pretium feugiat. Ut
        varius tincidunt libero. Mauris sollicitudin fermentum libero.
        Nulla consequat massa quis enim. </p>
    </div>
  </div>

Ces CSS et ce body fonctionnaient dans ma page issue de la demo "InView" (sans autre JQuery)

Merci pour ton aide et bonne soirée,
dh

[SylvainPV]

Pourquoi charger deux versions différentes de jQuery ?
Pourquoi un script vide à la fin ?
Qu'y a-t-il dans lancement.js et pourquoi le charger au milieu des autres bibliothèques ?

[dhillig]

Bonsoir Sylvain et les autres,
Pourquoi deux biblio ? (je sais que ce n'est pas bien) :
Parce que dans ma page initiale inview (sans Scrollto donc), cette biblio

Code :

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

<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->

ne fonctionne pas

Voici un header que j'espère plus propre (et avec une seule biblio) :

Code :

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

1
2
3
4
5
6
7
8
9
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<script src="js/jquery.inview.js"></script> 
	<script src="js/main.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>

Un script vide dans mon message d'hier ? Oui, il y en avait un lorsque j'ai rédigé la discussion, faute d'inattention
Si je place le lancement js à la fin, le jquery SrollTo ne fonctionne plus. Faut-il le mettre avant

Code :

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

<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>

??? Ce qui fonctionne aussi

Voici son contenu :

Code :

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

1
2
3
4
5
$(document).ready(function() {
 
	$.localScroll();	
 
});

et le contenu de main.js :

Code :

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

1
2
3
4
5
$(function(){
	$('div.blocks div').inview({
		'viewFactor': 0.3
	});
});

Inview ne fonctionne toujours pas avec le header actuel. Comme si

Code :

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

était indispensable
Une idée du malaise ?
Merci à vous et bonne soirée,
dh

[SylvainPV]

Plutôt que d'essayer des choses au hasard en espérant que ça fonctionne, peut-être faudrait-il essayer de comprendre ? En tout cas en chargeant deux versions de jQuery tel que tu le fais, tu as la certitude que ça se passe mal.

Commence par mettre tes libs en <head> et tes propres scripts en fin de <body>.

[dhillig]

Bonsoir SylvainPV, merci pour ton message,
Veux-tu dire cela pour le head :

Code :

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

1
2
3
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script src="js/jquery.inview.js"></script> 
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>

Et ceci avant le </body> ?

Code :

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

1
2
3
4
5
6
7
8
  	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

Merci pour ton aide et bonne soirée,
dh

[dhillig]

Bonsoir à tous,
Malgré mes essais, le problème persiste. J'en reste donc à la config précédente... sans effet InView
Si qq a une idée...
Bonne soirée et merci,
dh

[dhillig]

Sujet clos