Comment cet effet en javascript fonctionne-t-il ?

Version imprimable

16/11/2011, 16h33
Emmanuel Lecoester

Comment cet effet en javascript fonctionne-t-il ?

Bonjour,

Je suis débutant en JS / CSS et tout autre chose liée à Internet. J'y vais donc petit à petit :oops:.

Sur ce site : http://sgdf-boissy-limeil.fr/, il y a un effet sur le haut de la page : quand on clique sur Espace membre.

D'après mes investigations cela est bien du Javascript (au début je pensée à un effet CSS mais le CSS ne gère pas le clic souris si j'ai bien tout compris.).

Comment faire pour trouver le comment ?

Merci beaucoup pour votre aide :ccool:
16/11/2011, 16h40
SpaceFrog

Code:

<script type="text/javascript" src="/media/system/js/mootools.js"></script>

a première vue je dirais que les effets de cette page sont programmés à l'aide de la librairie motools ...

Mais egalement réalisbales avec d'autres librairies (scriptaculous, jQuery ...)

ça reste bien entendu du javascript
16/11/2011, 17h20
RomainVALERI

Il y a à la fois Mootools et jQuery sur leur site :calim2: (entre autres comme "JCaption", "Ultimate Fade-in", etc. .... un grand patchwork extrêmement... :vomi:)

Si tu découvres le métier, ne suis surtout pas cet anti-pattern du web consistant à empiler des libs différentes par paquets de 8 pour la moindre nouvelle fonctionnalité... :no:
16/11/2011, 18h30
Emmanuel Lecoester

Merci SpaceFrog, j'avais trouvé que c'était dans ce fichier que cela se passait mais ce que je voudrai c'est comprendre le où :oops:?

Sinon RomainVALERI je ne veux surtout pas découvrir le métier 8-) C'est juste que je voudrais faire ce petit effet sur notre site en joomla :-)
16/11/2011, 18h36
NoSmoking

Bonjour,
pour le principe ce n'est qu'une DIV dont on mets le margin-top en négatif et au clic on le repasse à 0, donc peut être pas la peine d'embarquer des biblis si il n'y a que cela à faire dans la page.
16/11/2011, 18h41
Emmanuel Lecoester

il n'y a pas que cela mais autant faire le plus simple possible. Je commence à regarder des petits script tout fait :mouarf:

et bien merci à tous, je me suis basé sur un petit script trouvé sur le net que j'ai adapté comme un gros bourrin (et oui çà marche comme çà :ccool:)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
	if (document.getElementById('top-tab-lib').className=='tab-text tab-text-up')
	{
		targetElement.style.display = "" ;
		targetElement.style.marginTop ='0px';
		document.getElementById('top-tab-lib').className='tab-text tab-text-down';
	} else {
		targetElement.style.display = "none" ;
		targetElement.style.marginTop ='-49px';
		document.getElementById('top-tab-lib').className='tab-text tab-text-up';
	}	
}

16/11/2011, 21h58
RomainVALERI

Citation:

Envoyé par Emmanuel Lecoester

(et oui çà marche comme çà :ccool:)

Nan nan :mrgreen:

(mais ma première intuition était la bonne : hou attention... "windev" dans une signature == danger :aie:)