Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Largeur d'un div ?

Largeur d'un div ?

18 réponses
Avatar
ecm.mec
Bonjour,

Je cherche à connaître la largeur effective d'un div qui contient du
texte en <nobr> mais je ne sais pas comment même si c'est possible ? En
fait, je veux faire une bandeau qui défile horizontalement... et que ça
boucle.

Voilà mon exemple :

<html>
<head>
<title>bandeau déroulant en JavaScript</title>
<script type="text/javascript">
position_bandeau=0;
function affiche_bandeau() {
banniere=document.getElementById('bandeau');
banniere.style.left=(position_bandeau-=5)+"px";
if (position_bandeau>-1540)
ID=setTimeout("affiche_bandeau()",40);
else clearTimeout(ID);
}
</script>
</head>
<body onload="affiche_bandeau()">
<div id="bandeau" style="position: fixed; top:0; right:0;">
<h2 style="overflow: hidden">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...</nobr>
</h2>
</div>
<div style="position: relative; top: 50px; left: 0px;
width:100px; height: 1000px; background-color: yellow">
blabla
</div>

</body>
</html>

Vous avez une idée ?

Merci par avance,

Thierry Loiseau
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
ASM
Bonjour,

Je cherche à connaître la largeur effective d'un div qui contient du
texte en <nobr> mais je ne sais pas comment même si c'est possible ? En
fait, je veux faire une bandeau qui défile horizontalement... et que ça
boucle.


il suffit au bord droit du div du texte (que tu auras fixé)
de savoir que sa marge négative est arrivée au total de sa largeur
non ?

avec une image et en fixant la largeur de l'affichage
http://perso.wanadoo.fr/stephane.moriaux/internet/web_vrml/demos.htm
en bas à gauche cliquer le lien : 'VOIR'
(et avoir le JS actif)

je suppose qu'on peut remplacer l'image par un div dimensionné ?

le JS est assez cracra pour pouvoir être compatible NC4 (et IE4 ?)


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ecm.mec
ASM wrote:

il suffit au bord droit du div du texte (que tu auras fixé)
de savoir que sa marge négative est arrivée au total de sa largeur
non ?


(...)

je suppose qu'on peut remplacer l'image par un div dimensionné ?


Je ne peux pas dimensionné le div, car la longueur du texte sera
variable (texte dynamique fournit par php)

Actuellement, je me retrouve avec un div SDF*

Thierry

[*] Sans Dimension Fixe

Avatar
ASM
Je ne peux pas dimensionné le div, car la longueur du texte sera
variable (texte dynamique fournit par php)


alors un bricolage + ou - compatible avec taille police utilisateur ?

version 1 :

<script type="text/javascript">
function initier() {
depart = 40; // 2/3 largeur suposée de la fenetre en em
larg = document.getElementById('mesg').innerHTML.length;
larg = +depart+larg*0.5;
position_bandeau = depart;
affiche_bandeau();
}
function affiche_bandeau() {
position_bandeau-=0.2;
if(position_bandeau <= -(larg))
position_bandeauÞpart;
banniere=document.getElementById('bandeau');
banniere.style.left=(position_bandeau)+"em";
ID=setTimeout("affiche_bandeau()",40);
}
</script>
</head>
<body onload="initier()">
<div id="bandeau" style="position: fixed; top:0; right:0;">
<h2 style="overflow: hidden">
<span id="mesg" style="white-space: nowrap">Nouveau forum de suggestion !
N'h&eacute;sitez pas &agrave; nous d&eacute;poser vos messages.
En plus une liste de liens pratiques en bas de page est accessible...</span>
</h2>
</div>

version 2 :

<script type="text/javascript">
var message = 'Nouveau forum de suggestion ! N'h&eacute;sitez '+
' pas &agrave; nous d&eacute;poser vos messages. En plus '+
'une liste de liens pratiques en bas de page est accessible...';

function initier() {
depart = 40;
larg = +depart+message.length*0.5;
position_bandeau = depart;
document.getElementById('mesg').innerHTML = message;
affiche_bandeau();
}
function affiche_bandeau() {
position_bandeau-=0.2;
if(position_bandeau <= -(larg))
position_bandeauÞpart;
banniere=document.getElementById('bandeau');
banniere.style.left=(position_bandeau)+"em";
ID=setTimeout("affiche_bandeau()",40);
}
</script>
</head>
<body onload="initier()">
<div id="bandeau" style="position: fixed; top:0; right:0;">
<h2 style="overflow: hidden">
<span id="mesg" style="white-space: nowrap"></span>
</h2>
</div>

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ecm.mec
ASM wrote:

Je ne peux pas dimensionné le div, car la longueur du texte sera
variable (texte dynamique fournit par php)


alors un bricolage + ou - compatible avec taille police utilisateur ?


Ok, merci Stephane pour ton script... de mon côté (et ben, j'avais plus
accès à l'internet et n'ai pas donc à temps voir ta proposition), j'ai
pondu ce qui suit et qui permet a priori de suivre les contraintes
suivantes :

Afficher à la suivante le texte en double si ce bloc texte est plus
large que la fenêtre, sinon, n'afficher qu'une fois le texte...

<html>
<head>
<title>bandeau d&eacute;roulant en JavaScript</title>
<script type="text/javascript">
position_bandeau=0;
function affiche_bandeau() {
largeur_win=window.innerWidth;
banniere=document.getElementById('bandeau');
banniere2=document.getElementById('bandeau2');
banniere.style.left=(position_bandeau-=5)+"px";
if (largeur>largeur_win)
banniere2.style.left=(position_bandeau+largeur)+"px";
else banniere2.style.left=largeur_win+"px";
if (position_bandeau<-largeur) {
if (largeur>largeur_win) position_bandeau=0;
else
position_bandeau=largeur_win;
}
ID=setTimeout("affiche_bandeau()",40);
}
</script>
</head>
<body onload="largeur=document.getElementById('texte').scrollWidth;
affiche_bandeau()">

<div id="bandeau" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden" id="texte">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr></h4>
</div>

<div id="bandeau2" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr>
</h4>
</div>

</body>
</html>


Avatar
loiseauthierry
ecm wrote:

j'ai pondu ce qui suit et qui permet a priori de suivre les contraintes
suivantes :

Afficher à la suivante le texte en double si ce bloc texte est plus
large que la fenêtre, sinon, n'afficher qu'une fois le texte...


Voilà une autre version qui me plaît mieux, où les contraintes sont
inversées, et avec la correction d'un bug qui faisait apparaître un
barre de scroll horizontale, si le texte était moins large que la
fenêtre :-))

<html>
<head>
<title>bandeau d&eacute;roulant en JavaScript</title>
<script type="text/javascript">
position_bandeau=0;
function affiche_bandeau() {
largeur_win=window.innerWidth;
banniere=document.getElementById('bandeau');
banniere2=document.getElementById('bandeau2');
banniere.style.left=(position_bandeau-=1)+"px";
if (largeur<largeur_win)
banniere2.style.left=(position_bandeau+largeur)+"px";
else banniere2.style.left=-largeur+"px";
if (position_bandeau<-largeur) {
if (largeur<largeur_win) position_bandeau=0;
else
position_bandeau=largeur_win;
}
ID=setTimeout("affiche_bandeau()",5);
}
</script>
</head>
<body onload="largeur=document.getElementById('texte').scrollWidth;
affiche_bandeau()">

<div id="bandeau" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden" id="texte">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr></h4>
</div>

<div id="bandeau2" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr>
</h4>
</div>

</body>
</html>
--
4 "Il y a 10 sortes de personnes sur Terre : ceux qui connaissent
3 le système et savent compter et ceux qui ne savent pas compter"
2
1....'....12.....'....24.....'....36.....'....48.....'....60.....'....72

Avatar
loiseauthierry
Thierry Loiseau wrote:

j'ai pondu ce qui suit et qui permet a priori de suivre les contraintes
suivantes :
(...)



Je n'ai pas testé avec IE sous Windows... Ceux-ce qui peuvent le faire
veulent bien me dire ce qu'il en est ?

Pour ma part, ça marche avec FF (windows / macosx) ainsi que Safari (ça
roule) et Opéra (v8.02, pour macosx) et là, comportement bizare quant à
la barre de scroll horizonale :-((

<html>
<head>
<title>bandeau d&eacute;roulant en JavaScript</title>
<script type="text/javascript">
position_bandeau=0;
function affiche_bandeau() {
largeur_win=window.innerWidth;
banniere=document.getElementById('bandeau');
banniere2=document.getElementById('bandeau2');
banniere.style.left=(position_bandeau-=1)+"px";
if (largeur<largeur_win)
banniere2.style.left=(position_bandeau+largeur)+"px";
else banniere2.style.left=-largeur+"px";
if (position_bandeau<-largeur) {
if (largeur<largeur_win) position_bandeau=0;
else
position_bandeau=largeur_win;
}
ID=setTimeout("affiche_bandeau()",5);
}
</script>
</head>
<body onload="largeur=document.getElementById('texte').scrollWidth;
affiche_bandeau()">

<div id="bandeau" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden" id="texte">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr></h4>
</div>

<div id="bandeau2" style="position: absolute; top:0; right:0">
<h4 style="overflow: hidden">
<nobr>Nouveau forum de suggestion ! N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. En plus une liste de liens
pratiques en bas de page est accessible...&nbsp;
</nobr>
</h4>
</div>

</body>
</html>

--
4 "Il y a 10 sortes de personnes sur Terre : ceux qui connaissent
3 le système et savent compter et ceux qui ne savent pas compter"
2
1....'....12.....'....24.....'....36.....'....48.....'....60.....'....72


Avatar
YD

j'ai pondu ce qui suit et qui permet a priori de suivre les contraintes
suivantes :



(...)

Je n'ai pas testé avec IE sous Windows... Ceux-ce qui peuvent le faire
veulent bien me dire ce qu'il en est ?


window.innerWidth n'est pas reconnu par IE !

Pour ma part, ça marche avec FF (windows / macosx) ainsi que Safari (ça
roule) et Opéra (v8.02, pour macosx) et là, comportement bizare quant à
la barre de scroll horizonale :-((


Déjà remarqué ce problème, je m'en suis sorti en englobant le tout dans une
autre DIV, position absolute, overflow hidden...

Voici une proposition (testée IE6, Fx 1.5, Opera 8.0.2 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>bandeau déroulant en JavaScript</title>
<script type="text/javascript">
var banniere, largeur, position_bandeau;
function init(){
banniere=document.getElementById('bandeau');
var leTexte=document.getElementById('texte');
leTexte.innerHTML+="&nbsp;&nbsp;&nbsp;";
largeur=leTexte.scrollWidth;
position_bandeau=document.getElementById('conteneur').offsetWidth;
var largeur_win=window.innerWidth?window.innerWidth:window.document.body.offsetWidth;
var repet=1+Math.max(1, Math.ceil(position_bandeau/largeur));
for(var i=1; i<repet; i++)
leTexte.innerHTML+=leTexte.innerHTML;
affiche_bandeau()
}
function affiche_bandeau() {
banniere.style.left=position_bandeau+"px";
if((--position_bandeau)<=-largeur)
position_bandeau=0;
ID=setTimeout("affiche_bandeau()",5);
}
onload=init;
</script>
<style type="text/css">
body {margin:0}
#conteneur {position: absolute; left:0; top:0; width:100%; overflow: hidden; background: yellow }
#bandeau {position: relative; white-space: nowrap;}
#texte {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: maroon;}
</style>
</head>
<body>
<div id="conteneur"><div id="bandeau"><span id="texte">Nouveau
forum de suggestion !&nbsp; N'h&eacute;sitez pas &agrave;
nous d&eacute;poser vos messages. De plus une liste de liens
pratiques en bas de page est accessible...
</span></div></div>
</body>
</html>

HTH
--
Y.D.



Avatar
ASM

Voici une proposition (testée IE6, Fx 1.5, Opera 8.0.2 :


fonctionne impec : FF
ne boucle pas avec IE Mac

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
YD


Voici une proposition (testée IE6, Fx 1.5, Opera 8.0.2 :


fonctionne impec : FF


Je m'en doutais :-)

ne boucle pas avec IE Mac


Si ça défile une fois, c'est certainement que IE Mac ne connaît
pas innerHTML...

J'ai testé avec IE 5.5 OK ; IE 5.01 ne connaît pas white-space,
il faudrait peut-être lui remplacer les espaces et sauts de ligne
par des &nbsp; ; IE 4 ne connaît pas getElementById, innerHTML etc.


--
Y.D.


Avatar
loiseauthierry
Salut Yves,

YD wrote:

ne boucle pas avec IE Mac


Si ça défile une fois, c'est certainement que IE Mac ne connaît
pas innerHTML...


largeur=leTexte.scrollWidth => IE 5.2 retourne undefined

Merci en tout cas merci pour ta proposition, et d'ailleurs, je ne
comprends toujours pas comment forcer la fond du div dans une couleur
donnée en pleine largeur, avec mon script, ça foire :-(

En tout cas, voilà ci-dessous mon dernier test : si largeur du texte est
supérieur à la largeur de la fenêtre, il y a un effet "ping-pong",
sinon, le texte défile de droite à gauche, disparait pour re-défiler de
droite à gauche.

<html>
<head>
<title>bandeau d&eacute;roulant en JavaScript</title>
<style type="text/css">
.banniere {
/*
font-family: verdana;
*/
}
</style>
<script type="text/javascript">
position_bandeau=0;
pingúlse;
pongúlse;
test=true;
function affiche_bandeau() {

if (window.innerWidth) largeur_win=window.innerWidth;
else largeur_win=document.body.clientWidth;

document.getElementById('fond_banniere').style.width=largeur_win+"px";
if (largeur_win*.9>largeur) pong=true; else pongúlse;
banniere=document.getElementById('bandeau');
if (pong) {
if (position_bandeau<=0) ping=true;
if (position_bandeau>=largeur_win-largeur) pingúlse;
if (ping)
banniere.style.left=(position_bandeau+=1)+"px";
else banniere.style.left=(position_bandeau-=1)+"px";
}
else
{
banniere.style.left=(position_bandeau-=1)+"px";
if (position_bandeau<-largeur)
position_bandeau=largeur_win;
}

ID=setTimeout("affiche_bandeau()",5);
}
</script>
</head>
<body onload="largeur=document.getElementById('texte').scrollWidth;
affiche_bandeau()">

<div style="position: absolute; top: 60px">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p><p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p><p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</p><p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy
sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd
magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat.
</p><p>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus
</p>
</div>

<!-- ///////////////////////////////////////////////////////////// -->

<div style="position: fixed; top: 0px;overflow: hidden;
top:0; left:0; background-color:#f9e9d9; opacity: 0.8"
id="fond_banniere">
<h4 style="overflow: hidden; background-color:#f9e9d9;color: #f9e9d9;"
class="banniere">
<nobr>
Bonjour, voici la nouvelle page d'accueil qui s'affiche &agrave;
l'ouverture de votre navigateur...
</nobr></h4>
</div>

<div id="bandeau" style="position: fixed; top:0; left:0; opacity: 1">
<h4 style="overflow: hidden;" class="banniere" id="texte">
<nobr>
Bonjour, voici la nouvelle page d'accueil qui s'affiche &agrave;
l'ouverture de votre navigateur...
</nobr></h4>
</div>



</body>
</html>
@++,
Thierry


1 2