18041 sujets

Questions générales et questions de débutants

Insérer date de début et date de fin

Bonjour,
j'ai écrit pour un blog un bandeau défilant.
Je souhaiterai qu'il apparaisse à une certaine date et disparaisse à une autre date.
Pourriez-vous m'aider à réaliser ces écritures.
Ci-dessous ce que j'ai écrit:

<span style="text-decoration: underline;"> <div style="FONT-SIZE: 30px; LEFT: 20%; MARGIN-LEFT: -300px; WIDTH: 1480px; COLOR: #FF9300; FONT-FAMILY: courier new; POSITION: absolute; TOP: 130px; HEIGHT: 450px">
<marquee width="100%" scrollamount="4"><b>bienvenue sur notre nouveau site<b></b></b></marquee></div>
</span>

Merci pour votre aide
Cette antique balise <marquee> est obsolète
https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee

Il faut utiliser un keyframe à la place

J'utilise un bandeau défilant sur un site. Cela ne correspond pas tout à fait à ta demande car je programme juste l'extinction du bandeau.
https://www.echecs-annonay.fr/
	<script type="text/javascript"> <!-- ----------- banner ------------ -->
		// Date format ISO8601
		(function(selector, message, url, until=true) {
			if(message.length > 0 && url != window.location.href) {
				if(until === true || new Date() < new Date(until)) {
					const parent = document.querySelector(selector);
					if(parent != null) {
						const container = document.createElement('DIV');
						container.id = 'banner';
						const el1 = document.createElement('DIV');
						container.appendChild(el1);
						const el2 = document.createElement('DIV');
						el1.appendChild(el2);
						var el = el2;
						if(url) {
							el = document.createElement('A');
							el.href = url;
							el2.appendChild(el);
						}
						for(var i=0; i<2; i++) {
							const span = document.createElement('SPAN');
							span.textContent = message;
							el.appendChild(span);
						}
						parent.insertBefore(container, parent.firstChild);
					}
				}
			}
		})(
			'#main > section',
			"Réunion d'avant-saison ouverte à tous - mercredi 29 août - 20h30 - 175 rue des Colombes - 07430 Davézieux",
			"<?php echo $plxShow->urlRewrite('index.php?article139/assemblee-generale-du-vendredi-29-juin-2018'); ?>",
			'2018-08-30T20:00'
		);
	</script>

Préciser dans le 1er paramètre de la fonction le container ou insérer la bannière.
Les règles CSS qui vont bien
/* ------------- banner --------------- */
@keyframes marqueelike {
	0%, 100% { margin-left: 0; }
	99.99% { margin-left: -100%; }
}
#banner {
	position: relative;
	width: 100%;
	overflow-x: hidden;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	background-color: #b24b22;
	color: #fff;
	font-family: sans-serif;
	white-space: nowrap;
}
#banner a {
	display: inline-block;
	width: 100%;
	color: #fff;
	text-decoration: none;
}
#banner:hover {
	background-color: #666;
}

#banner div {
	display: inline-block !important;
}
#banner > div > div {
	animation: linear marqueelike 25s infinite;
}
#banner div span {
	padding-left: 1rem;
	padding-right: 4rem;
}
Bonjour,
Merci Bazooka07, je vais essayer cette proposition.
Je reviendrai vers vous, peut-être, pour des éclaircissements.
A bientôt
Il y a plus simple.
Vous utilisez du PHP ou du SQL?

En javascript on peut juste :


<body onload="datepicker()">
/** Donnez un ID à vote div, par exemple */
<div id="hide" style="display:none">
Blablabla
</div>


<script>
function datepicker() {
        
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;  /** les mois commences à 0 */
        var yyyy = today.getFullYear();
         /** Je vérifie si la date actuelle est inférieure(jou) inférieure ou égale(mois) inférieure ou égale(année) à la date maximale désirée et j'affiche*/
        if(dd < 19 && mm < 8 && yyyy <= 2018){
            document.getElementById("hide").style.display = "inline";
        }
    }

</script>


Je préfère Display à Visibility(hidden/visible) car l'élèment ne prendra pas de place. Après c'est selon les besoins.
Modifié par Athos_is_coding (24 Aug 2018 - 15:43)
Sujet clos
Aller à