2010-06-01 4 views
0

Je souhaite qu'une barre de titre apparaisse lorsque l'utilisateur clique sur une case. Cela fonctionne parfaitement dans I.E. 8.0 mais pas du tout dans firefox 3.6.3.JQuery (1.4.2)/Firefox (3.6.3) - .avant et après ne pas travailler sur div

HTML

<html> 
<head> 
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="sample.js"></script> 
    <style type="text/css"> 
    @import url('style.css'); 
    </style> 
</head> 
<body> 

    <div id="edit2" style="background:#dddddd;height:200px;width:200px;word-wrap:break-word"> 
    <div id="editpane"> 
    <b>blah</b> blah blah 
    </div> 
    </div> 

    <a href="#" onclick="var t = document.getElementsByTagName('html')[0].innerHTML;alert(t);"> 
save changes 
</a> 

</body> 
</html> 

Javascript

$(document).ready(function(){ 
$("#edit2").live('click',function(){ 
    if($("#menu").length == 0){ 
    $("#edit2").before('<div id="menu" style="height:10px;width:100%"><span style="width:10px;background-color:red"></span><span style="width:10px;background:blue"></span></div>'); 
    } 
    if($("#menu2").length == 0){ 
    $("#edit2").after('<div id="menu2" style="height:10px;width:100%"><span style="width:10px;background:red"></span><span style="width:10px;background:blue"></span></div>'); 
    } 
    this.contentEditable = true; 
    this.focus(); 
}); 

$("#edit2").live('blur',function(){ 
    $("#menu").remove(); 
    //$("#menu2").remove(); 
    this.contentEditable = false; 
}); 
}); 

Quelqu'un pourrait-il expliquer pourquoi il ne fonctionne pas? J'ai réussi à utiliser un code similaire pour ajouter/supprimer de nouvelles lignes de table dans les deux navigateurs, mais je ne vois tout simplement pas pourquoi cela ne fonctionne pas.

Répondre

0

Après avoir pris en compte ce que Patrick a dit au sujet des balises span vides. J'ai résolu le problème en ajoutant du contenu aux balises span, puis en supprimant la hauteur des balises de style.

+1

Pour info, au lieu de modifier le titre avec [RESOLU] et d'ajouter des commentaires dans une réponse, si une réponse vous a conduit à résoudre votre problème, cochez la case en regard de cette réponse pour la désigner comme "Acceptée". Cela peut être utile aux futurs lecteurs. – user113716

+0

Merci Patrick. Est-il acceptable de cocher ma propre réponse car elle contient les mesures que j'ai prises pour résoudre le problème? – sickasabat

2

Qu'attendez-vous exactement? Vous ajoutez 2 éléments vides <span>.

Ce code fonctionne bien pour moi quand je mets un peu de contenu dans les travées.

Un exemple concret:http://jsfiddle.net/MxkJb/

+0

Merci d'avoir signalé cela. Je m'attendais à voir des boîtes solides de couleur comme je le fais dans IE 8.0. Ajouter du contenu fait apparaître les boîtes (avec le contenu) mais elles se superposent au div en dessous d'elles sur la page. Savez-vous pourquoi il y a cette différence de rendement? – sickasabat

+0

Peut-être essayer avec display: block; dans les styles? http://jsfiddle.net/MxkJb/1/ Je voudrais séparer la présentation du contenu (pas de styles en ligne) et utiliser des classes CSS cependant. J'ai gardé le code de votre exemple pour le rendre plus facile pour vous. – ozke

+0

@sickasabat - La différence dans la sortie est juste une partie du plaisir de créer un site qui fonctionne sur les navigateurs conformes aux normes et IE en même temps. Vous devrez juste bricoler pour que les styles fonctionnent correctement. Je suis d'accord avec @ozke. Essayez d'utiliser des classes pour vos styles au lieu d'en ligne. – user113716

Questions connexes