|
|
[résolu] Ajouter une fonction .js (popup) comment faire? |
|
Aspirant  
Inscrit: 20/03/2005 09:56
De Paris
|
Bonsoir, Lorsqu'on va sur l'excellent site de 7dana.com à la section free web templates ( http://7dana.com/index.php?free), en passant la souris sur le bouton DOWNLOAD CENTER, on voit apparaître un étonnant popup contenant les conditions d'utilisation et restrictions copyright d'utilisation. Comment avoir un résultat semblable, adapté à la charte graphique sur nos sites xoops? De plus c'est fonctionnel avec tous les navigateurs... A y regarder de près et bien que fournisseur de templates pour xoops, le site de 7dana.com utilise un CMS différent: http://www.phpwcms.de/Ce CMS possède une fonction JAVA (frontend.js) contenue dans un répertoire /phpwcms_template/inc_js/ La gestion de ces popup est définie dans ce fichier frontend.js Je prévois d'utiliser cette fonction pour avoir un beau popup moi aussi, ce qui ne semble pas difficile en installant un répertoire /js contenant frontend.js . Et l'idée est de l'utiliser dans un bloc contenant HTML. Encore faut-il être en mesure de donner les fonctions JAVA à <head> sous la forme: Citation :<head><script src="/js/frontend.js" type="text/javascript"></script> </head> Mais comment avoir accès à <head> dans un bloc édité ? Autrement dit, où se passe la fabrication de <head> et <meta pour les blocks générés en HTML? Pour bien des modules on trouve facilement (c'est dans le fichier php correspondant au fichier template), mais pour la racine xoops je ne sais pas où le trouver. Merci de vos lumières, ancppa
Posté le : 19/07/2005 19:21
Edité par ancppa sur 20/07/2005 09:34:18
Edité par ancppa sur 22/07/2005 09:31:05
Edité par ancppa sur 08/08/2005 10:04:44
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
|
Guest_
|
Salut, Tu trouveras d'excellents exemples à cette adresse : http://www.dynamicdrive.com/dynamicindex5/index.htmlpour ce qui concerne l'accès au "head", il faut éditer ton thème. A+ Hervé
Posté le : 19/07/2005 19:35
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Supporter Xoops  
Inscrit: 09/01/2005 13:37
De Breizh
|
Salut, Une partie de ta réponse A + ps hervé : grillé d'1 minute
Posté le : 19/07/2005 19:36
Edité par kris sur 19/07/2005 19:37:30
|
|
La connaissance s'accroît quand on la partage ...
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Aspirant Inscrit: 20/03/2005 09:56
De Paris
|
merci hercé, merci kris !
(je ferais bien de prendre des vacances, car je m'apercois que j'ai déja fait qqchose d'identique dans le thème mais je ne m'en souvenais plus....)
ancppa:-o
ps/ je medifie la question en "fonction .js comment faire?"
Posté le : 20/07/2005 09:32
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Aspirant Inscrit: 20/03/2005 09:56
De Paris
|
Reste un souci... Le popup apparaît bien au rollover, mais impossible de régler sa largeur, il p^rend donc tout l'écran de la gauche à la droite, mais il respecte la hauteur limitée à la longueur des lignes du texte. Rappel de l'install:1. Création d'un répertoire www/js/ contenant les fichiers javascript(dans le cas présent ils se nomment main.js et style.js 2. Modif de l'index du template en ajoutant la ligne suivante : <SCRIPT language="JavaScript1.2" src="http/www.atempera.com/js/main.js" type="text/javascript"></SCRIPT> 3. A l'endroit où l'on veut faire apparaître le popup la commande est de la forme: <a href="/modules/wfchannel/" target="_self" onMouseOver="stm(Text[0],Style[0])" onMouseOut="htm()"> <img src=" http://www.votresite.com/images/img_mini.png" align="left" width="173" height="25" hspace="5"></a> Le contenu du fichier style.js dans les scripts proposés chez dynamicdrive.com permet de régler beaucoup de paramètres y compris hauteur et largeur du popup, avec un tableau du genre : Citation :var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0
Text[0]=["<font color='white'>Titre du POPUP</font>","Ceci est le texte du POPUP!"]
Style[0]=["#ffffff","#000000","#990000","#F9F0DD","","","","","","","left","sticky",1,1,200,"",1,5,10,10,-1,0,0,"",""]
où chaque espace ,"", correspond à un réglage dont l'ordonnancement est souvent le suivant: Citation :Text[...]=[title,text]
Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor] Tout est fonctionnel sous xoops, sauf ", Width" qui ne veut rien savoir et oblige le popup à prendre toute la largeur de l'écran. Je pense (et j'espère!) qu'un "docteur es xoops" saura trouver le remède. Ce que je propose:lorsque la solution sera trouvée, je veux bien rédiger (si vous en êtes d'accord) un article reprenant les contenus de ces posts, afin de donner pas à pas la méthode d'implantation d'un système popup personnalisé... (je pense même - parce que c'est le cas ailleurs - que cette fonction devrait être proposée dans l'install de xoops avec le thème par default). Car ma conviction est claire, ce genre de popup permet élégamment d'accompagner les visiteurs d'un site un peu complexe ou professionnel, sans être obligé de les renvoyer sur d'autres fenêtres par des boutons FAQ, AIDE, etc... qui déconcentrent et lassent. ancppa
Posté le : 22/07/2005 09:30
Edité par ancppa sur 22/07/2005 09:35:06
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Xoops accro  
Inscrit: 04/02/2003 01:54
De Le Mans
|
Dans son module formulaire, Philou utilise avec succès une technique de tooltip récupéré chez dynamicdrive.
Posté le : 22/07/2005 10:33
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Aspirant Inscrit: 20/03/2005 09:56
De Paris
|
sourire...
Merci Christian, c'est justement celui-la dont je parle et que je n'arrive pas à régler en largeur!
Je voudrais bien savoir comment Philou a réussi son compte pour résoudre ce pb de largeur....
Utilisé tel que décrit dans mon post précédent le réglage de width ne se fait pas....
Philou a du bidouiller quelque part.
ancppa
Posté le : 23/07/2005 01:21
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Supporter Xoops Inscrit: 09/01/2005 13:37
De Breizh
|
Salut,
Fais une recherche avec le mot clé : sothlink, ou menu dhtml, tu devrais avoir la solution qui est de modifier ta feuille de style.
A +
Posté le : 23/07/2005 07:51
|
|
La connaissance s'accroît quand on la partage ...
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Aspirant Inscrit: 20/03/2005 09:56
De Paris
|
Bonjour, En résumé et grâce à vos suggestions et pistes fournies, voici le CQFD pour installer un pop-up compatible avec tous les navigateurs, dont le fonctionnement est rapide et très pratique: 1. Installer le script suivant dans votre fichier theme.html (de votre theme).A coller juste après <body> Citation :
<!--***popup***-->
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
<!--***popup fin***-->
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid red;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<a href="/modules/module1/" target="_self" onMouseOver="ddrivetip('Ici vous placez le texte qui sera lu sur le pop-up<br>Il est possible d'y ajouter quelques balises pour faciliter la lecture<b>Très pratique!</b>. le code couleur qui suit, c'est la couleur de fond du pop-up, le chiffre suivant règle la largeur','#FFFFE8', 300)";
onMouseout="hideddrivetip()">
<img src="http://www.monsite.com/images/mon_image.png" align="left" width="173" height="25" hspace="5"></a>
dans votre texte du pop-up vous utilisez une aposthrophe d'ajouter un backslash avant l'aposthrophe... à défaut de quoi vous aurez une erreur qui ne sera pas signalée mais qui rendra invisible le pop-up. (Pour les puristes voici le texte du programmeur de ce script: ----------------------------------------------------------------------------------------- WARNING! One last important point: If your tooltip description contains apostrophes ('), be sure to backslash them first, as illustrated in the last example ("Yahoo\'s Site"), or an error will occur. ----------------------------------------------------------------------------------------- Au total vous avez 3 bouts de code à installer :2 dans le fichier theme.html 1 dans votre page où se place le ou les pop-up Personnellement j'utilise WFCHANNEL pour la fab de mes pages et j'en suis totalement satisfait. Pour voir ce pop-up en fonctionnement vous passez votre pointeur de souris sur les images: ATEMPERA Livres de collection & LES PETITES ANNONCES sur la home page de mon modeste site en construction: http://atempera.comMerci de votre aide, en espérant que ce post fera gagner du temps à ceux qui sont intéressés par l'apport des pop-up sur leurs sites xoops. JPG ancppa
Posté le : 08/08/2005 10:02
|
|
|
|
|
Re: fonction java & xoops, est-ce possible? |
|
Supporter Xoops 
Inscrit: 24/11/2004 07:56
De Marseillan - Cap d'Agde
|
Salut ,
Super ton petit exposé sur le pop up ..je vais tester ce truc qui peut être vraiment pas mal dans l'ergonomie d'un site .
Merci :)
Posté le : 08/08/2005 12:14
|
Cordialement
Denis 
|
Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
|
![Open in new window](javascript:CaricaFoto("http://www.pixeltosavechildren.com/img/vi_alone.gif");)
![http://www.votresite.com/images/img_mini.png"](http://www.votresite.com/images/img_mini.png"){kind=link}
![http://www.monsite.com/images/mon_image.png"](http://www.monsite.com/images/mon_image.png"){kind=link}