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

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.

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

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é là, 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" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.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>  <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>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE}  <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>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" /> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <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>  <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if(pm != null) { pm.focus(); }   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(); }   $(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} }); });  });  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 }); }); });  //]]> </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; }  .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; }  </style> {HOSTING_JS}  <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');  ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');  ga('send', 'pageview');  ga('bis.send', 'pageview');  ga('set', 'anonymizeIp', true);  ga('bis.set', 'anonymizeIp', true);  //]]> </script>  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&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">  <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>   <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>  <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>  <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">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </div> </div> </div>  </div> <div class="conteneur_minwidth_IE"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <div id="page-body">  <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">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="container"> <div id="content-main"> <div id="main"> <div id="main-content">

Merci d'avance !

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.

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 !

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.

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: