Catégorie rétractable via une image en sprite

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 le 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 :



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
****

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 le Lun 28 Mar 2016 - 11:43

Bonjour Smile

Up

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 le Mar 29 Mar 2016 - 17:39

Up

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 le 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

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 le 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
****

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 le 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

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 le Mer 30 Mar 2016 - 9:46

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

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 le 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

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 le Mer 30 Mar 2016 - 10:25

Je ne comprends pas, scrollbar ou toolbar? Smile

Je ne veux pas de la toolbar (en haut)

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 le 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.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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 le 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 :


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
*****

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

http://arcanes.lacaverneauxgrimoires-forum.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 le 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
****

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 le 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
*****

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

http://arcanes.lacaverneauxgrimoires-forum.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 le 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
****

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 le 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 " - "



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 -> pour réduire soit -> 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
*****

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

http://arcanes.lacaverneauxgrimoires-forum.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 le 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
****

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 le 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
*****

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

http://arcanes.lacaverneauxgrimoires-forum.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 le 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
****

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 le Sam 2 Avr 2016 - 14:04

Up

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 le Dim 3 Avr 2016 - 16:31

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

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 le Lun 4 Avr 2016 - 17:34

Bonjour, un peu d'aide svp?

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 le Mar 5 Avr 2016 - 20:44

Bonsoir, toujours personne pour m'aider?

Merci d'avance!

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


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