Annonce défilante rétractable
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Annonce défilante rétractable
Bonjour.
En fait tout est dans le titre
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 ?
En fait tout est dans le titre
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
Re: Annonce défilante rétractable
Coucou
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.
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.
Re: Annonce défilante rétractable
Merci pour le lien Miettes !
Il faut en effet un compte, je vais m'inscrire pour tester cette solution
Il faut en effet un compte, je vais m'inscrire pour tester cette solution
Re: Annonce défilante rétractable
Tiens nous au courant ^^ (et si c'est pas trop clair, je devrais pouvoir t'aider ^^)
Re: Annonce défilante rétractable
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
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 !
Alors j'ai jeter un coup d'oeil à ce tuto et en réalité je ne veux pas faire quelque chose d'aussi complexe
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 !
Re: Annonce défilante rétractable
Coucou
Ah probablement ^^
Tu pourrais me montrer le js ?
Ah probablement ^^
Tu pourrais me montrer le js ?
Re: Annonce défilante rétractable
Le voilà:
Il est appliqué seulement sur l'index.
Encore merci à toi ^^ !
- 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 ^^ !
Re: Annonce défilante rétractable
Ton forum est en phpbb3 ?
Re: Annonce défilante rétractable
Oui, c'est toujours pour celui qui est en lien sur mon profil
Re: Annonce défilante rétractable
J'ai réussi à bidouiller dans le template overhall_header pour que mon annonce ai la même présentation que mes catégories:
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 ?
- 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 ?
Re: Annonce défilante rétractable
Up ! Je suis sûre de pas être loin de la solution... me manque des connaissances en javascript.
Re: Annonce défilante rétractable
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
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
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
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
Re: Annonce défilante rétractable
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 .
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 :
Par :
Penses a enregistrer les modifications en cliquant respectivement sur et
Tu peux modifier les images en respectant leurs dimensions (24px par 24px ) ici:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
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:
Penses à cliquer sur le bouton
En espérant t'avoir aidé .
a++
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 .
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é .
a++
Invité- Invité
Re: Annonce défilante rétractable
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
Je passe le sujet en résolu ^^ !
Merci beaucoup Milouze14 pour ton aide ! Je crois que je ne m'en serai jamais sortie sans
Je passe le sujet en résolu ^^ !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum