Est-il possible de créer un widget horloge affichant du texte a certaines heures.

[Rayah]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : ce n'est pas réellement un problème en fait
Lien du forum : http://pommenostale.forumactif.com/

Description du problème

Bonjour à toutes et à tous,

Nouvelle sur le site et accessoirement dans la création de forum je m'excuse d'avance si mon post est hors sujet ou dans une mauvaise section.

Je souhaiterais donc savoir s'il est possible d'avoir une horloge avec l'image de notre choix qui a certaines heures et pendant un certain laps de temps afficherait du texte.

En vous remerciant.

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif


Mettre une horloge : possible
Avec aucun texte, ou un certain texte à certaines heures : possible mais ...

... ce n'est faisable qu'avec du javascript, hors le javascript ce n'est pas le forum qui l'exécute mais le visiteur.

Et donc les heures d'affichage ne dépendraient pas de ce que vous avez choisi, mais de ce que l'utilisateur a choisi.

Prenons l'exemple que vous annonciez entre 21h et 22h en Belgique qu'il y a une soirée chatbox, un membre québécois aura le message à 3h du matin (21h chez lui) soit 5 heures après la fin de la soirée annoncée.

[Rayah]

Bonjour et merci de votre réponse rapide, " normalement " le problème de décalage horaire ne devrait pas avoir lieu mais merci de votre précision.
J'aimerais installer une horloge qui effectivement annonce des événements dans la journée, pouvez m'en dire d'avantage sur le code javascript de celui ci s'il vous plait ?

[Neptunia]

Problème apparu depuis : ce n'est pas réellement un problème en fait

Comme vous disiez ne pas avoir réellement de problème, je vous répondrais ne pas avoir de réelle solution

Je souhaiterais donc savoir s'il est possible d'avoir une horloge avec l'image de notre choix qui a certaines heures et pendant un certain laps de temps afficherait du texte.

Je me suis bornée à répondre à la question posée, à savoir la faisabilité.

Je ne vous proposerais pas davantage puisque je ne pourrais au mieux que coder la partie variable en fonction de l'heure, je suis d'ailleurs en train de plancher sur le sujet dans un autre objectif.

Je vous invite à remonter votre sujet régulièrement, une fois au maximum toutes les 24 heures, et une fois au minimum tous les 7 jours. Jusqu'à obtenir l'aide nécessaire.

[Adam_sfp]

Bonsoir @Rayah & @Neptunia

Pour l'horloge si j'ai bien compris elle est toujours visible .
Et ensuite on peut afficher une div à partir d'une certaine heure ou de plusieurs tranches horaires..

Une petite piste pour @Neptunia

Code:

<div class="onafficheoupas" style="display:none">
  <p>allez on affiche</p>
</div>
<script>
window.setInterval(function() {

  var neptunia = new Date();
  var rayah = new Date("November 30, 2017 13:13:13")

  if (neptunia.getTime() < rayah.getTime()) {
    jQuery('.onafficheoupas').hide();

  } else if (neptunia.getTime() > rayah.getTime()) {
    jQuery('.onafficheoupas').show();
  }

}, 1000);
</script>



Cdt.

[Rayah]

J'avoue que je suis perdue là, je suppose que je dois recopier les lignes et modifier deux ou trois choses afin de parvenir a avoir une horloge avec le " design " de mon choix et les events par heures ?

[Adam_sfp]

Bonsoir


Ah la en modifiant 2 ou 3 choses dans le code avoir une horloge design ça va être dur

Il y a plusieurs manière de faire ce que vous voulez faire..

il faudrait aussi un peu plus d'infos..
Déjà vous avez votre horloge?
une horloge avec des aiguilles ou un affichage digitale?
il faudrait que cela change combien de fois sur 24h?


Le code du dessus est juste un petit exemple que vous pouvez tester en page d'accueil
il affichera demain à partir de 13:13:13 cette div

Code:

<div class="onafficheoupas" style="display:none">
  <p>allez on affiche</p>
</div>

Donc dans ce cas du texte on verra donc

Code:

allez on affiche

mais vous pouvez mettre ce que vous voulez dans cette div des images etc...

Cdt.

[Rayah]

En fait fût un temps j'avais fais une demande d'horloge sur le forum ( géniale accessoirement ), le problème étant que depuis je ne gère plus l'ancien forum et visiblement il n'existe plus donc pas de moyen de récupérer les codes.
Il me semble d'après mes souvenirs que c'était simplement un changement de skin pour afficher ce que je voulais.
L'horloge indiquait un événement 7j/7j de 14h à 15h30, de 15h30 à 16h, de 16h à 16h30, de 16h30 à 17h, de 17h30 à 18h et de 19h à 20h30, de 20h30 à 21h, de 21h à 21h30, de 21h à 22h30.

Ps: Actuellement je n'ai plus rien :/

[Neptunia]

Bonjour Adam_sfp

Et ensuite on peut afficher une div à partir d'une certaine heure ou de plusieurs tranches horaires..

Une petite piste pour @Neptunia

En fait s'il s'agit d'afficher un contenu entre l'heure X et l'heure Y, du moment que je connais les valeurs de X et Y ça ne devrait pas me poser de problème majeur.
Là où ça se corse un peu, c'est que je souhaite ne pas connaître ces valeurs X et Y et permettre à (presque) n'importe qui de choisir et d'indiquer son choix facilement.

Et comme ce qui me manque le plus n'est pas le temps, mais des plages étendues de temps où je serai à mon maximum de concentration, j'en suis encore à réfléchir à tous les scenarii possibles :
- le gars qui fait finir le jour avant qu'il n'ait commencé
- Celui qui veut le spectacle en journée alors que je pars sur l'idée que c'est la nuit que les lumières sont les plus belles
- Celui qui ne veut pas choisir et veut le code nocturne 24h/24
- Le vampire qui craint la lumière et veut au contraire le code "statique" de jour comme de nuit
- Celui qui choisit le couvre feu à minuit et choisit 24 alors que les heures ne vont que de 0 à 23

- Autre contrainte sur laquelle je n'ai pas encore planché (et je pense même qu'il se pourrait que je vois une contrainte là où il n'y en a pas) : je souhaite intégrer les 2 variables non pas dans le script à exécuter mais dans un autre javascript d'appel très court (on définit les 2 variables et on appelle le script principal)

En fait fût un temps j'avais fais une demande d'horloge sur le forum ( géniale accessoirement ), le problème étant que depuis je ne gère plus l'ancien forum et visiblement il n'existe plus donc pas de moyen de récupérer les codes.
Il me semble d'après mes souvenirs que c'était simplement un changement de skin pour afficher ce que je voulais.

Si c'était une horloge commandée en section graphique, vous pouvez oublier parce que c'était du flash. Hors aujourd'hui la plupart des navigateurs bloquent le flash et demandent explicitement de l'activer s'ils tombent sur une page avec un tel contenu. Pas très pratique.

En revanche s'il s'agissait de javascript (et/ou jQuery) si vous aviez pensé à l'époque à passer le sujet en résolu, le code devrait être encore sur le forum.
Si c'était vous et que vous avez supprimé votre compte, ça va être dur de le retrouver au milieu de tous les sujets avec Invité pour auteur.
Si c'était vous sous un autre pseudo (c'est pas bien, les doubles comptes ne sont pas autorisés ici) ça sera retrouvé en un rien de temps à condition que vous n'ayez pas ouvert 36000 sujets.

---

J'ai trouvé un tuto très bien fait pour créer une horloge à partir de presque rien
developpez.com - Une horloge en CSS3
Tuto relativement récent (4 ans) et fonctionnel quoique perfectible

On peut voir sur la page du tuto que les puces représentant les heures sont remplacées par #8226
Dans le CSS fourni, remplacer

Code:

.sep:after{
    content: '•';
}

par :

Code:

.sep:after{
    content: "\ \2022";
}

Et pour le positionnement des repères horaires, la propriété transform est préfixée pour Opera -o- alors que ce navigateur utilise le préfixe -webkit- et n'était pas compatible dans sa vie antérieure. Là c'est pas gênant puisque les 12 lignes seront simplement ignorées.

Voici le rendu original obtenu à la fin du chapitre III : ICI

Ce que j'ai obtenu en réduisant la taille : Chez moi

Le code utilisé, à placer partout où Javascript et HTML sont autorisés : widget, message de la page d'accueil, description de catégorie, ou page HTML dans mon cas.

Code:

<style>
#horloge{
    height: 200px;
    margin: 40px auto;
    position: relative;
    width: 200px;
    border: 5px solid #3A5486;
    border-radius: 50%;
    background: url(http://www.developpez.net/template/images/logo.png) no-repeat scroll center 25% #FFFFFF;
    box-shadow: 0 0 40px #8080A0, 0 0 50px 10px #CCCCCC inset;
}
#horloge:before{
    border-radius: 50%;
    box-shadow: -2px -2px 5px #000000 inset, -2px 2px 5px #000000 inset, 2px -2px 5px #000000 inset, 2px 2px 5px #000000 inset;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#seconde{
    left: 99px;
    top: 12px;
    height: 90px;
    border: 2px solid rgba( 110,150,180,0.8);
    -webkit-animation: tour 60s steps(60, end) infinite;
    -webkit-transform-origin: 50% 87px;
    -o-animation: tour 60s steps(60, end) infinite;
    -o-transform-origin: 50% 87px;
    animation: tour 60s steps(60, end) infinite;
    transform-origin: 50% 87px;
}
#minute{
    left: 98px;
    top: 27px;
    height: 75px;
    border: 4px solid rgba( 80,150,200,0.8);
    -webkit-animation: tour 3600s steps(60, end) infinite;
    -webkit-transform-origin: 50% 72px;
    -o-animation: tour 3600s steps(60, end) infinite;
    -o-transform-origin: 50% 72px;
    animation: tour 3600s steps(60, end) infinite;
    transform-origin: 50% 72px;
}
#heure{
    left: 97px;
    top: 50px;
    height: 50px;
    border: 6px solid rgba( 10,50,128,0.8);
    -webkit-animation: tour 43200s linear infinite;
    -webkit-transform-origin: 50% 50px;
    -o-animation: tour 43200s linear infinite;
    -o-transform-origin: 50% 50px;
    animation: tour 43200s linear infinite;
    transform-origin: 50% 50px;
}
#centre{
    left: 97px;
    top: 97px;
    border: 6px solid rgba(255,255,255,0.6);
}
.rond, .sep{
    position: absolute;
    border-radius: 50%;
}
.sep{
    height: 5px;
    width: 5px;
    text-align: center;
    line-height: 5px;
    top: 97px;
    left: 97px;
    color: #3A5486;
}
.sep:after{
    content: "\ \2022";
}
#h0{
    -webkit-transform: translate(0px, -95px);
    -o-transform: translate(0px, -95px);
    transform: translate(0px, -95px);
}
#h1{
    -webkit-transform: rotate(30deg) translate(0px, -95px);
    -o-transform: rotate(30deg) translate(0px, -95px);
    transform: rotate(30deg) translate(0px, -95px);
}
#h2{
    -webkit-transform: rotate(60deg) translate(0px, -95px);
    -o-transform: rotate(60deg) translate(0px, -95px);
    transform: rotate(60deg) translate(0px, -95px);
}
#h3{
    -webkit-transform: rotate(90deg) translate(0px, -95px);
    -o-transform: rotate(90deg) translate(0px, -95px);
    transform: rotate(90deg) translate(0px, -95px);
}
#h4{
    -webkit-transform: rotate(120deg) translate(0px, -95px);
    -o-transform: rotate(120deg) translate(0px, -95px);
    transform: rotate(120deg) translate(0px, -95px);
}
#h5{
    -webkit-transform: rotate(150deg) translate(0px, -95px);
    -o-transform: rotate(150deg) translate(0px, -95px);
    transform: rotate(150deg) translate(0px, -95px);
}
#h6{
    -webkit-transform: rotate(180deg) translate(0px, -95px);
    -o-transform: rotate(180deg) translate(0px, -95px);
    transform: rotate(180deg) translate(0px, -95px);
}
#h7{
    -webkit-transform: rotate(210deg) translate(0px, -95px);
    -o-transform: rotate(210deg) translate(0px, -95px);
    transform: rotate(210deg) translate(0px, -95px);
}
#h8{
    -webkit-transform: rotate(240deg) translate(0px, -95px);
    -o-transform: rotate(240deg) translate(0px, -95px);
    transform: rotate(240deg) translate(0px, -95px);
}
#h9{
    -webkit-transform: rotate(270deg) translate(0px, -95px);
    -o-transform: rotate(270deg) translate(0px, -95px);
    transform: rotate(270deg) translate(0px, -95px);
}
#h10{
    -webkit-transform: rotate(300deg) translate(0px, -95px);
    -o-transform: rotate(300deg) translate(0px, -95px);
    transform: rotate(300deg) translate(0px, -95px);
}
#h11{
    -webkit-transform: rotate(330deg) translate(0px, -95px);
    -o-transform: rotate(330deg) translate(0px, -95px);
    transform: rotate(330deg) translate(0px, -95px);
}
@-webkit-keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-o-keyframes tour{
    from{
        -o-transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
    }
}
@keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>
<div id="horloge">
            
 <div class="rond" id="heure">
      
 </div>
            
 <div class="rond" id="minute">
      
 </div>
            
 <div class="rond" id="seconde">
      
 </div>
            
 <div class="rond" id="centre">
      
 </div>
            
 <div id="h0" class="sep">
      
 </div>
            
 <div id="h1" class="sep">
      
 </div>
            
 <div id="h2" class="sep">
      
 </div>
            
 <div id="h3" class="sep">
      
 </div>
            
 <div id="h4" class="sep">
      
 </div>
            
 <div id="h5" class="sep">
      
 </div>
            
 <div id="h6" class="sep">
      
 </div>
            
 <div id="h7" class="sep">
      
 </div>
            
 <div id="h8" class="sep">
      
 </div>
            
 <div id="h9" class="sep">
      
 </div>
            
 <div id="h10" class="sep">
      
 </div>
            
 <div id="h11" class="sep">
      
 </div>
</div><script>
var tt = new Date();
document.getElementById('seconde').style.webkitAnimationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.webkitAnimationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.OAnimationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('seconde').style.OAnimationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.OAnimationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.webkitAnimationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('seconde').style.animationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.animationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.animationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
</script>

Note 1 : Ce code est celui fourni à la fin du chapitre III et ne prend pas en compte la gestion des navigateurs antédiluviens. D'après le tuto, fonctionne sur tout navigateur  courant à l'exclusion d'Internet Explorer 9 (et inférieur). Testé sous IE11 et fonctionnel.

Note 2 : Dans le code fourni j'ai raccourci tout ce qui pouvait l'être depuis le code, aiguilles, contour de l'horloge ... mais pas l'image de fond que j'ai eu la flemme de changer.
La première chose à faire sera d'ailleurs de trouver une image qui vous convienne, parce que de nombreuses lignes du code utilisent des dimensions en pixel. Il faut connaître la taille de l'horloge avant d'y installer les aiguilles.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 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 archivé afin de ne pas perdre les réponses apportées par les différents intervenants