Redimensionner et repositon div à l'aide de javascript
Je suis en train de faire un simple redimensionner et repositionner un élément div qui affiche un ajax chargement de l'image. Le contenu du chargement peuvent changer de taille, donc je veux l'élément div pour redimensionner à la taille de la mère, qui dans ce cas est un tableau de dimension avec l'id "thEngineCategories".
function resize_divProgress() {
var control = document.getElementById('thEngineCategories');
var div = document.getElementById('divProgress');
div.style.left = control.offsetLeft + 'px';
div.style.top = control.offsetTop + 'px';
div.style.width = control.offsetWidth + 'px';
div.style.height = control.offsetHeight + 'px';
}Voici le code javascript que j'ai et il erreurs sur
div.style.left = control.offsetLeft + 'px';en disant: "div.le style n'est pas défini". Quoi de mal ici?
La div en html est comme suit:
<div class="overlay" id="divProgress">La js fonction est appelée comme suit:
<th id="thEngineCategories" onmouseover="resize_divProgress()" >Le CSS est:
.overlay
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 300px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
opacity: 0.75;
filter: alpha(opacity=75);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}Est-il une meilleure façon de gérer ce que je suis en train de faire?
- Ce qui, le cas échéant, de la bibliothèque javascript utilisez-vous?
- Je connais un autre développeur de chargement de jQuery dans l'un des maître de pages, mais je ne sais pas si c'est ici pour rester, donc je veux garder cela simple et bibliothèque indépendante.
- votre code est ok - êtes-vous sûr que 'div' n'est pas défini?
- Dans firebug, il semble être définis amende. Si je planer au dessus de la div variable, il montre div#divProgress.de superposition. J'ai oublié c'est dans une configuration maître/contenu de la page, donc je vais le changer à l'aide de ClientID
- Nvm, ce ne sont pas des runat="server" contrôles. Pas de ClientID nécessaire.
- essayez de la console.journal avec des div et div.style avant de vos missions.
- Console.log(div) résultats: <div id="divProgress" class="overlay">, puis indéfini de la Console.log(div.le style) des résultats de l': objet CSSStyleDeclaration longueur=0, alors pas défini
- Ces sons comme des valeurs raisonnables. Voulez-vous dire qu'elle s'imprime "undefined", ou qu'elle est l'erreur? Si c'est l'ancien, il semble que la fonction est appelée deux fois, la seconde fois, le div ne peut pas être trouvé.
- Il affiche le <div id="divProgress" class="overlay"> sur la première ligne. Sur la ligne suivante, il dit undefined.
- Une chose à retenir lors du positionnement des éléments dans ce sens: les éléments de la Table comme th et td peut être extrêmement fiable, dans les rapports, leur emplacement et leurs dimensions, en particulier dans IE, et surtout si vous les avez mis à centrer horizontalement à l'intérieur d'un conteneur. Si possible, ne pas utiliser des tableaux pour la disposition.
Vous devez vous connecter pour publier un commentaire.
Je créé une base de page de test à partir du code que vous avez fourni et n'a pas pu reproduire le problème. Ceci suggère qu'il y a quelque chose d'autre se passe dans votre page qui est à l'origine du comportement que vous voyez.
Pourriez-vous prendre votre page et tape vers le bas à un minimum de cas qui illustre l'erreur de JavaScript? Vous trouverez l'exécution de cette procédure, souvent, va révéler la cause de l'erreur, vous devez supprimer quelque chose et il va commencer à travailler, indiquant que quelque chose qui a supprimé la section de code est la source du problème 🙂
div.style.la largeur n'est pas propriété valide pour accéder à la largeur de la div.
utilisation div.offsetWidth et div.offsetHeight pour la largeur et la hauteur respectivement.