Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

new!

Exemple de «fenêtre-iframe» drag & drop sous IE

Script posté par :

@ NBF
Vous aussi, postez vos scripts en cliquant ici.

Description

Cet exemple de script pour créer une «fenêtre» drag & drop sous IE montre ici 6 «fenêtres» qui sont redimensionnables et l'ordre des focus est préservé. NOTE : N'a été adapté que pour Internet Explorer.

Compatibilité :

	FireFox : Incompatible
	Mozilla : Incompatible
	Netscape Navigator : Incompatible
	Internet Explorer : 1 et +

Ce script utilise le DHTML

Chiffres :

Date de création : 3/02/2005
Dernière modif : -
Visites de la page : 26557
Envois par mail : 225

Exemple :

Fenêtre-iframe 0

Fenêtre-iframe 1

Fenêtre-iframe 2

Fenêtre-iframe 3

Fenêtre-iframe 4

Fenêtre-iframe 5

Le code :

Entre <HEAD> et </HEAD> :

<script language="Javascript">
var clic = 0;
var dif_x = new Array("0","0","0","0","0","0");
var dif_y = new Array("0","0","0","0","0","0");
var pos_x = new Array("25","325","625","25","325","625");
var pos_y = new Array("25","25","25","325","325","325");
var quel = 0;
var timer = 0;
var time;
var w;
var h;

function dif()
{
dif_x[quel] = parseInt(event.clientX) - parseInt(document.getElementById("box"+quel).style.left);
dif_y[quel] = parseInt(event.clientY) - parseInt(document.getElementById("box"+quel).style.top);
}

Entre <BODY> et </BODY> :

<div ID="box0" onselectstart="return false" ondragstart="return false" style="position:absolute;top:25;left:25;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:6" onmouseup="clic = 0;" onmousedown="quel = 0; gererfocus(); document.getElementById('box0').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 0; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 0; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 0; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 0; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 0; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 0; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 0; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 0<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f0"></iframe></div>
<div ID="box1" onselectstart="return false" ondragstart="return false" style="position:absolute;top:25;left:325;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:5" onmouseup="clic = 0;" onmousedown="quel = 1; gererfocus(); document.getElementById('box1').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 1; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 1; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 1; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 1; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 1; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 1; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 1; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 1<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f1"></iframe></div>
<div ID="box2" onselectstart="return false" ondragstart="return false" style="position:absolute;top:25;left:625;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:4" onmouseup="clic = 0;" onmousedown="quel = 2; gererfocus(); document.getElementById('box2').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 2; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 2; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 2; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 2; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 2; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 2; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 2; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 2<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f2"></iframe></div>
<div ID="box3" onselectstart="return false" ondragstart="return false" style="position:absolute;top:325;left:25;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:3" onmouseup="clic = 0;" onmousedown="quel = 3; gererfocus(); document.getElementById('box3').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 3; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 3; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 3; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 3; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 3; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 3; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 3; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 3<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f3"></iframe></div>
<div ID="box4" onselectstart="return false" ondragstart="return false" style="position:absolute;top:325;left:325;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:2" onmouseup="clic = 0;" onmousedown="quel = 4; gererfocus(); document.getElementById('box4').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 4; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 4; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 4; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 4; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 4; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 4; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 4; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 4<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f4"></iframe></div>
<div ID="box5" onselectstart="return false" ondragstart="return false" style="position:absolute;top:325;left:625;border:1px solid #afafaf;height:250;width:250;background-color:#f0f0f0;cursor:hand;z-index:1" onmouseup="clic = 0;" onmousedown="quel = 5; gererfocus(); document.getElementById('box5').style.zIndex = 6; clic = 1; dif();"><input type="button" value="A" onmouseup="timer = 0" onmousedown="quel = 5; timer = 1; time = setInterval('redim(1)',10);"><input type="button" value="V" onmouseup="timer = 0" onmousedown="quel = 5; timer = 1; time = setInterval('redim(2)',10);"><input type="button" value="<" onmouseup="timer = 0" onmousedown="quel = 5; timer = 1; time = setInterval('redim(3)',10);"><input type="button" value=">" onmouseup="timer = 0" onmousedown="quel = 5; timer = 1; time = setInterval('redim(4)',10);"><input type="button" value="_" onmousedown="quel = 5; timer = 1; redim(5);" onmouseup="timer = 0;"><input type="button" value="[]" onmousedown="quel = 5; timer = 1; redim(6);" onmouseup="timer = 0;"><input type="button" value="X" onmousedown="quel = 5; timer = 1; redim(7);" onmouseup="timer = 0"> Fenêtre-iframe 5<br><iframe src="http://www.google.ca" style="height:225;width:250;position:absolute;top:25;" ID="f5"></iframe></div>

Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript

Les annotations des visiteurs :

De mobman02 - le 03-02-2005

Ce script a apparemment tres bien fonctionner sous mon firefox.
Vous pouvez donc le mettre "compatible".

De ___jc___ - le 04-02-2005

Pourquoi incompatible Firefox?
Je viens d'ouvrir avec Firefox et ce script fonctionne très bien.
Les 6 fenêtres s'ouvre parfaitement et se redimensionne aussi bien.

De nate - le 04-02-2005

Pareil, pas de problémes avec mozilla !

De Roukamone - le 04-02-2005

Sympa ce script !!! merci a toi, Oh très grand créateur de ce script.

De francocompanies - le 05-02-2005

Même chose pour moi: ça a fonctionné avec Firefox et même avec Netscape 7.2 !!!! (je n'ai pas testé les autres versions)

De kisscool2a - le 06-02-2005

ce script marche pas en drag and drop sur fire fox mais le system d'iframe s'affiche parfaitement

De BackInBiz - le 07-02-2005

J'aurais du demander l'exclusivité sur ce script !

De @ NBF - le 07-02-2005

Ah bon, c'est possible, je croyais que ma façon de capturer la position du curseur n'était valide que pour IE, mais il semblerait que ça fonctionne avec Moz/FF d'après vos commentaires :P

De @ NBF - le 07-02-2005

Sauf que justement, avec Moz/FF, ça doit fonctionner, mais je crois pas que le drag & drop soit fonctionnel quand je pense à ça...

De brandnewborn - le 21-02-2005

J'ai un petit problème ...
Que dois-je modifier si je ne veux utilier qu'une seule de ces fenetres, et non les six ? (j'ai une erreur JS quand j'enlève les 5 autres DIV contenant les fenêtres)

Merci

De juju54 - le 31-05-2005

Pareil pour moi j'ai le même probleme, pour n'afficher qu'une seule frame et non pas 6.
Une solution a t elle déjà été donnée ? si oui où puis-je la trouver.

De @ NBF - le 23-08-2005

http://www.editeurjavascript.com/forum/topic,2,37064,0.html

De launort - le 08-09-2005

Pour modifier le nombre de iframes -->
01 - supprimer ou ajouter les iframes dont vous besoin ou non ...
02 - ligne 34 dans le code java de la balise <head>, modifier la valeur (en gras ici) dans : " for(n = 0; n < <b>1</b>; n++) " avec le nombre correspondant aux nombres de iframes existantes.

De GilDev - le 15-12-2006

Sa marche aussi sur Safrari sur Mac os X (vous pourez faire des script avec des effet pour mac ?)

>> Poster une annotation sur ce script

8 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Allopass
Allopass est sans conteste le numero 1 des services audiotel pour votre site en France.
http://www.allopass.com

Cat : Services audiotel
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

54273 membres
9603 comptes CountUs
1404 comptes myCircle

LES FORUMS :

14 forums
39051 topics
188228 messages
>> Les forums

SONDAGE

La mini-astuce "Graphisme / Présentation" du jour par sadike
N'hésitez pas à utiliser le XHTML plutôt que le HTML. Ce language permet d'alléger vos pages.

N'oubliez surtout pas de vérifier votre code au W3C: http://validator.w3.org/
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi