Modification d'un code javascript

[alain83340]

Bonjour,
Je suis en train de crée un winget avec un code javascript qui fonction sur le forum pour afficher les évènements qui figure sur notre allgenda.
J'ai utilisé le tuto suivant pour le réaliser : https://forum.forumactif.com/t373690-module-agenda-avance-allgenda
Par contre l'affichage des événements ce fait les un en dessous des autres et nous voudrions qu'ils s'affichent les un à coté des autres pour en faire un bandeau horizontal.
Que faut il modifier dans le code que j'ai utilisé si dessous si cela est réalisable ?
Merci d'avance.
A.



function AllgendaWidget() {
}
function showAllgendaWidget(json) {
aw.show(json);
}
AllgendaWidget.prototype = {imgPath:null, groupId:7962, nbEvts:7, show:function(json) {
var evts = json.events, evt, list = $("#allgendaEvents");
this.imgPath = json.img_path;
if (evts) {
for (var i = 0;i < evts.length;++i) {
list.append(this.getEvent(evts[i]));
}
}
}, getEvent:function(evt) {
var sD = new Date(evt.startDate), eD = new Date(evt.endDate), e = "<li><img class='allgendaIco' src='" + this.imgPath + "/" + evt.img + "'></img>";
e += "<table><tr><td valign='top' class='allgendaTi'>" + decodeURIComponent(evt.title.replace(/\+/g, "%20"));
if (evt.part_cnt) {
e += "<br /><span class='allgendaSub'>" + evt.part_cnt + "</span>";
}
e += "</td><td class='allgendaDt'><table><tr><td>" + this.ftDate(sD) + "</td></tr>";
e += "<tr><td>" + this.ftDate(eD) + "</td></tr></table>";
e += "</td></tr></table>";
e += "</li>";
return e;
}, loadEvents:function() {
$.ajax({type:"POST", url:"http://www.allgenda.com", dataType:"jsonp", data:{actionId:"63", gid:this.groupId, w:1, noe:this.nbEvts}});
}, openAllgenda:function() {
window.open("http://www.allgenda.com/?agendaView=2&agendaType=4&aId=" + this.groupId, "_blank");
}, ftDate:function(d) {
var da = d.getDate(), m = d.getMonth() + 1, y = d.getFullYear(), h = d.getHours(), mi = d.getMinutes();
if (m < 10) {
m = "0" + m;
}
if (h < 10) {
h = "0" + h;
}
if (mi < 10) {
mi = "0" + mi;
}
var dt = da + "/" + m + "/" + y + " " + h + ":" + mi;
return dt;
}};

[Lixyr]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour,

Pouvez-vous mettre votre code entre balises codes afin que votre sujet soit lisible ?

[alain83340]

Bonjour,voila ci dessous, dsl

Code:

function AllgendaWidget() {
}
function showAllgendaWidget(json) {
  aw.show(json);
}
AllgendaWidget.prototype = {imgPath:null, groupId:7962, nbEvts:7, show:function(json) {
  var evts = json.events, evt, list = $("#allgendaEvents");
  this.imgPath = json.img_path;
  if (evts) {
    for (var i = 0;i < evts.length;++i) {
      list.append(this.getEvent(evts[i]));
    }
  }
}, getEvent:function(evt) {
  var sD = new Date(evt.startDate), eD = new Date(evt.endDate), e = "<li><img class='allgendaIco' src='" + this.imgPath + "/" + evt.img + "'></img>";
  e += "<table><tr><td valign='top' class='allgendaTi'>" + decodeURIComponent(evt.title.replace(/\+/g, "%20"));
  if (evt.part_cnt) {
    e += "<br /><span class='allgendaSub'>" + evt.part_cnt + "</span>";
  }
  e += "</td><td class='allgendaDt'><table><tr><td>" + this.ftDate(sD) + "</td></tr>";
  e += "<tr><td>" + this.ftDate(eD) + "</td></tr></table>";
  e += "</td></tr></table>";
  e += "</li>";
  return e;
}, loadEvents:function() {
  $.ajax({type:"POST", url:"http://www.allgenda.com", dataType:"jsonp", data:{actionId:"63", gid:this.groupId, w:1, noe:this.nbEvts}});
}, openAllgenda:function() {
  window.open("http://www.allgenda.com/?agendaView=2&agendaType=4&aId=" + this.groupId, "_blank");
}, ftDate:function(d) {
  var da = d.getDate(), m = d.getMonth() + 1, y = d.getFullYear(), h = d.getHours(), mi = d.getMinutes();
  if (m < 10) {
    m = "0" + m;
  }
  if (h < 10) {
    h = "0" + h;
  }
  if (mi < 10) {
    mi = "0" + mi;
  }
  var dt = da + "/" + m + "/" + y + " " + h + ":" + mi;
  return dt;
}};

et au cas ou le deuxième code :

Code:

<iframe style="width:100%; height:800px;" id="allgendaFrame"></iframe>  <script>
  $("#allgendaFrame").attr("src","http://www.allgenda.com");
</script>

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[alain83340]

Merci, et puisqu'il faut le faire, sujet toujours non résolu et sans réponse...

[Neptunia]

Bonjour ^^


Solution non testée :

Essayez de supprimer le <br /> de la ligne 18 du script.

[alain83340]

Bonjour,
Merci je viens de tester, cela ne change rien

[Neptunia]

Pourriez vous mettre en place tout le code actuel à un endroit où l'on peut visualiser le problème sans se connecter ?

[alain83340]

Voila je viens de l'activé pour les invités.

http://angesdechus.forum-officiel.com/

Il s'agit de la barre "prochains évènements", nous souhaiterions que les évènement s'affichent les uns a cotés des autres et non pas l'un en dessous de l'autre comme cela est le cas actuellement.

[Neptunia]

Dans le code du widget remplacez :

Code:

  #allgendaEvents li
  {
      list-style-type:none;
      clear:both;
  }

par :

Code:

  #allgendaEvents li
  {
      list-style-type:none;
      display:table-cell;
      clear:both;
  }

afin que chaque événement soit considéré comme une colonne.

Attention à bien tester sur diverses largeurs d'écran et s'il y a des ajustements à faire, il vaudra mieux attendre quelqu'un d'autre (pas du tout à l'aise avec ce type de css)

[alain83340]

Dsl mais je ne trouve pas ou mettre cela ...

Voila le code de mon widget :

Code:

<style>
  .allgendaIco
  {
      width:48px;
      heigth:48px;
      float:left;
      margin-right:3px;
  }
  .allgendaDt
  {
      font-size:8px;
      font-weight:bold;
      width:100%;
      float:right;
  }
  .allgendaSub
  {
      font-weight:normal;
      color:green;
  }
  .allgendaTi
  {
      font-weight:bold;
      width:70px;
  }
  #allgendaEvents
  {
      padding-left:0 !important;
      cursor:pointer;
  }
  #allgendaEvents li
  {
      list-style-type:none;
      clear:both;
  }
</style> <script>
  var aw = new AllgendaWidget();
</script>
<ul id="allgendaEvents" onclick="aw.openAllgenda();">
</ul><script>
aw.loadEvents();
</script>

[Neptunia]

Ce qu'il faut remplacer se trouve aux lignes 31 à 35 du code que vous venez de poster.

[alain83340]

Bjr et merci pour tout cela fonctionne.

[alain83340]

Petit changement, donc pas totalement résolu...

Que rajouter pour que les évènements dans la barre soit centrés s'ils ni en a pas assez pour la remplir ?