Fermer

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

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 : 28211
Envois par mail : 236

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

6 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Infomaniak
Un hebergeur Suisse de qualité à partir de 7.50 € / mois.
http://www.infomaniak.fr/

Cat : Hebergement web
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

56132 membres
8374 comptes CountUs
1541 comptes myCircle

LES FORUMS :

14 forums
39396 topics
189315 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par caaptusss
Outlook express et Office recelle une option très utile : Les règles de messages. Elles vous permettent lorsque vous recevez beaucoup de messages d'un seul expéditeur, de les classer dans des dossiers prédéfinis ou que vous avez créé. Utile lorsque l'on veux s'y retrouver dans les mails ;-)
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi