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