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

8 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
YD
Bonsoir Thierry,

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


OK !

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 :-(


Il faut créer un div conteneur width:100% et donner margin:0 au BODY...

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.


C'est visuellement plus agréable que ta première idée.

J'ai testé ta page mais IE6 (alors avant...) ne connaît pas position fixed !
Rien n'est placé correctement le texte de la bannière se retrouve sur les P...
et ne bouge pas.

Je te renvoie une version testée sur mes trois navigateurs IE6, Fx 1.5 et
Op 8.51 / Win32. J'ai essentiellement modifié les DIV et les CSS, à peine
le JS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>bandeau d&eacute;roulant en JavaScript</title>
<style type="text/css">
.banniere {
font-family: verdana;
}
body {margin: 0; padding: 0}
</style>
<script type="text/javascript">
var ping, pong, position_bandeau=0;

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

pong=largeur_win*.9>largeur;
if (pong) {
if (position_bandeau<=0) ping=true;
if (position_bandeau>=largeur_win-largeur) pingúlse;
if (ping) banniere.style.left=++position_bandeau+"px";
else banniere.style.left=--position_bandeau+"px";
}
else {
banniere.style.left=--position_bandeau+"px";
if (position_bandeau<-largeur)
position_bandeau=largeur_win;
}
ID=setTimeout("affiche_bandeau()",5);
}
onload=function(){
largeur=document.getElementById('texte').scrollWidth;
banniere=document.getElementById('bandeau');
affiche_bandeau();
}
</script>
</head>
<body>

<div style="position: absolute; top: 3em; padding: 1em; text-align: justify">
<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.
</p>
</div>

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

<div style="position: absolute; overflow: hidden; top:0; background-color:#f9e9d9; width: 100%; height: 3em"
id="fond_banniere">
<div id="bandeau" style="position: absolute; top:1em;">
<h4 style="overflow: hidden; margin-top: 0" class="banniere" id="texte">
<nobr>Bonjour, voici la nouvelle page d'accueil qui s'affiche &agrave;
l'ouverture de votre navigateur...
</nobr>
</h4>
</div>
</div>

</body>
</html>

--
Y.D.


Avatar
ASM


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


ne boucle pas avec IE Mac


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


il est très bête mais pas à ce point :-)
mais comme il ne gueule pas à l'erreur ... je ne sais ce qui merdoie.

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.


non, je crois bien que white-space est connu de mon IE
(enfin je l'utilise et il a l'air de comprendre)

de tte façon, ce que j'en dit quant à IE mac
c'est juste une info.
(déjà que çà défile une fois, on va pas se plaindre)
Bon, c'est tt de même bien du tracas pour remplacer marquee :-)

--
Stephane Moriaux et son [moins] vieux Mac



Avatar
ASM

Je te renvoie une version testée sur mes trois navigateurs IE6, Fx 1.5 et
Op 8.51 / Win32. J'ai essentiellement modifié les DIV et les CSS, à peine
le JS.


Dè piou z'en piou fort !

nada avec IE

çà doit être coton à calculer car çà saccade un peu avc FF
(à moins que je ne l'ai trop solicité précédemment ?)

vivement le bouton de marche/arret.

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
YD

Je te renvoie une version testée sur mes trois navigateurs IE6, Fx 1.5 et
Op 8.51 / Win32. J'ai essentiellement modifié les DIV et les CSS, à peine
le JS.



Dè piou z'en piou fort !


Les effets, c'est le travail de Thierry !

nada avec IE


Je pense qu'avec IE/Mac il faudrait remplacer les scrollWidth
par des offsetWidth (même valeur dans ce cas je crois) dans le
script.

çà doit être coton à calculer car çà saccade un peu avc FF


Sous Win aussi, Fx n'est pas une bête pour les effets DHTML... il doit
recalculer trop de choses pour des DIV positionnées en absolute.

vivement le bouton de marche/arret.


Suffit d'ajouter dans la DIV fond_banniere :
onclick="if(ID){clearTimeout(ID); ID=null;}else affiche_bandeau();"
et de l'annoncer quelque part ou d'ajouter un bouton avec le même onclick.

--
Y.D.


Avatar
loiseauthierry
YD wrote:

Dè piou z'en piou fort !


Les effets, c'est le travail de Thierry !


Oui, c'est vrai, je suis le coupable :-)

nada avec IE



Et avec Netscape 4.x ? :-/
(non, je blague)

Je pense qu'avec IE/Mac il faudrait remplacer les scrollWidth
par des offsetWidth (même valeur dans ce cas je crois) dans le
script.


Bingo, ou presque. Maintenant (voir la dernière version en fin de post)
IE 5.2 pour MacOS X retourne des valeurs pour largeur et largeur_win,
mais il y a une erreur ailleurs : plus d'affichage du texte et
d'animation... Remplacer scrollWidth par offsetWidth semble être une
bonne piste, puisque au moins FF et IE(mac) s'y retrouve à ce niveau.

çà doit être coton à calculer car çà saccade un peu avc FF


Sous Win aussi, Fx n'est pas une bête pour les effets DHTML... il doit
recalculer trop de choses pour des DIV positionnées en absolute.


Tiens, bizarre, depuis un iBook G4 / 933, FF m'affiche ça d'une manière
très fluide, agréable presque, et depuis Safari, pareil. Enfin, quand je
dis fluide, c'est à comparer à la balise <marquee>, hein, ASM ?! :-p
Il subsiste une sacade qui donne du fait l'impression que le texte est
en gras.

vivement le bouton de marche/arret.


Suffit d'ajouter dans la DIV fond_banniere :
onclick="if(ID){clearTimeout(ID); ID=null;}else affiche_bandeau();"
et de l'annoncer quelque part ou d'ajouter un bouton avec le même onclick.


Bigre, c'est bien vu ça ! Bon, il y a une autre solution, voir
ci-dessous :

<html>
<head>
<title>bandeau d&eacute;roulant &amp; Ping-Pong</title>
<script type="text/javascript">
var test="toto";
var bibi="bobo";
function show_props(obj, objName) {
var result = ""
var compte = 0;
for (var i in obj) {
if (compte++>100) return result;

result += objName + ".<b>" + i + "</b> = " + obj[i] + "<br>"
}
return result
}

position_bandeau=0;
pingúlse;
pongúlse;
testúlse;
////////////////////////////////
offúlse; // ***** MARCHE / ARRET ***** //
////////////////////////////////

function affiche_bandeau() {

if (window.innerWidth) largeur_win=window.innerWidth;
else largeur_win=document.body.clientWidth;
if (test)
{
alert(largeur+"n"+largeur_win);
testúlse;
}
document.getElementById('fond_banniere').style.width largeur_win+"px";
if (largeur_win*.9>largeur) pong=true; else pongúlse;
banniere=document.getElementById('bandeau');

if (!off)
{ ////////////////////////////////
// ***** MARCHE / ARRET ***** //
////////////////////////////////

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').offsetWidth;
affiche_bandeau()">


<div style="position: absolute; top: 60px">
<script type="text/javascript">
<!--
objet="document";
document.write("<h1>Propri&eacute;t&eacute;s de
<i>"+objet+"</i></h1>")
document.write("<hr>");
document.write(show_props(document,"<b>"+objet+"</b>"));
document.write("<hr>");
document.write("test=""+test+""");
document.write("bibi=""+bibi+""");
// -->
</script>
</div>


<div style="position: fixed; top: 0px;overflow: hidden;
top:0; left:0; background-color:#f9e9d9; opacity: 0.8"
id="fond_banniere" onclick="

////////////////////////////////
// ***** MARCHE / ARRET ***** //
////////////////////////////////

off=!off">
<h4 style="overflow: hidden; background-color:#f9e9d9;color: #f9e9d9;"
class="banniere">
<nobr>
Pour peu que la fen&ecirc;tre soit plus large que le texte, un
effet Ping-Pong aga&ccedil;ant intervient :-)
</nobr></h4>
</div>

<div id="bandeau" style="position: fixed; top:0; left:0; opacity: 1"
onclick="

////////////////////////////////
// ***** MARCHE / ARRET ***** //
////////////////////////////////

off=!off">
<h4 style="overflow: hidden;" class="banniere" id="texte">
<nobr>
Pour peu que la fen&ecirc;tre soit plus large que le texte, un
effet Ping-Pong aga&ccedil;ant intervient :-)
</nobr></h4>
</div>

</body>
</html>


Avatar
loiseauthierry
YD wrote:

Sous Win aussi, Fx n'est pas une bête pour les effets DHTML... il doit
recalculer trop de choses pour des DIV positionnées en absolute.


Je viens de faire un test depuis mon site :

<http://astrophoto.free.fr/calculs/>
puis cliquer sur le bouton [simulateur copernic]
puis [logo (petit) astrophoto]

De même, [lunes de Jupiter] > logo Astrophoto

En fin, <http://astrophoto.free.fr/diaporama/>, cliquer sur le levier de
rembobinage (à gauche) et jouer alors sur celui de ré-armement (à
droite), à tout instant, cliquer sur le cliché pour le voir en plus
grand.

Chez moi, FF (MacOS X) est bien rapide !

Thierry
--
<http://astrophoto.free.fr/>

Avatar
ASM
YD wrote:



nada avec IE




pas regardé le script
mais de mémoire il me semble qu'il y a un overflow qque part ?
et n'est-il pas à auto ?

m'enfin ... bref ... IE est très particulier quant à l'overflow ...

--
Stephane Moriaux et son [moins] vieux Mac



Avatar
YD

nada avec IE





Pareil sous Win

pas regardé le script
mais de mémoire il me semble qu'il y a un overflow qque part ?
et n'est-il pas à auto ?


J'ai surtout vu un 'position: fixed' inconnu de IE...

--
Y.D.




1 2