Jump to content

Petit bandeau en haut du site (rassurante)

NowShop
 Share

Recommended Posts

Eolia Grand Master

Eolia

Posted
Posted

A adapter/coller dans votre header.tpl: 

<div id="banner-slider">
	<div class="banner-slide-top">
		<style>
			#banner-slider .banner-slide-top {
				padding:0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				position: relative;
				max-width:100%;
				background-color:#d5d5d6;
				color:black;
				text-align: center;
				font-size:11px;
			}
			#banner-slide{
				height:31px;
				argin: 0;
				overflow: hidden;
			}
			#banner-slide li{
				list-style: none;
				padding: 10px 0;
				height:31px;
				font-size: 16px;
			}
			#banner-slide li a{
				color:black;
				text-decoration: none;
			}
		</style>	
		<ul id="banner-slide">
			<li>
				<a href="link.html">
					<b>{l s='OFFRE SPECIALE !'} </b>{l s='pour les mamies'}
				</a>
			</li>
			<li>
				<b>{l s='Un déambulateur offert'}</b> {l s='dès 3000€'}
			</li>
			<li>
				<b>{l s='Cartes Vermeil'}</b> {l s='acceptées'}
			</li>
			<li>
				{l s='Age limite :'} <b>{l s='150 ans'}</b>
			</li>
		</ul>
		<script>
		{literal}
			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);
		{/literal}
		</script>	
	</div>
</div>

 

Link to comment
Share on other sites
NowShop Newbie

NowShop

Posted
  • Author
Posted
3 hours ago, Eolia said:

A adapter/coller dans votre header.tpl: 


<div id="banner-slider">
	<div class="banner-slide-top">
		<style>
			#banner-slider .banner-slide-top {
				padding:0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				position: relative;
				max-width:100%;
				background-color:#d5d5d6;
				color:black;
				text-align: center;
				font-size:11px;
			}
			#banner-slide{
				height:31px;
				argin: 0;
				overflow: hidden;
			}
			#banner-slide li{
				list-style: none;
				padding: 10px 0;
				height:31px;
				font-size: 16px;
			}
			#banner-slide li a{
				color:black;
				text-decoration: none;
			}
		</style>	
		<ul id="banner-slide">
			<li>
				<a href="link.html">
					<b>{l s='OFFRE SPECIALE !'} </b>{l s='pour les mamies'}
				</a>
			</li>
			<li>
				<b>{l s='Un déambulateur offert'}</b> {l s='dès 3000€'}
			</li>
			<li>
				<b>{l s='Cartes Vermeil'}</b> {l s='acceptées'}
			</li>
			<li>
				{l s='Age limite :'} <b>{l s='150 ans'}</b>
			</li>
		</ul>
		<script>
		{literal}
			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);
		{/literal}
		</script>	
	</div>
</div>

 

Merci je vais le tester

Link to comment
Share on other sites
NowShop Newbie

NowShop

Posted
  • Author
Posted

Oui mais le problème quand je change le texte c'est qu'il me marque une erreur 

"

Cette page ne fonctionne pas

Impossible de traiter cette demande via nowshop.yn.fr à l'heure actuelle.

HTTP ERROR 500
 
Je suis obliger de remettre ce que vous avez mis ..Et j'ai pas compris ce que vous avez dit
Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

si vous mettez un texte avec des apostrophes il faut les échapper avec un antislash devant:  "Je m\'appelle"

En 1.7 Jquery est chargé en fin de page, le bout de script que je vous ai donné est en haut de page et a besoin de Jquery, il faut donc enlever cette partie du header et la mettre dans le footer.tpl avant la balise </body> 

		<script>
		{literal}
			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);
		{/literal}
		</script>

 

Link to comment
Share on other sites
NowShop Newbie

NowShop

Posted
  • Author
Posted
4 minutes ago, Eolia said:

si vous mettez un texte avec des apostrophes il faut les échapper avec un antislash devant:  "Je m\'appelle"

En 1.7 Jquery est chargé en fin de page, le bout de script que je vous ai donné est en haut de page et a besoin de Jquery, il faut donc enlever cette partie du header et la mettre dans le footer.tpl avant la balise </body> 


		<script>
		{literal}
			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);
		{/literal}
		</script>

 

J'ai fais exactement comme vous, j'ai réussi à mettre un texte sans problème grâce à votre solution mais aucun texte défilant se met pourtant j'ai mis cette partie de script dans footer et j'ai enlever de header le script

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

Ok, on va faire autrement...

Dans le répertoire de votre thème vous devez avoir un fichier assets/js/custom.js

Vous supprimez le code mis dans le footer.tpl et vous mettez ce code-ci dans assets/js/custom.js 

		<script>
			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);
		</script>

ce n'est pas exactement, j'ai retiré les balises {literal] {/literal}

 

Si votre texte est en gras c'est parce qu'il est entouré de balises bold:  <b>....</b>

Il suffit de les enlever

Link to comment
Share on other sites
yama Enthusiast

yama

Posted
Posted
1 hour ago, Eolia said:

Vous supprimez le code mis dans le footer.tpl et vous mettez ce code-ci dans assets/js/custom.js

Question random : Ca change quoi de mettre dans le custom au lieu de footer ?

Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

je ne suis pas expert de la 1.7 (je ne l'aime pas) mais le footer.tpl n'est pas le dernier fichier lu dans la construction de la page.

JQuery est chargé après le footer

Le fichier custom.js est "normalement" chargé avec celui du thème et donc après le lancement de JQuery

  • Like 1
Link to comment
Share on other sites
Eolia Grand Master

Eolia

Posted
Posted

Hop hop hop trouvé^^

Le script est bien chargé mais il ne faut pas mettre les balises <script> ... </script> dans ce fichier.

Pardon pour mon erreur :(

 

Donc le code à mettre est  

			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);

Puis vider le cache^^

Link to comment
Share on other sites
NowShop Newbie

NowShop

Posted
  • Author
Posted
22 hours ago, Eolia said:

Hop hop hop trouvé^^

Le script est bien chargé mais il ne faut pas mettre les balises <script> ... </script> dans ce fichier.

Pardon pour mon erreur :(

 

Donc le code à mettre est  


			jQuery(document).ready(function($) {
					$("#banner-slide").slideEffect();	
			});
			;(function($) {
				$.fn.slideEffect = function(options) {
					var settings = $.extend({
							timer_latency : 80
					}, options);

					return this.each(function() {        
						var timer, $wrapper = $(this);				
						$wrapper.children().addClass("slide");
						timer = setTimeout(switch_slide, $wrapper.find(".slide:eq(0)").text().length * settings.timer_latency);
						function switch_slide() {
							$wrapper.find(".slide:eq(0)").animate({"margin-top" : -$wrapper.height()}, function () {
									$(this).css({"margin-top": 0}).appendTo($wrapper);
									clearTimeout(timer);
									timer = setTimeout(switch_slide, $(this).text().length * settings.timer_latency);
							});
						}
					});
				};
		})(jQuery);

Puis vider le cache^^

Merci beaucoup, le problème est résolu, tout va bien !

Link to comment
Share on other sites
  • 5 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...