Discussion :

[mrmaxwell]

Bonjour,

Pour celles et ceux qui m'auraient croisés je suis toujours sur le projet que j'ai décris ici dans le forum css.

Tout se passe plutôt bien les navigateurs réagissent tous bien et j'essaye d'alléger un peu le code d'une de mes pages.

Je m'explique, j'ai ce code :

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
<script type="text/javascript">					<!-- appel du nivoslider -->
			$(window).load(function() {
				$('#slider').nivoSlider({
					effect: 'fold', // Specify sets like: 'fold,fade,sliceDown'
					slices: 15, // For slice animations
					boxCols: 8, // For box animations
					boxRows: 4, // For box animations
					animSpeed: 1000, // Slide transition speed
					pauseTime: 6000, // How long each slide will show
					startSlide: 0, // Set starting Slide (0 index)
					directionNav: true, // Next & Prev navigation
					controlNav: true, // 1,2,3... navigation
					controlNavThumbs: false, // Use thumbnails for Control Nav
					pauseOnHover: true, // Stop animation while hovering
					manualAdvance: false, // Force manual transitions
					prevText: 'Prev', // Prev directionNav text
					nextText: 'Next', // Next directionNav text
					randomStart: false, // Start on a random slide
					beforeChange: function(){}, // Triggers before a slide transition
					afterChange: function(){}, // Triggers after a slide transition
					slideshowEnd: function(){}, // Triggers after all slides have been shown
					lastSlide: function(){}, // Triggers when last slide is shown
					afterLoad: function(){}
				});
 
			});
		</script>

Et je souhaiterai alléger la page en faisant un truc du genre

Code html :

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

1
2
<script type="text/javascript">				
    $(window).load(function() { mafonction(); }

ou j'aurai juste recopié le code dans un fichier.js

Ca ne changerait rien au rendu final mais rendrait la page bien plus lisible.

Pourriez vous m'indiquer comment je pourrais m'y prendre ( pour apprendre )

D'avance je vous remercie beaucoup

[NoSmoking]

Bonjour,
le plus simplement possible en mettant dans la page HTML

Code html :

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

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

et dans le fichier nom_fichier.js tu mets le code, sans les balises <script>

[Lorenzo77]

salut,

tu peux aussi éviter ceci :

Code :

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

$(window).load(function() {

ceci est + propre (avis perso) :

Code :

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

$(document).ready(function() {

ou :

Code :

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

$(function() {

ou encore mieux :

Code :

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

1
2
jQuery.noConflict();
jQuery(function($) {

[Bovino]

@Lorenzo.

Code :

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

$(document).ready(function() {

n'est pas plus propre que

Code :

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

$(window).load(function() {

ça n'a pas la même utilité.
Le premier code se lance lorsque le DOM a fini d'être parsé (toutes les balises ont été interprétées et intégrées) alors que le second se déclenche lorsque tous les éléments ont fini d'être chargé, c'est-à-dire les éléments dits remplacés, comme les images, iframes etc.

Code :

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

1
2
jQuery.noConflict();
jQuery(function($) {

avec cette notation, noConflict() n'est pas utile puisque $ correspond déjà à jQuery dans la closure créée.

@mrmaxwell.
+ Comment utiliser un script externe ?

[Lorenzo77]

ben non, justement tu remets le $ (au cas ou la var a été écrasé) a sa bonne valeur en lancant le noConflict juste avant et ensuite tu le "caches" dans une fonction en le passant comme un argument, j'explique mal mais la doc de JQ est clair a ce propos :

Revert the $ alias and then create and execute a function to provide the $ as a jQuery alias inside the function's scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.

Code :

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

1
2
3
4
5
6
7
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library

j'ai juste fait une erreur quand j'ai ajouté jquery devant la "closure"

[mrmaxwell]

Oula je ne voulais pas lancer un débat et mettre le bazar, désolé

En tout cas merci pour votre réponse rapide.

Juste pour être sur dans le fichier js pour déclarer la fonction j'inscris :

Code :

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

1
2
3
4
5
6
 function mafonction({

le code que j'ai cité précédemment

)};

Je sais que c'est une question de base pour un langage mais entre l’apprentissage du css, du html, bientôt le premier déploiement et le bonus du htaccess à apprendre j'ai du mal à tout entreprendre seul en même temps.

Merci encore

[danielhagnoul]

Bonsoir

$( window ).load( mafonction );.

[mrmaxwell]

Ca marche

En effet c'était tout bêtement le copier coller du code entre les balises script dans un fichier .js que l'on appelle ensuite via l'attribut src.

Ce que je n'avais pas compris c'est que le code une fois "lu par la machine" se déclenchait de lui même au bon moment puisque j'avais spécifiée $(window).load( dans le script.

Merci beaucoup

PS: C'est avec une pointe de fierté que je vous annonce la mise en ligne de mon tout premier site à cette adresse

Merci a toute la communauté web pour son savoir et son aide.

[danielhagnoul]

Bonsoir

Les outils du développeur de Chrome (touche F12) signalent deux erreurs dans la console :

1. Failed to load resource: the server responded with a status of 404 (Not Found) http://www.reusetfils.fr/module/nivo/arrows.png
2. Failed to load resource: the server responded with a status of 404 (Not Found) http://www.reusetfils.fr/module/nivo/bullets.png

[mrmaxwell]

Merci je vais voir pour corriger ça, c'est vrai que dès qu'on modifie un module pour jquery (nivoslider) il faut le connaitre sur le bout des doigts.

Second merci pour le F12 sous chrome ça me sera très utile à l'avenir