Personnaliser le curseur sur un ou plusieurs sujets

[Neptunia]

Détails techniques

Version du forum : PunBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.planet-series.com/t660-

Description du problème

Bonjour ^^


1/ Je souhaiterai modifier les curseurs "normaux" et "pointeurs" sur certains sujets de mon forum.

J'ai pris pour base de départ ce tutoriel :
Exécuter un code javascript sous certaines conditions
sans parvenir à quoi que ce soit de concluant pour le moment.

Voici le code Javascript actuellement actif sur mes sujets

Code:

        if(/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname)
        {
          // on retarde l'exécution pour que l'image existe à l'exécution de la partie de code
          $(function(){
            $("body").css("cursor:url","http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur");
            $("a:hover").css("cursor:url","http://www.patmax.eu/P132/Curseurs/DW660-Tournevis.cur");
          });
        }

2/ Pour l'instant j'essaie de changer ces curseurs sur un seul sujet, mais à terme je voudrais pouvoir les changer sur un nombre non défini de sujets.
Serait il possible d'y parvenir en utilisant un tableau dont chaque entrée comporterait 3 éléments (id du sujet, url du curseur normal, url du curseur pointeur) ? Si oui quel en serait le code ?

3/ Question subsidiaire
Est-il possible de modifier les curseurs à l'intérieur d'un champ de saisie (le I fixe au survol d'un champ de saisie ainsi que le | clignotant indiquant la position actuelle du curseur) ? Si oui comment ?

Merci à celles et ceux qui se pencheront sur mon problème.

[stefou]

Bonjour,
Je n'ai pas beaucoup de temps ce matin mais ceci peut peut-être t'aider en attendant.
Pour le curseur body

Code:

         $(document.body.style.cursor="url('http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur'), default");

[stefou]

Désolé pour le décousu des réponses mais je le fait entre deux trucs
Pour info il y a une erreur dans le topic Exécuter un code javascript sous certaines conditions
il manque une parenthèse pour fermer la condition.

Voici déjà le code avec la condition pour changer le curseur body.

Code:

if(/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname))
        {
          // on retarde l'exécution pour que l'image existe à l'exécution de la partie de code
          $(function(){
        $(document.body.style.cursor="url('http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur'), default");
      })};

Je regarde pour le hover dans l'après midi

[Neptunia]

Pour le curseur de liens j'ai essayé document.a.syle.cursor sans succès.

La syntaxe javascript (parenthèses, accolades, points-virgule) me posant énormément problème il était clair que je ne serai arrivé à rien avec un tuto contenant une erreur.

Le code fonctionnel en place sur mon fofo

Code:

if(/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname))
                {
                  // on retarde l'exécution pour que les curseurs existent à l'appel du code
                  $(function(){
                $(document.body.style.cursor="url('http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur'), default");
              })};

Merci stefou pour l'aide apportée jusqu'ici.

[stefou]

J'ai cette solution pour le survol.
Code complet.

Code:

if(/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname))
                        {
                          // on retarde l'exécution pour que les curseurs existent à l'appel du code
                          $(function(){
                            $( "a" ).addClass( "hover_a" ); //ajoute une class au (a href)
                        $(document.body.style.cursor="url('http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur'), default");
                      })};

Et dans le css

Code:

.hover_a:hover {
     cursor:url("http://www.patmax.eu/P132/Curseurs/DW660-Tournevis.cur"),pointer!important;
}

[Neptunia]

Je prends en attendant (si ç'est faisable) une solution ne passant pas par la feuille CSS (qui a une longueur limitée).

Du coup j'ai un peu bricolé le code pour qu'il soit plus facile de passer en phase 2 et étendre l'astuce sur un nombre non défini de sujets.

Voici mon code javascript actuel

Code:

if(/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname))
                {
                  // on retarde l'exécution pour que les curseurs existent à l'appel du code
                  $(function(){
                                    $( "a" ).addClass( "a_660" );
                                    $( "body" ).addClass( "body_660" );
              })};

Le CSS qui va avec :

Code:

.a_660:hover {
    cursor:url("http://www.patmax.eu/P132/Curseurs/DW660-Tournevis.cur"),pointer;
    }
.body_660 {
    cursor:url("http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur"),default;
    }

J'ai retiré les !important qui semblaient superflus dans mon cas. Le CSS spécifique au sujet étant inséré bien après celui utilisé partout ailleurs, il semble prendre le pas sur mes curseurs habituels.

Vu que pour l'instant je passe par la feuille CSS, il ne me manque en théorie qu'un script :
- Récupérant l'id du sujet -> nSujet
- Ajoutant la class body_nSujet au body de la page
- Ajoutant la class a_nSujet aux liens de la page

[stefou]

Je ne comprends plus trop la suite que ce que tu souhaites

- Récupérant l'id du sujet -> nSujet ----------------> dans une rubrique spécifique ou n'importe où dans le forum ?
- Ajoutant la class body_nSujet au body de la page
- Ajoutant la class a_nSujet aux liens de la page

 les curseurs seront les mêmes ?

[Neptunia]

Comme le script concerne les sujets il ne sera actif que sur les sujets n'importe où sur le forum.

Non, les curseurs ne seront pas les mêmes, toutefois il est possible que certains curseurs soient réutilisés sur plusieurs sujets.
Il faut donc que le script sorte des class différentes pour chaque sujet.

Deux exemples !
1/ Sujet 789 : 22 septembre - Un grand méchant anniversaire pour Billie Piper
Le script devrait générer les class body_789 et a_789

2/ Sujet 791 : 29 septembre - Si vous oubliez l'anniversaire de Nicholas Briggs, vous serez exterminés !
Le script devrait générer les class body_791 et a_791

[stefou]

Je crains dans ce cas que tu dois faire un script par sujet...

Voici un exemple si deux sujet utilise les mêmes curseurs.

Code:

if((/^\/t660(p[1-9][0-9]*)?-/.test(document.location.pathname))||(/^\/t791(p[1-9][0-9]*)?-/.test(document.location.pathname)))
         {
                  // on retarde l'exécution pour que les curseurs existent à l'appel du code
                  $(function(){
                                    $( "a" ).addClass( "a_660" );
                                    $( "body" ).addClass( "body_660" );
              })};

[Neptunia]

Bon j'ai donné de mauvais exemples parce qu'effectivement les deux sujets en question pourraient réutiliser les curseurs du sujet principal et donc récupérer les mêmes class

Moi ce que je souhaite c'est que :
- le script décortique l'url de façon à ne conserver que l'id du sujet
- le script stocke cet id dans une variable
- le script ajoute au corps de la page la class body_variable.
- le script ajoute aux liens de la page la class a_variable.

Et c'est tout !
peu importe que nous soyons sur le sujet 660, 789 ou 791. Ces numéros ne figureront jamais dans le script, ils ne feront qu'y transiter à l'exécution sous la forme d'une variable.

[stefou]

Code:

- le script décortique l'url de façon à ne conserver que l'id du sujet
- le script stocke cet id dans une variable

Je sais pas si c'est la meilleur méthode mais ceci fonctionne jusqu'à l'id 99999

Code:

var a = (document.location.pathname);
$(function()  {
        b = a.substring(2,7);
        if (/-/i.test(b)){
        b = a.substring(2,6);
        }
        if (/-/i.test(b)){
          b = a.substring(2,5);
        }
        if (/-/i.test(b)){
          b = a.substring(2,4);
        }
        if (/-/i.test(b)){
          b = a.substring(2,3);
        }
        if (/-/i.test(b)){
          b = a.substring(2);
        }
        alert (b)
});

y a peut-être moyen de simplifier le code à l'aide de indexof

[Neptunia]

Si le sujet fait plusieurs pages il y a un souci !

Sur la page 2 d'un sujet la variable renvoie xpy (Sujet x Post y)



Expliqué autrement, il faudrait que le contenu de la variable soit en nombre entier positif (et non une chaîne quelconque de caractères)

[stefou]

Effectivement j'avais tester sur ton sujet 660
Désolé mais j'ai tapé ce code juste avant de quitter le travail, j'ai pas tester partout.
Suis a la maison, donc juste sur iPad, je sais pas tester
Mais en principe si tu remplace partout dans la code

Code:

if(/-/i.test(b))

Par

Code:

if ((/-/i.test(b))||(/p/i.test(b)))

Cela devrai fonctionner.

[Neptunia]

Oui, ça fonctionne, j'ai mis en place le code suivant

Code:

var a = (document.location.pathname);
        $(function()  {
                b = a.substring(2,7);
                if ((/-/i.test(b))||(/p/i.test(b))){
                b = a.substring(2,6);
                }
                if ((/-/i.test(b))||(/p/i.test(b))){
                  b = a.substring(2,5);
                }
                if ((/-/i.test(b))||(/p/i.test(b))){
                  b = a.substring(2,4);
                }
                if ((/-/i.test(b))||(/p/i.test(b))){
                  b = a.substring(2,3);
                }
                if ((/-/i.test(b))||(/p/i.test(b))){
                  b = a.substring(2);
                }
                $( "a" ).addClass( "a_"+b );
                $( "body" ).addClass( "body_"+b );
        });

Si je veux que ça fonctionne au-delà de 99999 sujets j'imagine que je dois commencer le bloc à :

Code:

                b = a.substring(2,8);

Me reste la question subsidiaire

3/ Question subsidiaire

Est-il possible de modifier les curseurs à l'intérieur d'un champ de saisie (le I fixe au survol d'un champ de saisie ainsi que le | clignotant indiquant la position actuelle du curseur) ? Si oui comment ?

Je laisserai ouvert le sujet quelque temps au cas où quelqu'un saurait modifier ces curseurs entièrement en javascript sans passer par la feuille CSS, mais le résultat actuel va déjà me permettre de personnaliser un maximum les sujets que je veux sans toucher aux autres.

Un gros pour le coup de main

[stefou]

Il paraît que la nuit porte conseil

Si je veux que ça fonctionne au-delà de 99999 sujets j'imagine que je dois commencer le bloc à :

Celui ci devrait fonctionner à l'infini...

Code:

        var a = (document.location.pathname);
        $(function()  {
        var b = a.match(/t([^-]+)/)
        var c = (b[1])
        if (/p/i.test(b)){
        var b = a.match(/t([^p]+)/)
        var c = (b[1])
        }
        $( "a" ).addClass( "a_"+c );
        $( "body" ).addClass( "body_"+c );
                });

[Neptunia]

Le dernier script ne fonctionne pas
Uncaught SyntaxError: Unexpected token var

[stefou]

Test ceci

Code:

var url = (document.location.pathname);
                $(function()  {
                var b = url.match(/t([^-]+)/);
                var c = (b[1]);
                if (/p/i.test(b)){
                var b = url.match(/t([^p]+)/);
                var c = (b[1]);
                }
                $( "a" ).addClass( "a_"+c );
                $( "body" ).addClass( "body_"+c );
                        });

[Neptunia]

Le dernier script marche impec !

Pourrais-je avoir des explications détaillées sur le fonctionnement de ces 2 lignes ?

Code:

                var b = url.match(/t([^-]+)/);
                var c = (b[1]);

[stefou]

Puisque l'id du sujet est changent, on ce réfère aux valeurs connues et fixe --> le "t", le "-" ou le "p"

Code:

var b = url.match(/t([^-]+)/); //--------------> récupère ce qui ce trouve à partir du 1er "t" jusqu'au 1er "-" et récupère la partie avant "-" jusqu'au "t" ce qui donne comme réponse txxxx,xxxx

var c = (b[1]); //-------------> récupère la valeur en position 1 c'est à dire xxxx si on souhaite récupérer txxxx on choisi la valeur en position 0

var b = url.match(/t([^p]+)/); //--------------> récupère ce qui ce trouve du 1er "t" jusqu'au 1er "p" et récupère la partie avant "p" jusqu'au "t"
ca fonctionne comme pour les conditions.


voila dans les grandes lignes

[Neptunia]

Donc si j'ai bien compris que j'écrive b ou que j'écrive b[0] à la lecture du contenu de la variable, c'est la même chose ?

Je vais reprendre l'exemple de mon sujet initial (sa page 2)
http://www.planet-series.com/t660p25-doctor-who-2005-s-live

document.location.pathname donc variable url = /t660p25-doctor-who-2005-s-live
b = t660p25 (du premier t inclus jusqu'au premier tiret - qui n'est pas retenu)
c = 660p25 (cad b en commençant non pas au t mais en excluant le premier caractère [1])
Ensuite on teste la présence d'un p et si le résultat est positif on redéfinit la variable b en ne s'arrêtant non pas au tiret mais au p ce qui va donner un résultat de t660 ?

C'est bien ça ?

[stefou]

http://www.planet-series.com/t660p25-doctor-who-2005-s-live

Code:

var b = url.match(/t([^-]+)/);

si on décortique la condition:
"(/t" sort en position 0 --> t660p25 (départ au 1er t et s'arrête au 1er - sans l'inclure)
ensuite "[^-]+" sort de la position 0 vers la position 1 --> 660p25 (lis dans la position 0 à l'envers et s'arrête au t sans l'inclure)
Résultat:
b = t660p25,660p25 (je n'ai pas réussi à sortir du 1er coup uniquement 660p25 puisque je devais utiliser le t comme repère de départ.)

Code:

var c = (b[0]);

Résultat:
c = t660p25

Code:

var c = (b[1]);

Résultat:
c = 660p25

Ensuite on teste la présence d'un p dans la variable b

Code:

if (/p/i.test(b)){

si le résultat est positif on redéfinit la variable b en s'arrêtant au p

Code:

var b = url.match(/t([^p]+)/);

si on décortique la condition:
"(/t" sort en position 0 --> t660 (départ au 1er t et s'arrête au 1er p sans l'inclure)
ensuite "[^p]+" sort de la position 0 vers la position 1 --> 660 (lis dans la position 0 à l'envers et s'arrête au t sans l'inclure)
Résultat:
b = t660,660

Code:

var c = (b[0]);

Résultat:
c = t660

Code:

var c = (b[1]);

Résultat:
c = 660

Donc si j'ai bien compris que j'écrive b ou que j'écrive b[0] à la lecture du contenu de la variable, c'est la même chose ?

Non,
b = t660p25,660p25
b[0] = t660p25
b[1] = 660p25


Autre exemple:
http://www.planet-series.com/t660p25-doctor-who-2005-s-live

Code:

        var url = (document.location.pathname);
                        $(function()  {
                        var b = url.match(/d([^-]+)/);
                        var c = (b[1]);
                                });

b = doctor,octor
b[0] = doctor
b[1] = octor

[Neptunia]

Bon j'ai quasiment rien compris mais ce n'est pas grave.

Sur le coup je croyais que b renvoyait t660p25 et donc que si on voulait commencer au premier 6 il fallait utiliser [1] et si on voulait commencer au p [4]
Le seul truc que je pense avoir compris c'est que cette variable comporte en fait plusieurs valeurs séparées par une virgule (+ ou - comme un tableau) et que chaque valeur est indicée en partant de 0.

Le truc que j'ai pas du tout compris dans b=t660p25,660p25 c'est quelle portion de code génère la première valeur (là je pense que oui) et quelle autre portion génère la seconde (là je sèche complètement).
Dans le dernier exemple, au vu des explications fournies je me serai attendu à :
b = doctor,octor
b[0] = doctor
b[1] = octor

Vu que ça dépasse ma compréhension actuelle, je vais laisser tomber mais j'ai deux nouvelles questions qui me viennent à l'esprit.

1/ Comment charger depuis le script une feuille de style externe qui pourrait bien exister comme ne pas exister ?
Le nom des feuilles de styles aurait la forme suivante
patmax.eu/P132/CssSujet/Style-t660.css
La difficulté à mon sens consiste à ce que le script ne rencontre pas d'erreur, si la feuille n'existe pas il doit être capable de passer à autre chose sans provoquer l'arrêt des autres scripts.

2/ Comment charger une feuille de style définie à l'avance seulement sur certains sujets ?
J'avais en tête d'utiliser inArray pour y parvenir avec un code un peu comme ça

Code:

if($.inArray(c, [660, 786, 789, 791])!=-1)
{
 Chargement CSS (je ne connais pas la commande :( )
}

Dans mon esprit ça devrait charger ma feuille CSS seulement si la variable c (id du sujet) figure dans mon tableau, ce qui veut dire que la valeur renvoyée sera non négative (indices de [0], [1], [2] ou [3])
D'ailleurs en combinant les deux questions je devrais être en mesure de charger une feuille spécifique à chaque sujet uniquement sur les sujets concernés et donc sans avoir à gérer le problèmes des fichiers non trouvés.

[Neptunia]

Remonte petit sujet, remonte !

[Neptunia]

Remonte petit sujet, remonte !!

Rappel des points non résolus :

1/ Comment charger depuis le script une feuille de style externe qui pourrait bien exister comme ne pas exister ?
Le nom des feuilles de styles aurait la forme suivante
patmax.eu/P132/CssSujet/Style-t660.css
La difficulté à mon sens consiste à ce que le script ne rencontre pas d'erreur, si la feuille n'existe pas il doit être capable de passer à autre chose sans provoquer l'arrêt des autres scripts.

2/ Comment charger une feuille de style définie à l'avance seulement sur certains sujets ?
J'avais en tête d'utiliser inArray pour y parvenir avec un code un peu comme ça

Code:

if($.inArray(c, [660, 786, 789, 791, 793])!=-1)
{
 Chargement CSS (je ne connais pas la commande :( )
}

Dans mon esprit ça devrait charger ma feuille CSS seulement si la variable c (id du sujet) figure dans mon tableau, ce qui veut dire que la valeur renvoyée sera non négative (indices de [0], [1], [2] ou [3])
D'ailleurs en combinant les deux questions je devrais être en mesure de charger une feuille spécifique à chaque sujet uniquement sur les sujets concernés et donc sans avoir à gérer le problème des fichiers non trouvés.

[Neptunia]

Remonte petit sujet, remonte !!

[Neptunia]

Remonte petit sujet, remonte !!

[Neptunia]

Remonte petit sujet, remonte !!

[stefou]

Peut-être ceci pour charger un css externe ?

Code:

$(function(){
  $("head").append(
    $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://patmax.eu/P132/CssSujet/Style-t660.css"})
  );
});

J'ai pas testé car je n'ai pas beaucoup de temps en ce moment.

[no_way]

Bonsoir, je me permet de pointer le bout du museau mais pourquoi vouloir créer une feuille de style par sujet ?
Il serait plus simple et plus efficace de mettre les déclarations nécessaires dans une seule feuille de style et la charger d'office.

@stefou, plus facile comme ceci je pense:

Code:

(function(){
var r=/^\/t(\d+)/,dl=document.location.pathname,a=r.test(dl)&&dl.match(r)[1];
if(a)$('body').addClass('body_'+a),$('a').addClass('a_'+a)
})();

[Neptunia]

Bonsoir, pourquoi vouloir créer une feuille de style par sujet ?
Il serait plus simple et plus efficace de mettre les déclarations nécessaires dans une seule feuille de style et la charger d'office.

Bonjour no_way

Disons que pour l'instant je ne souhaite modifier que deux curseurs sur certains sujets, mais j'essaie de prévoir à plus long terme, il se pourrait que je sois tenté de changer une bonne partie du thème sur certains sujets, ce qui risquerait de faire une grosse feuille CSS longue à charger. Du coup j'essaie d'avoir deux réponses adaptées aux deux cas de figure.
- Une qui me rajouterait les class nécessaires body_txxx et a_txxx et chargerait ensuite une unique feuille CSS pour "soulager" la feuille CSS du panneau admin.
- Une autre qui n'ajouterait aucun class mais chargerait une feuille css spécifique à chaque sujet.
Mais dans les deux cas il me faudrait un code qui chargerait cette feuille CSS uniquement si le sujet en requiert une.

Ce qui me ramène à ma demande de script combinant celui actuellement en place et l'utilisation de la fonction inArray()

2/ Comment charger une feuille de style définie à l'avance seulement sur certains sujets ?
J'avais en tête d'utiliser inArray pour y parvenir avec un code un peu comme ça

Code:

if($.inArray(c, [660, 786, 789, 791])!=-1)
{
 Chargement CSS (je ne connais pas la commande :( )
}

Dans mon esprit ça devrait charger ma feuille CSS seulement si la variable c (id du sujet) figure dans mon tableau, ce qui veut dire que la valeur renvoyée sera non négative (indices de [0], [1], [2] ou [3])
D'ailleurs en combinant les deux questions je devrais être en mesure de charger une feuille spécifique à chaque sujet uniquement sur les sujets concernés et donc sans avoir à gérer le problèmes des fichiers non trouvés.

Mon code javascript actuel

Code:

var url = (document.location.pathname);
                        $(function()  {
                        var b = url.match(/t([^-]+)/);
                        var c = (b[1]);
                        if (/p/i.test(b)){
                        var b = url.match(/t([^p]+)/);
                        var c = (b[1]);
                        }
                        $( "a" ).addClass( "a_t"+c );
                        $( "body" ).addClass( "body_t"+c );
                                });

Et le CSS utilisant ce script :

Code:

.a_t660:hover, .a_t786:hover, .a_t789:hover, .a_t791:hover, .a_t793:hover {
    cursor:url("http://www.patmax.eu/P132/Curseurs/DW660-Tournevis.cur"),pointer;
    }
.body_t660, .body_t786, .body_t789, .body_t791, .body_t793 {
    cursor:url("http://www.patmax.eu/P132/Curseurs/DW660-Tardis.cur"),default;
    }
.body_t191 div.entry-content a, .body_t191 div.entry-content a:hover {
    border: none;
}

@stefou : Pas encore testé le dernier code mais à vue de nez, il me faudrait un script par sujet concerné, ce qui ne me conviendra plus assez rapidement compte tenu du nombre de sujets que je compte cibler.