en essayant de changer la largeur sur le clic

Concerrant this, je voulais obtenir le même effet, alors je pensais que je vais juste changer la largeur de mon div sur clic. J'ai une sidebardiv gauche et contentdiv sur la droite, et j'ai une image avec le déclencheur onclick, qui cache la sidebardiv gauche et définit la largeur contentdiv droite à 100%.
Il ne cache pas le sidebardiv gauche mais il ne développe pas le contentdiv à 100%, chose étrange arrive quand j'appuie sur firebug pour ouvrir, juste après son ouverture le contentdiv s'étend alors à 100%, quelqu'un peut-il comprendre ce que je fais mal ?en essayant de changer la largeur sur le clic

Merci

Voici quelques HTML:

<div id="content_holder"> 
<div class="leftsidebar" id="sidebar"> 
.... 
</div> 
<div class="content" id="content"> 
.... 
</div> 
</div>

Voici javascript:

var flag = false; 

      Page.toogle = function(id) 
      { 
       var x = document.getElementById('content'); 
       if(!flag){ 
        document.getElementById(id).style.display = 'none'; 
        x.style.width = '99%'; 
          flag=1; 
       } 
       else { 
        x.style.width = '683px'; 
        document.getElementById(id).style.display = ''; 
          flag=0; 
       } 
      }

leftsidebar est passé comme argument à la fonction ci-dessus

EST ICI QUELQUES CSS:

div.content { 
     display: block; 
     float: left; 
     width: 683px; 
     text-align: left; 
     margin-left:10px; 
    } 

    div.leftsidebar { 
    padding-bottom:20px; 
    width:303px; 
    background: url('left_holder.png') left bottom no-repeat; 
}

Dernière mise à jour:

Le div streches comme il se doit quand je clique sur le bouton fenêtre de restauration et à l'arrière. Aussi quand j'ouvre firebug je mentionne cela plus tôt. Y a-t-il une sorte de piratage de javascript qui pourrait simuler cet événement?

Plus d'info

J'ai trouvé quelques messages similaires:

javascript resize event firing multiple times while dragging the resize handle -> Je dois cet événement resize au feu lorsque je déclenche ma fonction Page.toogle de sorte que le div streches correctement

Source

2009-12-07 Gandalf StormCrow

Au lieu de nous dire ce que vous avez, il suffit de coller le code html ... – Faruz

Pourriez-vous s'il vous plaît envoyer votre code? Merci –

À quoi ressemble votre CSS? – luckykind

Vous devriez être en mesure de déclencher le gestionnaire d'événement resize avec quelque chose comme:

window.resizeBy(1,1); 
window.resizeBy(-1,-1);

Source

2009-12-15 17:06:53 codelahoma

Il y a une erreur dans cette ligne:

if(x.style.width = '683px')

Vous avez besoin de deux signes égal:

if(x.style.width == '683px')

Source

2009-12-07 12:44:42

si ne fonctionne pas avec 2 égaux, enlevé si toujours rien ne se passe .. il ne strech 100% –

Je pense qu'il est dans votre appel à Page.toogle

Quand je viens de faire cette fonction régulière comme ici http://jsbin.com/iyeka/edit il semble fonctionner très bien ...

devrait toogle être bascule?

Source

2009-12-07 14:31:53 luckykind

C'est juste le nom de la fonction .. n'a pas d'importance comment je l'appelle, mais oui c'est une faute d'orthographe. Je ne suis pas un locuteur natif .. –

Je l'appelle sur img click de l'élément, il exécute comme il se doit mais j'ai besoin d'une sorte de hack javascript pour simuler le redimensionnement de la fenêtre –

Je disais simplement que vous pourriez avoir épelé différemment où jamais vous l'appelez ... – luckykind

Étant donné que le contenu est flottant, n'est-ce pas une largeur basée sur le pourcentage qui sera calculée à partir du dernier élément parent dans la hiérarchie qui reçoit une largeur fixe ou si aucune sa largeur intrinsèque? Que se passe-t-il si vous donnez à #contentholder une largeur en px/pt/cm ou si vous utilisez alternativement l'une des anciennes unités dans votre assignation de largeur dynmique pour le contenu?

Source

2009-12-07 18:03:41 prodigitalson

Le navigateur de page n'a probablement pas déclenché l'événement onresize sur votre navigateur. Lorsque vous ouvrez firebug, il est déclenché, ce qui à son tour est intercepté par votre gestionnaire d'événements de redimensionnement. Essayez même de redimensionner la page elle-même, elle devrait également déclencher. Cela se produit parce que vos divs sont flottantes, donc la mise en page n'est pas relative. Une solution consiste à déclencher manuellement l'événement onresize lorsque vous redimensionnez le leftdiv.

Source

2009-12-08 01:40:18

Une solution consiste à déclencher manuellement l'événement onresize lorsque vous redimensionnez le leftdiv. -> Comment puis-je faire ceci? C'est ce que je cherche? –

Voici ce que je recommande.

Utilisez jQuery au lieu de javascript ordinaire pour faire ce genre de chose. Il existe souvent des solutions de contournement pour les failles du navigateur. N'utilisez pas simplement la propriété width pour changer la largeur, mais créez une classe css avec les paramètres width et basculez la classe css dans la div en utilisant jquery.

J'ai modifié div auparavant, et cela a bien fonctionné pour moi. Mais j'ai toujours fait ça en utilisant jQuery.

Source

2009-12-08 01:45:21

# 1. Je ne peux pas utiliser jquery car il est en conflit avec mon prototype actuel de framework javascript # 2. Je ne peux pas créer un nouveau div car je reçois le contenu de cette div préchargé du côté serveur. –

leftsidebar est passé comme un argument à la fonction ci-dessus

vous passez le nom de classe à la fonction, et non l'ID.

Source

2009-12-15 15:58:47

en essayant de changer la largeur sur le clic

Répondre

Questions connexes