Discussion :

[marcel marie]

Bonjour,
Voilà encore une de mes questions "bizarres" !!
J'essaie d'apprendre de nouvelles choses en CSS et Javascript.
Je suis tombé hier sur un fichier CSS, que je ne retrouve pas ce jour.
Mon esprit est-il dérangé? ce n'est pourtant pas la chaleur ambiante !!!
En effet je suis quasiment certain d'avoir vu une ligne CSS commençant par le caractère $ de la même façon qu'il y en a avec . ou #, et ça c'est normal.
Dans les livres je n'ai jamais vu cela.
Comment cela s'explique-t-il? à moins que ça corresponde avec quelque chose en relation avec Javascript ...
Donc si je n'ai pas rêvé à quoi correspond un tel caractère $
Merci de me répondre ou simplement de me dire que je dois rapidement aller me faire soigner ...
Bon dimanche.
Marcel Marie

[marcel marie]

OUF, eh bien NON, je n'avais pas rêvé!!!
Voici ce que je trouve, entre autres, c'est un fichier .css censé être un élément d'explication pour réaliser un CARROUSEL :

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
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables
	// […]
	// Ciblage de la bande de diapositives
	// […]
	// Ciblage de la zone de visualisation
	$(".carrousel-conteneur")
		// Application de la largeur d'une seule diapositive
		.width(  Reference.width()  )
		// Application de la hauteur d'une seule diapositive
		.height( Reference.height() )
		// Blocage des débordements
		.css("overflow", "hidden")

		
		$(document).ready(function() {
	// Calcul préalables :
		// Element de référence pour la zone de visualisation (ici le premier item)
		Reference = $(".carrousel li:first-child");
		// Nombre d'éléments de la liste
		NbElement = $(".carrousel li").length;
	// Ciblage de la bande de diapositives
	$(".carrousel")

	Nous allons insérer en XHTML (after()) après le conteneur ayant la classe CSS « carrousel-conteneur » une liste avec 2 boutons en prenant soin de les identifier avec une class CSS particulière.
	Un bouton pour la diapositive précédente, un autre pour la diapositive suivante.

// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables
	// […]
	// Ciblage de la bande de diapositives
	
	**** le tout 
	Nous allons insérer en XHTML (after()) après le conteneur ayant la classe CSS « carrousel-conteneur » une liste avec 2 boutons en prenant soin de les identifier avec une class CSS particulière. Un bouton pour la diapositive précédente, un autre pour la diapositive suivante.

En quelques lignes, quelqu'un peut-il me dire "comment ça marche ce genre de choses" ?
Comment comprendre la seconde et la 8ième ligne ?

Merci, et veuillez excuser mon incompétence, c'est sans doute qqch d'évident ?
Marcel Marie

[Muchos]

Il s'agit peut-être d'un préprocesseur CSS.

EDIT: j'y crois pas… c'était juste du JS.
M³ et sa prose ><

[thelvin]

Voici ce que je trouve, entre autres, c'est un fichier .css censé être un élément d'explication pour réaliser un CARROUSEL :

Ceci est un extrait de JavaScript, pas de CSS.

Quant au symbole $, en JavaScript il n'a pas de sens particulier, mais il peut faire partie de noms de variables... Voire être un nom de variable, à lui tout seul.
Vu que c'est possible d'avoir une variable nommée $, pas mal de bibliothèques JavaScript l'ont fait pour leur objet de base, qu'on utilise tout le temps. Ici ça a l'air d'être du jQuery, où $ est une fonction, qu'on appelle à tout va pour tout et n'importe quoi. La ligne 2 s'en sert pour poser un listener quand la page a fini de charger. La ligne 8 s'en sert pour sélectionner des éléments avec la même syntaxe qu'un sélecteur CSS : tous les éléments avec class carrousel-conteneur.

[marcel marie]

Merci,
Mais je confirme que ce que j'ai mis fait bien partie d'un fichier .css en fichier externe dans un fichier .html et bien appelé comme un fichier .css :

Code html :

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

<link rel="stylesheet" type="text/css" href="/scripts/sb/shadowbox.css" />

Je vais continuer à essayer de comprendre.
Marcel Marie

[thelvin]

D'accord donc ce que tu as, c'est ça, et la question c'est "comment ça marche ?"
Ben ça marche pas. Ce fichier CSS devrait être un fichier JavaScript.

[Golgotha]

Oui, de plus il est positionné dans le dossier /scripts .. donc pas de doute.

[ABCIWEB]

Bonjour,

Oui c'est bien du jquery et donc si tu veux comprendre, il faut faire un tour du côté de jquery. Remarques que les commentaires sont assez explicites.
- $(document).ready -> permet d'exécuter le code une fois la page chargée et il vaut mieux sinon les sélecteurs vont cibler dans le vide.
- $(".carrousel-conteneur") -> cible dans le html les éléments ayant comme classe "carrousel-conteneur" et on applique sur ces éléments des fonctions pour définir la largeur, la hauteur et un css.

Au passage, à mon avis dans ce contexte il serait plus pertinent de définir un id cible plutôt qu'une classe mais c'est une autre histoire...

[marcel marie]

Muchos ?!
Il ne faudrait pas "déconner" !!
Il ne faut pas injurier les intervenants questionneurs qui font de leur mieux pour ... pour quoi au fait ?
Donc je ne souhaite pas que mes initiales soient soumises à la PUISSANCE, donc pas de M³ SVP !!! 3M suffiront , c'est moins valorisant mais c'est plus collant , NON?
si prose il y a c'est qu'en VERS et contre tout, je suis moins BON, disons aussi mauvais qu'en CSS ou JS.
Ceci dit BON WEEK END
M.M.M.

[marcel marie]

hello,
à question courte et claire,
réponse courte et claire;
obtenue en cherchant et en utilisant la maxime "aide toi, le ciel t'aidera", parfois exprimée malicieusement "aide toi, tête de rat " BOF !!! rien de drôle.

le sign $ est l'alias de Jquery

Code :

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

1
2
3
jQuery(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Code :

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

1
2
3
$(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Code :

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

1
2
3
$(function() {
  // Ici, le DOM est entièrement défini
});

Les trois dernières écritures seraient équivalentes, la dernière c'est quand les doigts sont fatigués ou lors de manque d'encre.
It's all.
A une prochaine.
Marcel Marie

[thelvin]

Oui, c'est ce que disait mon premier message.
Enfin, je suppose que quand on connaît jQuery et qu'on utilise la forme jQuery() au lieu de $(), les exemples aident à comprendre.