Redimensionnement d'un élément
Bonjour,
Je cherche depuis un petit moment comment redimensionner la largeur d'une div pour qu'elle s'aligne sur la largeur d'un autre div, qui est au-dessus d'elle à l'affichage.
L'affichage suivant :
+----+-----------------+
+logo+ +
+----+-----------------+
+ nav + +
+------+---------------+
doit devenir cela :
+------+---------------+
+ logo + +
+------+---------------+
+ nav + +
+------+---------------+
Le code javascript est :
var postformatting = function()
{
var logo = document.getElementById('logo') ;
var nav = document.getElementById('nav') ;
if(nav.offsetWidth > logo.offsetWidth)
logo.style.width = nav.offsetWidth ;
else if(nav.offsetWidth < logo.offsetWidth)
nav.style.width = logo.offsetWidth ;
}
J'ai déjà essayé d'assigner la valeur de l'offset à l'autre offset (mais la propriété est en lecture seule), et j'ai essayé d'affecter la valeur à l'attribut width de l'élément.
Merci !
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Au fait, j'ai aussi essayé d'appliquer la méthode reSize sur l'élément, mais ce n'y est pas applicable.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Le précédent code fonctionnait sur Opera. Après quelques recherches, je me suis apperçu qu'il faut indiquer l'unité :
var postformatting = function()
{
var logo = document.getElementById('logo') ;
var nav = document.getElementById('nav') ;
if(nav.offsetWidth > logo.offsetWidth)
logo.style.width = nav.offsetWidth + 'px' ;
else if(nav.offsetWidth < logo.offsetWidth)
nav.style.width = logo.offsetWidth + 'px' ;
}
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Chapeau :)
Je n'aurais jamais trouvé.
Ça marche aussi avec les autres unités (ça devient puissant en utilisant les %).
Bref, voici mon
sauveur.
Je ne sais pas où il a pêché ça, mais je l'en remercie grandement.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
le 21/12/2005 à 20:17
i M@N
Hello !
ça a l'air très intéressant mais impossible pour moi de le faire fonctionner !!
LupusMic > t'aurais pas un bout de code avec un div pour voir ce que donnent ses fonctions JavaScript pliz ?
@+...
One Love, One Heart, One Unity.
Suffit de demander :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="fr">
<head>
<title>Projet secret : test</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script src="postformat.js" type="text/javascript"></script>
</head>
<body onload="postformatting()">
<div id="head">
<div id="logo">
<img src="/logo.jpg" alt="Logo - "></img>
</div>
<div id="banner">
<img src="/banner.jpg.php" alt="Bannière publicitaire"></img>
</div>
</div>
<div id="boxes">
<div id="nav">
<div id="main">Boîte principal.</div>
<div id="sub">Boîte subsidiaire</div>
</div>
<div id="content">Contenu </div>
</div>
</body>
</html>
Et la CSS :
div
{
background: #455059 ;
border: solid white 1px ;
margin: 2px ;
}
#head
{
width: 100% ;
}
#boxes
{
min-height: 250px ;
width: 100% ;
right: 102px ;
}
#nav
{
float: left ;
min-width: 102px ;
height: 100% ;
min-height: 250px ;
right: 150px ;
}
#logo
{
float: left ;
height: 102px ;
min-width: 102px ;
}
#banner
{
height: 102px ;
right: 150px ;
}
#content
{
min-height: 250px ;
}
#google
{
position: absolute ;
right: 50px ;
top: 102px ;
}
#foot
{
font-size: 0.7em ;
text-align: center ;
width: 100% ;
}
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
le 22/12/2005 à 11:33
i M@N
Hello !
Je parlais des fonctions JavaScript du gars :
function getElt (eltID) {
if (document.layers) return document.layers[eltID+'C'].document.layers[eltID];
if (document.getElementById) return document.getElementById(eltID);
if (document.all) return document.all[eltID];
if (document[eltID+'C']) return document[eltID+'C'].document[eltID];
alert('Rien ne marche avec ce navigateur');
return false;
}
function hideElt (eltID) {
var myelt = getElt(eltID);
if (myelt.style) myelt = myelt.style;
myelt.display = 'none';
}
function showElt (eltID,disp) {
var myelt = getElt(eltID);
if (myelt.style) myelt = myelt.style;
myelt.display = disp;
}
function isHide (eltID) {
var myelt = getElt(eltID);
if (myelt.style) myelt = myelt.style;
return myelt.display == 'none' ? true : false;
}
function switchElt (eltID,disp) {
if (isHide(eltID)) showElt(eltID,disp);
else hideElt(eltID);
}
function mvElt (eltID,mvX,mvY) {
var myelt = getElt (eltID), noPx = document.childNodes ? 'px' : 0;
if (myelt.style) myelt = myelt.style;
myelt.left = mvX + noPx; myelt.top = mvY + noPx;
}
function chgZIndex (eltID,indx) {
var myelt = getElt(eltID);
if (myelt.style) myelt = myelt.style;
myelt.zIndex = indx;
}
function resizeElt(eltID,newWidth,newHeight) {
var myelt = getElt(eltID), noPx = document.childNodes ? 'px' : 0;
if (myelt.style) myelt = myelt.style;
if (myelt.resizeTo) myelt.resizeTo(newWidth,newHeight);
myelt.width = newWidth + noPx; myelt.pixelWidth = newWidth;
myelt.height = newHeight + noPx; myelt.pixelHeight = newHeight;
}
Quelqu'un sait comment on s'en sert?
@+...
One Love, One Heart, One Unity.
le 23/12/2005 à 20:56
Bzh
Heu ! Là, je ne trouve pas ça très raisonnable d'utiliser autant de Javascript !!!
En quoi, autant de javascript, peut il apporter quelque chose en plus au site ???
Enfin, je suppose que cela dépend de l'avis de chacun...
Cosmétique ? :) Si tu as d'autres solutions en CSS, je suis preneur. Je n'utilise le javascript que pour les aspect cosmétiques et l'ergonomie avancée.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
