Text défilant li-scroller qui ne fonctionne pas

Résolu
gintoxic Messages postés 566 Statut Membre -  
gintoxic Messages postés 566 Statut Membre -
Bonjour,
bonjour,
je suis hébergé chez oxatis (pour le contexte) et je voudrais faire défiler du texte via un script de plugin jQuery qui est li-scroller.
j'ai donc mis en place les fichiers (css et js) dans mon interface, copié/coller mon <ul> et ses <li> et ajouter le petit morceau de code dans mon <head></head>
mais au final, dans le backOffice, le text défile et quand je regarde ma page sur le web j'ai un gros menu de 4 items (les <li>).

je ne comprends pas si j'ai mal fait quelque chose ou si Oxatis me bloque des paramètres...
et ils ne peuvent pas me répondre

pourriez-vous m'aider svp ?

merci

la source du script : http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

ps j'ai testé le script via mon editeur de text sur un fichier seul avant et ça fonctionne mais pas sur mon site...


1 réponse

Réponse 1 / 1
Lerendra Messages postés 553 Statut Membre 299
 
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 
<head></head>
et la partie du texte qui défile ainsi que le fichier Css ?

Lerendra
0
gintoxic Messages postés 566 Statut Membre 10
 
bonjour et merci pour ta réponse.
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 
<script src="/Files/104203/preload.js"></script> 
<script type="Text/Javascript"> 
var urlAddress = "http://www.nympheae.fr"; 
var pageName = "Nympheae.fr, sextoys et bien-être haut de gamme"; 
function addToFavorites(anchor) 
{ 
if (window.external) 
{ 
window.external.AddFavorite(anchor.getAttribute('href'), anchor.getAttribute('title')); 
} 
} 
</script> 
<style> 
#scrollingText 
{ 
width:300px; 
height: 30px; 
position: relative; 
} 
#scrollingText div.scrollableArea p 
{ 
display: block; 
float: left; 
margin: 0; 
padding: 0px 0px 20px 20px; 
font-family: Times, 'Times New Roman', Georgia, Serif; 
font-size:75px; 
font-weight: bold; 
background-color: #fff; 
color: #000; 
white-space: nowrap; 
} 
#disclaimer-cadre{color:#000 !important; font-size:2em !important;font-weight:bold !important;border:1px solid #000 !important;} 
.noPointer{cursor:default !important} 
.test{position:fixed} 
</style> 
<link rel="icon" href="/Files/104203/Img/07/lotus-icon.png" rel="nofollow" /> 
<meta name="google-site-verification" content="WoSZG158bR5cikBtZkycGPvGh2sCt6wxfK0k1m43DP4" /> 
<link rel="stylesheet" href="/Files/104203/multiCss-minimized.css" rel="nofollow" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="/Files/104203/ensemble-JS-minimized.js"></script> 
<meta name="google-site-verification" content="XDSuIG-l7zReDOqyzPR_mWY5ZYy6uj1y2JSBYnYIt24" /> 
<meta name="p:domain_verify" content="88b4e69104dcec7dd4aa73806ceff823"/> 
<meta name="msvalidate.01" content="B745F6DBE2EA5500BAEEA3EA8BE2EE36" /> 
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css' rel="nofollow" /> 
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic|Niconne' rel='stylesheet' type='text/css' rel="nofollow" /> 
<link rel="stylesheet" href="/Files/104203/liscroller.css" rel="nofollow" /> 
<script type="text/javascript" src="/Files/104203/142409292877040.js"></script> 
<!-- Script à placer dans le header pour la fonction popup --> 
<script type="text/javascript"> 
<!-- 
function popitup(url) { 
width = 450; 
height = 200; 
if(window.innerWidth) 
{ 
var left = (window.innerWidth-width)/2; 
var top = (window.innerHeight-height)/2; 
} 
else 
{ 
var left = (document.body.clientWidth-width)/2; 
var top = (document.body.clientHeight-height)/2; 
} 
newwindow=window.open(url,'name','menubar=no, scrollbars=no, top='+top+', left='+left+', width='+width+', height='+height+''); 
if (window.focus) {newwindow.focus()} 
return false; 
} 
// --> 
</script> 
<!-- Fin de la fonction popup --> 
</script> 
<!-- Slider Kit execution --> 
<script type="text/javascript"> 
$(window).load(function(){ 

$(".anytagselector").sliderkit({ 
shownavitems:5, 
auto:false 
}); 

}); 
</script> 
<script> 

$(document).ready(function(){ 
$(function(){ 
$("ul#defilnews").liScroll(); 
}); 
}) 

</script>
0
gintoxic Messages postés 566 Statut Membre 10
 
En fait, je crois que le jQuery n'est pas pris en compte car il devrait y avoir des class de créées et ce n'est pas le cas..
0
Lerendra Messages postés 553 Statut Membre 299
 
Oh mon dieu ! C'est codé comme un cochon, il y en a partout ! C'est toi qui a tout coder ? Même si je pense qu'il y a beaucoup de code copier coller. C'est normal que dans ton header tu n'as pas la ligne de code qui fait appel à ton fichier CSS ?

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 
ul.newsticker
alors que tu as nommé avec un 
id
dans ton code html : 
<ul id="newsticker">
! Le 
.
ne marche qu'avec le type : 
class
. 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 : 
<link rel="stylesheet" media="screen" href="style.css"/>
, 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 : 
<ul id="newsticker">
	<li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
	<li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
	<li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>
0
gintoxic Messages postés 566 Statut Membre 10
 
je n'ai certainement pas mis tous les éléments parce que ça fonctionne sur un fichier test en local.

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);
				});			
		});	
};
0
gintoxic Messages postés 566 Statut Membre 10
 
et visiblement les class ne sont pas créeée
au fait le fichier css est lié : <link rel="stylesheet" href="/Files/104203/liscroller.css" rel="nofollow" />
0

Discussions similaires

Chanson la li la li la la la?
blue44650 -
Fb75013 -

3 réponses
titre techno house annees 90
Poudie -
Capucine -

21 réponses
La la la dee la da da dee, dee la la la
Syltheril -
ludeb_0155 -

10 réponses
Chanson des années 1990s avec lala lala
uragano -
funkyspot -

11 réponses
copie de texte
jean -
jean -

5 réponses