Catégorie rétractable via une image en sprite

4 participants

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

Résolu Catégorie rétractable via une image en sprite

Message par Ancients Sam 26 Mar 2016 - 22:09

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

J'ai utilisé ce script pour avec les catégories rétractables et il marche très bien :

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)))
    })
  })
});

Seulement j'aimerai avoir quelque chose d'un peu différent.

J'aimerai mettre une image en background de titre de la catégorie avec ce sprite :

Catégorie rétractable via une image en sprite Forum-10

1ère image pour réduire
2ème image pour agrandir
3ème image pour réduire (hover curseur)
4ème image pour agrandir (hover curseur)

Merci d'avance!


Dernière édition par Ancients le Jeu 7 Avr 2016 - 9:09, édité 1 fois
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Lun 28 Mar 2016 - 11:43

Bonjour Smile

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Mar 29 Mar 2016 - 17:39

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par winatickets Mar 29 Mar 2016 - 20:08

Bonsoir essaye de mettre ce code dans le css: 
Code:

ul.linklist:not(.navlinks):nth-of-type(1) + div .header {
    background-color: red !important;
}
ul.linklist:nth-of-type(1) + div + div .header {
    background-color: blue !important;
}
ul.linklist:nth-of-type(1) + div + div + div .header {
    background-color: orange !important;
}

le nombre de div correspond aux catéogorie, genre + div= 1ere catégorie; + div + div = seconde catégorie etc.... et tu choisie la couleur que tu souhaites avec voila bonne soirée
amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Mar 29 Mar 2016 - 20:45

Bonsoir,

Merci pour votre réponse! Les couleurs marchent très bien mais j'aimerai à la place appliqué le sprite que j'ai mit dans mon sujet comme image de fond et le paramétrer.

Bien à vous.
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par winatickets Mar 29 Mar 2016 - 22:24

bonsoir la je ne peut t'aider il va falloir que tu attendent une solution par contre j'ai été faire un tour sur ton forum et sa avance bien félicitaiton, si j'avai juste un conseil , fixe ta scroolbar du forum ses plus simpa et il suivra le forum de la même façon que t'a à l'heure actuel , ps: ses juste un avis perso Smile bonne soirée
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Mer 30 Mar 2016 - 9:46

C'est à dire fixer ma scrollbar? et comment?
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par winatickets Mer 30 Mar 2016 - 10:22

Bonjour panneau d'admin---modules--sur ta gauche ( toolbar ( fixer la toolbar ) 

voila le tour est jouer Smile amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Mer 30 Mar 2016 - 10:25

Je ne comprends pas, scrollbar ou toolbar? Smile

Je ne veux pas de la toolbar (en haut)
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Chacha Mer 30 Mar 2016 - 10:57

Bonjour @winatickets @Ancients

Les messages hors sujet ont été supprimés !

Si vous avez des divergences de vues, merci d'utiliser les MP. Wink

Bonne journée. Smile


Cordialement.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par lmc38510 Mer 30 Mar 2016 - 11:42

Ancients a écrit:J'aimerai mettre une image en background de titre de la catégorie avec ce sprite :
Catégorie rétractable via une image en sprite Forum-10

Hello "Ancients"

Compte tenu de ton "Javascript" tu peux déjà mettre un truc tout simple en place

dans ton index_box tu dois avoir quelque chose du genre:
Code:
<div class="table-title">{catrow.tablehead.L_FORUM}
</div>

Modifie le en:
Code:
<div class="table-title">{catrow.tablehead.L_FORUM}
<span id="contract-expand" title="Réduire/Ouvrir">&nbsp;+&nbsp;/&nbsp;-&nbsp;&nbsp;&nbsp;
</span>
</div>

Ensuite dans ton CSS rajoute:
Code:
#contract-expand{
cursor: pointer;
float: right;
}

En fin de cellule va s'afficher " + / - " et au survol souris "Réduire/Ouvrir"

Ceci n'empêchant pas qu'au clic sur toute la cellule le "Javascript" sera actif Very Happy




lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Jeu 31 Mar 2016 - 10:53

Salut lmc Smile

Merci pour ta réponse.

Cela marche très mais c'est pas ce que je veux avoir au final Smile
J'aimerai mettre l'image en fond des titres de catégorie
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par lmc38510 Jeu 31 Mar 2016 - 11:09

.

Pour placer une image "Fond de titre de catégories" rien de plus simple

dans  PA - Affichages - Images & couleurs - Gestion des images -

Image du fond des titres :   -> "tu places l'http de ton image"
à priori dans ton cas -> 600px * 28px   Very Happy

.
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Jeu 31 Mar 2016 - 11:19

Ah super Smile

J'ai mit le sprite dans "Image du fond des titres"

Ce qui m'intéresserai c'est de coder ce sprite pour avoir le "-" et son hover quand la catégorie est repliée et le "+" et son hover quand la catégorie est déroulée Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par lmc38510 Jeu 31 Mar 2016 - 11:50

Ancients a écrit:,J'ai utilisé ce script pour avec les catégories rétractables et il marche très bien :

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)))
    })
  })
});

J'ai mis le sprite dans "Image du fond des titres"

Oui mais ce "Sprite" comme tu dis n'est pas dans -> l' Image du fond des titres et n'agit pas sur elle ...

Ton image est "quadruple" , il n'en faut qu'une, sans les " + " ou " - "

Catégorie rétractable via une image en sprite Forum-10

il faudrait pouvoir intercepter le "toggle" du "JS" pour lui affecté une valeur class= "contract" ou "expand" et afficher en fonction de sa position une image soit -> Catégorie rétractable via une image en sprite 26f824fd97ee7968b2e7 pour réduire soit -> Catégorie rétractable via une image en sprite E6e91e1e6ee6adae6036 pour ouvrir ...

Faisable ... la preuve -> < iCi >
Les catégories sont rétractables ... avec le signe " - " qui change en " + "
Le système est installé avec le "thème" et fonctionne à merveille et en plus il mémorise la position
si tu quitte ton Forum en position "catégorie fermée" à le réouverture la "catégorie est fermée" Wink

.



lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Jeu 31 Mar 2016 - 12:24

C'est pas plus simple de mettre simple une image en background lorsque c'est rétracté avec son hover et une image en background lorsque c'est développé avec son hover?

Parce que ce qui m'intéresse c'est l'image en entière ya déja tout, sans rajouté de - ou +.
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par lmc38510 Jeu 31 Mar 2016 - 12:57

Ancients a écrit:C'est pas plus simple de mettre simple une image en background lorsque c'est rétracté avec son hover et une image en background lorsque c'est développé avec son hover?

Parce que ce qui m'intéresse c'est l'image en entière ya déja tout, sans rajouté de - ou +.

Que ce soit l'une ou l'autre solution le problème reste le même ...
ton image actuelle est mise en place dans le PA donc non modifiable ...

pour être modifiée elle doit être programmée en CSS avec une Div exp: #retract & #expand ... mais faut-il encore que le JS donne la position du "toggle" qui implémente la bascule de -> #retract à -> #expand

Le plus simple en attendant (la solution) c'est de laisser ton image actuelle (sans + sans -) et d'utiliser la méthode d'affichage donnée plus haut du " +/- " avec l'info bulle "Réduire/Ouvrir" ...
Bon c'est pas Nickel ... mais ça permet aux visiteurs de comprendre qu'il faut cliquer pour voir ... Hormis l'effet visuel ... c'est le but de la manœuvre qui compte Very Happy



lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Jeu 31 Mar 2016 - 12:58

J'ai enlevé l'image dans le PA car ça l'a met pour les catégories et aussi pour les sujets!
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Sam 2 Avr 2016 - 14:04

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Dim 3 Avr 2016 - 16:31

Bonjour, toujours pas d'aide hélas..?
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Lun 4 Avr 2016 - 17:34

Bonjour, un peu d'aide svp?
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie rétractable via une image en sprite

Message par Ancients Mar 5 Avr 2016 - 20:44

Bonsoir, toujours personne pour m'aider?

Merci d'avance!
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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