|
|
javascript, theme gnoo-v2 , souci de scroll |
|
Aspirant  
Inscrit: 05/05/2007 11:33
|
Hello à tous, petit souci technique de javascript. j'ai ajouté cette ligne dans xobanner.html <!-- include of the dhtml stuff in the header --> <{includeq file="$theme_name/dhtml.html"}> c'est un appel à un fichier dhtml.html qui se trouve dans xotpl. voici le code :
<style type="text/css"> html { overflow: hidden; } body { position: absolute; margin: inherit; padding: inherit; background: inherit; width: 100%; height: 100%; } #center { position: absolute; left: 70%; top: 0%; } #slider { position: absolute; width: 280px; height: 147px; overflow: hidden; background: #000; border: 1px solid #000; } #slider .slide { position: absolute; top: 0px; height: 147px; width: 280px; background: #000; overflow: hidden; border-left: #000 solid 1px; cursor: default; } #slider .title { color: #F80; font-weight: bold; font-size: 0,8em; margin-right: 1em; text-decoration: none; } #slider .backgroundText { position: absolute; width: 100%; height: 100%; top: 100%; background: #000; filter: alpha(opacity=40); opacity: 0.4; } #slider .text { position: absolute; top: 100%; color: #FFF; font-family: verdana, arial, Helvetica, sans-serif; font-size: 0.9em; text-align: left; width: 280px; left: 10px; } #slider .diapo { position: absolute; filter: alpha(opacity=100); opacity: 1; visibility: hidden; } </style> <script type="text/javascript"> // ======================================================== // ===== images slider ==== // script: Gerard Ferrandez - Ge-1-doot - February 2008 // http://www.dhteumeuleu.com //&nb ... ============ /* ==== slider nameSpace ==== */ var slider = function() { /* ==== private methods ==== */ function getElementsByClass(object, tag, className) { var o = object.getElementsByTagName(tag); for ( var i = 0, n = o.length, ret = []; i < n; i++) { if (o[i].className == className) ret.push(o[i]); } if (ret.length == 1) ret = ret[0]; return ret; } function setOpacity (obj,o) { if (obj.filters) obj.filters.alpha.opacity = Math.round(o); else obj.style.opacity = o / 100; } /* ==== Slider Constructor ==== */ function Slider(oCont, speed, iW, iH, oP) { this.slides = []; this.over = false; this.S = this.S0 = speed; this.iW = iW; this.iH = iH; this.oP = oP; this.oc = document.getElementById(oCont); this.frm = getElementsByClass(this.oc, 'div', 'slide'); this.NF = this.frm.length; this.resize(); for (var i = 0; i < this.NF; i++) { this.slides[i] = new Slide(this, i); } this.oc.parent = this; this.view = this.slides[0]; this.Z = this.mx; /* ==== on mouse out event ==== */ this.oc.onmouseout = function () { this.parent.mouseout(); return false; } } Slider.prototype = { /* ==== animation loop ==== */ run : function () { this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5; this.view.calc(); var i = this.NF; while (i--) this.slides[i].move(); }, /* ==== resize ==== */ resize : function () { this.wh = this.oc.clientWidth; this.ht = this.oc.clientHeight; this.wr = this.wh * this.iW; this.r = this.ht / this.wr; this.mx = this.wh / this.NF; this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1); }, /* ==== rest ==== */ mouseout : function () { this.over = false; setOpacity(this.view.img, this.oP); } } /* ==== Slide Constructor ==== */ Slide = function (parent, N) { this.parent = parent; this.N = N; this.x0 = this.x1 = N * parent.mx; this.v = 0; this.loaded = false; this.cpt = 0; this.start = new Date(); this.obj = parent.frm[N]; this.txt = getElementsByClass(this.obj, 'div', 'text'); this.img = getElementsByClass(this.obj, 'img', 'diapo'); this.bkg = document.createElement('div'); this.bkg.className = 'backgroundText'; this.obj.insertBefore(this.bkg, this.txt); if (N == 0) this.obj.style.borderLeft = 'none'; this.obj.style.left = Math.floor(this.x0) + 'px'; setOpacity(this.img, parent.oP); /* ==== mouse events ==== */ this.obj.parent = this; this.obj.onmouseover = function() { this.parent.over(); return false; } } Slide.prototype = { /* ==== target positions ==== */ calc : function() { var that = this.parent; // left slides for (var i = 0; i <= this.N; i++) { that.slides[i].x1 = i * that.Z; } // right slides for (var i = this.N + 1; i < that.NF; i++) { that.slides[i].x1 = that.wh - (that.NF - i) * that.Z; } }, /* ==== HTML animation : move slides ==== */ move : function() { var that = this.parent; var s = (this.x1 - this.x0) / that.S; /* ==== lateral slide ==== */ if (this.N && Math.abs(s) > .5) { this.obj.style.left = Math.floor(this.x0 += s) + 'px'; } /* ==== vertical text ==== */ var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0; if (Math.abs(v - this.v) > .5) { this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px'; this.v = v; this.cpt++; } else { if (!this.pro) { /* ==== adjust speed ==== */ this.pro = true; var tps = new Date() - this.start; if(this.cpt > 1) { that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0); } } } if (!this.loaded) { if (this.img.complete) { this.img.style.visibility = 'visible'; this.loaded = true; } } }, /* ==== light ==== */ over : function () { this.parent.resize(); this.parent.over = true; setOpacity(this.parent.view.img, this.parent.oP); this.parent.view = this; this.start = new Date(); this.cpt = 0; this.pro = false; this.calc(); setOpacity(this.img, 100); } } /* ==== public method - script initialization ==== */ return { init : function() { // create instances of sliders here // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70); setInterval("slider.s1.run();", 16); } } }(); </script> <script type="text/javascript"> /* ==== start script ==== */ slider.init(); </script> <div id="center"> <div id="slider"> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/tir.jpg" alt="Image de l'épreuve du tir au Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">Concentration</span> </div> </div> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/escrime.jpg" alt="Image de l'épreuve d'escrime au Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">Précision</span> </div> </div> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/natation.jpg" alt="Image de l'épreuve de natation au Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">Puissance</span> </div> </div> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/equitation.jpg" alt="Image de l'épreuve d'équitation au Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">Adaptation</span> </div> </div> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/course.jpg" alt="Image de l'épreuve de la course à pied au Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">Endurance</span> </div> </div> <div class="slide"> <img class="diapo" src="http://www.pentathlon-perpignan.fr/uploads/theme/pmpc.jpg" alt="Logo du club Pentathlon Moderne Perpignan la Catalane"> <div class="text"> <span class="title">PMPC 66</span> </div> </div> </div> </div>
c'est largement inspiré de cette page : http://www.dhteumeuleu.com/run/diapo-SH/l'idée étant de faire un "logo" composé de plusieurs images qui glissent dans le style et qui se trouve placé à droite dans la xo-banner (suis-je clair?). L'appel à la fonction marche super bien, j'ai l'affichage qui me plait.. sauf que mon site refuse le scroll vertical, et que le bas du site ne s'affiche plus. Je soupçonne que ça vienne d'une balise non fermée, ou d'un souci de css (il est intégré dans dhmtl.html ce qui peut générer un conflit). Quelqu'un peut-il me dire s'il connait ce pépin? merci par avance.
Posté le : 27/07/2008 17:56
|
|
|
|
|
Re: javascript, theme gnoo-v2 , souci de scroll |
|
Aspirant Inscrit: 05/05/2007 11:33
|
pour être plus clair, j'ai ajouté aux anonymes le changement de theme. pour visualiser le bug, colonne gauche, cliquer sur le theme xoops-gnooo-1000px... ce sera plus évident à voir. http://www.pentathlon-perpignan.fr
Posté le : 27/07/2008 18:01
|
|
|
|
|
Re: javascript, theme gnoo-v2 , souci de scroll |
|
|
Guest_
|
b'soir,
Regardes si ce n'est pas déjà fait les templates du thème. Il est possible que certaines mises en commentaires (signalées par <!-- .... -->) provoquent ce souci. Il faudrait donc faire ce premier ménage.
Ensuite, je pense que tu devrais dissocier complètement ton code css et javascript de ton code html (voir la partie que tu cites : css + js + html). Pour ça tu peux utiliser
- la fonction @import (voir style.css) pour ton code css
- et le template /xotpl/xoscripts.html) pour ton code javascript
Cela ne résoudra peut être pas ton souci mais tu y verras peut être plus clair sur l'origine du conflit entre ton ajout et ce thème.
Note : as-tu testé l'insertion de ton code sur un thème non morphogenesis ?
@+
Posté le : 27/07/2008 21:44
|
|
|
|
|
Re: javascript, theme gnoo-v2 , souci de scroll |
|
Aspirant Inscrit: 05/05/2007 11:33
|
reglé :
dans le css-body du script dhtml.html, simplement ajouter un
body {
position: absolute;
margin: inherit;
padding: inherit;
background: inherit;
width: 100%;
height: 100%;
/* --------------------- HYDDE MODIFICATION ---------------------------------*/
overflow: scroll;
/******************************** FIN MODIFICATION ***************************/
Posté le : 27/07/2008 21:49
|
|
|
|
|
Re: javascript, theme gnoo-v2 , souci de scroll |
|
Aspirant Inscrit: 05/05/2007 11:33
|
merci Burning pour le tuyau.
En fait, j'ai plutôt essayé de faire un proof of concept personnel.. et ça marche.
Mais en fait, effectivement, je vais scinder le css, le js et html avant de mettre le thème en ligne. ce sera plus clean...
:D
Posté le : 27/07/2008 21:52
|
|
|
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.
|
