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

2 participants

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

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

Message par Electric Soul Dim 10 Jan 2021 - 15:54

Détails techniques

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

Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : Quelques jours
Lien du forum : https://www.the-hundred.org/

Description du problème

Bien le bonjour !

Je viens vous exposer un problème rencontré depuis quelques jours par moi-même et plusieurs de nos membres.

Nous avons un JS de bannières changeantes aléatoires sur le forum, installé depuis des années sans qu'il ne pose aucun souci. Depuis quelques jours, les headers ont soudain disparus, ne s'affichent plus. Même en mettant un logo via la gestion d'images du panneau d'admin, le forum colle à la barre de navigation. J'ai tenté de désactiver le JS, pas de résultat. Changé de JS, pas de résultat non plus.

Nous n'avons effectué aucun changement dans les codes, la disparition a été soudaine. Elle a commencé sur Firefox pour moi, mais plusieurs membres disent désormais que le problème s'est étendu à Chrome, en version mobile également.

Notre code JS :

Code:
$(document).ready(function(){
    var classes = ["ban1", "ban2", "ban3"];
 
    $("#page-header").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

En espérant que quelqu'un puisse trouver la solution ! Merci d'avance et bonne journée.
Electric Soul

Electric Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 03/12/2019

https://www.the-hundred.org/
Electric Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par *Splash* Dim 10 Jan 2021 - 17:12

Salut
Est-il possible d'avoir le code complet (JS, CSS, etc...) afin de voir ce qui cloche ?

Et je doute que l'URL du forum donnée soit un forum en version ModernBB

Voici l'URL d'un sujet concernant un header aléatoire : https://forum.forumactif.com/t395736-image-en-tete-aleatoire-modernbb#3310214
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par Electric Soul Dim 10 Jan 2021 - 21:23

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 !
Electric Soul

Electric Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 03/12/2019

https://www.the-hundred.org/
Electric Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par *Splash* Dim 10 Jan 2021 - 21:35

C'est étonnant tous ces problèmes de navigateur avec FA.
Si tu n'as absolument rien modifié de ton côté il n'y a aucune raison que cela ne fonctionne plus, sauf si une mise à jour est venu perturber le fonctionnement.
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par Electric Soul Dim 10 Jan 2021 - 21:44

Merci quand même !

On me souffle dans l'oreillette qu'apparemment, il y aurait eu une MAJ FA sur ModernBB introduisant le flexbox, et plusieurs admins auraient des problèmes de design, par conséquent...donc j'imagine qu'il faudra juste...attendre, si pas carrément tout modifier ? ^^'

Enfin...merci d'avoir tenté de me donner un coup de main =) Bonne soirée !
Electric Soul

Electric Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 03/12/2019

https://www.the-hundred.org/
Electric Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par *Splash* Dim 10 Jan 2021 - 21:59

À chaque fois qu'ils font des mises à jour il y a des problèmes par la suite.
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par Invité Lun 11 Jan 2021 - 20:09

Hello Electric Soul,

si tu ajoutes ceci dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

 body, html{height:auto!important;}

Penses à cliquer sur le bouton Headers soudainement disparus, ModernBB, JS bannières aléatoires Sans_t10

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Headers soudainement disparus, ModernBB, JS bannières aléatoires

Message par Electric Soul Lun 11 Jan 2021 - 20:55

Bonsoir Milouze14 !

Ça marche, c'est parfait, merci mille fois ! I love you Je mets en résolu cheers
Electric Soul

Electric Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 03/12/2019

https://www.the-hundred.org/
Electric Soul a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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