Annonce défilante rétractable

2 participants

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

Résolu Annonce défilante rétractable

Message par Kumo Mar 15 Mar 2016 - 16:10

Bonjour.

En fait tout est dans le titre Smile

J'aurai aimé savoir s'il était possible de rendre l'annonce défilante de l'accueil rétractable, de la même manière qu'il est possible de le faire pour les catégories ?
J'ai pas mal cherché, mais je n'ai pas trouvé de pistes de réponse.

Si possible il serait bien qu'elle soit fermée par défaut, car je trouve cette annonce très utile, mais un peu trop gourmande en ressource pour l'afficher et surtout vite agaçante pour certaine personne. Il serait bien que chaque membre puissent choisir de l'afficher ou non.

Des idées ?


Dernière édition par Kumo le Sam 26 Mar 2016 - 8:48, édité 1 fois
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Jeu 17 Mar 2016 - 8:33

Up.
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Miettes Jeu 17 Mar 2016 - 12:26

Coucou Smile

Il y a un tutoriel disponible [ici] qui pourrait t'aider (mais je pense qu'il faut un compte pour le voir :/)

ça pourrait être une base.

Personnellement, c'est celui que j'utilise sur mon forum :
- J'ai la Chatbox dans un bloc qui peut être ouvert ou fermé.
- Par défaut, le bloc est ouvert
- mais le membre peut choisir dans son profil d'ouvrir ou fermé la CB.
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Jeu 17 Mar 2016 - 12:38

Merci pour le lien Miettes !

Il faut en effet un compte, je vais m'inscrire pour tester cette solution Smile
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Miettes Jeu 17 Mar 2016 - 14:51

Tiens nous au courant ^^ (et si c'est pas trop clair, je devrais pouvoir t'aider ^^)
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Ven 18 Mar 2016 - 7:38

Bonjour Miettes !

Alors j'ai jeter un coup d'oeil à ce tuto et en réalité je ne veux pas faire quelque chose d'aussi complexe Smile
J'avais dans l'idée de simplement pouvoir cliquer dans le cadre de l'annonce pour que celle-ci se referme, comme les catégories sur mon forum lorsque l'on clique sur leur en-tête. J'avais appliqué un code JS pour ça et je me demandais si ce code était adaptable à l'annonce défilante ^^ ?

Parce que, autant j'arrive à bidouiller un peu avec du CSS, autant avec le JS je nage dans la semoule !
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Miettes Ven 18 Mar 2016 - 11:12

Coucou Smile

Ah probablement ^^

Tu pourrais me montrer le js ? Smile
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Ven 18 Mar 2016 - 12:53

Le voilà:

Code:
/* categories retractables sans invision */
$(function() {
  if(window.localStorage) {
    var b = JSON.parse(localStorage.getItem("catRet")) || {}
  }
  var f = 0;
  if($("body#phpbb").length) {
    var a = "div.table-title h2", e = "ul.topiclist", c = ":not(ul.topiclist.forums)"
  }else {
    $("#pun-intro").length ? (a = "div.page-title h2", e = "div.main-head", c = ":not(div.main-content)") : (a = "th.secondarytitle h2", e = "tr", c = ":not(tr)")
  }
  $(a).closest(e).css("cursor", "pointer").each(function() {
    var d = "c" + f++, a;
    window.localStorage ? b[d] && (a = !0) : a = !1;
    a && $(this).nextUntil(c).toggle();
    $(this).click(function() {
      $(this).nextUntil(c).toggle();
      window.localStorage && (b[d] ? delete b[d] : b[d] = 1, localStorage.setItem("catRet", JSON.stringify(b)))
    })
  })
});

Il est appliqué seulement sur l'index.

Encore merci à toi ^^ !
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Miettes Ven 18 Mar 2016 - 14:14

Ton forum est en phpbb3 ?
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Sam 19 Mar 2016 - 9:11

Oui, c'est toujours pour celui qui est en lien sur mon profil Smile
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Lun 21 Mar 2016 - 8:51

Up.
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Mar 22 Mar 2016 - 8:13

J'ai réussi à bidouiller dans le template overhall_header pour que mon annonce ai la même présentation que mes catégories:

Code:
<!-- BEGIN switch_ticker -->
      <div id="fa_ticker_block" style="margin-top:4px;">
                  <ul class="topiclist"><li class="header" style="background:url('http://i84.servimg.com/u/f84/18/12/95/35/cat12.png'); padding-bottom: 10px;">
               <dl class="icon">
                                          <dd class="dterm"><div class="table-title" style="text-align:center; padding-left: 400px;">Annonce</div></dd>
               
               </dl>
            </li>
         <div class="module">
            <div class="inner">
               <span class="corners-top"><span></span></span>
                  <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>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div></ul>
      </div>
                 
      <!-- END switch_ticker -->

Du coup il ne me manque plus qu'à comprendre comment intégrer cette "nouvelle catégorie" dans le javascript plus haut. Quelqu'un saurait m'expliquer ? Smile
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Mer 23 Mar 2016 - 10:49

Up ! Je suis sûre de pas être loin de la solution... me manque des connaissances en javascript.
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Jeu 24 Mar 2016 - 9:41

Bon... hé hé... je paye mes bidouillages (il fallait s'en douter !).

Après un énième test de bricolage de javascript, plus rien ne marche.
J'ai donc remis le javascript d'origine (celui partagé plus haut) et annulé mes modifications sur le template overhall-header, mais apparemment cela ne suffit pas à réparer mes bêtises... l'annonce en page d'accueil ne s'affiche plus du tout et les catégories ne sont plus rétractables ^^'

Du coup, un coup de main ne serait pas de refus. Désolée Embarassed

Edit: Au temps pour moi, il fallait juste que je vide les caches de Chrome, du coup tout est revenu à la normal, mais je cherche toujours une solution pour rendre l'annonce rétractable de la même manière que mes catégories Smile
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Kumo Ven 25 Mar 2016 - 17:12

Up.
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Annonce défilante rétractable

Message par Invité Sam 26 Mar 2016 - 7:30

Salut Kumo,

cette partie est difficilement modifiable avec un display:none car cela tronque le contenu de l'annonce défilante .

Par contre on peut contourner cela Wink .
L'annonce sera toujours visible et à l'aide de petits boutons , l'utilisateur pourra aisément fermer ou ouvrir ces dernières
et qui plus est: son choix restera mémorisé:

Dans la partie du template concerné :

Remplaces :
Code:

    <!-- BEGIN switch_ticker -->
          <div id="fa_ticker_block" style="margin-top:4px;">
                      <ul class="topiclist"><li class="header" style="background:url('http://i84.servimg.com/u/f84/18/12/95/35/cat12.png'); padding-bottom: 10px;">
                  <dl class="icon">
                                              <dd class="dterm"><div class="table-title" style="text-align:center; padding-left: 400px;">Annonce</div></dd>
                 
                  </dl>
                </li>
            <div class="module">
                <div class="inner">
                  <span class="corners-top"><span></span></span>
                      <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>
                  <span class="corners-bottom"><span></span></span>
                </div>
            </div></ul>
          </div>
                     
          <!-- END switch_ticker -->



Par :
Code:

  <!-- BEGIN switch_ticker -->


<div id="fa_ticker_block" style="margin-top:4px;">
<ul class="topiclist">
<li class="header" style="background:url('http://i84.servimg.com/u/f84/18/12/95/35/cat12.png'); padding-bottom: 10px;">
<dl class="icon">
<dd class="dterm"><div class="table-title" style="text-align:center; padding-left: 400px;">Annonce</div></dd>
</dl>
</li>

<span class="M14_CloseTicker"title="Masquer les annonces"><img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-10.png"/></span>
<span class="M14_OpenTicker"title="Afficher les annonces"style="display:none;"><img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-11.png"/></span>
  <div class="module">

                <div class="inner">
                  <span class="corners-top"><span></span></span>
                      <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>
                  <span class="corners-bottom"><span></span></span>
                </div>
           
  </div>
 
 
  </ul>
          </div>
                     
          <!-- END switch_ticker -->





Penses a enregistrer les modifications en cliquant respectivement sur Annonce défilante rétractable 907288 et Annonce défilante rétractable Ajouter2024


Tu peux modifier les images en respectant leurs dimensions (24px par 24px ) ici:
Code:
<span class="M14_CloseTicker"title="Masquer les annonces">
<img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-10.png"/></span>
<span class="M14_OpenTicker"title="Afficher les annonces"style="display:none;">
<img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-11.png"/></span>


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Déposes ceci:
Code:

.M14_CloseTicker ,.M14_OpenTicker
{
position: absolute;
height: 24px;
width: 24px;
margin-top: -24px;
cursor:pointer;
}


Penses à cliquer sur le boutonAnnonce défilante rétractable Boutonvalider


Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Coches à l'endroit voulu et déposes ceci:


Code:

$(function(){
$('.M14_CloseTicker').click(function(){
$(this).hide();
$('#fa_ticker_block ul.topiclist .module').animate({height: '0px'});
$('.M14_OpenTicker').show();
  window.localStorage && localStorage.setItem('bandeau_hided',1)
});

$('.M14_OpenTicker').click(function(){
$(this).hide();
$('.M14_CloseTicker').show();
$('#fa_ticker_block ul.topiclist .module').animate({height: '30px'});
 // on supprime l'enregistrement de cachage du bandeau
    window.localStorage && localStorage.removeItem('bandeau_hided')
});

// si le bandeau est enregistré comme caché, on le cache
  // instantanément à l'ouverture de la page
  window.localStorage && localStorage.getItem('bandeau_hided') && (
$('#fa_ticker_block ul.topiclist .module').css('height','0px'),
$('.M14_OpenTicker').show(),
$('.M14_CloseTicker').hide()
  )
});

Penses à cliquer sur le boutonAnnonce défilante rétractable Boutonvalider

En espérant t'avoir aidé Wink .

a++
Anonymous

Invité
Invité


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

Résolu Re: Annonce défilante rétractable

Message par Kumo Sam 26 Mar 2016 - 8:48

Ca marche j'ai seulement modifié le JS pour l'adapter à la taille de mon annonce.
Merci beaucoup Milouze14 pour ton aide ! Je crois que je ne m'en serai jamais sortie sans Smile

Je passe le sujet en résolu ^^ !
Kumo

Kumo
*

Messages : 49
Inscrit(e) le : 11/03/2016

http://encre-seiche.forumactif.org/
Kumo 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