IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment cet effet en javascript fonctionne-t-il ?


Sujet :

JavaScript

  1. #1
    Membre expert
    Avatar de Emmanuel Lecoester
    Profil pro
    Inscrit en
    Février 2003
    Messages
    1 493
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Février 2003
    Messages : 1 493
    Points : 3 266
    Points
    3 266
    Par défaut 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 .

    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      <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

  3. #3
    Expert confirmé
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    Il y a à la fois Mootools et jQuery sur leur site (entre autres comme "JCaption", "Ultimate Fade-in", etc. .... un grand patchwork extrêmement... )

    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é...

  4. #4
    Membre expert
    Avatar de Emmanuel Lecoester
    Profil pro
    Inscrit en
    Février 2003
    Messages
    1 493
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Février 2003
    Messages : 1 493
    Points : 3 266
    Points
    3 266
    Par défaut
    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ù ?

    Sinon RomainVALERI je ne veux surtout pas découvrir le métier C'est juste que je voudrais faire ce petit effet sur notre site en joomla :-)

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 060
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 060
    Points : 44 585
    Points
    44 585
    Par défaut
    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.

  6. #6
    Membre expert
    Avatar de Emmanuel Lecoester
    Profil pro
    Inscrit en
    Février 2003
    Messages
    1 493
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Février 2003
    Messages : 1 493
    Points : 3 266
    Points
    3 266
    Par défaut
    il n'y a pas que cela mais autant faire le plus simple possible. Je commence à regarder des petits script tout fait

  7. #7
    Membre expert
    Avatar de Emmanuel Lecoester
    Profil pro
    Inscrit en
    Février 2003
    Messages
    1 493
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Février 2003
    Messages : 1 493
    Points : 3 266
    Points
    3 266
    Par défaut
    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 çà )

    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
    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';
    	}	
    }

  8. #8
    Expert confirmé
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    Citation Envoyé par Emmanuel Lecoester Voir le message
    (et oui çà marche comme çà )
    Nan nan

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment faire cet effet de hover sur un row de table
    Par boucdur dans le forum jQuery
    Réponses: 20
    Dernier message: 09/03/2011, 16h26
  2. Comment avoir cet effet ?
    Par Medyo4zy dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 11/05/2010, 17h59
  3. Comment ont-t-ils fait cet effet (vertical scroll) ?
    Par Fredovsky dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 10/06/2009, 01h50
  4. Comment realiser cet effet ?
    Par alexis55 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/01/2008, 17h37
  5. [Galerie] Comment réaliser cet effet [agrandissement image] ?
    Par VinnieMc dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 27/08/2007, 16h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo