L'exprimer

Eu ce problème étrange, où un morceau de Javascript a bien fonctionné dans tous les ans navigateur que IE barre d'habitude Simple ... il était, mais depuis le script n'a pas été écrit par moi, il a fallu un certain temps pour déboguer ce "objet ne gère pas cette propriété ou méthode" d'erreur qui ne IE a été de vomir. Probablement! Si je devais écrire le script, je n'aurais pas eu cette erreur du tout, comme ne pas mélanger mes noms de variables avec le champ Ids :).

Problème: objet ne gère pas cette propriété ou méthode (ligne 3)

function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Solution:
L'erreur est générée sur la thirdrow dans l'exemple ci-dessus (ligne 3 ... "shortdesc = document.getE ...."). J'ai essayé toutes sortes de choses stupides, que je Dont est même pas la peine la mention ici et, enfin, devinez quoi! simplement en changeant le var shortdesc à autre chose se débarrasser de l'erreur. Fondamentalement! Le nom de la variable dû différente de la fieldID

Cette école anciennes, mais comme d'habitude il est de mon supplément de mémoire ...
Est donc désactivé = "true" et désactivé = "false" même? Oui
... Ne croyez pas, eh bien! thats la manière dont il est ... voici quelques explication rapide ...
«Invalide» est un attribut d'élément de formulaire tout / sur le terrain et ne peut donc accepter n'importe quelle valeur de par sa nature.

Tant que cet attribut est présent, l'élément sera désactivé indépendamment de sa valeur. par exemple pour.
<input type="text" value="Voici disabled" disabled>
<input type="text" value="Voici disabled" disabled="disabled">
<input type="text" value="Voici disabled" disabled="true">
<input type="text" value="Voici disabled" disabled="false">

Tout ce qui précède fera sur le terrain cette forme "Disabled".

Il suffit de ne pas fournir l'attribut "DISABLED" maintient le champ "CPEI" ... comme ci-dessous

<input type="text" value="Ceci n'est pas disabled" />

Rappelez-vous "Toute valeur (ou pas de valeur du tout) de l'attribut disabled, le navigateur va rendre invalide». Pour garder les choses claires dans notre esprit W3C recommande que nous utilisons disabled = "disabled" dans ces situations.

Cette différence est bien quand on utilise cet attribut en javascript ...

document.form.element.disabled = true; / / l'élément sera désactivé
document.form.element.disabled = false; / / l'élément est activé

Les arguments ci-dessus sont également vrai pour ces attributs et d'éléments:

• vérifié (bouton radio et case à cocher)
• sélectionné (option)
• nowrap (td)

Heres une autre peice peu de ruse Javascript que je devais creuser autour parce que la situation qu'il commaned. Dans un de mes sites web, j'ai eu cette situation où j'ai eu à mettre en œuvre "windows.onload" deux fois. La première chose qui serait venu à l'esprit inexpérimenté comme le mien (je dois dire honnêtement que, depuis que j'ai été en utilisant les frameworks JavaScript et les bibliothèques, j'ai forgotton de faire des choses simples sur mon propre ... triste mais vrai), est la méthode suivante ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ..

Désolé de le dire, mais, cela ne marchera pas ... ne veux pas discuter de la science exécution de code Javascript ... mais selon mon expérience récente, seule la dernière fonction (onloadfn3) sera malade effectivement exécutée.

Dans les situations normales, contrairement à la mienne (dont je vais parler un peu plus tard) ... vous pourriez faire une des actions suivantes pour exécuter des fonctions onload mutliple ....

Ou quelque chose comme ceci

 doOnLoad fonction () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Pour ma situation actuelle, je ne peux pas utiliser de ce qui précède ...
Pourquoi ai-je besoin d'appeler windows.onload deux fois, plutôt que l'appel de deux fonctions au sein d'une seule fonction onload? Voici coup d'œil rapide à mon énoncé du problème ...

«Mes pages du site sont structurées comme le thème WordPress .... c'est à dire qu'il est un header.php et footer.php communes qui sera inclus dans toutes les pages du site. Il ya une implementaion fonction onload dans les footer.php de faire quelques fonctions onload communes. Et il ya quelques pages qui ont besoin de quelque chose de leur propre OnLoad, à l'exception de celles effectuées par la fonction onload commune. Si je cède la fonction de rappel directement au gestionnaire window.onload, il écrasera les rappels affectés précédemment dans les footer.php "

.... Est-ce mon problème compris ?

Eh bien! il ya peu de solutions que je n'ai trouver. Ils sont tous très similaires et implémentations principalement d'une solution donnée par Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solution:

Il suffit d'ajouter ce code javascript sur ​​le site ...

 fonction addLoadEvent (func) {
     var = oldonload window.onload;
     if (typeof window.onload! = 'fonction') {
        window.onload = func
     Else {}
        window.onload = function () {
            si (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

Et il appelle au lieu de l'habituel "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Plus de code pour fonctionner sur * chargement de la page
 }); 

Avantages de cet extrait de code internautes
1. Principalement, il vous permet d'avoir des événements windows.onload multiples, appelé à partir de pièces séparées de votre code, sans overridding la définition précédente
2. Il est vraiment discret. Il peut être placé dans un fichier avec vos autres scripts ou dans un fichier séparé.
3. Il fonctionne même si window.onload a déjà été fixée.

Parfois, pour garder le pageweight bas ... nous avons divisé nos scripts en fragments ... Ces fragments javascript peut être chargé en cas de besoin (sur un événement ou sur un clic d'un lien ou un bouton, etc.)

Chargement Javascripts est dynamiquement simple et assez simple comme ci-dessous ...

= “text/javascript” > <Script type = "text / javascript">
fonction loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ("src", source);
document.body.appendChild (s);
}
</ Script>

et vous pouvez avoir le lien ci-dessous l'appel n'importe où dans le corps, ou vous pouvez avoir ce script "onLoad" du document lui-même ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script de charge dynamique </ a>

ou

<body onload="loadNewScript('myDynamicScript.js');">

Non qu'il n'y ait que quelques-uns LIGHTBOX que vous pouvez trouver lorsque vous google. Le problème avec la plupart des visionneuses que j'ai trouvé était que tout le monde semblait d'utiliser un ou des autres frameworks JavaScript lourds de poids comme jQuery, Prototype, Mootools et les goûts. Ils sont tous frais et chic à la recherche. Mais Si votre exigence est "MAIS JE VEUX UN SCRIPT LIGHTBOX simple et léger pour MON SITE", puis ici il est;

Quelques fonctionnalités intéressantes de cet album

1. Très léger
   une. 4kb de scripts replié (8 kb déballé)
   b. 2 kb du CSS
   c. Quelques lignes de code HTML pour le conteneur lightbox
2. Simple à comprendre et à mettre en œuvre
3. Peut avoir plusieurs albums sur la même page.
4. Le conteneur lightbox même est utilisée pour montrer, un contenu différent (ce qui est inclus séparément en tant que divisions cachés dans la page), en fonction sur le lien / option qui est cliqué.
5. Centre automatiquement lui-même, en prenant en considération tous les facteurs tels que, la hauteur et la largeur de fenêtre (résolution de l'écran), le montant de défilement des pages et la hauteur du contenu de la visionneuse
6. Testé dans IE 7 et FF

Voir la démo |
Télécharger Zip Source Visionneuse (Téléchargé 1792 fois)

jo.js, les jo_pack.js [version emballés]: - un ensemble simple d'objets JavaScript [JO], qui contient l'élément, la fenêtre et scripts de positionnement de documents. Vous pouvez ouvrir JO.JS si vous souhaitez vous salir les mains avec une certaine avancée JavaScripting, la création de fonctions abstraites, qui s'étend des propriétés des éléments et autres. Si vous n'êtes pas trop JavaScripting, Laissez-le tranquille.

lightbox.js, lightbox_pack.js [version compactée]: - contenir la lumière scripts administrateur de la boîte. Si vous êtes concepteur de la page, également responsable de la mise en œuvre de la visionneuse sur la page, vous devez comprendre l'LightBoxManager. LightBoxManager contient essentiellement showLightBox seulement deux fonctions et closeLightBox.

lightbox.css: - Si vous connaissez le CSS, vous pouvez jouer avec lightbox.css pour personnaliser l'apparence-n-feel lightbox.css

index.html: exemple d'implémentation de l'album avec deux contenus différents

lb_underlay_bkg.png: - C'est la lumière / Simi image transparente qui est utilisé pour le fond de la sous-album [sous-couche est la couche en dessous de la lighbox, ce qui empêche l'utilisateur de cliquer sur une autre entité sur la page, tandis que la visionneuse est ouvert]. Vous pouvez utiliser n'importe quelle image ou même d'une couleur unie à cet effet, en fonction de la mise en page et l'exigence.

icon_lb_close.gif: - L'image de la poignée Close en haut à droite de la boîte à lumière. Peut utiliser n'importe quelle image comme par dessin ou modèle

Voir la démo |
Télécharger Zip Source Visionneuse (Téléchargé 1792 fois)

S'il vous plaît laissez-nous vos commentaires et suggestions ...

Eh bien, je dois dire, pas une telle pièce utile de la science, mais si vous êtes un développeur Web, pourrait venir à portée de main, un jour (ou seront-ils?). Voici bookmarklet petite, qui permet d'éditer la page Web pour n'importe quel site.
Et Désolé! Vous pouvez enregistrer les résultats sur votre machine locale.

javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

Plus d'une fois nous nous sentons le besoin d'écrire hacks navigateur specfic (si ce n'est pas une bonne pratique, nous les développeurs d'assurance-chômage ont de recourir à de tels maux jusqu'à ce que les guerres Navigateurs grands vient à une trêve). Plus tôt, je l'ai mentionné dans cet article Pour votre IEs Seulement , comment écrire un extrait de CSS qui serait visible par les navigateurs IE <IE7 seulement.

Hier, j'ai eu un cas, où je voulais écrire quelques extraits de FireFox spécifique CSS. Eh bien! Je ne sais pas si il ya un code CSS pour cela, mais il ya un code HTML. Il ya un hic cependant, ce morceau de code HTML doesnot de validation HTML passe. Mais, anywaz! Si vous êtes bloqué ou mal en tant que telle, n'a pas en ce qui concerne-pour la validation (parfois il faut être cruel), vous pouvez utiliser la suivante pour déclarer un lien vers une feuille de style que FF ou même simplement le code de la CSS au sein de ce bloc. Le code est

<comment> Mettez votre Firefox uniquement HTML / CSS / Scripts ici </ commentaire>

par exemple,
<comment>
<style>
Styles * / for FF seulement * /
fieldset {border: 1px # dddddd solide;}
</ Style>
</ Commentaire>

I "m heureux pour le moment ...

Voici moyen rapide d'étendre l'objet Array natif Javascript, juste pour le faire ...

Array.prototype. removeItem =function(str) {
for(i=0; i<this.length ; i++){
if(escape(this[i]).match(escape(str.trim()))){
this.splice(i, 1); break;
}
}
return this;
}


Donc maintenant vous pouvez faire quelque chose comme ça ...

var animals= new Array("dog","lion","cat","tiger","elephant");
animals. removeItem ('tiger');

Maintenant le tableau des animaux contiendra «chien», «lion», «chat», «éléphant»;

PS: Et voici le prototype string trim trop ...

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

Profitez ....

Inclure JavaScript au bas du document HTML

Si vous n'avez pas document.write (ou n'importe quelle autre génération dynamique de contenu de la page en utilisant javascripts) pour insérer une partie du contenu de la page dans vos scripts, déplacez le script include au bas de la page, avant la fin de la balise BODY.
La spécification HTTP/1.1 suggère que les navigateurs de télécharger plus de deux composants en parallèle par le nom d'hôte. Si vous servez vos images à partir de noms d'hôtes multiples, vous pouvez obtenir plus de deux téléchargements de se produire en parallèle. Alors que le téléchargement est un script, cependant, le navigateur ne démarre pas tout télécharger d'autres fichiers, même les noms de domaines différents.
Il ya aussi des façons de créer dynamiquement des nœuds de script et charger des scripts à distance après la page est chargée en utilisant AJAX.

Externaliser vous JavaScript

Utilisation des fichiers JavaScript externes se traduira par un chargement plus rapide des pages, parce que les fichiers JavaScript sont mis en cache par le navigateur. «Inline JavaScript dans les documents HTML se téléchargées à chaque fois le document HTML est demandée. Cela pourrait effectivement réduire le nombre de requêtes HTTP faites, mais il augmente par la suite la taille du document HTML. JavaScript externe sont mis en cache par le navigateur, la taille du document HTML est réduite sans pour autant augmenter le nombre de requêtes HTTP.
S'il vous plaît noter que, si les utilisateurs sur votre site ont une vue de plusieurs pages par session et nombre de vos pages réutiliser les mêmes scripts et feuilles de style, il ya un plus grand bénéfice potentiel de mise en cache des fichiers externes.

Emballez vos fichiers JavaScript

En cas de JavaScripts, contrairement à CSS, les fichiers peuvent croquer à l'aide des algorithmes classiques qui donnent une taille de fichier réduite que de simplement la suppression des espaces ou des tabulations. Un exemple de javascript emballeur peuvent être trouvés ici http://dean.edwards.name/packer/

Débarrassez-vous de tous les scripts en double

Il est très rare que les scripts entiers peuvent être dupliquées, mais un examen des dix premiers sites web américains montre que deux d'entre eux contiennent un script en double. Dupliquer des scripts, mais réduit évidemment la performance par la création de requêtes HTTP inutiles et le gaspillage d'exécution JavaScript.
En outre, dans de nombreux cas, bien que les noms des scripts sont différents, il ya un risque de scripts en double dans la même page en raison de la taille des équipes et le nombre de scripts.

Réduire l'accès aux éléments DOM lorsque cela est possible

Accès aux éléments DOM avec JavaScript est lente de sorte afin d'avoir une page plus réactive, vous devez:
Références à des éléments • Cache accessibles
• Les nœuds de mise à jour "hors ligne", puis les ajouter à l'arbre
• Évitez de fixer mise en page avec JavaScript

Comportement séparée du contenu et de présentation

Tout comme nous Présentation séparée (CSS / XSLT) à partir de contenu (XHTML / XML), nous devrions également séparer le comportement (Javascript). C'est ce qu'on appelle Javascript discret. Tout comme nous lier à des fichiers CSS externes, nous devrions créer un lien vers des fichiers externes javascript.

Au lieu de codage du comportement dur dans le contenu (par exemple onmouseover, onclick, etc), le comportement devrait être dynamiquement ajouté à des éléments, des classes, et les éléments uniques (ID) en utilisant le DOM. Le document de base, le contenu, ne doit contenir que valide XHTML / XML et pas javascript.
Javascript doit augmenter le contenu en ajoutant des comportements. Le contenu doit rester utile et utilisable sans javascript (ou sans javascript plein appui).

À plusieurs reprises, tout en faisant des mises en page avec les divisions Popup / visionneuses ou Conseils etc, nous rencontrons des situations où certains objets de formulaire SELECT se trouve être en vertu de ces divisions POPUP, de par leur conception et il montre à travers .... Berk!

Eh bien! vous pourriez facilement résoudre ce en ajustant vos valeurs de z-index de façon appropriée pour FF et IE7. Mais Good Old (pun intended) IE6 ne se comporte pas comme prévu .... Le spectacle BOX SELECT travers, même après avoir appliqué de façon drastique certaines hautes valeurs de z-index de votre division PopUp ... Bummer!!

Il n'ya pas de solution pour ce problème, mais il ya, je crois, plus que d'une manière quelques-uns à travailler-contourner ce problème, Mais Im ici pour vous dire la solution la plus simple que j'utilise, qui fonctionne très bien pour moi, dans la plupart des cas ....

"Cacher la boîte ROUGE SELECT Lorsque vous affichez la POPUP"

Tout simplement dans votre extrait de script où vous montrez votre popup, ajouter un morceau de script pour définir la visibilité de la boîte de SELECT pour "Caché"

document.getElementById ('my_select') style.visibilty = "hidden".;

Et n'oubliez pas de le remettre sur CLOSE de votre division PopUp

. document.getElementById ('my_select') style.visibilty = "visible";

où "my_select" est l'ID de la boîte de l'irritation SELECT

Hope this helps ...

PS. Il ya d'autres options comme ofcourse dynamiquement positionining un IFRAME (même taille que vous PopUp) en vertu de la DIV Popup ... Cela fonctionne bien aussi, mais avec une addition de charges d'éléments DOM, des scripts et maux de tête. J'ai utilisé cette solution trop, et si vous avez besoin d'aide pour cette option, ne faites le moi savoir. Se fera un plaisir de vous aider!