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

Ce site au démarrage

begin process at 2010 03 22 04:11:11

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

DIV: VRAI FAUSSE FENETRE

Information sur la source

Note :

7,67 / 10

Catégorie :Fenêtre & Pop-up Niveau :Initié Date de création :12/06/2003 Date de mise à jour :12/06/2003 23:39:45 Vu / téléchargé :17 514 / 1 662

Auteur : lumesh

Ecrire un message privé

Site perso

Commentaire sur cette source (16)

Ajouter un commentaire et/ou une note

Description

Bon je le signale td suite, le script JS n'est pas de moi !
je l'ai trouvé sur le net et je doit dire c exelent !
cela permet de rendre mobile de fausse fenetre.
la fausse fenetre peut etre tout objet deplacable a linterieur de <DIV></DIV>

enfin matez la src c plutot bien foutu et surtout apres test la compatibilité est plutot pas mal:
- IE5 et 6 = OKI
- NS6 = OKI
- Opera 5.12 et + = OKI
- Mozilla 1.3.1 = NON

bon g testé que ca car trop lourd dinstaller 72 millions de nav opour un script :)
si g un peu de temps je testerai la compatibilité sur IE5 MAC a mon taf.

voilou eclaté vous bien avec ce code :)

Source

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>No title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Debut
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// Fin -->
</script>
<STYLE type="text/css">
<!--
.Fen1 {
background-color: #FFFFFF;
background-position: 0px 0px;
top: 50px;
left: 100px;
height: 130px;
width: 284px;
margin: 0px;
padding: 0px;
border: 1px solid #999999;
overflow: visible;
visibility: visible;
z-index: auto;
position: absolute;
}
.FenContenu1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #006699;
text-align: left;
vertical-align: top;
margin: 0px;
padding: 5px;
height: auto;
width: auto;
}
.FenTitre1 {
background-color: #FFFFFF;
border: 0px none;
margin: 0px;
padding: 0px;
}
.Fen2 {
background-color: #FFFFFF;
background-position: 0px 0px;
top: 200px;
left: 500px;
height: 150px;
width: 284px;
margin: 0px;
padding: 0px;
border: 1px solid #999999;
overflow: visible;
visibility: visible;
z-index: auto;
position: absolute;
}
.FenContenu2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #006699;
text-align: left;
vertical-align: top;
margin: 0px;
padding: 5px;
height: auto;
width: auto;
}
.FenTitre2 {
background-color: #FFFFFF;
border: 0px none;
margin: 0px;
padding: 0px;
}
-->
</STYLE>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>
ici est le texte fixe de la page<br>
la pseudo fenetre passe par dessus tout le reste :)<br>
en fait ce ki est mouvible ce sont les DIV enfin tout ce kil y a entre des <p>
<div id="d" class="Fen1">
<img class="FenTitre1" src="barretitre.gif" name="d">
<p class="FenContenu1">cool.</p>
<p class="FenContenu1">tu vois c'est pas mal ! en plus tu peux mettre autant de fenetres que tu vx grace au principe des DIV ! :)</p>
</div>
<div id="d" class="Fen2">
<img class="FenTitre2" src="barretitre.gif" name="d">
<p class="FenContenu2">et voila une 2eme fenetre !</p>
<p class="FenContenu2">et si tu vire la couleur de fond de limage et de la fenetre tu px la rendre transparente ! ca peut etre bien delire aussi :)</p>
</div>
</p>
</body>
</html>

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>No title</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- Debut

N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
} 
function MM(e) {
if (ob) { 
if (N) { 
ob.moveTo((e.pageX-X), (e.pageY-Y)); 
} 
else { 
ob.pixelLeft = event.clientX-X + document.body.scrollLeft; 
ob.pixelTop = event.clientY-Y + document.body.scrollTop; 
return false; 
} 
} 
} 
function MU() { 
ob = null; 
} 

if (N) { 
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
} 
document.onmousedown = MD; 
document.onmousemove = MM; 
document.onmouseup = MU; 

// Fin --> 
</script>
 

<STYLE type="text/css">
<!--
.Fen1 {
	background-color: #FFFFFF;
	background-position: 0px 0px;
	top: 50px;
	left: 100px;
	height: 130px;
	width: 284px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #999999;
	overflow: visible;
	visibility: visible;
	z-index: auto;
	position: absolute;
}
.FenContenu1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #006699;
	text-align: left;
	vertical-align: top;
	margin: 0px;
	padding: 5px;
	height: auto;
	width: auto;
}
.FenTitre1 {
	background-color: #FFFFFF;
	border: 0px none;
	margin: 0px;
	padding: 0px;
}

.Fen2 {
	background-color: #FFFFFF;
	background-position: 0px 0px;
	top: 200px;
	left: 500px;
	height: 150px;
	width: 284px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #999999;
	overflow: visible;
	visibility: visible;
	z-index: auto;
	position: absolute;
}
.FenContenu2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #006699;
	text-align: left;
	vertical-align: top;
	margin: 0px;
	padding: 5px;
	height: auto;
	width: auto;
}
.FenTitre2 {
	background-color: #FFFFFF;
	border: 0px none;
	margin: 0px;
	padding: 0px;
}
-->
</STYLE>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>
ici est le texte fixe de la page<br>
la pseudo fenetre passe par dessus tout le reste :)<br>
en fait ce ki est mouvible ce sont les DIV enfin tout ce kil y a entre des <p>

<!-- FENETRE 1 -->
<div id="d" class="Fen1">
  <img class="FenTitre1" src="barretitre.gif" name="d">
  <p class="FenContenu1">cool.</p>
  <p class="FenContenu1">tu vois c'est pas mal ! en plus tu peux mettre autant de fenetres que tu vx grace au principe des DIV ! :)</p>
</div>

<!-- FENETRE 2 -->
<div id="d" class="Fen2">
  <img class="FenTitre2" src="barretitre.gif" name="d">
  <p class="FenContenu2">et voila une 2eme fenetre !</p>
  <p class="FenContenu2">et si tu vire la couleur de fond de limage et de la fenetre tu px la rendre transparente ! ca peut etre bien delire aussi  :)</p>
</div>



</p>

</body>



</html>

Fichier Zip

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

barretitre.gif 1 710 octets
index.htm 3 432 octets

Télécharger le zip

Sources du même auteur

DIV/LAYER MOBILE COMME UNE FENETRE

MENU DHTML : PAS BIEN SORCIER MAIS PRATIQUE A SAVOIR

Toutes les sources de lumesh

Sources de la même categorie

FENETRE D'ACTUALITE par kazma

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

FENETRE DE LOGIN par kazma

MESSAGES VIRTUELS par grarestephane

ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

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

Commentaires et avis

Commentaire de revinc le 13/06/2003 09:32:30

c pas mal ça peut toujours servir...

tu devrais optimiser tes styles en regroupant ceux qui ont des points communs.

++

Commentaire de compostelle le 13/06/2003 10:22:45

C'est très chouette. On pourrait inclure dans ces fausses fenetres un menu, que l'on pourrait déplacer comme une télécommande.

Merci de cette contribution efficace et amusante.

Commentaire de Deny le 13/06/2003 12:34:49

Pas mal du tout.
Comme ça, on voit pas bien à quoi ça peut servir, mais c'est bien le début d'un développement., ça me rappelle un autre script !
Voyez les miens si ça vous dit

Commentaire de lumesh le 13/06/2003 19:10:23

marche impec aussi sous IE5 MAC

Commentaire de Steph666 le 25/06/2003 11:24:47

C bien, si vous voulez voir quelque chose d'encore plus poussé allez voir www.dhtmlcentral.com vous serez pas déçus du voyage.

Commentaire de Mumuri le 05/07/2003 22:40:55

c'est marrant

Commentaire de nico606 le 28/04/2004 19:15:05

bon code mai on peu pas selectioné le texte hor des div (ni dans les div !!!

Commentaire de MarioBios le 13/07/2004 14:24:10

Ca c'est bien d'optimiser ses scripts pour MAC ! C'est pas tout le monde qui le fait... bravo :)

Commentaire de verdonckfabien le 30/09/2005 20:01:10

slt,tres bien sauf sous firefox version 1.0:marche pas

Commentaire de newkiss le 26/06/2006 13:56:03

Est ce que vous savez comment rajouter une 3ème DIV déplacable dans ce script ? Merci

Commentaire de BTAJV le 07/09/2006 18:25:06

Salut tlm
Je vien de decouvrire cette source qui est bien mais commen pourai ton faire pour l'optimisé pour qu'elle passe pour tout les navigateur

Commentaire de bobabar le 15/05/2007 16:22:32

Bel aspect pour les fenêtres déplaçables.
2 remarques :
- Ne fonctionne pas sous FireFox 2.0.
- Je n'ai pas regardé le code, mais il serait intéressant que la fenêtre en cours de déplacement prenne le 1er plan (joueravec le z-index sans doute).

A+

Commentaire de Magicb le 04/04/2008 14:43:54

Marche pas sous Firefox 2.0.
Merci quand même !

Commentaire de rduvrac le 20/09/2008 18:36:07

marche pas sous safari 3.1.2 ni fireFox 3.0.1
ok avec opera 9.20

Si quelqu'un à trouvé une solution qui marche avec les dernières version, merci de le signaler ici :-)

Commentaire de startx25 le 03/03/2010 21:23:01

je suis à la rercherche d'une solution pour firefox 3

Commentaire de rduvrac le 04/03/2010 01:52:56

Cool tu nous tient au courant si tu trouve une solution :-D

car sur mac en tout cas, ça marche toujours pas avec :
Safari 4.0.4
Firefox 3.0.12
Camino 2.0.2

Marche sous explorer 5.2.3

Ajouter un commentaire

Nos sponsors

Derniers Blogs

[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey

ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice

PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE

APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit

ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice

Forum

CRéATION DE SITE : RéCUPéRER DES SONS à PARTIR D'UN SITE SECONDAIRE. par antier128

RE : COMMENT RENDRE INVISIBLE L'AFFICHAGE DE LA SOURCE D'UNE PAGE D'UN SITE ? par kazma

RE : PROBLEME BD LISTE par peter2010

RE : CONVERSION par peter2010

COMMENT RENDRE INVISIBLE L'AFFICHAGE DE LA SOURCE D'UNE PAGE D'UN SITE ? par odysseum13

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

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

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods