begin process at 2012 02 12 18:16:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > DIV: VRAI FAUSSE FENETRE

DIV: VRAI FAUSSE FENETRE


 Information sur la source

Note :
7,67 / 10 - par 3 personnes
7,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 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é :20 272 / 1 742
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>
  • <!-- 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> 
<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 !

Télécharger le zip


 Sources du même auteur

Source avec Zip 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

Source avec Zip Source avec une capture POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum
SFR WIDGET ET JQUERY par hhoareau
Source avec Zip JOLIE ALERTE AVEC "ALERT()" par heycraft
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
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


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Waterfall in Kauai Hawaii With Rainbow
Photo Sparkling lagoon in the south pacific, Moorea, French Polynesia 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,232 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)