Personnalisation page SharePoint

**LinkinGarviel** · 17/05/2016, 14h22

Bonjour,

Je me présentes je m'appelle Clément j'ai 21 ans et j'aime bien tester des trucs que je connais pas. Et du coup vu que je connais rien ben je navigue entre tous les forums d'aide. Cependant la j'heurte à un petit problème. Je ne connais absolument rien de SharePoint a proprement parlé mais il vient d'être mise en ligne dans mon entreprise.

Du coup je me suis amusé à avoir mon propre site SharePoint et à personnaliser mon site. (Avec du code simple style css/js). J'arrrive casi à tout faire avec la page MasterPage pour les menus mais la j'aimerais faire un petit bout de code que pour l'accueil : C'est une petite animation de chargement. Cependant n'importe ou j'essaye de l'inclure rien ne marche... Y-a-t-il des tutos sur les différentes balises utilisées ? Ou dois-je mettre un bout de code comme le suivant :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<style>
	/* -------------------------------------------------------- */
	/* Page Loading Animation
	/* -------------------------------------------------------- */
	#p-load {
		background: #2e3561;
		position: fixed;
		z-index: 9910001;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
 
	#p-load span {
		color: #474747;
		width: 100%;
		float: left;
		display: block;
		text-align: center;
	}
 
	.loader {
		left: 50%;
		position: absolute;
		margin-left: -130px;
		width: 260px;
		height: 90px;
		margin-top: -45px;
		top: 50%;
	}
 
	.loader i {
		display: inline-block;
		width: 40px;
		height: 40px;
		-webkit-animation: loading 1s linear infinite forwards;
		-moz-animation: loading 1s linear infinite forwards;
		-o-animation: loading 1s linear infinite forwards;
		-ms-animation: loading 1s linear infinite forwards;
		animation: loading 1s linear infinite forwards;
	}
 
	.cssanimations .loader span {
		display: none;
	}
 
	.no-cssanimations .loader i {
		display: none;
	}
 
	.loader i:nth-child(2){
		-webkit-animation-delay: 0.2s;
		-moz-animation-delay: 0.2s;
		-o-animation-delay: 0.2s;
		-ms-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
 
	.loader i:nth-child(3){
		-webkit-animation-delay: 0.2s;
		-moz-animation-delay: 0.2s;
		-o-animation-delay: 0.2s;
		-ms-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
 
	.loader i:nth-child(4){
		-webkit-animation-delay: 0.3s;
		-moz-animation-delay: 0.3s;
		-o-animation-delay: 0.3s;
		-ms-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
 
	.loader i:nth-child(5){
		-webkit-animation-delay: 0.4s;
		-moz-animation-delay: 0.4s;
		-o-animation-delay: 0.4s;
		-ms-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}
 
	.loader i:nth-child(6){
		-webkit-animation-delay: 0.5s;
		-moz-animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
		-ms-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}
 
	@-webkit-keyframes loading{
		0%{
			opacity: 0;
			background-color: rgba(255,255,255,0.9);
		}
 
		100%{
			opacity: 1;
			-webkit-transform: scale(0.25) rotate(75deg);
			background-color: rgba(155,155,155,0.9);
		}
	}
 
	@-moz-keyframes loading{
		0%{
			opacity: 0;
			background-color: rgba(255,255,255,0.9);
		}
 
		100%{
			opacity: 1;
			-moz-transform: scale(0.25) rotate(75deg);
			background-color: rgba(155,155,155,0.9);
		}
	}
 
	@-o-keyframes loading{
		0%{
			opacity: 0;
			background-color: rgba(255,255,255,0.9);
		}
 
		100%{
			opacity: 1;
			-o-transform: scale(0.25) rotate(75deg);
			background-color: rgba(155,155,155,0.9);
		}
	}
 
	@-ms-keyframes loading{
		0%{
			opacity: 0;
			background-color: rgba(255,255,255,0.9);
		}
 
		100%{
			opacity: 1;
			-ms-transform: scale(0.25) rotate(75deg);
			background-color: rgba(155,155,155,0.9);
		}
	}
 
	@keyframes loading{
		0%{
			opacity: 0;
			background-color: rgba(255,255,255,0.9);
		}
 
		100%{
			opacity: 1;
			transform: scale(0.25) rotate(75deg);
			background-color: rgba(155,155,155,0.9);
		}
	}
</style>
 
<!-- Page loading -->
<div id="p-load" class="dark">
	<div class="loader">
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<span>Chargement de la page.....</span>
	</div>
</div>
<!-- End Page loading -->
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- jQuery obligatoire !!! -->
 
<script type="text/javascript">
 
	$(window).bind('load', function(){
		 /* --------------------------------------------------------------------- 
		 Page loading animation
		 ------------------------------------------------------------------------ */
		 var page = $('#p-load');
		 page.animate({opacity:'0'},1000, function(){
			  page.hide();
		 });
 
		 /* --------------------------------------------------------------------- 
		 Testimonials
		 ------------------------------------------------------------------------ */
		 $('#masonry').masonry({
			  itemSelector: '.ts-items',
			  columnWidth: 270,
			  gutterWidth: 30,
			  isAnimated: true
		 });
 
	});
 
</script>

J'ai réussi à le faire marcher mais uniquement dans la master page, du coup la petite animation se fait à chaque page, ce qui est vraiment hum comment dire : embêtant

Désolé de vous déranger pour un problème aussi peu intéressant par la technique

**Lapinpanda** · 17/05/2016, 14h52

Bonjour,

une possibilité simple, est d'ajouter une webpart Content Script Editor sur la page d'accueil, et d'ajouter votre script.

C'est basique mais fonctionne très bien.

**LinkinGarviel** · 17/05/2016, 14h58

Bonjour,

Mon premier essai était en effet de passer par le côté graphique de SharePoint.
J'ai donc ajouté l'élément comment précisé et j'ai mis le code (Exactement le même que je vous ai copié ici). Le problème que j'ai eu c'est que mon animation ne s'arrêtais jamais.

**Lapinpanda** · 17/05/2016, 15h30

Bonjour,

premièrement, je vous recommande d'exporter tous le code dans un fichier séparé et de réféfencer ce fichier au lieu de mettre du javascript & css.

Votre webpart "Editeur de Script" devrait contenir uniquement des balises <linkref /> ou <script src="" />

Le stockage généralement utilisé est la bibliothèque "Bibliothèque de styles"

sans cela, vous allez devoir modifier votre page à chaque fois, ce n'est pas recommandé.

Concernant votre problème exacte, cela semble venir de votre script en lui même

**LinkinGarviel** · 18/05/2016, 09h50

Donc j'ai essayé plusieurs choses, tout d'abord j'ai "cassé" mon code dans plusieurs fichiers différents. Un fichier contenant le css, un fichier le js et un enfin le html que je met directement dans le script éditor.

Le problème c'est que mon animation n'a pas l'air de fonctionné, du moins j'ai mon animation mais elle ne s'arrête jamais. Je pense que cela vient du js c'est pourquoi je vous le link ci-dessous

Code :

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

1
2
3
4
5
6
7
8
$(window).bind('load', function(){
		 alert("OK");
		 var page = $('#p-load');
		 page.animate({opacity:'0'},1000, function(){
			  page.hide();
 
		 });
});

Voilà ce que contient myJs.js... Je rentre bien dans le fichier car l'alerte marche bien, mais j'ai l'impression que je ne rentre jamais dans page.animate ... Est-ce normal ? Mon js est-il juste (normalement oui car déjà tester). SharePoint me limite-t-il ?

Merci d'avance de votre aide

**Lapinpanda** · 18/05/2016, 10h28

Bonjour,

pouvez vous faire une fonction plutot puis l'appelé?

Code :

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

1
2
3
4
5
6
 
$(window).bind('load', function(){
		 //call function
 
                maFunctionJS();
});

Dans le fichier js.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function maFunctionJS()
{
		 alert("OK");
		 var page = $('#p-load');
		 page.animate({opacity:'0'},1000, function(){
			  page.hide();
 
		 });
}

Enfin, depuis votre navigateur, après le chargement de la page, faites l'appel à maFunctionJS() ; cela permet de tester votre fonction à la demande; c'est important pour tester & faire du debug

**LinkinGarviel** · 18/05/2016, 10h51

Merci pour l'astuce c'est super pratique.

Par contre du coup je passe pas dans

Code :

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

1
2
3
 page.animate({opacity:'0'},1000, function(){
			  page.hide();
		 });

J'y connais pas grand chose...

**Lapinpanda** · 20/05/2016, 15h35

Bonjour,

est ce que votre selecteur est bon?

Code :

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

var page = $('#p-load');

est ce que page.length est égal à 0?

**LinkinGarviel** · 20/05/2016, 15h54

Bonjour,

J'ai résolu mon problème. J'ai intégré le jquery en début de code.

et j'ai supprimé ce bout de code qui faisais planté

$('#masonry').masonry({
itemSelector: '.ts-items',
columnWidth: 270,
gutterWidth: 30,
isAnimated: true
});

Merci de votre aide, maintenant tout est résolu

Personnalisation page SharePoint [Débutant]

SharePoint .NET

Discussions similaires

Partager

Partager