Annonce défilante rétractable

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

Résolu Annonce défilante rétractable

Message par Kumo le 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
*

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

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

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

Message par Kumo le Jeu 17 Mar 2016 - 8:33

Up.

Kumo
*

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

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

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

Message par Miettes le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Kumo le 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
*

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

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

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

Message par Miettes le Jeu 17 Mar 2016 - 14:51

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

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Kumo le 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
*

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

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

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

Message par Miettes le Ven 18 Mar 2016 - 11:12

Coucou Smile

Ah probablement ^^

Tu pourrais me montrer le js ? Smile

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Kumo le 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
*

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

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

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

Message par Miettes le Ven 18 Mar 2016 - 14:14

Ton forum est en phpbb3 ?

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Kumo le Sam 19 Mar 2016 - 9:11

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

Kumo
*

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

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

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

Message par Kumo le Lun 21 Mar 2016 - 8:51

Up.

Kumo
*

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

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

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

Message par Kumo le 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
*

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

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

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

Message par Kumo le 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
*

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

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

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

Message par Kumo le 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
*

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

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

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

Message par Kumo le Ven 25 Mar 2016 - 17:12

Up.

Kumo
*

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

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

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

Message par Milouze14 le 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 et


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 bouton


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 bouton

En espérant t'avoir aidé Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Kumo le 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
*

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

http://test-dessineux.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