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

jQuery Discussion :

Tooltip Jquery ajouter la collision en fonction de la position de l'image


Sujet :

jQuery

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2013
    Messages : 3
    Par défaut Tooltip Jquery ajouter la collision en fonction de la position de l'image
    Bonjour j'utilise un Tooltip Jquery permettant de faire un zoom sur une image avec une description qui marche très bien. Mais je voudrais également ajouter la gestion des collisions en fonction de la position de l'image.
    J'ai d'ores et déjà consulté un problème similaire au mien mais je n'ai pas trouvé une réponse à mon problème.
    http://www.developpez.net/forums/d12...ment-position/

    Ci-joint le code si quelqu'un peut m'aider je lui en serais reconnaissant car étant débutant en Javascript cela fait 3 semaines que je cherche merci à vous

    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
    // Load this script once the document is ready
    	$(document).ready(function () {
     
    		// Get all the thumbnail
    		$('div.thumbnail-item').mouseenter(function(e) {
     
    			// Calculate the position of the image tooltip
    			x = e.pageX - $(this).offset().left;
    			y = e.pageY - $(this).offset().top;
     
    			// Set the z-index of the current item, 
    			// make sure it's greater than the rest of thumbnail items
    			// Set the position and display the image tooltip
    			$(this).css('z-index','15')
    			.children("div.tooltip")
    			.css({'top': y + 10,'left': x + 20,'display':'block'});
     
    		}).mousemove(function(e) {
     
    			// Calculate the position of the image tooltip			
    			x = e.pageX - $(this).offset().left;
    			y = e.pageY - $(this).offset().top;
     
    			// This line causes the tooltip will follow the mouse pointer
    			$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
     
    		}).mouseleave(function() {
     
    			// Reset the z-index and hide the image tooltip 
    			$(this).css('z-index','1')
    			.children("div.tooltip")
    			.animate({"opacity": "hide"}, "fast");
    		});
     
    	});

  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 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 658
    Billets dans le blog
    1
    Par défaut
    la gestion des collisions en fonction de la position de l'image.
    ???
    c'est à dire ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2013
    Messages : 3
    Par défaut
    La gestion des collisions
    Pour mieux m'exprimer je cherche à ajouter la fonction "viewport" pour que l'image en fonction de la taille de la fenêtre reste dans le champ (exemple : une image en bas à droite même lorsqu'on réduit la fenêtre restera visible elle basculera en haut à gauche si on réduit du coin inférieure droit)

    J'espère avoir été assez explicite

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour

    La manière dont je gère le positionnement de mon tooltip vous aidera peut-être. Voir le code de mon plugin : http://danielhagnoul.developpez.com/...ip/tooltip.php

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    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 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 658
    Billets dans le blog
    1
    Par défaut
    Il existe de plugins qui gèrent automatiquement la position du tooltip en tenant compte de la position de l'image ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2013
    Messages : 3
    Par défaut
    Oui, j'ai d'ores et déjà chercher différents plugins mais mon soucis reste au niveau de l'intégration dans le code...

Discussions similaires

  1. [jQuery] Ajouter du code dans le DOM
    Par Spir dans le forum jQuery
    Réponses: 4
    Dernier message: 29/09/2008, 09h46
  2. Ajouter 10 secondes à une fonction microtime
    Par syl2042 dans le forum Langage
    Réponses: 4
    Dernier message: 27/08/2007, 11h48
  3. StringGrid ajout de ligne en fonction des données
    Par thierrybatlle dans le forum Delphi
    Réponses: 3
    Dernier message: 26/05/2006, 13h58
  4. [class] Ajouter class devant une fonction
    Par Pedro dans le forum Langage
    Réponses: 12
    Dernier message: 07/03/2005, 13h11

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