Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Mar 2 Mar 2021 - 12:41

6 résultats trouvés pour page-header

Headers soudainement disparus, ModernBB, JS bannières aléatoires

Hello !

Oui, pardon, je n'ai pas pensé au CSS et au template Smile Comme je l'ai dit, ça doit bien faire des années que ce JS tourne, il a été quelque peu adapté quand on est passé de PHPBB2 à ModernBB (si je me rappelle bien, il fallait juste changer le #page-header), j'utilise par ailleurs exactement le JS donné dans le tout dernier post du sujet donné ? Il fonctionnait très bien il y a une semaine, absolument rien n'a été modifié (à part l'ajout d'un JS pour un effet neige, donné , mais il est installé depuis environ le 20 décembre, donc ce ne serait pas très logique que ça ne "casse" que maintenant...De plus, les headers s'affichent chez certains mais pas chez d'autres, et ce, peu importe que ce soit Firefox ou Chrome (chez moi, les deux ne fonctionnent pas, chez certains, l'un fonctionne mais pas l'autre).

Voilà le CSS :

Code:
/* !!!!!!!! HEADER ET BANNIERES !!!!!!!! */
.headerbar {background-image: url(https://2img.net/i/fa/empty.gif); background: transparent;}

#page-header.ban1 { background-image: url('https://images2.imgbox.com/a4/87/LF60wy3V_o.jpg'); }
#page-header.ban2 { background-image: url('https://images2.imgbox.com/89/43/6pIAIHIo_o.jpg'); }
#page-header.ban3 { background-image: url('https://images2.imgbox.com/01/e2/cg9mjdY0_o.jpg'); }

#page-header {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 500px; margin: 0; overflow: hidden;
  padding: 0; position: relative; top: -7px;}

#wrap {position:relative; top: -7px;}


et au cas où, je ne sais pas si c'est nécessaire mais on ne sait jamais :

Code:
/* !!!!!!!! BARRE DE NAVIGATION !!!!!!!! */
a.mainmenu[href="/calendar"], a.mainmenu[href="/faq"] {display: none;}
a.mainmenu img{display: none;}
.navbar, .navbar a {background: transparent; font-family: unica one; text-transform:uppercase; color:var(--color-d); border-radius: 0;}
.navbar {width:50%; text-align: center;}
.navbar a:hover {background:initial; color:var(--color-e2);box-shadow:0 0 0 !important; border-bottom: 2px solid; transition:color .3s ease-out;}
.navbar li{margin:0px; padding:5px 0;}
.is-sticky .navbar {text-align:left !important;}
ul.navbar.navlinks {position: fixed; top: 0; left: 0; right: 0; margin:auto; z-index:20004 !important;}

/* !!!!!!!! TOOLBAR !!!!!!!! */
#fa_toolbar {background:var(--color-a); font-family: unica one; text-transform: uppercase; padding: 0 15px 0 0; height:35px;}
#fa_hide,#fa_share_text,#fa_fb,#fa_twitter,#fa_gp,#fa_mail,#fa_rss{display:none !important;}
#fa_search #fa_textarea {border-bottom: 1px solid var(--color-d); color: var(--color-d); opacity: .5;}
#fa_search #fa_magnifier {color:var(--color-d);}
#fa_search #fa_textarea:hover {opacity:1; transition: 1s;}
#fa_usermenu img {width:100px;}

.is-sticky#headerbar-top.w-toolbar{width:700px; margin-top:-45px; z-index:20003 !important;}
.is-sticky#headerbar-top{background:transparent; box-shadow:0 0 0 !important; margin-left:25%;}
.is-sticky#headerbar-top .wrap{width:110% !important;}

#fa_menu #fa_welcome, #fa_right a.rightHeaderLink {vertical-align: inherit; padding: 0 4px; margin-right: -10px; color: var(--color-d)!important;}
#fa_right #fa_notifications {position:relative; top:-1px;}
#fa_toolbar #fa_right #notif_list li.unread a:link{  /*lien notification*/
text-decoration:none !important; color: var(--color-d)!important; font-weight:700;}
#fa_toolbar #fa_right #notif_list li .contentText a { /*lien notification*/
  text-decoration:none !important; color: var(--color-d)!important; font-weight:700;}
#fa_toolbar #fa_right #notif_list {background: var(--color-f) !important;} /* couleur fond notifs */
#fa_toolbar #fa_right #notif_list li.unread {background: var(--color-c) !important;} /* couleur fond notifs non-lues */
#fa_toolbar #fa_right #notif_list li .content {color: var(--color-txt) !important;} /* couleur texte notifs */
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications {background: var(--color-c);} /* couleur fond oiseaux messagers */
#fa_right.welcome #fa_menu #fa_welcome {background: var(--color-c);} /* couleur fond bienvenue */
#fa_menulist {background: var(--color-c);} /* couleur fond profil toolbar */
#fa_usermenu td, #fa_ranktitle, #fa_ranktitle:hover {color: var(--color-d);} /* infos sous profil */
#fa_menulist :link, #fa_menulist :visited {color: var(--color-d)!important;} /* couleurs liens côté profil *


Et le template overall_header

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Julius+Sans+One&family=Megrim&family=Poiret+One&family=Raleway:wght@500;600;700;800;900&family=Tulpen+One&family=Six+Caps&family=Unica+One&display=swap" rel="stylesheet">  
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
      <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
      <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

   <!-- BEGIN switch_fb_login -->
      <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
      <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
      <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
      <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
      <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
      <script type="text/javascript">
         //<![CDATA[
            /* Definir le sens de direction en fonction du panneau admin */
            var tickerDirParam = "{switch_ticker.DIRECTION}";
            var slid_vert = false;
            var auto_dir = 'next';
            var h_perso = parseInt({switch_ticker.HEIGHT});

            switch( tickerDirParam )
            {
               case 'top' :
                  slid_vert = true;
                  break;

               case 'left':
                  break;

               case 'bottom':
                  slid_vert = true;
                  auto_dir = 'prev';
                  break;

               case 'right':
                  auto_dir = 'prev';
                  break;

               default:
                  slid_vert = true;
            }

            $(document).ready(function() {

               $('#fa_ticker_content').css('display','block');

               var width_max = $('ul#fa_ticker_content').width();
               var width_item = Math.floor(width_max / {switch_ticker.SIZE});

               if (width_max > 0)
               {
                  $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
                     if ($(this).width() > width_item)
                     {
                     var ratio      = $(this).width() / width_item;
                     var new_height = Math.round($(this).height() / ratio);
                     $(this).height(new_height).width(width_item);
                     }
                  });

                  if (slid_vert)
                  {
                     var height_max = h_perso;

                     $('ul#fa_ticker_content li').each( function () {
                        if ($(this).height() > height_max)
                        {
                           height_max = $(this).height();
                        }
                     } );

                     $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                     $('ul#fa_ticker_content li').height(height_max);
                  }


                  $('#fa_ticker_content').jcarousel({
                        vertical: slid_vert,
                     wrap: 'circular',
                     auto: {switch_ticker.STOP_TIME},
                     auto_direction: auto_dir,
                  scroll: 1,
                  size: {switch_ticker.SIZE},
                  height_max: height_max,
                  animation: {switch_ticker.SPEED}
                  });
               }
               else
               {
                  $('ul#fa_ticker_content li:not(:first)').css('display','none');
                  $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
               }
            });
         //]]>
      </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
      $(document).ready(function(){
         <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            if(pm != null) { pm.focus(); }
         <!-- END switch_enable_pm_popup -->
         <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if(report != null) { report.focus(); }
         <!-- END switch_report_popup -->
         <!-- BEGIN switch_ticker -->
            $(document).ready(function() {
               Ticker.start({
                  height : {switch_ticker.HEIGHT},
                  spacing : {switch_ticker.SPACING},
                  speed : {switch_ticker.SPEED},
                  direction : '{switch_ticker.DIRECTION}',
                  pause : {switch_ticker.STOP_TIME}
               });
            });
         <!-- END switch_ticker -->
      });

      <!-- BEGIN switch_login_popup -->
            var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

            $(document).ready( function() {
                $(window).resize(function() {
                    var windowWidth = document.documentElement.clientWidth;
                    var popupWidth = $("#login_popup").width();
                    var mypopup = $("#login_popup");

                    $("#login_popup").css({
                        "left": windowWidth/2 - popupWidth/2
                    });
                });
            });
      <!-- END switch_login_popup -->
      //]]>
   </script>

   {GREETING_POPUP}

   <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
         display: block !important;
      }

      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
         display: inline !important;
      }

      <!-- BEGIN switch_ticker_new -->
      .jcarousel-skin-tango .jcarousel-item {
         text-align:center;
         width: 10px;
      }

      .jcarousel-skin-tango .jcarousel-item-horizontal {
         margin-right: {switch_ticker.SPACING}px;
      }

      .jcarousel-skin-tango .jcarousel-item-vertical {
         margin-bottom: {switch_ticker.SPACING}px;
      }
      <!-- END switch_ticker_new -->
   </style>

   {HOSTING_JS}

   <!-- BEGIN google_analytics_code -->
      <script type="text/javascript">
         //<![CDATA[
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', '{G_ANALYTICS_ID}', 'auto');
                <!-- BEGIN google_analytics_code_bis -->
                ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
                <!-- END google_analytics_code_bis -->
                ga('send', 'pageview');
                <!-- BEGIN google_analytics_code_bis -->
                ga('bis.send', 'pageview');
                <!-- END google_analytics_code_bis -->
               ga('set', 'anonymizeIp', true);
            <!-- BEGIN google_analytics_code_bis -->
            ga('bis.set', 'anonymizeIp', true);
            <!-- END google_analytics_code_bis -->
            //]]>
      </script>
   <!-- END google_analytics_code -->

   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
   <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>

<body id="modernbb">
   <!-- BEGIN hitskin_preview -->
      <div id="hitskin_preview" style="display: block;">
         <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
         <div class="content">
            <p>
               {hitskin_preview.L_THEME_SITE_PREVIEW}
               <br />
               <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
            </p>

         </div>
      </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
      <div id="login_popup" style="z-index: 10000 !important;">
         <div class="h3">{SITENAME}</div>
            <div id="login_popup_message">
                {LOGIN_POPUP_MSG}
            </div>
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button1" value="{L_LOGIN}" />
               <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>
   {JAVASCRIPT}

<div id="page-header">
  <div class="headerbar" style="cursor: pointer;" onclick="window.location='https://www.the-hundred.org/';">
         <div id="headerbar-top">
            <div class="wrap">
               <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            </div>
         </div>
      </div>
  <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
                  <li>{GENERATED_NAV_BAR}</li>
               </ul>

      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
         <div class="module">
            <div class="inner">
               <div id="fa_ticker_container">
                  <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                     <!-- BEGIN ticker_row -->
                     <li>{switch_ticker.ticker_row.ELEMENT}</li>
                     <!-- END ticker_row -->
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <!-- END switch_ticker_new -->
   </div>

   <div class="conteneur_minwidth_IE">
   <div class="conteneur_layout_IE">
   <div class="conteneur_container_IE">
   <div id="wrap">
      <div id="page-body">

         <!-- BEGIN switch_ticker -->
         <div id="fa_ticker_block" style="margin-top:4px;">
            <div class="module">
               <div class="inner">
                  <div id="fa_ticker_container">
                     <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                        <div class="fa_ticker_content">
                           <!-- BEGIN ticker_row -->
                           <div>{switch_ticker.ticker_row.ELEMENT}</div>
                           <!-- END ticker_row -->
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- END switch_ticker -->

         <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
            <div id="outer-wrapper">
               <div id="wrapper">
                  <div id="{ID_LEFT}">
                     <!-- BEGIN giefmod_index1 -->
                        {giefmod_index1.MODVAR}
                        <!-- BEGIN saut -->
                           <div style="height:{SPACE_ROW}px"></div>
                        <!-- END saut -->
                     <!-- END giefmod_index1 -->
                  </div>

                  <div id="container">
                     <div id="content-main">
                        <div id="main">
                           <div id="main-content">



Merci d'avance !
par Electric Soul
le Dim 10 Jan 2021 - 21:23
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Headers soudainement disparus, ModernBB, JS bannières aléatoires
Réponses: 7
Vues: 360

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

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







par Adam_sfp
le Dim 29 Oct 2017 - 8:43
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Aide / background aléatoire header - code, astuce, css...
Réponses: 8
Vues: 1061

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

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
par papa pig
le Sam 28 Oct 2017 - 3:25
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Aide / background aléatoire header - code, astuce, css...
Réponses: 8
Vues: 1061

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

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:
Tag page-header sur Forum gratuit : Le forum des forums actifs Captur10

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::
par papa pig
le Jeu 26 Oct 2017 - 16:24
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Aide / background aléatoire header - code, astuce, css...
Réponses: 8
Vues: 1061

A propos de la déclaration de fonction JS

Bonjour Ast,

1. Cette déclaration est courte pour jQuery's $(document).ready(); fonction.

Par exemple :

cette provoque une erreur, parce que "#page-header" est pas encore disponible :
Code:
var header = document.getElementById('page-header'); // null
header.innerHTML = 'New Content'; // Uncaught TypeError: Cannot set property 'innerHTML' of null


cette exécute bien ( sur version phpbb3 >.> ) :
Code:
$(function() {
  var header = document.getElementById('page-header'); // <div id="page-header">...</div>
  header.innerHTML = 'New Content'; // "New Content"
});


Voir : https://learn.jquery.com/using-jquery-core/document-ready/ ( en anglais )


2. Cette déclaration est un "fonction invocable", il exécute le code lorsqu'il est invoqué.

Par exemple :

déclaration de la fonction :
Code:
// define function
function hello (nom) {
  alert('Hello ' + ( nom ? nom : 'world' ) + ' !');
};


invoquant la fonction :
Code:
// call function
hello(); // Hello world !
hello('Ast'); // Hello Ast !
hello('Ange') // Hello Ange !


Il est bon d'invoquer la même fonction à plusieurs reprises.


3. Cette déclaration est un "IIFE" ( Immediately Invoked Function Expression, en Anglais ). Il est utilisé pour invoquer immédiatement une fonction.

Par exemple :

assignant d'une valeur :
Code:
// assigning a value immediately by using a function
var lucky_numbers = (function() {
  var randomArray = [],
  i = 0;

  for (; i < 5; i++) {
    randomArray.push( Math.floor( Math.random() * 10 ) );
  }

  return randomArray;
}());

console.log(lucky_numbers); // [7, 2, 2, 4, 2]


une fonction anonyme :
Code:
// anonymous function
(function(head) {
  var stylesheet = 'URL';

  head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="' + stylesheet + '"/>');

}(document.getElementsByTagName('HEAD')[0]));


Voir : https://developer.mozilla.org/fr/docs/Web/JavaScript/Une_r%C3%A9introduction_%C3%A0_JavaScript#Les_fonctions ( pour 2 et 3 )


Je recommande d'utiliser la première déclaration des modifications générales.

Bonne journée. ::fleur::

Excusez mon Français svp. Je suis Anglais. edente
par Ange Tuteur
le Jeu 11 Aoû 2016 - 16:00
 
Rechercher dans: Archives des problèmes avec un code
Sujet: A propos de la déclaration de fonction JS
Réponses: 2
Vues: 402

Dissocier les notifications de la toolbar

Bonjour Horus (pardon) Embarassed

Alors pour la version mobile c'est sûrement possible (je vous avoue que franchement je n'ai pas cherché sur ce sujet Neutral ) mais je suis sûr que si un sujet est ouvert il sera suivis de près par les plus performants d'entre nous peut-être grandes oreilles ou Ea ou d'autres moi je ne pense pas avoir la capacité pas cette prétention,faut pas hésiter Smile
Pour ce qui est du sélecteur pour le lien de notifications en effet c'est bien cette partie:
Code:
insertBefore('#page-body')

Mais qui pourrait tout aussi bien afficher "après" et donc s'écrire:
Code:
insertAfter('#page-body')

Je vais essayer de vous expliquer avec mes mots: lorsque je dis qu'il faut un sélecteur unique c'est à dire que si l'on reprend l'exemple que j'ai donné plus haut à savoir l'id {#}page-body{/#} cet id n'est présent qu'une seule fois dans les page il n'en existe qu'un seul avec ses copines :
{#}page-header{/#} et {#}page-footer{/#},donc si je met cet exemple dans mon code imaginons:
Code:
insertBefore('[id^="#page"]')

Voudrais dire que l'on insert le lien des notifications avant tout les id commençants par {#}page{/#} et donc c'est pour cela que l'on je parle de bien choisir un sélecteur unique cela peut être un lien dans la barre de navigation aussi ,on pourrait en prendre d'autres comme exemples Wink

Si problème pour vous pour trouver (ce que je n'espère pas c'est toujours plus cool de savoir le faire) vous pouvez nous dire l'emplacement que vous désirez ^^ un grand merci pour la class Horus c'est plutôt moi qui devrait vous remercier,pour tout Wink
En espérant que j'ai été pas trop brouillon ...
par Invité
le Lun 11 Avr 2016 - 9:52
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Dissocier les notifications de la toolbar
Réponses: 29
Vues: 2732

Revenir en haut

Sauter vers: