Aide / background aléatoire header - code, astuce, css...

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Aide / background aléatoire header - code, astuce, css...

Message par papa pig Jeu 26 Oct 2017 - 16:24

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 26/10/2017
Lien du forum : bf-v21.forumactif.com/

Description du problème

Bonjour,

Grand merci à quiconque m'aidera car j'ai un "projet" sur lequel je bute. J'ai cherché diverses solutions sur le web, et ici, mais rien de "concluant". Je suis ignorant en JQuery, Javascript, etc. Et je ne sais pas si c'est faisable d'une autre façon...

Travaillant sur une nouvelle version du forum utilisant ModernBB, j'aimerais qu'un élément de background du header change aléatoirement au chargement des pages (des images différentes, photos, etc).

Pour ce faire, j'ai déjà réalisé l'intégration en travaillant les css. Comme vous le voyez, je n'ai pas touché au template, car cette solution est pour moi la dernière (soucis de mises à jour). Cela marche très bien en se servant du div #page-header qui n'est par défaut pas "utilisé" comme élément d'application de styles. Le div .headerbar restant lui mobilisé comme à son origine pour afficher un svg en cover.

Sur le div #page-header donc, j'ai appliqué un background couleur, affichant 2 images alignées à droite, dont une en png sert d'effet dégradé au-dessus de l'autre. C'est pour cela qu'elle est déclarée en premier dans la propriété ci-dessous. La taille à 33% (de large dans ce cas précis) est voulue, elle correspond à l'endroit ou le svg est "vide" (les motifs du svg allant remplir 67% de l'image en partant de la gauche). Le svg à noter, est envoyé par le div .headerbar, cela n'apparaît pas dans ce code, mais modernbb l'appplique en "natif" (l'url du svg étant concrètement renseigné dans le panneau d'admin "Image de fond de l'entête").

Code:
#page-header {
  background-image: url('https://i62.servimg.com/u/f62/19/59/59/04/fondu10.png'), url('https://i62.servimg.com/u/f62/19/59/59/04/drumme10.jpg');
  background-color: #313638;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 33%;
}
.headerbar { background-color: transparent !important; background-position: bottom center; height: 260px; }

Est-ce qu'il existe d'après vous une solution pour coder quelque chose qui permette au div #page-header d'afficher aléatoirement une image à partir bien entendu d'une liste d'url.

Pour l'exemple, voici 3 photos pouvant être utilisées à cette fin :
https://i.servimg.com/u/f62/19/59/59/04/drumme10.jpg
https://i.servimg.com/u/f62/19/59/59/04/batter11.jpg
https://i.servimg.com/u/f62/19/59/59/04/tambou10.png

Voici le lien du forum test : http://bf-v21.forumactif.com/forum


Grand grand merci ::fleur::


Dernière édition par papa pig le Dim 29 Oct 2017 - 11:15, édité 1 fois
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par papa pig Ven 27 Oct 2017 - 16:25

+24h : UP merci ::fleur::
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par Adam_sfp Sam 28 Oct 2017 - 2:06

Bonsoir

J'ai pas tout compris de ce que vous voulez faire Wink
Mais pour une image aléatoire au refresh voici une base
Code:

<img id="test" />
<script>
var image = new Array ();
image[0] = "http://via.placeholder.com/150x150";
image[1] = "http://via.placeholder.com/250x150";
image[2] = "http://via.placeholder.com/350x150";
var size = image.length
var x = Math.floor(size*Math.random())
jQuery('#test').attr('src',image[x]);

</script>

Cdt
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par papa pig Sam 28 Oct 2017 - 3:25

Merci pour votre aide. C'est vrai que quand je me relis, ça me paraît compliqué... Je vais essayer d'être plus clair et simple.

Votre solution est super pour agir sur une image. Mais dans mon cas il n'y a pas de balise <img/> dans ce fameux <div/>, les images sont affichées en background via css.

Concrètement, j'aurais besoin d'un code qui me permette, lors du refresh, d'attribuer et de changer aléatoirement une class à un <div> identifié, car j'ai vraiment besoin de laisser l'élément en background.

Exemple
Actuellement, on a ça :
Code:
<body>
  <div id="page-header">
    <div class="headerbar">
      [...]
    </div>
  </div>
</body>

J'aimerais avoir un code qui rajoute une .class aléatoire (parmi une liste) à #page-header, et grâce à ces différentes class, via les css, j'envoie un background différent à chaque refresh.

Exemple, une fois réalisé
chargement de la page :
Code:
<body>
  <div id="page-header" class="bgrd1">
    <div class="headerbar">
      [...]
    </div>
  </div>
</body>

1er refresh :
Code:
<body>
  <div id="page-header" class="bgrd3">
    <div class="headerbar">
      [...]
    </div>
  </div>
</body>

2e refresh :
Code:
<body>
  <div id="page-header" class="bgrd2">
    <div class="headerbar">
      [...]
    </div>
  </div>
</body>

3e refresh :
Code:
<body>
  <div id="page-header" class="bgrd4">
    <div class="headerbar">
      [...]
    </div>
  </div>
</body>

ETC.

Ainsi, je pourrai via les css appliquer diverses images
Code:
#page-header.bgrd1 { background-image: url('http://www.url.com/photo1.jpg'); }
#page-header.bgrd2 { background-image: url('http://www.url.com/photo2.jpg'); }
#page-header.bgrd3 { background-image: url('http://www.url.com/photo3.jpg'); }
#page-header.bgrd4 { background-image: url('http://www.url.com/photo4.jpg'); }
etc.

Précisons que pour le moment, le div "page-header" n'a pas d'attribut class, le code doit donc prévoir :
- 1. de lui attribuer une .class
- 2. de faire varier aléatoirement cette .class à chaque refresh (disons 7 images différentes seraient bien, donc d'insérer dans ce code une liste de class prédéfinies qui seront choisies aléatoirement au refresh "bgrd1 | bgrd2 |bgrd3 | bgrd4 |bgrd5 | bgrd6 | bgrd7")

Je ne sais pas si c'est plus clair comme ça ... J'aurais dû directement l'exposer comme ça mon problème en fait Surprised
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par papa pig Sam 28 Oct 2017 - 13:53

Bon, je me documente, concernant une partie de réponse,
il semblerait qu'il faille utiliser un code qui ressemble à ça pour ajouter une classe à un div identifié.
Ce qui donnerait dans mon exemple précédent :
Code:
var d = document.getElementById("page-header");
d.className += " bgrd1";
Mais je sais que ce simple morceau de code ne suffit pas, il doit être "entouré", et je ne sais pas avec quoi ...
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par Adam_sfp Sam 28 Oct 2017 - 20:53

Bonsoir

Vous pouvez garder le même script et passer par la gestion des codes javascript et utiliser la méthode
Append Prepend etc..
qui va vous permettre d'insérer l'id test
Code:
<img id="test" />
De cette manière par exemple
Code:
$(".navbar").after('<img id="test" />');
vous devez bien sur essayez en testant les différentes méthodes et d'autres id ou class de votre page ce qui correspond le mieux à ce que vous voulez faire...
Au final le code n'est pas beaucoup plus grand Wink

Code:
$("document").ready(function() {
  $(".navbar").after('<img id="test" />');
  var image = new Array;
  image[0] = "https://placeimg.com/350/100/nature/sepia";
  image[1] = "https://placeimg.com/350/100/people/sepia";
  image[2] = "https://placeimg.com/350/100/people/sepia";
  var size = image.length;
  var x = Math.floor(size * Math.random());
  jQuery("#test").attr("src", image[x]);
});

Cdt



Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par papa pig Dim 29 Oct 2017 - 0:35

Bonsoir, merci beaucoup pour cette proposition qui me servira certainement pour d'autres projets, mais dans le cas précis ça ne correspond pas à la solution. Mais merci sincèrement.
J'en profite donc pour réitérer mon souhait de base : quelqu'un sait-il comment avec un code JS attribuer une class à un div existant ? merci
Exemple :
Avant
Code:
<div id="page-header">
  <div id="contenu">
    <p> ... </p>
  </div>
</div>

Après
Code:
<div id="page-header" class="bonjour">
  <div id="contenu">
    <p> ... </p>
  </div>
</div>

Merci
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par Adam_sfp Dim 29 Oct 2017 - 8:43

Bonjour

J'ai un peu de mal à vous suivre Wink
papa pig a écrit:
Est-ce qu'il existe d'après vous une solution pour coder quelque chose qui permette au div #page-header d'afficher aléatoirement une image à partir bien entendu d'une liste d'url.
Il me semble que le code donné plus haut fait ceci....

Pour ajouter une class
Code:
.addClass( className )
.addclass

Cdt







Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide / background aléatoire header - code, astuce, css...

Message par papa pig Dim 29 Oct 2017 - 10:43

Merci @Adam_sfp de m'avoir aidé Clin d\'oeil j'ai résolu mon problème en cherchant dans des sites spécialisés comment fonctionne jquery, et quelques exemples. Il faut que je continue à me renseigner sur JS/Jquery, car dépendre trop des autres c'est assez énervant.

Le code qui solutionne mon problème, pour ceux que ça intéresse :

Code:
$(document).ready(function(){
    var classes = ["bgrd1", "bgrd2", "bgrd3", "bgrd4", "bgrd5", "bgrd6", "bgrd7"];

    $("#page-header").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

Merci pour avoir porté de l'intérêt à ma demande ok
papa pig

papa pig
***

Masculin
Messages : 195
Inscrit(e) le : 22/01/2017

http://lepetitsecargot.forumpro.fr
papa pig a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum