Text défilant li-scroller qui ne fonctionne pas
Résolu/Fermé
gintoxic
Messages postés
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
-
24 août 2014 à 04:33
gintoxic Messages postés 520 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 - 24 août 2014 à 18:04
gintoxic Messages postés 520 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 - 24 août 2014 à 18:04
A voir également:
- Text défilant li-scroller qui ne fonctionne pas
- La la li la la la - Forum Musique / Radio / Clip
- Sublime text en francais ✓ - Forum Logiciels
- Yggtorrent li - Guide
- Atom text editor - Télécharger - Édition & Programmation
- Excel ne défile plus ✓ - Forum Excel
1 réponse
Lerendra
Messages postés
408
Date d'inscription
jeudi 26 septembre 2013
Statut
Membre
Dernière intervention
28 mai 2018
295
24 août 2014 à 10:35
24 août 2014 à 10:35
Bonjour !
Si sur ton site internet, tu as "un gros menu de 4 item", c'est que le fichier CSS n'est pas pris en compte. Car le javascript ne sert que à faire défiler le text, et non à le mettre page. Pourrai-je avoir la partie
Lerendra
Si sur ton site internet, tu as "un gros menu de 4 item", c'est que le fichier CSS n'est pas pris en compte. Car le javascript ne sert que à faire défiler le text, et non à le mettre page. Pourrai-je avoir la partie
<head></head>et la partie du texte qui défile ainsi que le fichier Css ?
Lerendra
24 août 2014 à 14:27
voici les fichiers
css
.tickercontainer { /* the outer div with the black border */
background: #000;
width: 525px;
height: 49px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 525px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 526px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #000;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 20px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
le head
24 août 2014 à 15:16
24 août 2014 à 15:35
Alors, tu t'ais trompé dans le fichier css :
FICHIER CSS
ul.newsticker { /* that's your list */ position: relative; left: 0px; font: bold 10px Verdana; list-style-type: none; margin: 0; padding: 0; }Pourquoi tu mets un dans alors que tu as nommé avec un dans ton code html : ! Le ne marche qu'avec le type : . Du coup, tu dois remplacer les points par des # . celà donne :
ul#newsticker { /* that's your list */ position: relative; left: 0px; font: bold 10px Verdana; list-style-type: none; margin: 0; padding: 0; } ul#newsticker li { display: inline; float: left; /* important: display inline gives incorrect results when you check for elem's width */ margin: 0; padding: 0; background: #000; } ul#newsticker a { white-space: nowrap; padding: 0; color: #ff0000; font: bold 20px Verdana; margin: 0 50px 0 0; } ul#newsticker span { margin: 0 10px 0 0; }Ensuite, j'ai vu que dans le code que tu m'as passé, le fichier .html ne fait pas appelle au fichier .CSS du coup, le css n'est pas prit en compte. il manque cette ligne la : , tu remplaces style.css par le nom de ton fichier.css
Le code jquery ne me plaît pas...je l'ai donc remplacé par :
<script> var newsticker;// l'element a deplacer var psinit = 580; // position horizontale de depart var pscrnt = psinit; function texteDefile() { if (!newsticker) newsticker = document.getElementById('newsticker'); if (newsticker) { if(pscrnt < ( - newsticker.offsetWidth) ){ pscrnt = psinit; } else { pscrnt+= -1; // pixel par deplacement } newsticker.style.left = pscrnt+"px"; } } setInterval("texteDefile()",20); // delai de deplacement </script>Je t'ai mit des commentaires pour que tu puisses modifier si besoin.
et le code html reste :
24 août 2014 à 16:08
c'est un plugin et si tu regarde sur le lien que j'ai mis dans mon premier message tu verras les fichiers à télécharger
ainsi newsticker est une class créée par le plugin jquery que je pose ici
jQuery.fn.liScroll = function(settings) {settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 1;
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
});
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width
$strip.width(stripWidth);
var totalTravel = stripWidth+containerWidth;
var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};
24 août 2014 à 16:10
au fait le fichier css est lié : <link rel="stylesheet" href="/Files/104203/liscroller.css" rel="nofollow" />