Javascript fonctionnel mais qui fait beuger le système de redimensionement des images

[demeter1]

Rappel du premier message :

Bonjour à tous,
Encore une demande d'aide pour du javascipt de la part d'un petit padawan dont les capacités en codage sont à dégrossir.

Donc, faisons simple, faisons bien. Mes membres m'ont demandé de leur installer un bouton sur le message étendu afin de mettre en place quelque chose qui ressemble à un tag de modération mais cette fois ci pour les membres.

J'ai réussi à installer le bouton sur le message étendu de la façon suivante :
Dans le posting-body,juste après

Code:

<button class="{BUTTON_WYSI_STYLE}" id="text_editor_cmd_switchmode" type="button"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button>&nbsp

; j'ai placé

Code:

<button class="button2" onclick="bbfontstyle(' [mod]', ' [/mod]');return false"type="button" title="deco pour membre"><img src="http://i43.servimg.com/u/f43/11/93/85/24/sans_t31.gif"/></button> 

Dans le template overall footer, j'ai placé ceci juste avant la fermeture du body

Code:

<script type="text/javascript">
    var ciklepost=document.getElementsByTagName("div");
    var sj=0;
    for (sj=0; sj<ciklepost.length; sj++){
    if (ciklepost[sj].className=="postbody"){
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace(' [mod] ', "<div style='border: 2px groove #000; padding: 1px; background: black; height: auto; -moz-border-radius:20px;  -webkit-border-radius:20px;  -khtml-border-radius:20px;  -border-radius:20px; '><img src='http://i43.servimg.com/u/f43/11/93/85/24/sans_t30.gif' style='background: transparent; margin-right: 30px; margin-top: 35px; padding-left: 6px;' align='left'><div style='background: #a4ea2c; height : 400 px; width: 500 px ;color : black; font-weight: bold; font-size:14px;'>Information importante: </div><div style='border-top: 1px dotted #000; width: 100%; padding-top: 3px;margin-bottom:10pt; '>");
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace('[/mod]', "</div></div>");
    }
    }
    </script>

Mon bidouillage a parfaitement marché pendant plusieurs jours mais à occasionné au bout d'un certain temps un dysfonctionnement du système de redimensionnement des images (disparition du réduire /agrandir et un affichage grandeur nature des images) et un centrage des images contenues dans les topics (smileys et décoration des topics).

Voyez vous dans ma manière de procéder ou dans le codage mise en place quelque chose qui entrerait en conflit avec le système de redimensionnement.
Merci par avance pour votre aide et vos réponses.

[demeter1]

up

[demeter1]

up

[Ea]

Donc vous voulez mettre ce script là qui fait bugger le redimensionnement d'image :

Code:

<script type="text/javascript">
    var ciklepost=document.getElementsByTagName("div");
    var sj=0;
    for (sj=0; sj<ciklepost.length; sj++){
    if (ciklepost[sj].className=="postbody"){
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace(' [mod] ', "<div style='border: 2px groove #000; padding: 1px; background: black; height: auto; -moz-border-radius:20px;  -webkit-border-radius:20px;  -khtml-border-radius:20px;  -border-radius:20px; '><img src='http://i43.servimg.com/u/f43/11/93/85/24/sans_t30.gif' style='background: transparent; margin-right: 30px; margin-top: 35px; padding-left: 6px;' align='left'><div style='background: #a4ea2c; height : 400 px; width: 500 px ;color : black; font-weight: bold; font-size:14px;'>Information importante: </div><div style='border-top: 1px dotted #000; width: 100%; padding-top: 3px;margin-bottom:10pt; '>");
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace('[/mod]', "</div></div>");
    }
    }
    </script>

J'imagine que l'exécuter 1 seconde après l'ouverture de la page devrait suffire :

Code:

<script type="text/javascript">
jQuery(function(){
  setTimeout(function(){
    var ciklepost=document.getElementsByTagName("div");
    var sj=0;
    for (sj=0; sj<ciklepost.length; sj++){
    if (ciklepost[sj].className=="postbody"){
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace(' [mod] ', "<div style='border: 2px groove #000; padding: 1px; background: black; height: auto; -moz-border-radius:20px;  -webkit-border-radius:20px;  -khtml-border-radius:20px;  -border-radius:20px; '><img src='http://i43.servimg.com/u/f43/11/93/85/24/sans_t30.gif' style='background: transparent; margin-right: 30px; margin-top: 35px; padding-left: 6px;' align='left'><div style='background: #a4ea2c; height : 400 px; width: 500 px ;color : black; font-weight: bold; font-size:14px;'>Information importante: </div><div style='border-top: 1px dotted #000; width: 100%; padding-top: 3px;margin-bottom:10pt; '>");
    ciklepost[sj].innerHTML=ciklepost[sj].innerHTML.replace('[/mod]', "</div></div>");
    }
    }
  },1000);
});
    </script>

Cordialement.

[demeter1]

Bonjour Etana, je viens de faire un essai mais je me heurte à un petit soucis. Avec la refonte récente du overall footer, je ne sais plus trop ou installer le script. J'ai tenté de le placer juste avant la fermeture du body dans le template overall footer begin sans sucés. Je l'ai ensuite supprimé de ce template pour l'installer dans le template overall footer end mais sans succès également.
Une petie idée pour savoir ou l'installer suite à cette refonte du template overall footer ???

[Ea]

Cela devrait marcher de tout endroit html.

Sinon le code pourrait être moins barbare, et on peut le mettre directement dans la gestion des javascript :

Code:

$(function(){
  setTimeout(function(){
      $("div.postbody").each(function(){
         $(this).html($(this).html().replace(/\[mod\]([\s\S]*?)\[\/mod\]/g,"<div style='border: 2px groove #000; padding: 1px; background: black; height: auto; -moz-border-radius:20px;  -webkit-border-radius:20px;  -khtml-border-radius:20px;  -border-radius:20px; '><img src='http://i43.servimg.com/u/f43/11/93/85/24/sans_t30.gif' style='background: transparent; margin-right: 30px; margin-top: 35px; padding-left: 6px;' align='left'><div style='background: #a4ea2c; height : 400 px; width: 500 px ;color : black; font-weight: bold; font-size:14px;'>Information importante: </div><div style='border-top: 1px dotted #000; width: 100%; padding-top: 3px;margin-bottom:10pt; '>$1</div></div>"));
    });
  },1000);
});

Cordialement.

[demeter1]

Bonjour Etana,
Merci pour tout ce mal que vous vous donnez. Le script fonctionne mais avec les mêmes soucis du départ c'est à dire : désactivation du système de redimensionnement et centrage des smileys. Désolé pour cette mauvaise nouvelle (j'ai un peu honte d'annoncer cela).

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

up

[demeter1]

Bon, j'ai fini par modifier mon javascript de façon à ce que le système de redimensionnement ne beugue pas. L'ensemble fonctionne maintenant à merveille.

Dans le css

Code:

/*############balise mod pour les membres###########*/
        #mod
        {
        border:1px double #7b9c40;
        color:white;
        font-weight:bold;
        background-color:black;
        padding:5px 10px;
        margin:10px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px ;
        border-radius:5px;
        } 

et en javascript coché sur les sujets

Code:

jQuery(document).ready(function()  {
          var divs = document.getElementsByTagName('div');
          for (i=0; i<divs.length; i++){
              if(divs[i] != null && divs[i].className == 'postbody'){   
                chaine1 = new String('[\[]mod[^[]');
                reg = new RegExp(chaine1, 'g');
                reg2 = new RegExp('[\[]/mod[^[]', 'g');
                contenu = divs[i].innerHTML;
                split = contenu.split(" ");
                nouveaucontenu = contenu.replace(reg,'<div id="mod"><img style="float:left;margin-right:7px;" src="http://i43.servimg.com/u/f43/11/93/85/24/sans_t40.gif" />  ').replace(reg2,'</div>');
                if(contenu != nouveaucontenu){
                    divs[i].innerHTML = nouveaucontenu;
                }
         
              }
          }
        });