Accueil > > > POST-IT POUR LE WEB
POST-IT POUR LE WEB
Information sur la source
Description
C'est un Post-it ressemblant à celui de Seven mais pour le Web!!!
Réalisé en java script,pouvant se déplacer, changer de couleur.
les paramètres et le texte sont conservés quand on ré-ouvre la page!!
voila j'espère que ça plaira!!
Compatible sur IE et Firefox (pas testé sur les autres navigateurs).
Source
- /*Coté html*/
- <html>
- <head>
- <title>Drag</title>
- <!--script PostIts.js ######################################################################################################## -->
- <script type="text/javascript" src="PostIts.js">
- </script>
- </head>
- <!--Absolument a metre dans le body ######################################################################################## -->
- <body onMouseMove="drag(event);" onMouseUp="StopDrag();" onload="GetCookie('color');GetCookie('visible');GetCookie('Top');GetCookie('left');GetCookie('text');">
- <!--Bouton qui appèle le Post-It, a placer où vous le désirez ###############################################################-->
- <img alt="PostIt" onclick="Open('bloc1');Cookie('visibleTrue')" style="cursor:pointer" src="Post-It/BtnPostIt.png" />
- <!-- Div qui permet d'afficher le Post-It ################################################################################## -->
- <div id="bloc1"
- style="border-style: none; border-color: inherit; border-width: medium; display:none; position:absolute; top:200px; left:350px;width:187px; height:168px;background-image:url('Post-It/bleu.png'); background-repeat: no-repeat;" >
- <table style="width: 100%;">
- <tr>
- <td id="menu" onMouseDown="StartDrag('bloc1',event);" onmouseout="Menu('imgCroix','imgColor');Cookie('Position')" onmouseover="Menu('imgCroix','imgColor')"
- style="height: 27px;">
- <table style="width: 176px">
- <tr>
- <td align="left">
- <img id="imgColor" alt="Del" src="Post-It/color.png" onclick="color('bloc1')" onmouseover="BtnPostIt('imgColor')" onmouseout="BtnPostIt('imgColor');Cookie('color')" style="border: thin none #C0C0C0;display:none" />
- </td>
- <td align="right"><img id="imgCroix" alt="Del" src="Post-It/croix2.png" onclick="Close('bloc1');Cookie('visibleFalse')" onmouseover="BtnPostIt('imgCroix')" onmouseout="BtnPostIt('imgCroix')" style="border: thin none #C0C0C0;display:none" /></td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td style="height: 134px;">
- <textarea onmouseout="Cookie('text')";" style="overflow:hidden ;background-color:Transparent; border:none;font-family:Segoe Script;height:127px;width:162px" id="TextArea1" cols="19" rows="5"></textarea>
- </td>
- </tr>
- </table>
- </div>
-
- </body>
- </html>
-
- /*Coté javascript*/
-
- function Cookie(name)
- {
- switch(name)
- {
- case "color":
- var couleur = document.getElementById('bloc1').style.backgroundImage.valueOf();
- SetCookie (name,couleur);
- break;
- case "text":
- var text = document.getElementById('TextArea1').value;
- //text = text.replace(' ', "¤");
- SetCookie (name,text);
- break;
- case "visibleTrue":
- SetCookie ('visible','block');
- break;
- case "visibleFalse":
- SetCookie ('visible','none');
- break;
- case "Position":
- var Left = document.getElementById('bloc1').style.left;
- var Top = document.getElementById('bloc1').style.top;
- SetCookie ('left',Left);
- SetCookie ('Top',Top);
- }
- }
- function SetCookie (name, value)
- {
- //nouvel objet date
- var aujourdhui = new Date() ;
-
- //nouvel objet date
- var expdate = new Date() ;
-
- //plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais
- expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) )
-
- //creation du cookie
- document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString() ;
- }
- function getCookieVal(offset) {
- var endstr=document.cookie.indexOf (";", offset);
- if (endstr==-1)
- endstr=document.cookie.length;
- return unescape(document.cookie.substring(offset, endstr));
- }
- function GetCookie (name) {
- var arg=name+"=";
- var alen=arg.length;
- var clen=document.cookie.length;
- var i=0;
- while (i<clen) {
- var j=i+alen;
- if (document.cookie.substring(i, j)==arg)
-
- switch(name)
- {
- case "color":
- document.getElementById('bloc1').style.backgroundImage = getCookieVal (j);
- break;
- case "text":
- document.getElementById('TextArea1').value = getCookieVal (j);
- break;
- case "visible":
- document.getElementById('bloc1').style.display = getCookieVal (j);
- break;
- case "Top":
- document.getElementById('bloc1').style.top = getCookieVal (j);
- break;
- case "left":
- document.getElementById('bloc1').style.left = getCookieVal (j);
- break;
- }
-
- i=document.cookie.indexOf(" ",i)+1;
- if (i==0) break;}
-
- }
-
- //Affiche menu du Post-It
- function Menu(Btn1,Btn2)
- {
- switch(document.getElementById(Btn1).style.display.valueOf())
- {
- case "block":
- document.getElementById(Btn1).style.display = "none";
- document.getElementById(Btn2).style.display = "none";
- break;
- case "none":
- document.getElementById(Btn1).style.display = "block";
- document.getElementById(Btn2).style.display = "block";
- break;
- }
- }
-
- //Bordure boutons Post-It
- function BtnPostIt(Btn)
- {
- //if firefox ou internet exploreur
- var bordure = document.getElementById(Btn).style.border.valueOf();
- if(bordure =="thin solid rgb(192, 192, 192)"||bordure =="#c0c0c0 thin solid")
- {
- document.getElementById(Btn).style.border ="thin none #C0C0C0";
- }
- else{
- document.getElementById(Btn).style.border ="thin solid #C0C0C0";
-
- }
- }
- //Affiche ou supprime le Post-It
- function Open(PostIt)
- {
- document.getElementById(PostIt).style.display = "block";
- }
- function Close(PostIt)
- {
- document.getElementById(PostIt).style.display = "none";
- document.getElementById('TextArea1').value="";
- document.getElementById(PostIt).style.left = "350px";
- document.getElementById(PostIt).style.top = "200px";
- Cookie('text');
- Cookie('Top');
- Cookie('left');
-
- }
- //Modifi la couleur du PostIt
- function color(PostIt)
- {
- switch(document.getElementById(PostIt).style.backgroundImage.valueOf())
- {
- case "url(Post-It/bleu.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/vert.png')";
- break;
- case "url(Post-It/vert.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/rose.png')";
- break;
- case "url(Post-It/rose.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/violet.png')";
- break;
- case "url(Post-It/violet.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/blanc.png')";
- break;
- case "url(Post-It/blanc.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/jaune.png')";
- break;
- case "url(Post-It/jaune.png)":
- document.getElementById(PostIt).style.backgroundImage = "url('Post-It/bleu.png')";
- break;
- }
- }
- var down = 0;
- var idDiv = "";
- function StartDrag(id,e){
- down = true;
- idDiv=id
- if(e.pageX){
- init_x = e.pageX;
- init_y = e.pageY;
- }else if(e.clientX){
- init_x = e.clientX;
- init_y = e.clientY;
- }else{
- init_x = e.x;
- init_y = e.y;
- }
- div_x = document.getElementById(idDiv).offsetLeft;
- div_y = document.getElementById(idDiv).offsetTop;
- }
- function StopDrag(){
- down=false;
- }
- function drag(e){
- if(down==1){
- if(e.pageX){
- pos_x = e.pageX;
- pos_y = e.pageY;
- }else if(e.clientX){
- pos_x = e.clientX;
- pos_y = e.clientY;
- }else{
- pos_x = e.x;
- pos_y = e.y;
- }
- dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
- dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
- //déplace le bloc à sa nouvelle position
- document.getElementById(idDiv).style.left = div_x + dx +"px";
- document.getElementById(idDiv).style.top = div_y + dy +"px";
- }
- }
/*Coté html*/
<html>
<head>
<title>Drag</title>
<!--script PostIts.js ######################################################################################################## -->
<script type="text/javascript" src="PostIts.js">
</script>
</head>
<!--Absolument a metre dans le body ######################################################################################## -->
<body onMouseMove="drag(event);" onMouseUp="StopDrag();" onload="GetCookie('color');GetCookie('visible');GetCookie('Top');GetCookie('left');GetCookie('text');">
<!--Bouton qui appèle le Post-It, a placer où vous le désirez ###############################################################-->
<img alt="PostIt" onclick="Open('bloc1');Cookie('visibleTrue')" style="cursor:pointer" src="Post-It/BtnPostIt.png" />
<!-- Div qui permet d'afficher le Post-It ################################################################################## -->
<div id="bloc1"
style="border-style: none; border-color: inherit; border-width: medium; display:none; position:absolute; top:200px; left:350px;width:187px; height:168px;background-image:url('Post-It/bleu.png'); background-repeat: no-repeat;" >
<table style="width: 100%;">
<tr>
<td id="menu" onMouseDown="StartDrag('bloc1',event);" onmouseout="Menu('imgCroix','imgColor');Cookie('Position')" onmouseover="Menu('imgCroix','imgColor')"
style="height: 27px;">
<table style="width: 176px">
<tr>
<td align="left">
<img id="imgColor" alt="Del" src="Post-It/color.png" onclick="color('bloc1')" onmouseover="BtnPostIt('imgColor')" onmouseout="BtnPostIt('imgColor');Cookie('color')" style="border: thin none #C0C0C0;display:none" />
</td>
<td align="right"><img id="imgCroix" alt="Del" src="Post-It/croix2.png" onclick="Close('bloc1');Cookie('visibleFalse')" onmouseover="BtnPostIt('imgCroix')" onmouseout="BtnPostIt('imgCroix')" style="border: thin none #C0C0C0;display:none" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height: 134px;">
<textarea onmouseout="Cookie('text')";" style="overflow:hidden ;background-color:Transparent; border:none;font-family:Segoe Script;height:127px;width:162px" id="TextArea1" cols="19" rows="5"></textarea>
</td>
</tr>
</table>
</div>
</body>
</html>
/*Coté javascript*/
function Cookie(name)
{
switch(name)
{
case "color":
var couleur = document.getElementById('bloc1').style.backgroundImage.valueOf();
SetCookie (name,couleur);
break;
case "text":
var text = document.getElementById('TextArea1').value;
//text = text.replace(' ', "¤");
SetCookie (name,text);
break;
case "visibleTrue":
SetCookie ('visible','block');
break;
case "visibleFalse":
SetCookie ('visible','none');
break;
case "Position":
var Left = document.getElementById('bloc1').style.left;
var Top = document.getElementById('bloc1').style.top;
SetCookie ('left',Left);
SetCookie ('Top',Top);
}
}
function SetCookie (name, value)
{
//nouvel objet date
var aujourdhui = new Date() ;
//nouvel objet date
var expdate = new Date() ;
//plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais
expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) )
//creation du cookie
document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString() ;
}
function getCookieVal(offset) {
var endstr=document.cookie.indexOf (";", offset);
if (endstr==-1)
endstr=document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i, j)==arg)
switch(name)
{
case "color":
document.getElementById('bloc1').style.backgroundImage = getCookieVal (j);
break;
case "text":
document.getElementById('TextArea1').value = getCookieVal (j);
break;
case "visible":
document.getElementById('bloc1').style.display = getCookieVal (j);
break;
case "Top":
document.getElementById('bloc1').style.top = getCookieVal (j);
break;
case "left":
document.getElementById('bloc1').style.left = getCookieVal (j);
break;
}
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;}
}
//Affiche menu du Post-It
function Menu(Btn1,Btn2)
{
switch(document.getElementById(Btn1).style.display.valueOf())
{
case "block":
document.getElementById(Btn1).style.display = "none";
document.getElementById(Btn2).style.display = "none";
break;
case "none":
document.getElementById(Btn1).style.display = "block";
document.getElementById(Btn2).style.display = "block";
break;
}
}
//Bordure boutons Post-It
function BtnPostIt(Btn)
{
//if firefox ou internet exploreur
var bordure = document.getElementById(Btn).style.border.valueOf();
if(bordure =="thin solid rgb(192, 192, 192)"||bordure =="#c0c0c0 thin solid")
{
document.getElementById(Btn).style.border ="thin none #C0C0C0";
}
else{
document.getElementById(Btn).style.border ="thin solid #C0C0C0";
}
}
//Affiche ou supprime le Post-It
function Open(PostIt)
{
document.getElementById(PostIt).style.display = "block";
}
function Close(PostIt)
{
document.getElementById(PostIt).style.display = "none";
document.getElementById('TextArea1').value="";
document.getElementById(PostIt).style.left = "350px";
document.getElementById(PostIt).style.top = "200px";
Cookie('text');
Cookie('Top');
Cookie('left');
}
//Modifi la couleur du PostIt
function color(PostIt)
{
switch(document.getElementById(PostIt).style.backgroundImage.valueOf())
{
case "url(Post-It/bleu.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/vert.png')";
break;
case "url(Post-It/vert.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/rose.png')";
break;
case "url(Post-It/rose.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/violet.png')";
break;
case "url(Post-It/violet.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/blanc.png')";
break;
case "url(Post-It/blanc.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/jaune.png')";
break;
case "url(Post-It/jaune.png)":
document.getElementById(PostIt).style.backgroundImage = "url('Post-It/bleu.png')";
break;
}
}
var down = 0;
var idDiv = "";
function StartDrag(id,e){
down = true;
idDiv=id
if(e.pageX){
init_x = e.pageX;
init_y = e.pageY;
}else if(e.clientX){
init_x = e.clientX;
init_y = e.clientY;
}else{
init_x = e.x;
init_y = e.y;
}
div_x = document.getElementById(idDiv).offsetLeft;
div_y = document.getElementById(idDiv).offsetTop;
}
function StopDrag(){
down=false;
}
function drag(e){
if(down==1){
if(e.pageX){
pos_x = e.pageX;
pos_y = e.pageY;
}else if(e.clientX){
pos_x = e.clientX;
pos_y = e.clientY;
}else{
pos_x = e.x;
pos_y = e.y;
}
dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
//déplace le bloc à sa nouvelle position
document.getElementById(idDiv).style.left = div_x + dx +"px";
document.getElementById(idDiv).style.top = div_y + dy +"px";
}
}
Conclusion
C mon premier :)
Pour le déplacement de div, Je me suis servi du code de "slog9" que je remercie =>"http://www.javascriptfr.com/codes/DRAG-BLOC-DIV _42904.aspx"
Si vous avez des améliorations a apporter je suis preneur, mais bon c'est juste un gadget alors ...
Historique
- 29 octobre 2009 10:44:24 :
- Fautes de frappe!!
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Heure visiteur en cookie ou autre [ par zonevirtuel ]
bonjour, en fait j'ai un gros soucis ... je suis concepteur d'un jeu sur internet a traffic international, francais, canadiens, et autres viennent r&
DRAG DROP JAVASCRIPT [ par webboy ]
Bonjour,J'ai une page coup en 2 frame (bas & centre)Dans la frame bas g un tableau de 6 celulles comprenant chacune un div avec un idje voudrais drage
[javascript] treview drag drop [ par ichevc ]
Bonjour, je suis debutant en javascript,je cherche soit a recuperer soit de la documentation pour faire :un menu hierarchique (treeview) supportant le
cookies, avec JavScript ET php ? [ par gagou9 ]
Bonjour bonjour !Je suis actuellement en train d'elaborer mon site, avec du php, css, et javascript.dans un de mes scripts, je créé un cooki
Chat Box PHP/Javascript/Html/Cookie ect... [ par zlitus ]
Salut. Je suis en train de programmer un petit chat pour mon site. seulement j'ai un probleme, j'aimerai que le visiteur marque son pseudo au dé
javascript & .net [ par Poulipe ]
Bonjour,je voudrais recupere la position du curseur dans un textarea (asp:Textbox) (.net) et couper le reste du champ, pour le reinserer dans un
Menu javascript [ par stelline ]
bonjour, Je viens de mettre en place un menu javascript du genre "explorer" pour un site. Je l'ai téléchargé sur: http://www.destroydro
Requête my sql et javascript [ par Tomlilie ]
Bonjour à tousJe suis débutante (en fait plus que débutante mais bon...) en Javascript et j'aimerais avoir quelques réponses. Je v
Balises JS [ par MadM@tt ]
Bonjour à tous, J'aimerais connaitre toutes les balises possibles qui permettent d'écrire du Javascript, en effet je compte scanner une pag
Click droit sur un element [ par Shibo_Sources ]
Salut a tous, je ne suis pas très fort en javascript (pour dire vrai je suis nul) c'est pourquoi je me permet de vous demander un petit coup de m
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|