Code CSS "raccourcir un lien"
5 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Re: Code CSS "raccourcir un lien"
Bonjour,
On peut aussi simplement ne pas mettre le lien "brut" mais "l'habiller" ...
Ça fait un petit peu de choses à coder mais pas trop.
On peut aussi simplement ne pas mettre le lien "brut" mais "l'habiller" ...
- Code:
[url=mettre le lien brut ici]Message qui remplacera le lien long[/url]
Ça fait un petit peu de choses à coder mais pas trop.
Re: Code CSS "raccourcir un lien"
Bonjour
Oui....c'est une solution, mais les adhérents ne font pas l'effort.
J'ai mis sur la page "Portail" (en bas) un lien pour un site qui raccourcit les liens.
Personne ne l'utilise.
Alors je voulais contourner cette ...... désinvolture
-------------------------------------------------------------------------------------------------
Suite....
J'ai laissé tombé le CSS
Avec le code javascript ....... super !
Oui....c'est une solution, mais les adhérents ne font pas l'effort.
J'ai mis sur la page "Portail" (en bas) un lien pour un site qui raccourcit les liens.
Personne ne l'utilise.
Alors je voulais contourner cette ...... désinvolture
-------------------------------------------------------------------------------------------------
Suite....
J'ai laissé tombé le CSS
Avec le code javascript ....... super !
Re: Code CSS "raccourcir un lien"
Bonjour,
Le résultat est normal parce que le CSS s'applique sur tous les liens sans distinction de contenu, que ce soit un texte ou une image. Je ne connais malheureusement pas de règle CSS qui permette de faire une différence en fonction du contenu (mais si je me trompe et que quelqu'un qui passe par ici en connait une, n'hésitez pas à me détromper), en revanche je vois une autre solution qui passerait par l'utilisation de Javascript.
L'idée serait de parcourir en Javascript le contenu des messages pour ajouter une classe CSS (par exemple "text-link") dynamiquement aux liens qui ne contiennent pas une image. Ensuite, il suffit d'appliquer le code CSS sur ces liens en particulier.
Côté CSS l'adaptation est minime, ça donne :
Côté Javascript, il me semble que Forumactif importe la librairie jQuery par défaut, ce qui permettrait d'utiliser un code de ce genre :
Le résultat est normal parce que le CSS s'applique sur tous les liens sans distinction de contenu, que ce soit un texte ou une image. Je ne connais malheureusement pas de règle CSS qui permette de faire une différence en fonction du contenu (mais si je me trompe et que quelqu'un qui passe par ici en connait une, n'hésitez pas à me détromper), en revanche je vois une autre solution qui passerait par l'utilisation de Javascript.
L'idée serait de parcourir en Javascript le contenu des messages pour ajouter une classe CSS (par exemple "text-link") dynamiquement aux liens qui ne contiennent pas une image. Ensuite, il suffit d'appliquer le code CSS sur ces liens en particulier.
Côté CSS l'adaptation est minime, ça donne :
- Code:
.postbody a.text-link {
display: inline-block;
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
Côté Javascript, il me semble que Forumactif importe la librairie jQuery par défaut, ce qui permettrait d'utiliser un code de ce genre :
- Code:
<script type="text/javascript">
$(function() {
$('.postbody a').each(function() {
if($(this).children('img').length == 0) {
$(this).addClass('text-link');
}
});
});
</script>
Re: Code CSS "raccourcir un lien"
Hello rmn73 .....Sen Hime
Je vais essayer ces CSS
Mais question....
Je suis plutôt javascript car le titre me permet de me souvenir du but de ce javascript (je suis semi lambda)
Ce qui n'est pas le cas avec le CSS.
A moins que je puisse taper du texte avant le code sans que cela nuise à son fonctionnement.
Est-ce possible ? ?
Je vais essayer ces CSS
Mais question....
Je suis plutôt javascript car le titre me permet de me souvenir du but de ce javascript (je suis semi lambda)
Ce qui n'est pas le cas avec le CSS.
A moins que je puisse taper du texte avant le code sans que cela nuise à son fonctionnement.
Est-ce possible ? ?
Re: Code CSS "raccourcir un lien"
Bonjour Jeremalix
En CSS tout ce qui est placé entre /* et */ est un commentaire.
D'ailleurs votre capture écran montre un commentaire correct (ligne 66) et un autre incorrect (ligne 69)
En CSS tout ce qui est placé entre /* et */ est un commentaire.
D'ailleurs votre capture écran montre un commentaire correct (ligne 66) et un autre incorrect (ligne 69)
Re: Code CSS "raccourcir un lien"
Parfait !
Par contre évitez les caractères spéciaux tels que les guillemets < >. Personnellement j'ai même pris l'habitude de ne pas utiliser d'accent ou de cédilles bien que l'on m'ait dit que cette précaution n'était pas nécessaire.
Par contre évitez les caractères spéciaux tels que les guillemets < >. Personnellement j'ai même pris l'habitude de ne pas utiliser d'accent ou de cédilles bien que l'on m'ait dit que cette précaution n'était pas nécessaire.
Re: Code CSS "raccourcir un lien"
Un code qui commence par un commentaire BEGIN (début) et termine par un commentaire END (fin). C'est typique des personnes prévoyantes (usage personnel) ou désireuses d'être mieux comprises (tutos ou libre-service).
Une structure que l'on retrouve sans cesse dans nos templates.
Rien qu'en me fiant aux commentaires fournis et aux identifiants utilisés, je dirai qu'il s'agit d'un tuto proposé à la communauté Forumactif visant à réduire l'encombrement pris par les citations.
Contribution proposée ou traduite par un non-anglophone (l'anglophone aurait utilisé .fm pour Forumotion à la place de .fa) mais par une personne habituée à coder pour les autres. Si le français est la langue de la diplomatie, l'anglais est celle de la programmation.
(Dis-moi comment tu codes, je te dirai qui tu es !)
Une structure que l'on retrouve sans cesse dans nos templates.
Rien qu'en me fiant aux commentaires fournis et aux identifiants utilisés, je dirai qu'il s'agit d'un tuto proposé à la communauté Forumactif visant à réduire l'encombrement pris par les citations.
Contribution proposée ou traduite par un non-anglophone (l'anglophone aurait utilisé .fm pour Forumotion à la place de .fa) mais par une personne habituée à coder pour les autres. Si le français est la langue de la diplomatie, l'anglais est celle de la programmation.
(Dis-moi comment tu codes, je te dirai qui tu es !)
Re: Code CSS "raccourcir un lien"
Hello jeremalix, Hélène et Sen Hime,
tu peux avec ce script et en excluant la signature (le cas échéant) mettre une class aux liens et au survol afficher dans une infobulle la totalité du lien.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript
Mets un titre explicite.
Coches sur les sujets.
Déposes ceci:
Penses a cliquer sur le bouton VALIDER
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
Penses à cliquer sur le bouton
Si tu ne désires pas afficher le lien au survol.
Le script sera alors ainsi:
Ou ce script tout bête (sans c.s.s) qui va donner comme titre aux liens "LINK":
Que tu pourras changer ici
tu peux avec ce script et en excluant la signature (le cas échéant) mettre une class aux liens et au survol afficher dans une infobulle la totalité du lien.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript
Mets un titre explicite.
Coches sur les sujets.
Déposes ceci:
- Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
var link= $(this).attr('href');
$(this).addClass('M14_lien_long').attr('title',link);
});});
Penses a cliquer sur le bouton VALIDER
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
- Code:
.M14_lien_long
{
display: inline-block;
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
Penses à cliquer sur le bouton
Si tu ne désires pas afficher le lien au survol.
Le script sera alors ainsi:
- Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
$(this).addClass('M14_lien_long');
});});
Ou ce script tout bête (sans c.s.s) qui va donner comme titre aux liens "LINK":
Que tu pourras changer ici
- Code:
$(this).html('LINK');
- Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
$(this).html('LINK');
});});
Invité- Invité
Re: Code CSS "raccourcir un lien"
Hello Milouze
Je me lance...
Merci..
Je me lance...
Merci..
Re: Code CSS "raccourcir un lien"
Re,
tu as aussi ce script qui au survol affichera le lien dans une infobulle faite maison .
a++
tu as aussi ce script qui au survol affichera le lien dans une infobulle faite maison .
- Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
var link= $(this).attr('href');
$(this).after('<div style="max-width:300px;max-height:60px;overflow:hidden;background:white;border:2px solid black;border-radius:10px;position: absolute;margin-top:20px;padding:4px 6px;color:black;display:none;">'+link+'</div>');
$(this).html('LIEN');
$(this).hover(function(){
$(this).next().toggle();
});
});});
a++
Invité- Invité
Re: Code CSS "raccourcir un lien"
Je rappelle qu'une seule question par sujet est autorisée, afin de favoriser les recherches ultérieures. Je vous prierai donc de rester sur le sujet initial qui consiste à trouver un moyen de réduire les liens en dehors des images ! Je vous invite à lire : |
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Code CSS "raccourcir un lien"
Bonjour
Si tel est le cas et que vous l'ayez supprimée, pouvez-vous me la rappeler ? ?
Serait-ce la tite parenthèse pour un tuyau sur la façon de mettre un texte "pense bête" au
début d'un code
A quel moment, avec quelle question ai-je quitté le sujet initial ? ?Lixyr a écrit:Je rappelle qu'une seule question par sujet est autorisée,
Si tel est le cas et que vous l'ayez supprimée, pouvez-vous me la rappeler ? ?
Serait-ce la tite parenthèse pour un tuyau sur la façon de mettre un texte "pense bête" au
début d'un code
Sujets similaires
» Raccourcir un lien
» Code HTML trop long, comment le raccourcir ?
» pb code lien
» Code pour remplacer un lien par un mot !!!
» Recherche code css apparence lien
» Code HTML trop long, comment le raccourcir ?
» pb code lien
» Code pour remplacer un lien par un mot !!!
» Recherche code css apparence lien
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum