Te drukken

Had dit vreemde probleem, waar een stukje Javascript prima werkte in de browser Ans zoals gebruikelijk bar IE Simpel ... het was, maar omdat het script is niet door mij geschreven, Het heeft even geduurd om deze "Het object ondersteunt deze eigenschap of methode" fout die alleen IE werd overgeven debuggen. Waarschijnlijk! Als ik het script schrijven, zou ik niet heb deze fout op alle, als niet mijn namen van variabelen te mengen met veld Ids :).

Probleem: Het object ondersteunt deze eigenschap of methode (op lijn 3)

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

Oplossing:
De fout wordt gegenereerd op de thirdrow in het voorbeeld hierboven (Lijn 3 ... "shortdesc = document.getE ...."). Ik probeerde allerlei stomme dingen, dat ben ik niet eens de moeite waard is de vermelding hier en eindelijk wat denk je! alleen het veranderen van de shortdesc var iets anders verlost van de fout. In principe! De variabele moest verschilt van de fieldID

Dat die oude school, maar zoals gewoonlijk is het mijn geheugen aanvulling ...
Dus is uitgeschakeld = "true" en disabled = "false" hetzelfde? Ja
... Niet goed geloven,! Dat is de manier waarop het is ... hier is een aantal korte uitleg ...
"Uitgeschakeld" is een attribuut van iedere vorm element / veld en dus kan elke waarde te accepteren door zijn aard.

Zolang deze eigenschap aanwezig is, zal het element ongeacht uitgeschakeld van zijn waarde. voor bijvoorbeeld.
<input type="text" value="This is disabled" disabled>
<input type="text" value="This is disabled" disabled="disabled">
<input type="text" value="This is disabled" disabled="true">
<input type="text" value="This is disabled" disabled="false">

Alle bovenstaande zal het deze vorm veld "uitgeschakeld".

Gewoon het niet verstrekken van het kenmerk "UITGESCHAKELD" zorgt ervoor dat de Field "valide" ... zoals hieronder

<input type="text" value="This is niet disabled" />

Vergeet niet "Elke waarde (of geen enkele waarde) van de mensen met een handicap attribuut, zal de browser maken het uitgeschakeld". Om dingen duidelijk te houden in onze gedachten W3C raadt die we gebruiken disabled = "disabled" in deze situaties.

Dit is het verschil maar als we deze eigenschap gebruiken javascript ...

document.form.element.disabled = true; / / het element wordt uitgeschakeld
document.form.element.disabled = false; / / Het element wordt ingeschakeld

De bovengenoemde argumenten gelden ook voor deze kenmerken en elementen:

• gecontroleerd (radio button en checkbox)
• geselecteerd (optie)
• nowrap (td)

Heres een andere kleine peice van Javascript bedrog dat ik moest graven rond omdat de situatie commaned het. In een van mijn websites, ik had deze situatie, waarin ik moest een "windows.onload" twee keer uit te voeren. Het eerste wat dat zou kwam er een onervaren geest als de mijne (ik moet eerlijk zeggen dat, sinds ik met behulp van javascript frameworks en libraries, heb ik forgotton om eenvoudige dingen te doen op mijn eigen ... triest maar waar), is de volgende methode ...

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

Sorry om te zeggen, maar dit zal niet werken ... niet wilt met de uitvoering wetenschap van Javascript veel te bespreken ... maar volgens mijn recente ervaring, alleen de laatste functie (onloadfn3) ziek zal daadwerkelijk worden uitgevoerd.

In normale omstandigheden, in tegenstelling tot de mijne (die later zal ik het hebben over een beetje) ... je zou kunnen doen op een van de volgende handelingen uit om mutliple onload functies uit te voeren ....

Of iets dergelijks

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

Voor mijn huidige situatie, kan ik ook niet gebruik maken van de bovenstaande ...
Waarom heb ik nodig om windows.onload twee keer te bellen, in plaats van dat te roepen twee functies binnen een onload-functie? Hier is een snelle blik op mijn probleemstelling ...

"Mijn site's zijn gestructureerd als de WordPress thema .... dwz er is een veel voorkomende header.php en footer.php dat wordt opgenomen in alle pagina's. Er is een onload functie wijze uitvoering in de footer.php op enkele veelgestelde onload functies uit te voeren. En er zijn enkele pagina's die moeten iets van hun eigen OnLoad, behalve die die door het gemeenschappelijke onload functie. Als ik wijs callback functie rechtstreeks aan de window.onload handler, zal het over-rijden eerder toegewezen callbacks in de footer.php "

.... Is mijn probleem begrepen ?

Nou! er zijn weinig oplossingen die ik vond. Ze zijn allemaal erg op elkaar lijken en vooral implementions van een oplossing gegeven door Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Oplossing:

Voeg eenvoudig deze javascript-code naar site ...

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

En noem het in plaats van de gebruikelijke "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Meer code kan worden uitgevoerd laden van de pagina *
 }); 

Voordelen van deze code snippet ...
1. In de eerste, Het laat je meerdere windows.onload evenementen, genoemd van aparte delen van uw code, zonder overridding de vorige definitie
2. Het is echt onopvallend. Het kan worden geplaatst in een bestand met uw andere scripts of in een apart bestand.
3. Het werkt zelfs als window.onload al is ingesteld.

Soms om de pageweight laag te houden ... we hebben opgesplitst onze scripts in fragmenten ... Deze javascript fragmenten kunnen worden geladen als dat nodig is (op een evenement of bij klikken op een link of knop, etc.).

Laden Javascripts is dynamisch eenvoudig en mooi recht naar voren, zoals hieronder ...

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

en je kunt de volgende oproep koppeling overal in het lichaam, of u kunt dit script "onLoad" van het document zelf hebben ...

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

of

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

Niet dat er slechts een paar LightBox's die je kunt vinden als je google. Het probleem met de meeste van de lightbox die ik vond was dat ze leken allemaal op een of de andere zware gewicht JAVASCRIPT frameworks zoals jQuery, Prototype, MooTools en dergelijke te gebruiken. Ze zijn allemaal koel en chic uit. Maar als uw eis is "maar ik wil een eenvoudig en licht LightBox SCRIPT voor mijn site", dan hier is het;

Enkele leuke features van deze lichttafel

1. Zeer licht
   een. 4KB van scripts, verpakt (8 kb uitgepakt)
   b. 2 kb van CSS
   c. Paar regels van HTML voor de lightbox container
2. Eenvoudig te begrijpen en te implementeren
3. Kan meerdere Lichtbakken op dezelfde pagina.
4. Dezelfde lightbox houder wordt gebruikt om aan te tonen verschillende inhoud (die afzonderlijk opgenomen verborgen gebieden in de pagina), afhankelijk van de koppeling / optie wordt geklikt.
5. Automatisch centreert zich, rekening houdend met alle factoren, zoals, Window hoogte en breedte (schermresolutie), pagina scroll bedrag en de hoogte van de inhoud van de lightbox
6. Getest in IE 7 en Firefox

Bekijk de demo |
Download Lightbox Bron Zip (gedownload 1797 keer)

jo.js, jo_pack.js [verpakt version]: - een eenvoudige set van JavaScript-objecten [PB], die bevat element, window-en document positionering scripts. U opent JO.JS als u wenst om uw handen vuil met een aantal geavanceerde javascripting, het creëren van abstracte functies, de uitbreiding element eigenschappen en dergelijke. Als u niet te veel in javascripting, laat het met rust.

lightbox.js, lightbox_pack.js [boordevol version]: - Opnemen lichtbak manager scripts. Als u pagina ontwerper, tevens verantwoordelijk met de uitvoering van de lichtbak op de pagina, moet u de LightBoxManager te begrijpen. LightBoxManager bevat eigenlijk gewoon twee functies showLightBox en closeLightBox.

lightbox.css: - Als je weet dat CSS, kun je spelen met lightbox.css om de look-n-feel lightbox.css aanpassen

index.html: Voorbeeld uitvoering van de lichttafel met twee verschillende inhoud

lb_underlay_bkg.png: - Dit is een lichte / Simi transparante afbeelding die wordt gebruikt op de achtergrond voor de lightbox onderlaag [onderlaag is de laag onder de lighbox, die de gebruiker niet te klikken op een andere entiteit op de pagina, terwijl de lightbox is geopend]. U kunt elk beeld of een kleur hiervoor, afhankelijk van de pagina ontwerp en de eis.

icon_lb_close.gif: - Het beeld van nauwe lightbox handvat op de rechterbovenhoek van de lichtbak. Kan gebruik maken van een beeld als per ontwerp

Bekijk de demo |
Download Lightbox Bron Zip (gedownload 1797 keer)

Laat ons uw opmerkingen en feedback ...

Nou, ik moet zeggen, niet zo'n handige stuk van de wetenschap, maar als je een Web Developer, zou kunnen komen handig, op een dag (of toch niet?). Hier is kleine bookmarklet, die het mogelijk maakt om de webpagina te bewerken voor elke site.
En Sorry! U kunt de resultaten alleen te slaan op uw lokale computer.

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

Veel een keer voelen we de behoefte om browser specfic hacks te schrijven (al is het niet een goede gewoonte, hebben we UI ontwikkelaars hun toevlucht moeten nemen om dergelijke misstanden tot de grote Browsers Wars komt tot een wapenstilstand). Eerder had ik in dit artikel genoemde Voor uw IE Alleen , hoe u een CSS-fragment dat zou zichtbaar zijn voor IE browsers <IE7 alleen maar te schrijven.

Gisteren had ik een geval, waar ik wilde wat FireFox specifieke CSS-snippets te schrijven. Nou! Ik weet niet zeker of er een CSS-code voor, maar er is een HTML. Er is echter een luchtje aan, dit stukje HTML gebeurt onafhankelijk pas HTML-validatie. Maar, anywaz! Als u slecht of als zodanig vast te zitten, no-gebied voor de validatie (soms moeten we wreed) hebben, kunt u gebruik maken van de volgende opties om een ​​link naar een FF alleen stylesheet te verklaren of zelfs alleen maar de code van de CSS in dit blok. De code is

<commentaar> Zet je FireFox alleen HTML / CSS / Scripts hier </ comment>

bv
<commentaar>
<style>
/ * Stijlen voor FF alleen * /
fieldset {border: 1px solid # DDDDDD;}
</ Style>
</ Comment>

Ik "ben blij voor het moment ...

Hier is een snelle manier zijn om de inheemse Javascript Array-object, alleen maar om dat te doen ...

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;
}


Dus nu kun je zoiets als dit ...

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

Nu de dieren array zal bevatten "hond", "leeuw", "kat", "olifant";

PS: En hier is de String Trim Prototype te ...

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

Geniet van ....

Inclusief JavaScript's aan de onderkant van de HTML-document

Als u niet beschikt over document.write (of een dynamische generatie van de pagina-inhoud met behulp van javascripts) om een ​​deel van de inhoud van de pagina in te voegen in uw scripts, verplaatst u de script toe te voegen verklaring aan de onderkant van de pagina, voor het einde van de BODY tag.
De HTTP/1.1 specificatie blijkt dat browsers niet meer dan twee componenten te downloaden in parallel per hostnaam. Als u van dienst uw afbeeldingen van meerdere hostnamen, kunt u meer dan twee downloads voor te komen in parallel. Terwijl een script downloaden, echter, zal de browser niet starten een andere downloads, zelfs op verschillende hostnamen.
Er zijn ook manieren om dynamisch SCRIPT knooppunten en te laden op afstand scripts nadat de pagina is geladen met behulp van AJAX.

Externaliseren u JavaScript's

Gebruik van externe JavaScript-bestanden zal resulteren in een snellere laden van pagina's, omdat de JavaScript-bestanden in de cache van de browser. Inline JavaScript's "in HTML-documenten krijgen gedownload elke keer dat de HTML-document wordt gevraagd. Dit kan zelfs het aantal van de gemaakte HTTP-verzoeken, maar vervolgens neemt de grootte van het HTML-document. Externe JavaScript's worden gecached door de browser, de grootte van het HTML-document wordt verminderd zonder toename van het aantal HTTP-verzoeken.
Let op: Als gebruikers van uw site hebben meerdere bekeken pagina's per sessie en veel van uw pagina's weer gebruik maken van dezelfde scripts en stylesheets, is er een groter potentieel voordeel uit externe bestanden in de cache.

Pak uw JavaScript-bestanden

In het geval van JavaScripts, in tegenstelling tot de CSS, kunnen de bestanden gekraakt met behulp van een aantal standaard algoritmen die een kleinere bestanden dan alleen het verwijderen van spaties of tabs zou geven. Een voorbeeld van javascript verpakker kan hier http://dean.edwards.name/packer/ te vinden

Weg met alle dubbele Scripts

Het is zeer ongebruikelijk dat hele scripts kan worden gedupliceerd, maar een evaluatie van de tien top van de Amerikaanse websites blijkt dat twee van hen een dubbel script bevatten. Dubbele scripts maar uiteraard vermindert de prestaties door het creëren van onnodige HTTP-verzoeken en verspilling van JavaScript-uitvoering.
Ook in veel gevallen, maar de scripts namen verschillend zijn, is er een kans van dubbele scripts in dezelfde pagina als gevolg van het team grootte en het aantal scripts.

Beperk de toegang tot DOM-elementen waar mogelijk

Toegang tot DOM-elementen met JavaScript is traag, zodat het oog op een meer responsieve pagina, moet u beschikken over:
• Cache verwijzingen naar toegankelijk elementen
• Update nodes "offline" en dan voeg ze toe aan de boom
• Vermijd vaststelling van lay-out met JavaScript

Aparte Gedrag van inhoud en presentatie

Net zoals we afzonderlijke presentatie (CSS / XSLT) van Content (XHTML / XML), moeten we ook het gedrag te scheiden (Javascript). Dit is de zogenaamde onopvallende Javascript. Net zoals we linken naar externe CSS-bestanden, moeten we linken naar externe javascript bestanden.

In plaats van hard te coderen gedrag in de inhoud (bv. onmouseover, onclick, enz.), moet het gedrag van dynamisch worden toegevoegd aan de elementen, klassen en unieke elementen (ID's) met behulp van de DOM. De fundamentele document, de inhoud, mag alleen een geldig XHTML / XML en geen javascript.
Javascript moet vergroten inhoud door het toevoegen van gedrag. De inhoud moet blijven nuttig en bruikbaar zonder javascript (of zonder volledige JavaScript-ondersteuning).

Bij verschillende gelegenheden, terwijl het doen van pagina lay-outs met popup divisies / lightbox / tips etc komen we situaties waarin een of andere vorm SELECT-objecten gebeurt te zijn onder deze POPUP Divisies, door het ontwerp en het laat zien door middel van .... YUK!

Nou! je kan makkelijk dit oplossen door het aanpassen van uw Z-INDEX waarden adequaat voor FF en IE7. Maar Good Old (pun intended) IE6 gedraagt ​​zich niet zoals de bedoeling is .... De SELECT-BOX voorstelling door, zelfs nadat u een aantal drastisch hoge Z-INDEX waarden zijn van toepassing op uw PopUp divisie ... Bummer!!

Er zijn geen oplossingen voor dit probleem, maar er zijn, geloof ik, meer dan een paar manier om te werken-om dit probleem Maar Im hier om u te vertellen de eenvoudigste oplossing die ik gebruik, dat werkt prima voor mij, in de meeste gevallen ....

"Verberg de ROUGE SELECT-BOX Op vertoon van DE POPUP"

Gewoon in je script fragment waar u uw pop-up te tonen, voeg een stukje script om de zichtbaarheid van de SELECT-Box ingesteld op "verborgen"

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

En vergeet niet om het terug zetten bij het sluiten van uw popup divisie

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

waar "my_select" is de ID van de irritatie SELECT Box

Hoop dat dit helpt ...

PS. Er zijn natuurlijk andere opties zoals dynamisch positionining een IFRAME (net zo groot als je PopUp) onder de Popup DIV ... Dit werkt ook goed, maar met een toevoeging van lasten van DOM-elementen, scripts en hoofdpijn. Ik heb deze oplossing ook gebruikt, en als je hulp nodig hebt met deze optie, weet laat het me weten. Zullen blij zijn om te helpen!