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 :

Positionnement div dans page web


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Juillet 2006
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Juillet 2006
    Messages : 130
    Par défaut Positionnement div dans page web
    Bonjour,

    Dans le cadre d'un développement sous Visual studio, je dois faire appel lors du passage sur une image "info" à l'apparition d'une légende représenté dans un div.

    pour plus de commodité je voudrais que mon div ne s'affiche pas en dehors de ma zone de vision du navigateur par exemple quand l'image se trouve à proximité d'un bord du navigateur.

    J'ai tenté de le faire mais sans succès. Je ne doit pas utiliser de librairie javascript, donc du javascript pur.

    L'application étant sur un intranet, le parc informatique est sous internet explorer (je le signal car j'ai tenté d'utiliser event.PageX).

    Merci de votre aide. ci dessous ma fonction actuelle.

    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
    function setVisibility(id, visibility) {
        var d = document.getElementById(id);
        var marge = 5;
        d.style.display = visibility;
        var mouseX = event.clientX;
        var mouseY = event.clientY;
        var div_width =  parseInt(d.style.width);
        var div_height =  parseInt(d.style.height);
        var posLeft = 0;
        var posTop = 0;
     
        if (mouseX>div_width)
            posLeft  = mouseX - div_width - marge;
        else
            posLeft  = mouseX + marge;
     
        if (mouseY>div_height)
            posTop = mouseY - div_height - marge;
        else
            posTop = mouseY + marge;
     
        d.style.left = posLeft + 'px' ;
        d.style.top = posTop + 'px';
    }

  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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    l'élément est il en position absolute ?
    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
    Membre confirmé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Juillet 2006
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Juillet 2006
    Messages : 130
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    l'élément est il en position absolute ?
    Oui, c'est pourquoi je travail sur le left et top.
    le tout s'affiche bien, en fait je ne sais pas comment placer le div (à côté du bouton survolé, d'où l'utilisation de la position de ma souris à ce moment là) pour que celui ci n'est pas de left à -10px ou dépassant le navigateur, idem pour le top.

  4. #4
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    pourquoi ne recupères tu pas simplement le offset top et left du bouton ?
    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 !

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Juillet 2006
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Juillet 2006
    Messages : 130
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    pourquoi ne recupères tu pas simplement le offset top et left du bouton ?

    Simplement parce que via mon code sous visual studio (Vb.net, ci dessous) je veux éviter de passer pleins d'arguments. J'ai naturellement la position quand la souris fait un mouseover dans le javascript.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     Private Sub survolInfoLegende()
            pLegende.Style.Add("display", "none")
     
            iLegende.Attributes.Add("onMouseOver", "setVisibility('pLegende','inline')")
            iLegende.Attributes.Add("onMouseOut", "setVisibility('pLegende','none')")
        End Sub

  6. #6
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    ça n'ajouterait aucun argument ...
    tu passes déja l'id ...
    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 !

Discussions similaires

  1. Recuperation de données dans page web
    Par depelek dans le forum Langage
    Réponses: 2
    Dernier message: 11/10/2006, 17h24
  2. Recuperation de données dans page web
    Par depelek dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 11/10/2006, 15h31
  3. [PDF] Ouvrir des fichiers PDF dans page Web
    Par ludoweb dans le forum Bibliothèques et frameworks
    Réponses: 12
    Dernier message: 07/09/2006, 08h13
  4. [ActiveX] Message de sécurité dans page Web
    Par Mescalito dans le forum MFC
    Réponses: 3
    Dernier message: 21/02/2006, 16h15
  5. Pb activation module quicktime dans page web
    Par Adry dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 05/12/2005, 14h00

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