Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 1 connecté

Bienvenue sur Scripts-fr.com

Pop-Up se déplacant autour de l'écran


Exemple :

Ce javascript permet de déplacer une fenêtre en Pop-Up tout autour de l'écran. A part pour le fun ce script ne sert franchement a rien...


Explication du script : (a copier et à coller)

<html>
<head>
<title></title>

<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"

var FenPopUp
var UrlPopUp
var LargPopUp
var HautPopUp
var MargePopUp=10
var PopupPositionHaut=MargePopUp
var PopupPositionGauche=MargePopUp
var pause=20
var step=20
var LargEcran
var HautEcran
var FinPosition_x
var FinPosition_y
var timer

/* On commence ici par une liste de déclaration de variables */

/* ---===== Fonction d'ouverture du PopUp =====--- */
function OuvrePopUp(UrlPopUp,LargPopUp,HautPopUp) {
    FenPopUp=window.open(UrlPopUp, "MonPopup",
"toolbar=no,width="
+LargPopUp+
",height="
+HautPopUp+
",top="
+PopupPositionHaut+
",left="
+(PopupPositionGauche)+
"");

/*
Cette première fonction nous permet d'ouvrir le PopUp (et de lui donner le nom de
FenPopUp, je sais c'est hyper original), elle reçois en argument l'URL de la page ainsi que sa largeur et sa hauteur.
Puis on ouvre notre PopUp avec
open, méthode de l'objet window, en lui donnant des options comme :
- sa largeur (variable
LargPopUp)
- son hauteur (variable
HautPopUp)
- sa position par rapport au haut du document (variable
PopupPositionHaut)
- sa position par rapport à la gauche du document (variable
PopupPositionGauche)
- puis d'autres options comme la barre d'outils. Vous pouvez bien sur en ajouter à votre guise.
*/

    LargEcran=window.screen.width
    HautEcran=window.screen.height
    FinPosition_x=LargEcran-LargPopUp-MargePopUp
    FinPosition_y=HautEcran-HautPopUp-MargePopUp
    BougeBas()
}

/*
Nous allons terminer notre fonction en récupérant des informations sur l'écran du visiteur (attention ce n'est pas la taille de la fenêtre mais bien la taille de l'écran que l'on récupère ici) et les mettre dans des variables.
Dans
LargEcran et HautEcran nous allons mettre respectivement la largeur et la hauteur de l'écran (je suis sur que vous ne vous en doutiez pas hein ?). Pour ce faire nous utilisons les propriétés width et height de l'objet screen associé à l'objet window.
Une fois ceci dans notre sac (enfin dans nos variables) il faut savoir ou se trouve la fin de l'écran ou afficher notre PopUp (ben oui sinon il va continuer vitam eternam. Donc la un petit peu de math s'impose.
Pour déterminer le plus à gauche et le plus bas ou sera affiché notre PopUp (eh oui, on positionne en fonction des bord haut et gauche, tout simplement parce que le 0 c'est le coin en haut à gauche de votre télé écran) on soustrait la taille de l'écran (
LargEcran ou HautEcran) moins la taille du PopUp (LargPopUp ou HautPopUp) moins la marge que vous vous êtes fixé (MargePopUp, fixé à 10 dans nos déclaration de variables au début).
On fois tout ceci fait on appelle la fonction
BougeBas() pour commencer notre mouvement vers le bas.
*/

/* ---===== Fonction déplacement vers le bas =====--- */
function BougeBas() {
    if (PopupPositionHaut<=FinPosition_y-50) {
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       PopupPositionHaut+=step
       timer= setTimeout("BougeBas()",pause)
    }
    else {
       clearTimeout(timer)
       PopupPositionHaut=FinPosition_y-50
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       BougeDroite()
    }
}

/*
Nous commencons notre fonction par une condition crée avec l'instruction
if, qui vérifie que la variable PopupPositionHaut (qui contient la valeur en Y (verticale) du coin supérieur gauche du PopUp) soit inférieure à la variable FinPosition_y (position verticale la plus basse possible calculée précedement) moins 50 (le grand jeu du script, deviner à quoi correspondent ces 50. Réponse en tout bas). Donc si notre condition est vérifiée nous alons déplacer notre PopUp (ayant pour nom FenPopUp) en utilisant la méthode moveTo de l'objet window qui reçois en coordonées PopupPositionGauche et PopupPositionHaut.
Nous ajoutons à la variable
PopupPositionHaut la valeur de step (défini en haut dans les variables) avec l'opérateur d'affectation += (Addition).
Et enfin nous créons un compteur
timer avec la méthode setTimeout qui rapellera la fonction toutes les 20 (valeur de la variable pause) millisecondes.
Si notre condition n'est plus vérifiée, on annule notre compteur
timer avec la méthode clearTimeout et on repositionne notre PopUp (toujours moveTo) à la valeur la plus basse voulue (PopupPositionHaut=FinPosition_y-50) puis on lance la fonction BougeDroite().
*/

/* ---===== Fonction déplacement vers la droite =====--- */
function BougeDroite() {
    if (PopupPositionGauche<=FinPosition_x) {
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       PopupPositionGauche+=step
       timer= setTimeout("BougeDroite()",pause)
    }
    else {
       clearTimeout(timer)
       PopupPositionGauche=FinPosition_x
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       BougeHaut()
    }
}

/*
Bon la rien d'exceptionnel par rapport à la fonction précédente, on ajoute juste la valeur de la variable
PopupPositionGauche de la valeur de step à ce qui donne l'effet de déplacement vers la droite.
*/

/* ---===== Fonction déplacement vers le haut =====--- */
function BougeHaut() {
    if (PopupPositionHaut>=MargePopUp) {
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       PopupPositionHaut-=step
       timer= setTimeout("BougeHaut()",pause)
    }
    else {
       clearTimeout(timer)
       PopupPositionHaut=MargePopUp
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       BougeGauche()
    }
}

/* Toujours pareil, sauf que pour monter on enlève la valeaur de step à PopupPositionHaut. */

/* ---===== Fonction déplacement vers la gauche =====--- */
function BougeGauche() {
    if (PopupPositionGauche>=MargePopUp) {
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
       PopupPositionGauche-=step
       timer= setTimeout("BougeGauche()",pause)
    }
    else {
       clearTimeout(timer)
       PopupPositionGauche=MargePopUp
       FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
    }
}

/* Et la pour déplacer vers la gauche on enleve step à PopupPositionGauche */

// -->
</script>

</head>
<body onLoad="OuvrePopUp('popup.html','480','60')">

<!--
Bon la j'ai utilisé l'événement
onLoad pour appeler ma fonction mais vous pouvez l'appeler comme bon vous semble hein...
-->

</body>
</html>


Bien sur vous pouvez, a votre guise, modifier l'ordre des fonctions pour changer le déplacement.

Réponse au jeu : Les 50 de la fonction BougeBas() correspondent a la barre windows que vous pourriez avoir.


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !