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 :

popup et div centrées


Sujet :

JavaScript

  1. #1
    Membre expérimenté Avatar de Tdeny
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    287
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 287
    Par défaut popup et div centrées
    Bonjour,

    J'ai un script qui sert doublement à ouvrir une popup centrée, ainsi que de centrer une div. Ceci quelquesoit la résolution.
    Ça marche très bien sous IE, mais pas sous OPERA.
    Sous firefox, je ne sais pas, je ne l'ai pas...
    Pouvez-vous me dire pourquoi...?

    Merci.

    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
    <html> 
    <head>
    <script type="text/javascript">
    var centre = null;
    var posX = null;
    var posY = null;
    var larg = 70;
    var haut = 60;
    larg = Math.ceil(screen.availWidth * (larg/100)*(1024/screen.width));
    haut = Math.ceil(screen.height * (haut/100));
    posX=Math.ceil((screen.availwidth - larg)/2);
    posY=Math.ceil((screen.avalHeight - haut)/2)-50;
    function ow(theURL,larg0,haut0) {
    //----ça c'est le calcul de la position centrale de la fenetre---->
    larg0 = Math.ceil(screen.availWidth * (larg0/100)*(1024/screen.width));
    haut0 = Math.ceil(screen.availHeight * (haut0/100));
    posX0=Math.ceil((screen.width - larg0)/2);
    posY0=Math.ceil((screen.height - haut0)/2);
    //------------------------- on ouvre centre  ------------------------------->
    			centre = window.open(theURL,"inf2","scrollbars=yes,menubar=yes,location=yes,resizable=yes,width="+ larg0 +",height="+ haut0 +",top="+posY0+"px,left="+posX0+"px");
    			centre.focus();
    }
    </script> 
    <head>
    <body>
    <div><a href="#" onClick="ow('http://www.developpez.net/',60,50);">http://www.developpez.net/</a></div>
    <script type="text/javascript">
    document.write("<div style='position:absolute;width:"+larg+";height:"+haut+";top:"+posY+";left:"+posX+";border:1px solid black;padding:5px'>div 1</div>");
    </script>
    </body>
    </html>
    Fort possible que ce soit dû à l'écriture du style en js.

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    essaye en ajoutant l'unité pour les coordonnées (top et left) et les tailles (height et width)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    "...width:"+larg+"px;..."
    A+

  3. #3
    Membre expérimenté Avatar de Tdeny
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    287
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 287
    Par défaut
    Merci, mais non, ça ne marche pas.

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Mets ton div directement en HTML (sans faire de document.write() ).
    Tu lui attributs un ID et tu pourras ensuite modifier les caractéristiques en dynamique
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.getElementById('id_du_div').style.width = larg+"px";
    ...
    A+

  5. #5
    Membre expérimenté Avatar de Tdeny
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    287
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 287
    Par défaut
    J'ai trouvé...
    C'est intéressant à savoir.
    Ça marche quand on remplace les availWidth et availHeight par width et height tout court.
    Apparemment Opera ne connait pas, ou l'a supprimé l'availWidth et le prend par défaut dans le width.
    J'ai mis -100 pour la position de la div et -50 pour la popup.[
    CODE]<html>
    <head>
    <script type="text/javascript">
    var centre = null;
    var posX;
    var posY;
    var larg = 70;
    var haut = 60;
    larg = Math.ceil(screen.width * (larg/100)*(1024/screen.width));
    haut = Math.ceil(screen.height * (haut/100));
    posX=Math.ceil((screen.width - larg)/2);
    posY=Math.ceil((screen.height - haut)/2)-100;
    function ow(theURL,larg0,haut0) {
    //----ça c'est le calcul de la position centrale de la fenetre---->
    larg0 = Math.ceil(screen.width * (larg0/100)*(1024/screen.width));
    haut0 = Math.ceil(screen.height * (haut0/100))-100;
    posX0=Math.ceil((screen.width - larg0)/2);
    posY0=Math.ceil((screen.height - haut0)/2)-50;
    //------------------------- on ouvre centre ------------------------------->
    centre = window.open(theURL,"inf2","scrollbars=yes,menubar=yes,location=yes,resizable=yes,width="+larg0+"px,height="+haut0+"px,top="+posY0+"px,left="+posX0+"px");
    centre.focus();
    }
    </script>
    <head>
    <body>
    <div><a href="#" onClick="ow('http://www.developpez.net/',60,50);">http://www.developpez.net/</a></div>
    <script type="text/javascript">
    document.write("<div style='position:absolute;width:"+larg+"px;height:"+haut+"px;top:"+posY+"px;left:"+posX+"px;border:1px solid black;padding:5px'>div 1</div>");
    </script>
    </body>
    </html>
    [/CODE]

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

Discussions similaires

  1. Div centrée dans une div marche pas
    Par Jitou dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 17/02/2013, 10h15
  2. Afficher une div centrée en hauteur sur une page scrollée
    Par nero76 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 15/07/2009, 09h21
  3. DIV centré et coupé
    Par renotm dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/07/2007, 16h34
  4. Load données dans Select ou popup ou div ou ..
    Par speedev dans le forum Général Conception Web
    Réponses: 2
    Dernier message: 24/08/2006, 14h02
  5. Popup avec balise div
    Par Kerod dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 01/05/2005, 15h16

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