Bonjour,
Voilà, après pas mal de recherche et d'essai. Je suis bloqué.
Mais connaissance en code sont très faible. Un peu le php et html mais c'était il y a 10 ans, depuis j'ai pas mal oublié.
J'essaye de modifier un script qui créer une barre de don ou objectif.
Voici un exemple d'une barre qui fonctionne : https://streamlabs.com/widgets/follower-goal?token=A13E6E3CA94AE5E3AD78
Cette barre es crée depuis le site streamlabs mais il manque une option, la taille du texte.
J'ai donc créer/modifié un script mais je bloque.
Le site propose de créer la barre via du html css et js.
Le script js de base es le suivant :
Ensuite le css (je l'ai modifier pour y ajouter les styles couleur et autres):
et pour finir le html :
Le problème avec ceci es que la barre verte n'apparaît pas (seul les texte et le fond gris sont bon)
Je n'arrive a définir le "width" dans la class "donation-bar condensed__bar".
Et en plus le width doit être calculé car c'est un pourcentage. (je joint ce que çà donne)
https://i62.servimg.com/u/f62/15/44/46/49/exempl13.png
Cordialement
Jérôme
Modifié par Jerome87 (14 Mar 2018 - 21:34)
Voilà, après pas mal de recherche et d'essai. Je suis bloqué.
Mais connaissance en code sont très faible. Un peu le php et html mais c'était il y a 10 ans, depuis j'ai pas mal oublié.
J'essaye de modifier un script qui créer une barre de don ou objectif.
Voici un exemple d'une barre qui fonctionne : https://streamlabs.com/widgets/follower-goal?token=A13E6E3CA94AE5E3AD78
Cette barre es crée depuis le site streamlabs mais il manque une option, la taille du texte.
J'ai donc créer/modifié un script mais je bloque.
Le site propose de créer la barre via du html css et js.
Le script js de base es le suivant :
document.addEventListener('goalLoad', function(obj) {
// obj.detail will contain information about the current goal
// this will fire only once when the widget loads
console.log(obj.detail);
$('#title').html(obj.detail.title);
$('#goal-current').text(obj.detail.amount.current);
$('#goal-total').text(obj.detail.amount.target);
$('#goal-end-date').text(obj.detail.to_go.ends_at);
});
document.addEventListener('goalEvent', function(obj) {
// obj.detail will contain information about the goal
console.log(obj.detail);
$('#goal-current').text(obj.detail.amount.current);
});
Ensuite le css (je l'ai modifier pour y ajouter les styles couleur et autres):
/* All html objects will be wrapped in the #wrap div */
element.style {
height: 96px;
background: rgb(221, 221, 221);
}
.condensed__container {
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 0 1px #222;
}
.condensed__current__amount, .condensed__amount, .condensed__title {
color: #B00000;
font-style: normal;
font-variant: normal;
font-weight: 800;
font-stretch: normal;
font-size: 45px;
line-height: 96px;
font-family: "Open Sans";
}
user agent stylesheet
div {
display: block;
}
et pour finir le html :
<div id="sl__donation__goal">
<div>
<div style="padding: 10px 10px;">
<div class="condensed__container" style="height: 96px; background: rgb(221, 221, 221);">
<div class="condensed__current__amount">
<span id='goal-current'></span>
<div class="condensed__title">
<div id='title'></div>
</div>
<div class="condensed__amount">
<span id='goal-total'></span>
</div>
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; box-shadow: rgb(0, 0, 0) 0px 0px 2px inset;"></div>
<div class="donation-bar condensed__bar" style="background: linear-gradient(transparent, rgba(0, 0, 0, 0.15)) rgb(70, 230, 90);"></div>
</div>
</div>
</div>
</div>
Le problème avec ceci es que la barre verte n'apparaît pas (seul les texte et le fond gris sont bon)
Je n'arrive a définir le "width" dans la class "donation-bar condensed__bar".
Et en plus le width doit être calculé car c'est un pourcentage. (je joint ce que çà donne)
https://i62.servimg.com/u/f62/15/44/46/49/exempl13.png
Cordialement
Jérôme
Modifié par Jerome87 (14 Mar 2018 - 21:34)