Fenêtre flottante sous FireFox

Signaler
Messages postés
8
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
15 février 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonsoir, je ne connais strictement le JavaScript, mais en récoltant des infromation j'ai réussis à faire une fenêtre "flottante" sur mon site: elle marche trés bien sous Internet Explorer (mais le site non) et sous FireFox, il yas des bug (cf images).

Est-ce que quelqu'un peut m'aider ? Toutes les information sont ci-dessous.

J'espere que oui car sa fait un moment que je tourne en rond...
Merci de votre patience et compréhension.
@+

________________________________________________________
Les images du bug:
    Firefox: Haut - Bas
    InternetExplorer: Haut<sup>(Pas de bug apriori)
________________________________________________________________
</sup>Code de la fenêtre:

<script language= "JavaScript">

<!--

function SymError()
{

  returntrue;
}


window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{

  return(new Object());
}


window.open = SymWinOpen;

//-->

</script>


<script type="text/javascript">var dragged = null;

<!--
var dX, dY;

function start_drag(objet,event)
{

  dragged = objet;

       

        event.returnValue = false;

        if( event.preventDefault) event.preventDefault();

       

        //Coordonnées de la souris

  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);

  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);

       


        //Coordonnées de l'élément

  var eX = 0;

  var eY = 0;

  var element = objet;

  do

  {

    eX += element.offsetLeft;

    eY += element.offsetTop;

    element = element.offsetParent;

  }while( element && element.style.position != 'absolute');


        //Calcul du décallage

  dX = x - eX;

  dY = y - eY;

}
function min_max(fenetre)
{

  if( fenetre.style.width != '100%' && fenetre.style.height != '100%')

  {

     fenetre.style.width = '100%';

     fenetre.style.height = '100%';

     fenetre.style.position = 'absolute';

     fenetre.style.left = 0;

     fenetre.style.top = 0;

  }

  else

  {

    fenetre.style.width = '';

    fenetre.style.height = '';

  }
}
functionclose(fenetre)
{

  fenetre.parentNode.removeChild(fenetre);

  //ou: fenetre.style.display = 'none';
}
function drag_onmousemove(event)
{

  if( dragged )

  {

    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);

    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);

               

                //On applique le décalage

                x -= dX;

                y -= dY;


    dragged.style.position = 'absolute';

    dragged.style.left = x + 'px';

    dragged.style.top = y + 'px';

  }
}

function drag_onmouseup(event)
{

  dragged = null; //On arrête le drag&drop
}

function addEvent(obj,event,fct)
{

  if( obj.attachEvent)

     obj.attachEvent('on' + event,fct);

  else

     obj.addEventListener(event,fct,true);
}

function drag_onmousedown (event)
{

  var target = event.target || event.srcElement;

 

  //On commence par trouver la fenêtre elle-même

  var fenetre = target;

  while( fenetre)

  {

    if( fenetre.className && fenetre.className.match(/\bwindow-base\b/g))

    {

       break; //On arrête la boucle

    }

                fenetre = fenetre.parentNode;

  }

  if( !fenetre)//Si on est sorti de la boucle mais qu'on a trouvé aucune fenêtre, on abandonne

    return;


  //Maintenant, on part à la recherche d'un bouton déclencheur

  var element = target;

  while(element)

  {

    if( element.className)

    {

      if( element.className.match(/\bwindow-close\b/g))

      {

        close(fenetre);

        break;

      }

      elseif( element.className.match(/\bwindow-min-max\b/g))

      {

        min_max(fenetre);

        break;

                        }

      elseif( element.className.match(/\bwindow-move\b/g))

      {

        start_drag(fenetre, event);

        break;

      }

    }

                element = element.parentNode;

  }
}

addEvent(document,'mousedown',drag_onmousedown);

addEvent(document,'mousemove',drag_onmousemove);

addEvent(document,'mouseup',drag_onmouseup);

function dupliquer(fenetre)
{

  var n_f = fenetre.cloneNode(true);

        n_f.style.left = parseInt(fenetre.style.left) + 10 + 'px';

        n_f.style.top = parseInt(fenetre.style.top) + 10 + 'px';

        fenetre.parentNode.appendChild(n_f);
}

-->

</script>

<style type="text/css">

.window-base
{

        position: absolute;

        width: 200px;

        height: 136px;

        background-image: url("http://wow-europe.com/shared/wow-com/images/parchment/plain/light.jpg");

        border: 1px solid #000;
}


.window-close , .window-min-max
{

        float: right;

        background-color: #EEE;

        margin-top: 5px;
}


.window-move
{

        width: 100%;

        height: 30px;

        width: 100%;

        background-image: url("http://wow-europe.com/shared/wow-com/images/headers/tabheader/tabheader-left-long.jpg");

        color: black;

        font-weight: "Trebuchet MS";

        font-weight: bold;

        margin-top: 5px;

        cursor: move;
}

button, input, texterea
{

 background-color: #E5C04A;

 border:1px solid #4D1500;

 font-size:12px;

 color:#6E2A02;

 font-weight: "Trebuchet MS";
}

button:hover, input:hover, texterea:hover
{

 background-color: #E5C04A;

 font-weight: bold;

 border:1px solid #4D1500;

 font-size:12px;

 color:#6E2A02;

 font-weight: "Trebuchet MS";
}

</style>


        <script type="text/javascript">


        </script>

class="window-base">

   
class="window-move">

        class="window-close">X >

        &nbsp;&nbsp;&nbsp; Connection

    >

    <formaction ="#">
/>

        &nbsp;RPing : type="text"name="pseudo"value="RPing"/>
/>

        &nbsp;RPass : type="password"name="mot_de_passe"value="RPass"/>
/>
/>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="submit"value="RPconnect"/>

    </form>
>


<script language="JavaScript">

<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{

  window.open = SymWinOpen;

  if(SymRealOnUnload != null)

     SymRealOnUnload();
}

function SymOnLoad()
{

  if(SymRealOnLoad != null)

     SymRealOnLoad();

  window.open = SymRealWinOpen;

  SymRealOnUnload = window.onunload;

  window.onunload = SymOnUnload;
}


SymRealOnLoad = window.onload;

window.onload = SymOnLoad;

//-->

</script>

Code de la page:
<html>


<link rel="icon" type="image/png" href="template1/icon.png" />

<link rel="stylesheet" media="screen" type="text/css" title="Teamplate1""template1/template1.css" />


<!----------------------------------------------------->

<!--------H-E-A-D-E-R------------------------------>

<!----------------------------------------------------->
<?phpinclude'header.php';?>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->




<!----------------------------------------------------->

<!----------------------------------------------------->

<!-----------F-L-A-S-H---N-E-W-S----------------------->
<?phpinclude'flash_news.php'; ?>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->


<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------M-E-N-U------------------------------->
<?phpinclude("menu.php"); ?>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->


<!----------------------------------------------------->

<!--------F-L-O-T-T-A-N-T----------------------->

<!----------------------------------------------------->
<?phpinclude'fenetre_connection_flottante.php';?>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->


<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<td bgcolor="#9F7756" width="596" valign="top">


\"0\" cellspacing=\"0\" cellpadding=\"0\">

----

        "3">"template1/haut_texte.png" />,

----

        "3" background="template1/titre.png" width="596" height="30""middle">

"titre_index">World of RP > Bienvenue

       ,

----

        "3">"template1/bas_titre.png" />,

----

        "template1/fond_gauche_texte.png" width="56">,

        "template1/fond_texte.png" width="501">

        "template1/insecte.png" align="right" />

        "Trebuchet MS" size="2">

       
"justify">

        <?php
$text = "Bienvenue sur World of RP, WoRP, ce site regroupe tout les meilelurs RP, RPG, MMORP et

MOORPG amateurs. Qui dit amateur, ne dit pas déçevant ! Loin de là... Vous pourrez voir le site

s'enrichir de jour en jour avec les news, les rubriques, les dossiers, etc... Pour ajouter son jeu,

contactez ou aller dans la rubrique \"Ajouter un...\".
Des modules sont à votre disposition, si

vous voulez discutez il y a le Chat; Si vous voulez de la musqie, images, fond d'écrans et autres sur

les RP il y a la partie \"Download\" et si le site vous a plus il reste à signer le Livre d'Or !";
$text = mysql_connect('localhost', 'root', '');
mysql_select_db('play');
$reponse = mysql_query("SELECT * FROM news ORDER BY id DESC LIMIT 0, 2");
while($donnees = mysql_fetch_array($reponse))
{
$donnees['message'] = nl2br($donnees['message']);
$donnees['message'] = preg_replace('#^([a-z])#i', '', $donnees['message']);

        ?>

\"0\" cellspacing=\"0\" cellpadding=\"0\">

----

        "3">"template1/haut_texte.png" />,

----

        "3" background="template1/titre.png" width="596" height="30""middle">

"titre_index">World of RP > News > <?phpmysql_close();
?>

</td>

<!-- Fin du corps de la page (le texte) -->

        <td background="template1/fond_droit.png" width="13" ></td>

</tr>

</table>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!--------F-O-O-T-E-R------------------------------>
<?phpinclude'footer.php';?>

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->

<!----------------------------------------------------->
<?phpinclude("analyse.php"); ?>



</center>

</html>

7 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
B
onsoir...
Pas tout compris avec les photos, le mieux étant de donner une explication claire accompagnant les photos, ou encore la source HTML générée par le PHP, pour que l'on puisse éventuellement tester ou encore si possible une adresse pour visualisation tout cela.
;0)
Messages postés
8
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
15 février 2008

Désolée pour le manque d'informations.

Tout d'abord, je n'est pas mis mon site en ligne donc pour un lien, désolée s'est impossible. Ensuite, j'ai tout donnée les codes que j'avais (il y en a 2 voir plus haut).
Si vous n'avez pas tout compris, vu que mon niveau graphique n'est pas trés élevée, je vous donne des détailles (ce qui se passe sous FF avec IE sa marche:
    Ma fenêtre flottante (ici), créait un espace entre le header et le contenue de la page, ce qui est assez (même trés) embêttant et laid. En plus, le contenue de ma fenêtre flottante n'est pas dans la fenêtre flottante;

J'espere avoir été assez claire.

Merci de m'aider
@++
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Avec ce que j'ai et en transformant un poil je ne recontre pas le problème, donc pas bien vu le souci...
Dans ce cas ce qu'il faut c'est la page générée et non la pages avec les




<?php
include
'xxxxxx.php';?>



et autres...
Lances ta page et fait un click Droit puis copie la source résultat du fichier HTML ici...

;0)
Messages postés
8
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
15 février 2008

Je suis désolée mais je n'est pas compris ce que tu as voulu dire... Sa doit venir de moi je suis fatiqué

Et merci de m'aider !
Messages postés
8
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
15 février 2008

J'ai oublier de préciser, j'utilise en local avec EasyPHP, le problème peut venir de là ?

Merci d'avance,
@++
Messages postés
8
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
15 février 2008

Je saiqs que s'est le troisieme poste mais je viens de mettre le bug en ligne pour que vous puissiez voir le bug et m'aider: Le site bugger
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
B
onjour...
c'est bien ce qui me semblait...

extrait de ta page...

ICI tu termines la table FLASH NEWS
    <td></td>
  </tr>
</tbody></table>

ICI tu déclares ton div
<div style= "position: absolute; left: 47px; top: 156px;" class="window-base">
  < div class ="window-move">
    X
    &nbsp;&nbsp;&nbsp; Connection
  </div>
  </div>

    &nbsp;RPing :

    &nbsp;RPass :

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

ICI tu démarres la table suivante
<table border= "0" cellpadding="0" cellspacing="0">
  <tbody><tr>
  <td background="template1/fond_gauche.png" width="36"></td>



On voit tout de suite que tes input ne sont pas dans le div class window-base...

pour Info IE a écrit ceci

   

        X
        &nbsp;&nbsp;&nbsp; Connection
   

    <form action ="#">

        &nbsp;RPing :

        &nbsp;RPass :

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </form>





IE est sympa sur ce coup, mais pas forcément avantageux pour trouver le problème...

...erreur dans le PHP surement...




;0)