It is currently Sun 25 Sep 2016 - 05:40 - créer un forum

[Tuto] POPUP persistante de notification en DHTML

Skip to content

Post new topic Reply to topic Goto page: <  1, 2, 3, … 23, 24, 25  >

[Tuto] POPUP persistante de notification en DHTML
Author Message
Yskander


Joined: 26 Jan 2008
Posts: 1,558

PostPosted: Wed 17 Sep 2008 - 18:03    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

Exact
Le code que je donne permet de mettre les bords arrondis (visible sous fx d'après le tuto de themalin) pour la version
I. 1. A - popup persistante translucide (s'affiche toujours tant que le message n'a pas était lus)
 
d'altair
Forum
Author Message
Twilight


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 18:05    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

YSKANDER wrote:
Exact
Le code que je donne permet de mettre les bords arrondis (visible sous fx d'après le tuto de themalin) pour la version
I. 1. A - popup persistante translucide (s'affiche toujours tant que le message n'a pas était lus)
 
d'altair


Mais, de toute façon, on peut arrondir les bords de toutes les pop-up, quelques soit la version, juste à changer la ligne de la table, nan ?


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 17 Sep 2008 - 18:08    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Oui
Il suffit juste de suivre à la lettre le tuto de themalin : http://xooit.xooit.com/t37222-Arrondir-les-bords-de-votre-forum.htm
L'ajout de mon code permet juste de savoir ou rajouter la ligne dans le tuto d'altair
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Twilight


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 18:10    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

YSKANDER wrote:
Oui
Il suffit juste de suivre à la lettre le tuto de themalin : http://xooit.xooit.com/t37222-Arrondir-les-bords-de-votre-forum.htm
L'ajout de mon code permet juste de savoir ou rajouter la ligne dans le tuto d'altair


Ok, merci Yksander, ce tutoriel devient vraiment interressant, merci à vous deux mes chéris ! Wink


Author Message
dimitriuss


Offline
Guest




PostPosted: Thu 18 Sep 2008 - 00:41    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

 
Quote:

Ok, merci Yksander, ce tutoriel devient vraiment interressant, merci à vous deux mes chéris !



undecided Ce tuto est vraiment cool !


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Thu 18 Sep 2008 - 01:25    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Une dernière chose, j'essaye mais je n'y parviens pas. J'utilise le premier code pour faire apparaitre la popup lors d'un nouveau message mais je souhaiterai que cette dernière coulisse verticalement comme dans le code II version dynamique
Est-ce faisable ?
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
altair


Offline
Guest




PostPosted: Thu 18 Sep 2008 - 02:25    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

YSKANDER wrote:
Une dernière chose, j'essaye mais je n'y parviens pas. J'utilise le premier code pour faire apparaitre la popup lors d'un nouveau message mais je souhaiterai que cette dernière coulisse verticalement comme dans le code II version dynamique
Est-ce faisable ?



Bonsoir

je devais justement ajouter cette variante dans le tuto

donc pour utiliser la popup coulissante pour la notification d'MP

le code javascript à placer avant <head> (code 1)
Code: Sélectionner - Agrandir
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
</script>


à ajouter avant </head> (code 2)
Code: Sélectionner - Agrandir
<style type="text/css">
#topbar{
position:absolute;
background-color : #eaedf4;
border : 1px solid #9893C6;
-moz-border-radius: 12px;
padding: 4px 0px 14px 0px;
width: 360px;
visibility: hidden;
z-index: 20;
}
</style>
l'attribut des coins arrondis y est déjà inclus -moz-border-radius: 12px;


ajoutez après <body> (code 3)
Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->

<script language="javascript" type="text/javascript">
<!--
for (i=1; i<100; i++) {
alerte = "{PRIVATE_MESSAGE_INFO}";
if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message")
{
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
}
}
//-->
</script>

<div align="center" id="topbar" style="visibility:visible; left:30px; top:2806px; opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
<span><a href="" onclick="closebar(); return false">
<img src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png" style="margin-left:326px;"  border="0">
</a></span>
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a></b></span><br /></div>

<!-- END switch_enable_pm_popup -->


vous pouvez personnaliser le message de la popup dans cette partie du code précédent (3)
Code: Sélectionner - Agrandir
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a></b></span>


pour changer le bouton "fermer" remplacez ce lien
Code: Sélectionner - Agrandir
http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png



cette partie du code (1) permet de personnaliser l'affichage de la popup
Code: Sélectionner - Agrandir
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"


pour qu'elle soit persistante
Code: Sélectionner - Agrandir
var persistclose=0

pour s'afficher juste une fois par session
Code: Sélectionner - Agrandir
var persistclose=1


pour qu'elle soit placée en haut
Code: Sélectionner - Agrandir
var verticalpos="fromtop"

pour être placé en bas
Code: Sélectionner - Agrandir
var verticalpos="frombottom"


Last edited by altair on Thu 18 Sep 2008 - 02:39; edited 1 time in total
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Thu 18 Sep 2008 - 02:32    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Dommage que tu sois si loin, j'irai bien te serrer la main
Parfait comme çà
Pas possible de rater la pop up
Merci Altair

Edit : par contre petit bug avec ces derniers codes
Quand on a pas de message la boite s'affiche nous notifiant que nous n'en avons pas et en plus elle s'affiche au milieu du forum en fixe
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
altair


Offline
Guest




PostPosted: Fri 19 Sep 2008 - 10:21    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

YSKANDER wrote:
Dommage que tu sois si loin, j'irai bien te serrer la main
Parfait comme çà
Pas possible de rater la pop up
Merci Altair

Edit : par contre petit bug avec ces derniers codes
Quand on a pas de message la boite s'affiche nous notifiant que nous n'en avons pas et en plus elle s'affiche au milieu du forum en fixe



Bonjour

effectivement je viens de remarquer cela, donc voila le code après rectification

popup coulissante de notification d'MP

à placer avant </head> code (1)

Code: Sélectionner - Agrandir
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

for (i=1; i<100; i++) {
var alerte = "{PRIVATE_MESSAGE_INFO}";
if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message" || alerte == "You have "+i+" new messages" || alerte == "You have 1 new message" )
{
if (window.addEventListener)
window.addEventListener("load", staticbar, false);
else if (window.attachEvent)
window.attachEvent("onload", staticbar);
else if (document.getElementById)
(window.onload=staticbar);
}
}
</script>


également avant </head> code (2)

Code: Sélectionner - Agrandir
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 300px;
z-index: 20;
padding: 4px 4px 4px 4px;
background-color : #eaedf4;
border : 1px solid #9893C6;
-moz-border-radius: 12px;
}
</style>



à placer après <body> code (3)

Code: Sélectionner - Agrandir
<!-- BEGIN switch_user_logged_in -->
<div align="center" id="topbar" style="opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
<span><a href="" onclick="closebar(); return false">
<img src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png" align="right" border="0">
</a></span>
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center"><img src="http://img5.xooimage.com/files/f/1/e/email2-1ca94a.png" alt="{PRIVATE_MESSAGE_INFO}" border="0" align="bottom">
 {PRIVATE_MESSAGE_INFO}</a></b></span><br /></div>
<!-- END switch_user_logged_in -->


sauvegarder et fermer





prise en compte de la notification en anglais









ce qui peut être modifié


sur le code (1)

la distance par rapport à la bordure haute de la fenêtre
Code: Sélectionner - Agrandir
var startY = 4 //set y offset of bar in pixels


la distance par rapport au coté gauche de la fenêtre
Code: Sélectionner - Agrandir
var startX = 30 //set x offset of bar in pixels


persistance ou non
Code: Sélectionner - Agrandir
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session


placée en haut ou en bas
Code: Sélectionner - Agrandir
var verticalpos="fromtop" //enter "fromtop" or "frombottom"




sur le code (2)

la largeur est définie ici
Code: Sélectionner - Agrandir
width: 300px;


la couleur du fond
Code: Sélectionner - Agrandir
background-color : #eaedf4;


le contour de la popup
Code: Sélectionner - Agrandir
border : 1px solid #9893C6;


pour qu'elle soit toujours au premier plan
Code: Sélectionner - Agrandir
z-index: 20;


arrondir les coins (sous FF)
Code: Sélectionner - Agrandir
-moz-border-radius: 12px;


marges internes entre le contenu et le contour
Code: Sélectionner - Agrandir
padding: 4px 4px 4px 4px;


pour mettre une image de fond, il suffit de remplacer ceci
Code: Sélectionner - Agrandir
background-color : #eaedf4;
border : 1px solid #9893C6;

par cela
Code: Sélectionner - Agrandir
background: url("http://img.imageshack.us/xyz/image.jpg") no-repeat center center;

l'image doit avoir les mêmes hauteur et largeur que la popup



sur le code (3)

pour remplacer le bouton fermer
Code: Sélectionner - Agrandir
src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png"


niveau de transparence
Code: Sélectionner - Agrandir
opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;


le contenu du message (texte, couleur, style, images ...)
Code: Sélectionner - Agrandir
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center"><img src="http://img5.xooimage.com/files/f/1/e/email2-1ca94a.png" alt="{PRIVATE_MESSAGE_INFO}" border="0" align="bottom">
 {PRIVATE_MESSAGE_INFO}</a></b></span>


la hauteur est définie en fonction du contenu, il suffit d'ajouter des sauts de ligne dans le message
Code: Sélectionner - Agrandir
<br />


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Fri 19 Sep 2008 - 14:19    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Génial
Bon le tuto est très long Old Mr Green mais il est complet. Franchement et sincèrement merci
Maintenant si mes membres ratent la notification c'est qu'ils ont de la peau de saucisson sur les yeux
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Arlem2


Offline
Guest




PostPosted: Fri 19 Sep 2008 - 22:19    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Parfait, comme d'habitude Smile

Author Message
Olip96


Offline
Guest




PostPosted: Fri 19 Sep 2008 - 23:35    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Tuto extraordinaire! Mais, est-ce possible que le pop-up pour les visiteurs soit adapté au style du forum aussi? Merci de me répondre!

Avec mes cordes,
Olip96


Author Message
dimitriuss


Offline
Guest




PostPosted: Sat 20 Sep 2008 - 07:50    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Tu peut normalement changer la couleur de fond, de transparence...

[Mess-4]


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Sat 20 Sep 2008 - 12:16    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Olip96 wrote:

Tuto extraordinaire! Mais, est-ce possible que le pop-up pour les visiteurs soit adapté au style du forum aussi? Merci de me répondre!

Avec mes cordes,
Olip96


bonjour

tu veux dire qu'elle prenne les propriété que tu as mis dans le css ou autre?
_______________________


Forum
Author Message
Olip96


Offline
Guest




PostPosted: Sat 20 Sep 2008 - 17:23    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Bah, comme le code I. 1. C. mais pour le pop-up des visiteurs...

Author Message
altair


Offline
Guest




PostPosted: Sun 21 Sep 2008 - 00:12    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Olip96 wrote:
Tuto extraordinaire! Mais, est-ce possible que le pop-up pour les visiteurs soit adapté au style du forum aussi? Merci de me répondre!

Avec mes cordes,
Olip96



Bonsoir

oui c'est possible, il faut juste connaitre les "class" de chaque thème
pour votre thème
les tables class="forumline"
les entêtes class="cat"
les cellules class="row1"
les liens class="nav"

ça donne cela



le code de la popup à placer après <body>
Code: Sélectionner - Agrandir
<!-- BEGIN switch_user_logged_out -->
<table class="forumline" align="center" id="topbar" border="0" style="border-collapse:collapse;">
 <tr>
<td class="cat" align="center" height="28" width="100%"><span>Bienvenue</span></td>
<td class="cat" height="28" align="center"><a href="" onclick="closebar(); return false">
<img src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png" align="right" border="0">
</a></td>
 <tr>
  <td class="row1" align="center" colspan="2"><br /><span class="gen">Bienvenue humble visiteur<p>Veuillez vous <a href="/profile.php?mode=register" class="nav">inscrire</a> ou
   vous <a href="/login.php" class="nav">connecter</a></span><br /><br /></td>
 </tr>
</table>
<!-- END switch_user_logged_out -->


à placer avant </head>
Code: Sélectionner - Agrandir
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

for (i=1; i<100; i++) {
var connect = "{L_LOGIN_LOGOUT}";
if ( connect == "Connexion" || connect == "Login")
{
if (window.addEventListener)
window.addEventListener("load", staticbar, false);
else if (window.attachEvent)
window.attachEvent("onload", staticbar);
else if (document.getElementById)
(window.onload=staticbar);
}
}
</script>


à placer avant </head>
Code: Sélectionner - Agrandir
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 300px;
z-index: 20;
}
</style>


Author Message
Contenu Sponsorisé





PostPosted: Today at 05:40    Post subject: [Tuto] POPUP persistante de notification en DHTML

Display posts from previous:   
Reply to topic Page 2 of 25 Goto page: <  1, 2, 3, … 23, 24, 25  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401