Problème de chevauche de l'icone des smileys

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

Résolu Problème de chevauche de l'icone des smileys

Message par SweetGumiho le Jeu 26 Fév 2015 - 11:20

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis l'utilisation de cette réponse http://forum.forumactif.com/t368138-conserver-uniquement-un-icone-sur-la-barre-d-editeur-pour-acceder-aux-smileys
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
Comme vous le voyez sur l'image après avoir suivi le tutoriel proposé par les membres de FA l'icône chevauche d'autres icônes dans la barre d'outils.

Je n'ai fait qu'ajouter dans le template post_body :


Code:
<script type="text/javascript">
  $(function(){
      $('<div class="sceditor-group slidesmile"><a class="sceditor-button sceditor-button-slidesmile" unselectable="on" title="Smiley"><div unselectable="on" style="background-image:url(http://illiweb.com/fa/i/smiles/icon_smile.gif)"></div></a></div>').insertBefore('#textarea_content').click(function(){
        $('#smiley-box').slideToggle();
      });
  });
</script>

et ce code dans ma feuille de style CSS :

Code:
}
#smiley-box{
  display:none;
}
 
.slidesmile{
  position:relative;
  top:39px; left:705px;
  z-index:4;
}

Merci d'avance pour votre réponse.


Dernière édition par SweetGumiho le Mer 4 Mar 2015 - 18:37, édité 2 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par Ange Tuteur le Jeu 26 Fév 2015 - 16:25

Bonjour SweetGumiho,

Remplacer votre codes par le script suivant :
( Panneau d'administration > Modules > Gestion des codes JavaScript > Créer un nouveau JavaScript )

Placement : Sur toutes les pages
Collez le code qui suit et valider :
Code:
$(function(){$(function(){
  if (document.getElementById('quick_reply') || !$.sceditor) return;
  var a = document.createElement('A'), b = document.getElementById('smiley-box');
  a.className = 'sceditor-button sceditor-button-emoticon';
  a.title = 'Smileys';
  a.innerHTML = '<div></div>';
  a.onclick = function() { $(b).slideToggle() };
  $('.sceditor-button-date').before(a);
})});

Bonne journée ::fleur::

Ange Tuteur
****

Masculin
Messages : 477
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par SweetGumiho le Ven 27 Fév 2015 - 11:00

Alors ça ne chevauche plus maintenant, mais en retirant tous les codes j'ai eu un problème, la boîte de smileys et le texte en dessus apparaissait en plus.


Du coup j'ai remis le CSS, mais là où ils apparaissaient se trouve maintenant un grand vide noir :


Merci d'avance pour vos réponses. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par Ange Tuteur le Sam 28 Fév 2015 - 18:28

Remplacer votre script par :
Code:
$(function(){$(function(){
  if (document.getElementById('quick_reply') || !$.sceditor) return;
  var a = document.createElement('A'), b = document.getElementById('smiley-box'), c = document.getElementById('textarea_content'), sce = $('#text_editor_textarea').sceditor('instance');
  function full() { b.style.display = 'none'; c.style.width = '100%'; sce.width('100%'); };
  a.className = 'sceditor-button sceditor-button-emoticon';
  a.title = 'Smileys';
  a.innerHTML = '<div></div>';
  a.onclick = function() {
    if (b.style.display.match(/none/)) {
      b.style.display = '';
      c.style.width = '80%';
      sce.width('100%');
    } else full();
  };
  full();
  $('.sceditor-button-date').before(a);
})});

Ange Tuteur
****

Masculin
Messages : 477
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par SweetGumiho le Sam 28 Fév 2015 - 18:37

Merci bien. Et quel endroit dois-je modifier pour avoir une boîte de réponse un peu moins large ? ^^

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par Ange Tuteur le Lun 2 Mar 2015 - 6:22

Bonjour,

Remplacer le script par :
Code:
$(function(){$(function(){
  var max = '80%';
 
  if (document.getElementById('quick_reply') || !$.sceditor) return;
  var a = document.createElement('A'), b = document.getElementById('smiley-box'), c = document.getElementById('textarea_content'), sce = $('#text_editor_textarea').sceditor('instance');
  function full() { b.style.display = 'none'; c.style.width = max; sce.width('100%'); };
  a.className = 'sceditor-button sceditor-button-emoticon';
  a.title = 'Smileys';
  a.innerHTML = '<div></div>';
  a.onclick = function() {
    if (b.style.display.match(/none/)) {
      b.style.display = '';
      c.style.width = '80%';
      sce.width('100%');
    } else full();
  };
  full();
  $('.sceditor-button-date').before(a);
})});

Modifier la valeur de max pour changer la largeur du boîte de réponse. 80% est la valeur par défault. 100% est la valeur maximale et 0% est la valeur minimale.

Ange Tuteur
****

Masculin
Messages : 477
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de chevauche de l'icone des smileys

Message par SweetGumiho le Lun 2 Mar 2015 - 9:47

Merci mais avec ce script j'ai de nouveau ce problème d'espace vide à droite. scratch

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

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


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