CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 12 13:51:04

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

FENETRE MULTIPLE

Information sur la source

Note :

6,60 / 10

Catégorie :Fenêtre & Pop-up Classé sous :fenetres modales, fenetre multiples, fenetrage, windows, draganddrop Niveau :Débutant Date de création :09/05/2008 Date de mise à jour :04/10/2008 17:42:53 Vu / téléchargé :7 923 / 583

Auteur : kazma

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

des fenêtres dans lesquelles tout contenu peut être inséré (image,video,text...etc)mais aussi des image et texte dans le navigateur que l'on déplace a la sourie totalement compatible IE FF Opera Safari et chrome une deuxieme source a ete ajouter elle gere le redimensionnement des image,je l'ai mis a par car quelle complique le script

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<title>fenetres</title>
<head>
<style>
.Style1 {
position:absolute;
width:300px;
height:250px;
border-style:groove;
border-width:2px;
background-color:#B9B3A7;
}
.Style2 {
height:15px;
background-image:url('im.jpg')
}
</style>
<SCRIPT>
var deb=0 // important
var tour=2 // important
var fen
function disableselect(e){
return false
}
function disableselecte(e){
return true
}
// detection du mouvement de sourie pour FF et IE
function tarto(s) {
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.documentElement.scrollLeft;
setY = s.clientY+document.documentElement.scrollTop;
}
if(navigator.vendor!=null && (navigator.vendor.substring(0,3)=="Goo") || navigator.vendor!=null && navigator.vendor.substring(0,3)=="App"){
setX = s.clientX+document.documentElement.lastChild.scrollLeft;
setY = s.clientY+document.documentElement.lastChild.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setX = event.clientX+document.documentElement.scrollLeft
setY = event.clientY+document.documentElement.scrollTop
return false;
}
}
document.documentElement.onmousemove=tarto;
///////////////////////////////////////////////////////////////////////////
// fonction de gestion du deplacement des fenetres par raport au curseur//
/////////////////////////////////////////////////////////////////////////
function sp(cen,den){
if(tour==2){ // logique
document.onmousedown=disableselecte
return false
}
if(tour==1){
px=setX
py=setY
fen=cen
zim=den
tour=0
}
//calcule de la position de la fenetre par raport au curseur
didi=document.getElementById(fen).offsetLeft
dide=document.getElementById(fen).offsetTop
document.getElementById(fen).style.left=(didi+setX-px)+"px"
document.getElementById(fen).style.top=(dide+setY-py)+"px"
document.onmousedown=disableselect
px=setX
py=setY
setTimeout("sp(fen)",10)
}
/////////////////////////////////////////////////////////////////////
// fonction de gestion de position des fenetre au niveau du zindex//
///////////////////////////////////////////////////////////////////
function plans(pp){
var nb_de_fenetre=6 //nombre de fenetres dans la page
if(deb==0){
ttb=["tr","ta","tb","tc","td","te","tf","tg"] // si on rajouter des fenetre il faudra agrandir le tableau th,ti...etc
deb=1
for(i=1;i<nb_de_fenetre+1;i++){
document.getElementById(ttb[i]).style.zIndex=i
}
}
ttb[(nb_de_fenetre+1)]=pp
for(mul=parseInt(document.getElementById(pp).style.zIndex)+1;mul<nb_de_fenetre+2;mul++){
ttb[mul-1]=ttb[mul]
document.getElementById(ttb[mul]).style.zIndex=(mul-1)
}
ttb[nb_de_fenetre+1]="tg"
}
</SCRIPT>
</head>
<body>
<table class="Style1" ID="ta" STYLE="top:10px;left:10px;"onmousedown=plans('ta')>
<tr><td class="Style2" onmousedown=tour=1;sp('ta'); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=green>
Il était une fois, voici bien longtemps, un pauvre meunier qui avait trois fils.
Les deux ainés étaient très paresseux, mais le plus jeune travaillait dur.
à sa mort, le meunier ne laissa à ses enfants que son moulin, son âne et son chat.
</td></tr></table>
<table class="Style1" ID="tb"; STYLE="top:300px;left:10px;"onmousedown=plans('tb')>
<tr><td class="Style2" onmousedown=tour=1;sp("tb"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=brown>
Le plus vieux reçut le moulin le second, l'âne
et le troisième n'hérita que d'un chat.
Ses frères l'auraient probablement noyé.
Les aînés s'empressèrent de vendre le moulin et l'âne.
Et, comme ils ne travaillaient pas, ils eurent vite dépensé tout leur argent.
</td></tr></table>
<table class="Style1" ID="tc" STYLE="top:10px;left:350px;"onmousedown=plans('tc')>
<tr><td class="Style2" onmousedown=tour=1;sp("tc"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=yellow>
Le plus jeune se désolait.
Que ferais-je avec ce matou ?
Je pourrais me confectionner des gants avec sa fourrure
mais celà ne m'empêchera pas de mourir de faim."
</td></tr></table>
<table class="Style1" ID="td"; STYLE="top:300px;left:350px;"onmousedown=plans('td')>
<tr><td class="Style2" onmousedown=tour=1;sp("td"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=blue>
Le chat qui avait d'autres projets,......prit la parole:
Vous avez tort de vous plaindre, mon bon maître!
lui dit le chat, à sa grande surprise.
En échange de ce que vous avez fait pour moi, je vous apporterai le bonheur !
</td></tr></table>
<table class="Style1" ID="te" STYLE="top:10px;left:700px;"onmousedown=plans('te')>
<tr><td class="Style2" onmousedown=tour=1;sp("te"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=orange>
Donnez-moi seulement un sac et une paire de bottes,
et je ferai votre fortune! insista le chat.
J'ai juste assez d'argent pour t'acheter ce que tu demandes, dit le garçon.
Lorque le chat eut chaussé les bottes, son maître éclata de rire:
Te voilà un vrai chat botté !
</td></tr></table>
<img ID="tf" src="sphinx.png"STYLE="position:absolute;top:280px;left:680px;width:300px;"onmousedown=plans('tf');tour=1;sp("tf") onmouseup=tour=2;>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<title>fenetres</title>
<head>
<style>
.Style1 {
position:absolute;
width:300px;
height:250px;
border-style:groove;
border-width:2px;
background-color:#B9B3A7;
}
.Style2 {
height:15px;
background-image:url('im.jpg')
}
</style>
<SCRIPT>
var deb=0     // important
var tour=2    // important
var fen
function disableselect(e){
return false
}
function disableselecte(e){
return true
}

// detection du mouvement de sourie pour FF et IE

function tarto(s) {
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.documentElement.scrollLeft;
setY = s.clientY+document.documentElement.scrollTop;
}
if(navigator.vendor!=null && (navigator.vendor.substring(0,3)=="Goo") || navigator.vendor!=null && navigator.vendor.substring(0,3)=="App"){
setX = s.clientX+document.documentElement.lastChild.scrollLeft;
setY = s.clientY+document.documentElement.lastChild.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setX = event.clientX+document.documentElement.scrollLeft
setY = event.clientY+document.documentElement.scrollTop
return false;
}
}
document.documentElement.onmousemove=tarto;

///////////////////////////////////////////////////////////////////////////
// fonction de gestion du deplacement des fenetres par raport au curseur//
/////////////////////////////////////////////////////////////////////////

function sp(cen,den){

if(tour==2){    // logique
document.onmousedown=disableselecte
return false
}
if(tour==1){
px=setX
py=setY
fen=cen
zim=den
tour=0
}

//calcule de la	 position de la fenetre par raport au curseur

didi=document.getElementById(fen).offsetLeft
dide=document.getElementById(fen).offsetTop
document.getElementById(fen).style.left=(didi+setX-px)+"px"
document.getElementById(fen).style.top=(dide+setY-py)+"px"
document.onmousedown=disableselect

px=setX
py=setY
setTimeout("sp(fen)",10)
}

/////////////////////////////////////////////////////////////////////
// fonction de gestion de position des fenetre au niveau du zindex//
///////////////////////////////////////////////////////////////////

function plans(pp){

var nb_de_fenetre=6  //nombre de fenetres dans la page
if(deb==0){
ttb=["tr","ta","tb","tc","td","te","tf","tg"]  // si on rajouter des fenetre il faudra agrandir le tableau th,ti...etc
deb=1
for(i=1;i<nb_de_fenetre+1;i++){
document.getElementById(ttb[i]).style.zIndex=i
}
}
ttb[(nb_de_fenetre+1)]=pp
for(mul=parseInt(document.getElementById(pp).style.zIndex)+1;mul<nb_de_fenetre+2;mul++){
ttb[mul-1]=ttb[mul]
document.getElementById(ttb[mul]).style.zIndex=(mul-1)
}
ttb[nb_de_fenetre+1]="tg"
}
</SCRIPT>
</head>
<body>

<!--pas besoin d'un div vue qu'il sagit d'un tableau,onmousedown declenche la fonction plan pour la getion du z-index pour l'ensemle de la fenetre -->

<table class="Style1" ID="ta" STYLE="top:10px;left:10px;"onmousedown=plans('ta')>

<!--lors d'un onmousedown la varible tour est mise a 1 et la variable fen de la fontion sp prend l'id du table qui a pour effet de declancher la fonction sp(), onmouseup arrete la fonction -->

<tr><td class="Style2" onmousedown=tour=1;sp('ta'); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=green>
Il était une fois, voici bien longtemps, un pauvre meunier qui avait trois fils.
Les deux ainés étaient très paresseux, mais le plus jeune travaillait dur.
à sa mort, le meunier ne laissa à ses enfants que son moulin, son âne et son chat.
</td></tr></table>

<table class="Style1" ID="tb"; STYLE="top:300px;left:10px;"onmousedown=plans('tb')>
<tr><td class="Style2" onmousedown=tour=1;sp("tb"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=brown>
Le plus vieux reçut le moulin le second, l'âne
et le troisième n'hérita que d'un chat.
Ses frères l'auraient probablement noyé.
Les aînés s'empressèrent de vendre le moulin et l'âne.
Et, comme ils ne travaillaient pas, ils eurent vite dépensé tout leur argent.
</td></tr></table>

<table class="Style1" ID="tc" STYLE="top:10px;left:350px;"onmousedown=plans('tc')>
<tr><td class="Style2" onmousedown=tour=1;sp("tc"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=yellow>
Le plus jeune se désolait.
Que ferais-je avec ce matou ?
Je pourrais me confectionner des gants avec sa fourrure
mais celà ne m'empêchera pas de mourir de faim."
</td></tr></table>


<table class="Style1" ID="td"; STYLE="top:300px;left:350px;"onmousedown=plans('td')>
<tr><td class="Style2" onmousedown=tour=1;sp("td"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=blue>
Le chat qui avait d'autres projets,......prit la parole:
Vous avez tort de vous plaindre, mon bon maître!
lui dit le chat, à sa grande surprise.
En échange de ce que vous avez fait pour moi, je vous apporterai le bonheur !
</td></tr></table>

<table class="Style1" ID="te" STYLE="top:10px;left:700px;"onmousedown=plans('te')>
<tr><td class="Style2" onmousedown=tour=1;sp("te"); onmouseup=tour=2;></td></tr>
<tr><td bgcolor=orange>
Donnez-moi seulement un sac et une paire de bottes,
et je ferai votre fortune! insista le chat.
J'ai juste assez d'argent pour t'acheter ce que tu demandes, dit le garçon.
Lorque le chat eut chaussé les bottes, son maître éclata de rire:
Te voilà un vrai chat botté !
</td></tr></table>

<img ID="tf" src="sphinx.png"STYLE="position:absolute;top:280px;left:680px;width:300px;"onmousedown=plans('tf');tour=1;sp("tf") onmouseup=tour=2;>
</body>
</html>

Conclusion

et çà marche très bien

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

fenetre
- fenetres .html 5 612 octets
- fenetres avec zoom.html 6 246 octets
- im.jpg 742 octets
- sphinx.png 67 862 octets
- statue.JPG 37 492 octets
- Thumbs.db12 800 octets

Télécharger le zip

Historique

10 mai 2008 23:07:43 :: code en trop
11 mai 2008 20:22:44 :: optimisation du code
13 mai 2008 22:28:54 :: ajout de commentaire pour la compréhensions et la mise en œuvre du script
13 mai 2008 22:32:45 :: ajout de commentaires pour une bonne compréhension et mise en œuvre du script
16 mai 2008 15:03:23 :: nouvelle optimisation
02 juin 2008 16:07:31 :: modification pour une adaptation plus simple (ajout d'une variable)
23 juin 2008 21:11:01 :: j'ai creer une seul fonction de detection du mouvement de sourie pour IE et FF les deux fontion etait separe ; le script ne tourne plus continuellement en arriere plans la fonction sp()fonctionnement seulement quand on deplace la fenetre resultat:fontionnement tres bien sur Opera ou a l'origine sa ramai et tous les autre navigateur IE FF et Safari.
23 juillet 2008 13:20:32 :: elimination du probleme au niveau de la selection ( quand on deplasait une fenetre les objets et le texte en arriere plans etaient selectionne ) petit merci a zobibol pour m'avoir mis sur la voie.
23 juillet 2008 21:27:52 :: ajout d'une deuxieme source elle gere le redimensionnement des image,je l'ai mis a par car quelle complique le script
03 octobre 2008 12:03:32 :: mise a jour xhtml et css
04 octobre 2008 17:42:54 :: compatibilite total avec safari IE FF opera et chrome

Sources du même auteur

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS

DRAG & DROP VERS UN CANVAS

DIAPO EN CSS 3D

CONVERTISSEUR D'IMAGE BASE 64

Toutes les sources de kazma

Sources de la même categorie

POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum

SFR WIDGET ET JQUERY par hhoareau

JOLIE ALERTE AVEC "ALERT()" par heycraft

FENETRE D'ACTUALITE par kazma

CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

FENETRES DÉPLACABLES ET REDIMENSIONNABLE PAR LA SOURIS par pdc_666

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT par kgilbert

TRAITER LES RÉPONSES DES APPLICATIONS FOURNIES À L'INVITE DE... par bultez

LIBRAIRIE DE DRAG AND DROP par mickaelpfr

Commentaires et avis

Commentaire de abdelaziz_info le 11/05/2008 01:26:38 9/10

Bonjours :

Même avec : <SCRIPT> ça marche pour (type="text/javascript")
Et ça peut bouger sur toute la page comme ça aussi: <table onmousemove=sp()

C'est bien.

Commentaire de Pedrosa le 12/05/2008 12:12:03

Très bien.

Mais, mais... Comment puis faire pourque ça monte pas l'une sur l'autre. C-à-d, dès que l'une monte sur une autre, cette dernière cherche une place où elle doit rester.
Merci bien.

Commentaire de Ricky_MacElroy le 26/05/2008 21:07:51 1/10

C'est laid!!!!!!!!

Commentaire de kazma le 27/05/2008 19:21:04 administrateur CS

je fait des scripts je suis pas graphiste

Commentaire de aedius le 13/07/2008 21:51:49 10/10

génial,

je viens de l'adapter, c'est vraiment la classe =D

merci beaucoup

Commentaire de LODDO81 le 13/02/2009 08:42:31 9/10

je l'ai adopté et retranscrit sur le site de ma commune.
Encore merci

Commentaire de xeoscomm le 27/09/2009 12:12:30 4/10

Excellent et permet de faire de belles compositions !! Et tant pis pour les non graphistes et les "pas-contents" qui trouvent cela moche. Un peu d'imagination que diable !!
Merci Kazma

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

SOS!! balise windows.open [ par Olivierp001 ] Bonjour a vous.Vu le mauvais accueil que l'on ma donné sur le chat, je tente ma chance ici.Je n'y connais rien au javascript mais je voudrais bien fin problème avec Windows.Open [ par asm123 ] En quelques mots voici mon problème,j'utilise la fonction javascript côté client "windows.open"(*) à qui je passe des paramètres.mais il arrive +/- 1 ms dos et windows 3.11 [ par ico19 ] Je desirerait trouver ms dos 6.22 pour le mettre sur une vielle becane qui n'a pas de lecteur cd rom. ensuite je voudrait aussi trouver ms windows 3.1 ecriture dans un fichier + username windows [ par math85 ] je cherche comment ecrire le nom d utilisateur de windows et la date dans un fichier en javascript au chargement d une page (onload=...)m@th85 desactivé la touche avec le logo windows [ par minicooper ] Je voudrais savoir si quelqu'un connait le code ascii de cette touche, ou son nom sous windows. Mon but étant de la desactivé dans un code a base de j Barre menu style Windows [ par cstan ] salut a vous,je galere trop depuis 2, 3 jours !!!!HELP ME !!!!Pour mon projet je doit avoir une barre style windows en bas, jusqu'a la pas compliquer Windows Update AIDEZ moi ????????????? [ par WbMr ] Je voudrais savoir comment microsoft fait sa boite de dialog de téléchargement ????????????????????????????????????????<img src Windows Media [ par samki ] Bonjour!j'ai besoin de détecter l'existance de windows media player sur une machine(Mac ou PC).Pouvez vous m'aider Lire une musique ds Windows Media ActiveX grace a un lien [ par link78180 ] Salut !Voilà, j'ai un site avec un lecteur windows media (activex).et je voudré, en cliquant sur un lien vers une musique, que ca lise la musique ds l Javascript Windows.open [ par s.defaye ] J'utilise la fonction windows.open et je ne peux plus reutiliser cette fonction avec que la premiere fenetre ouverte soit fermée.Quelqu'un a t il une

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

BANDEAU DéFILANT MOOTOOLS.JS ET HISTORIQUE DE NAVIGATION par cocolafleche

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning