Question sur arrêt défilement texte

[creange]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://dangela.forumgratuit.org/

Description du problème

Bonjour j'ai mis un texte défilement sur un widget sur le portail
et j'aimerai savoir quel code rajouter pour faire arrêt sur image
quelques secondes sans curseur

voici mon code

Code:

<br />
<marquee <strong="" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" "0"="" direction="up">
                                                                <strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">*</span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">*</span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">*******************</span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;"> Merci  *************</span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">** texte </span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;"> texte </span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">******************* bonne journée </span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">************************** texte .... en Cliquant sur l'image ===><a rel="nofollow"
target="_blank" class="postlink" href="url forum/"><img src="url image" style="height: 90px;" /></a></span></span></strong><strong><span style="color: rgb(0, 0, 153);"><span style="font-size: 18px;">****</span></span></strong>                                                              
   <marquee direction="left" scrollamount="" ="2"="" onmouseover="this.stop()" onmouseout="this.start()" style="width: 50%; height: 100px;">
                                                                                              
   </marquee>
        <span=""><strong="" <marquee=""></strong=""></span="">
</marquee><br />                                                                                          
<p>
</p><span=""><strong="" <marquee=""></strong=""></span="">                                                                                      
<p>
</p><span=""><strong="" <marquee=""></strong=""></span="">

j'ai bien trouvé un code scrolldelay à rajouter mais ça ne fonctionne pas ....
est-ce que quelqu'un sait comment faire ?
Merci pour votre aide

[chattigre]

Bonjour,

Votre code contient de nombreuses erreurs de syntaxe...

Je vous invite par ailleurs à utiliser l'astuce suivante pour mettre en place un contenu défilant. En effet, la balise marquee est largement obsolète et peu prise en charge, ou de moins en moins à terme.
:astuce; Créer une bannière défilante : image ou texte


N'hésitez pas à revenir vers nous si besoin ensuite.

Bonne journée

[creange]

Bonjour Chattigre
le souci n'est pas que le défilement s'arrête au passage de la souris ça  ça marche déjà
mais je souhaiterai que le texte s'arrête automatiquement puis reparte sans le passage de la souris  
un peu comme un panneau publicitaire 

[chattigre]

Bonjour,

Comme je l'ai dit, la balise marquee que vous utilisez dans votre code est dépréciée, et donc ne doit plus être utilisée.
Je pourrais avoir une solution à vous proposer, je vous invite déjà à regarder si vous parvenez à faire quelque chose avec l'astuce (donc sans marquee) que je vous ai fournie plus haut.

Bonne journée

[creange]

Bonjour Chattigre

je ne souhaite pas faire une banière mais juste une annonce défilante cliquable 
dans un widget sur le portail 

 j'ai réussi à faire une banière avec texte et images 
pour le défilement j'ai un souci malgré que j'ai mis up dans mes codes 
il défile toujours vers la gauche 
j'ai bien incérer mon CSS et mes codes js mais rien à faire ...

Et pour les liens sur les images ça n'est pas cliquables  !!!

voici le code que j'ai mis 

Code:

<div class="bandef" data-direction="up" data-stop="n" data-speed="6">
                                                         
   <div>
                                                   <span style="color: rgb(102, 0, 153); font-size: 24px;"><strong>****Détends-Vous et Amusez-Vous Bien ****  </strong></span><strong></strong>                            
   </div><strong></strong>                            
   <div style="" data-speed="4" data-stop="n" data-direction="up" class="bandef">
                                        <span style="color: rgb(102, 0, 153); font-size: 24px;"><strong>Le Nouveau Rébus Est En Ligne****<img src="https://i.servimg.com/u/f47/12/27/40/27/rebuss11.gif " a="" href="https://dangela.forumgratuit.org/t158p150-le-jeu-du-rebus" <="" /></strong><strong><span style="color;rgb(102,0,153); font-size; 24px;">Le Nouveau Quizz Vous Attend ****<img src="https://i.servimg.com/u/f47/12/27/40/27/image_21.png" a="" href="https://dangela.forumgratuit.org/t259p75-le-quizz" /><span style=" color:=" "="" rgb(102,="" 0,="" 153);="" font-size:="" 24px;"=""><strong><span style="color: rgb(102, 0, 153); font-size: 24px;">*** Bonne Journée à Toutes  </span></strong></span></span></strong></span><strong><strong></strong><span style="color: rgb(102, 0, 153); font-size: 24px;"></span>                     </strong>          
      <div style="" =""="" data-speed="6" data-stop="n" data-direction="up" class="bandef">
                                                     <br />                                  
      </div><strong><strong><span></span>         </strong>      </strong>          
   </div><strong><strong><strong></strong></strong></strong>
</div>

bonne soirée

[creange]

bon ça y est j'ai enfin réussi à mettre le lien sur mes images

[chattigre]

Bonjour,
J'ai assaini votre code pour qu'il soit syntaxiquement correct déjà. Est-ce que cela résoudrait aussi le problème de direction de défilement ?...

Code:


        <div class="bandef" data-direction="up" data-stop="n" data-speed="6">
                                                                 
          <div>
                <span style="color: rgb(102, 0, 153); font-size: 24px;"><strong>***Détends-Vous et Amusez-Vous Bien</strong></span>
          </div>                       
          <span style="color: rgb(102, 0, 153); font-size: 24px;">
             <strong>Le Nouveau Rébus Est En Ligne</strong><a href="https://dangela.forumgratuit.org/t158p150-le-jeu-du-rebus"><img src="https://i.servimg.com/u/f47/12/27/40/27/rebuss11.gif "> </a></span>
             <span style="color: rgb(102,0,153); font-size: 24px;">***Le Nouveau Quizz Vous Attend <a href="https://dangela.forumgratuit.org/t259p75-le-quizz"><img src="https://i.servimg.com/u/f47/12/27/40/27/image_21.png"></a></span>
             <span style=" color:rgb(102,0, 153);font-size: 24px;"><strong>*** Bonne Journée à Toutes  </span></strong>
        </div>

Bonne soirée

[creange]

non au contraire 
 le 1er texte défile toujours à gauche et le texte avec images ne bouge plus .....

[creange]

Bonjour pour le défilement du haut il n'en veut pas 
du coup j'ai tout remis sur  la gauche pas grave ... par contre dès que je complète le texte avec des 
images et du textes supplémentaires ça coupe avant la fin de la banière ??? sur le widget du portail
alors que ça fonctionne parfaitement sur l'annonce de l'index .....

Bonne journée

[chattigre]

Bonjour,

Pour info il y a bien un souci au niveau du script de la version "avancée" qui n'est pas correctement paramétrable.

Donc pour le moment, une solution "propre" pour un défilement vers le haut (sans utiliser marquee) n'est pas disponible "clé en main"...

En ce qui me concerne je n'aurai pas la possibilité de regarder ce week-end.
Je passe la main si quelqu'un a quelque chose à vous proposer

par contre dès que je complète le texte avec des 
images et du textes supplémentaires ça coupe avant la fin de la banière ??? sur le widget du portail
alors que ça fonctionne parfaitement sur l'annonce de l'index .....

Le problème persiste en précisant une largeur pour l'image ?
(sur la balise <img> ajouter  style="width: 300px; height: auto;" pour 300 pixels de large par exemple.

Code:

<img src="https://i.servimg.com/u/f47/12/27/40/27/rebuss11.gif " style="width: 300px; height: auto;">

Bonne journée

[Bipo]

Bonjour creange,

Première chose, j'ai nettoyé votre code HTML :

Code:

<div class="bandef" data-direction="up" data-stop="n" data-speed="6">
     <span style="color: rgb(102, 0, 153); font-size: 24px; font-weight: bold;">
        ***Détends-Vous et Amusez-Vous Bien
    </span>
     <br/>
     <br/>
     <span style="color: rgb(102, 0, 153); font-size: 24px; font-weight: bold;">
        Le Nouveau Rébus Est En Ligne
    </span>
    <br />
    <a href="https://dangela.forumgratuit.org/t158p150-le-jeu-du-rebus"><img src="https://i.servimg.com/u/f47/12/27/40/27/rebuss11.gif "></a>
    <br />
    <br />
    <span style="color: rgb(102, 0, 153); font-size: 24px; font-weight: bold;">
        ***Le Nouveau Quizz Vous Attend
    </span>
    <br />
    <a href="https://dangela.forumgratuit.org/t259p75-le-quizz"><img src="https://i.servimg.com/u/f47/12/27/40/27/image_21.png"></a>
    <br />
    <br />
    <span style="color: rgb(102, 0, 153); font-size: 24px; font-weight: bold;">
        *** Bonne Journée à Toutes
    </span>
</div>

J'ai mis des < br /> pour faire des retours à la ligne. Toutefois, si vous souhaitez les supprimer, libre à vous.

Ensuite : vous allez remplacer le script Javascript (donné dans le tutoriel) par celui-ci :

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Code:

$(function($) {
    var m = $('.bandef'),
        w = 0,
        cw = m.parent().add('<span />').width(),
        st = m.data('stop');
        di = m.data('direction');
        sp = m.data('speed');

        if (st == 'y') {
            m.attr({
                'onmouseover': 'this.stop();',
                'onmouseout': 'this.start();'
            });
        }

        m.attr('direction', di).attr('scrollamount', sp).removeAttr('class').parent().html(m.parent().html().replace(/div/g, 'marquee'));
        m.css('max-width', cw + 'px').fadeIn().closest('td.row1').css('padding', '2px 0');

        $('.bandef img, .bandef span').each(function() {
            w = w + parseInt($(this).add('<span />').width());
        });
        if ($('.bodylinewidth').length != 0) $('.bandef').each(function() {
            if ($(this).parent().is('div.gensmall')) w = w + cw;
        });
        $('head').append('<style id="marquee_style">@-webkit-keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } } @keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } }</style>');
        if (st == 'n') {
            $('#marquee_style').append('.bandef:hover{ -webkit-animation-play-state: initial !important; animation-play-state: initial !important }');
        }
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Normalement, si vous changez "left" pour "up", ça devrait fonctionner (comme les autres variables speed et stop).

Bonne fin de journée sur Forumactif.
Bipo.

[creange]

Merci pour l'aide Chattigre

[creange]

Bonjour Bipo merci pour la correction  j'ai supprimé les <br> c'est parfait   

juste une petite question comment faire pour qu'il stoppe au passage de la souris ?

bonne journée

[Bipo]

Bonjour creange,

Dans votre code HTML, il faut remplacer n par y pour la variable data-stop.

Bon après-midi sur Forumactif.
Bipo.

[creange]

euh me revoilà parce que j'ai autre souci je n'ai plus de barre d'outils sur mon éditeur
quand je mets le code java script ...?
J'ai fait un essai en le retirant j'ai retrouvé ma barre d'outils mais plus ma banière ....!
merci pour l'aide
bonne fin de journée

[Bipo]

Re,

Au mieux, appliquez ce script uniquement sur l'index de votre forum et non sur toutes les pages.

Bonne soirée.
Bipo.

[creange]

Merci Bipo j'ai mis que sur le portail et ça marche 
bonne fin de soirée

[creange]

le sujet est clos