Afficher/Masquer Widgets mais ne redimensionne pas le forum

[xDream's]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Tous
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 30/04/2020
Lien du forum : https://alternativeapi.forumactif.com/

Description du problème

Bonjour,

Suite au tutoriel de Threax pour Afficher / masquer les widgets du forum, je l'ai appliqué sur mon forum afin que les membres décident eux même.
Cela fonctionne bien, mais le forum ne se redimensionne pas, du coup cela laisse un espace blanc qui est quelque peu indésirable.
J'ai essayé de modifier légèrement le code javascript, mais cela ne rendais vraiment pas bien. Même plutôt une catastrophe à vrai dire.

Voici le code :

Code:

$(function() {
  var c = $("#left,#right"), d, e = function(a) {
    var a = a.direct ? 0 : 1E3, b = $(this).data("side");
    window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
    $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
    $(this).toggleClass("isopened isclosed")
  };
  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
    $(this).find("script").remove();
    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
    "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
    b.data("side", a).appendTo(d).click(e);
    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
  }))
});

Avec le css :

Code:

#widget-arrows {
  height: 13px;
}
.widget-arrow {
  height: 13px;
  width: 16px;
  border-radius: 4px;
  float: left;
  cursor: pointer;
  background: #f5ebf7 url(https://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
}
.widget-arrow.isright {
  float: right;
}
.widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
  background-position: 0 0;
}


Si vous avez une solution, je suis preneur

Merci d'avance pour vos réponses.

[xDream's]

Je me permet de UP.

Toujours à la recherche d'une solution

[xDream's]

Petit up :/

[xDream's]

Un up :/

[xDream's]

Hello

Toujours en quête de solution !

[mSyx]

Yosh,
Je suis pas du tout un expert en JS, loin de là, mais j'ai réussi à me débrouiller quand même. C'est un peu moins rapide à installer par conséquent :b

Dans le template overall_footer_begin, trouve la ligne:

Code:

<div id="{ID_RIGHT}">

Remplace-la par:

Code:

<div id="{ID_RIGHT}">
<script>$("#content-container").prepend('<div id="widget-arrows"><div style="clear:both"></div><div class="widget-arrow"></div></div>');
  $("#left,#right").addClass('isopened');
  
  if ( $("#left").length ) {
    $(".widget-arrow").addClass('isleft');
  }
  else {
    $(".widget-arrow").addClass('isright');
  }
  var $toggle1 = $("#left,#right");
  var $toggle2 = $('#content-container #container');

$('.widget-arrow').on('click', function() {
    $toggle1.toggleClass('isopened isclosed');
    $toggle2.toggleClass('remove-marginright');
    localStorage.setItem('sidestate', $toggle1.hasClass('isclosed'));
});

if (localStorage.getItem('sidestate') === 'true') {
    $toggle1.addClass('isclosed');
    $toggle1.removeClass('isopened');
    $toggle2.addClass('remove-marginright');
}</script>

Dans le CSS, ajoute:

Code:

.remove-marginright {margin-right: 0 !important;}
#left, #right {overflow: hidden;}
.isclosed {width: 0 !important;}

Essaies comme ça.
Si jamais le code ne fonctionne pas du tout, vas dans le template overall_header et trouve:

Code:

{CSS}

Juste après, rajoute la ligne suivante:

Code:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"

[xDream's]

Merci infiniment !
Cela fonctionne du tonnere

Problème résolu !