(javascript/php) souci avec un bandeau défilant

Petit nouveau ! | 2 Messages

17 oct. 2007, 00:02

Bonjour à tous :-)

je ne suis pas persuadé d'être a la bonne place pour ce post ( et si ce n'était pas le cas, merci de le déplacer ).

Je cherchais une solution pour remplacer la fameuse balise <marquee> qui est propriétaire et donc non valide W3C. Avec l'aide de Cyrano, j'ai trouvé une base de scripts intéressants,ici même, (merci AB) pour un bandeau déroulant. j'ai pris deux excellents modèles (qui correspondaient a ce que je cherchais) que j'ai manipulés avec mes maigres connaissances JvS. le résultat est tres satisfaisant a un détail près.
un de mes deux bandeaux contient un nombre de caracteres variables ( chaines de données récupérées d'une BDD via php), ce qui pose un probleme.

voici le code JavaScript auquel on arrive au départ des scripts de AB ( explication ce ce qui cloche apres), j'omet volontairement la partie CSS mais si besoin est, je la posterais.
(commentaire & réalisation par Cyrano sur base des scripts de AB)

Code : Tout sélectionner

<script type="text/javascript"> /* <![CDATA[ */ /** * On crée une fonction qui va permettre de simplifier la récupération d'un objet dans la page. * * Utilisation : l'élément doit comporter un attribut id : on appelle * donc la fonction $() en lui passant la valeur de cet id en paramètre * et on récupère l'objet correspondant. */ function $(element) { return document.getElementById(element); } /* On déclare des variables de travail */ var defile = false; // l'element a deplacer : Au départ, comme le code HTML n'est pas encore chargé, on initialise à false. // var psinit = 995; // position horizontale de depart : Déplacé dans la fonction var psinit; // position horizontale de depart (ce n'est qu'un contenant, on ne lui donne pas de valeur pour l'instant.) var pscrnt = psinit; /** * Fonctoin qui va faire défiler un élément. */ function texteDefile() { /* On vérifie si l'objet "defile" existe ou vaut false */ if (!defile) { /* s'il vaut false, on lui assigne sa valeur en récupérant l'objet qui a pour attribut "defile" */ defile = $('defile'); /* On initialise la valeur du point de départ en récupérant la valeur numérique de sa position gcuahe (left) */ psinit = parseInt(defile.style.left); /* On initialise la valeur du point de départ du défilement */ pscrnt = psinit; } else { /* L'objet étant déjà défini, on vérifie que la position n'est pas inférieure à la largeur de l'objet */ if(pscrnt < ( - defile.offsetWidth)) { /* On remet l'objet à sa position de départ */ pscrnt = psinit; } else { /* Sinon, on décrémente du nombre de pixels pour chaque déplacement */ pscrnt--; // pixel par deplacement } /** * On agit directement sur la position de l'objet en modifiant * la propriété CSS "left" et en lui assignant une nouvelle valeur. */ defile.style.left = pscrnt +"px"; } } var timer = setInterval("texteDefile()",25); // delai de deplacement /* ]]> */ </script>
<?php
$mavar =<<<TEST
Message Admin : Pour visiter l'espace Privé d'un participant, cliquez sur le lien qui défile dans le bandeau orange ;-)

TEST;

$mavar = str_replace(' ','&nbsp;',$mavar);
?>

Code : Tout sélectionner

<div id="conteneur_defil"> <div id="cadre_defil" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval('texteDefile()',25)"> <!-- On met une propriété CSS pour positionner l'objet au départ : Cette position sera modifiée directement par JavaScript. IMPORTANT : en mettant cette valeur, on permet à JavaScript de la récupérer et de lancer le script : Si on modifie la largeur de l'objet et qu'on adapte la valeur de cette propriété, le défilement sera ajusté en fonction. --> <div id="defile" style="left: 995px;"><?php echo $mavar; ?></div> </div>
voila ou on en est pour l'instant. ce qui "cloche", c'est la longueur fixe de l'objet "defile" défini par l'attribut style="left:995px". il faudrait que je puisse avoir une longueur variable suivant le contenu de "defile" qui peut aller de qques caracteres a quelques milliers de caracteres, et ce afin d'éviter les blancs avant le début de défilement ou d'avoir la fin du contenu tronqué.

une des solutions qui nous apparait comme "des plus simples" serait de multiplier le nombre de caractere, par la "chasse" moyenne du jeu de caractere utilisé avec tjs un risque, mais minimisé, d'avoir un blanc ou d'être tronqué en fin de chaine..

seulement voila, ça fait plusieurs heures que je fouille et je ne trouve rien nulle part pouvant me donner la chasse moyenne d'un jeu de caractere ni même comment la calculer (ce qui me fait enrager qd je vois qu'avec une balise propriétaire, le défilement se fait sans probleme)

donc, je cherche une idée, ou un début de solution a "comment calculer la longueur de ma chaine de caracteres" en pixel (en PHP ou JvS) sans s'aventurer trop profond dans la programmation, ce qui me permettrais de rendre la valeur de l'attribut "style" dynamique suivant le contenu et bien évidemment d'être adaptée au contenu.

petite précision en passant , je viens de voir que j'avais mis le bandeau sans récupération dans la base de donnée, mais ça n'a pas d'importance, c'est aussi du HEREDOC et le résultat se trouve aussi dans la variable PHP $mavar

je poste ici car je pense que AB, entre autre, pourrait peut-être m'aider a trouver une solution ( et la je fais allusion a ton interface sur ton site, qui elle génère une longueur par rapport au nombre de caractères dans le champs du formulaire)

petite note en passant, tjs pour AB, le validateur CSS crise un peu (uniquement en warning) parce qu'il manque des propriétés "background-???:" et "color:" dans certains ID. :wink:

merci pour votre aide et merci pour vos contributions sous forme de scripts qui aident bcp les débutants a comprendre comment ça fonctionne
[edit] je m'excuse pour la largeur du texte, mais je ne vois pas d'ou ça peut venir [/edit]

ViPHP
AB
ViPHP | 5818 Messages

18 oct. 2007, 18:52

Salut,

Je comprends pas ce qui te soucies vu que j'ai posté le code pour un défilement automatique sans avoir à faire de paramétrage en fonction de la longueur du texte ici :
http://www.phpfrance.com/forums/voir_re ... php#204068

Prends le code du lien ci-dessus tel quel (copié collé) et fais des essais. Y'a aucun problème tant que tu n'insères que du texte. :wink:

Je précise au passage que la base de ce script n'est pas de moi mais de Mr N. de developpez.net et que le code a été externalisé et mis en CSS par Lareine.

Dans mes propositions suivantes, j'ai rajouté quelques fonctions pour arrêter le défilement onmouseover et le reprendre onmouseout. Ainsi que la petite astuce (dans le lien précédent) qui permet de faire défiler du texte sans avoir à connaitre sa longueur.

L'interface graphique que j'ai faite sur ce sujet permet de faire un paramétrage automatique qui est utile principalement si on mélange du texte et des images à faire défiler ensemble. Mais s'il s'agit uniquement de faire défiler du texte, le lien que je viens de donner contient la solution.

Petit nouveau ! | 2 Messages

19 oct. 2007, 01:33

Salut

Merci pour ta réponse, je vais replancher un peu la dessus ( en relisant le thread d'origine, je me rend compte que j'ai loupé la partie avec id_DEFILE sans attribut WIDTH)

sinon pour le reste, rien a redire c vraiment tres bien fait et pratique :lol:

on va le consisérer comme résolu ... ( et si ça ne vas pas, je reviendrais toquer a la porte lol)


@+ :wink: