1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Fenêtre & Pop-up
  5. Div: vrai fausse fenetre

Div: vrai fausse fenetre

Soyez le premier à donner votre avis sur cette source.

Vue 22 763 fois - Téléchargée 1 853 fois

Télécharger le projet
Commenter

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 / Exemple : 


<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>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
120
Date d'inscription
vendredi 7 février 2003
Statut
Membre
Dernière intervention
2 novembre 2009
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
Signaler
Messages postés
20
Date d'inscription
jeudi 19 mars 2009
Statut
Membre
Dernière intervention
4 février 2015
je suis à la rercherche d'une solution pour firefox 3
Signaler
Messages postés
120
Date d'inscription
vendredi 7 février 2003
Statut
Membre
Dernière intervention
2 novembre 2009
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 :-)
Signaler
Messages postés
1
Date d'inscription
mardi 21 octobre 2003
Statut
Membre
Dernière intervention
4 avril 2008
Marche pas sous Firefox 2.0.
Merci quand même !
Signaler
Messages postés
12
Date d'inscription
mercredi 8 décembre 2004
Statut
Membre
Dernière intervention
8 avril 2013
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+
Afficher les 16 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (lumesh)