Väljendades IT

Oli see kummaline küsimus, kus tükk Javascript töötas hästi kõikide brauser ans nagu tavaliselt baar IE ... Simple see oli, kuid kuna skript ei kirjutatud mulle, see võttis aega siluda see "objekt ei toeta seda atribuuti või meetodit" viga, et ainult IE oli oksele. Ilmselt! Kui ma kirjutan skripti, ma ei saanud seda viga üldse, kui ei sega minu muutuja nimed välja Ids :).

Probleem: Object ei toeta seda atribuuti või meetodit (real 3)

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

Lahendus:
Viga on genereeritud thirdrow eespool toodud näites (Line 3 ... "shortdesc = document.getE ...."). Üritasin kõik omamoodi rumalaid asju, et I dont isegi väärt äramärkimist siin ja lõpuks arva mida! lihtsalt muutuvas shortdesc var midagi muud lahti viga. Põhimõtteliselt! Muutuja nimi oli erinev fieldID

Seda need vana kooli, kuid nagu tavaliselt on minu mälu täiendada ...
Nii on keelatud = "true" ja puuetega = "false" sama? Jah
... Ära usu hästi! thats nii see on ... Siin on mõned kiired selgitus ...
"Keelatud" on omadus, mis tahes element / valdkonnas ja seega ei võta raha oma olemuselt.

Niikaua kui see omadus on kohal, element on keelatud, sõltumata selle väärtusest. jaoks nt.
<input type="text" value="This on disabled" disabled>
<input type="text" value="This on disabled" disabled="disabled">
<input type="text" value="This on disabled" disabled="true">
<input type="text" value="This on disabled" disabled="false">

Kõik ülaltoodud teeb seda vormi väli "KEELATUD".

Lihtsalt ei anna, kui atribuut "Disabled" hoiab Field "vaimuhaiged" ... nagu allpool

<input type="text" value="This ei disabled" />

Pea meeles "Iga väärtus (või puudub igasugune väärtus) puuetega inimeste omadus, brauser muudab see keelatud." Et hoida asju selgeks meie mõtetes W3C soovitab, et me kasutame keelatud = "puudega" sellistes olukordades.

See on vahe küll, kui me kasutada seda omadust javascript ...

document.form.element.disabled = true; / / element on keelatud
document.form.element.disabled = false; / / element peab olema sisse lülitatud

Ülaltoodud argumendid on ka tõsi, nende atribuute ja elemente:

• kontrollitud (raadionupp ja kast)
• valitud (valikuline)
• nowrap (TD)

Heres teise vähe tükk Javascript petmine et ma pidin kaevama ümber sest olukord commaned ta. Ühes oma veebilehti, mul oli see olukorras, kus ma pidin rakendama "windows.onload" kaks korda. Esimene asi, mis tuli kogenematu meeles nagu minul (ma pean ausalt ütlema, et kuna ma olen kasutanud javascript raamistike ja raamatukogud, olen forgotton teha lihtsaid asju minu enda ... kurb aga tõsi), on järgmine meetod ...

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

Vabandame öelda, kuid see harjumus tööd ... ei taha, et arutada täitmise teadus Javascript palju ... kuid vastavalt minu hiljutine kogemus, ainult viimane ülesanne (onloadfn3) on haige tegelikult saavad täidetud.

Tavaolukordades, erinevalt minu (kes ma rääkida veidi hiljem) ... mida võiks teha üks järgmistest täita mutliple allalaadimine toimib ....

Või midagi sellist

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

Minu praegune olukord, ma ei saa kasutada kas eespool ...
Miks mul on vaja helistada windows.onload kaks korda, pigem seda, et helistaja 2 funktsioonid ühes allalaadimine funktsioon? Siin on kiire pilk minu probleem avaldus ...

"Mu saiti on struktureeritud nagu WordPress teema .... st on olemas ühine header.php ja footer.php mis saab kaasata kõik saiti. On allalaadimine funktsioon Toetuslepingu sisse footer.php teha mõned ühised allalaadimine ülesandeid. Ja seal on mõned leheküljed, mis vajavad midagi oma OnLoad, välja arvatud teha ühise allalaadimine funktsioon. Kui ma anda tagasikutse funktsiooni otse window.onload handler, siis üle sõita varem omistatud kutse in footer.php "

.... On minu probleem aru ?

Hästi! on vähe lahendusi, et ma ei leia. Nad kõik on väga sarnased ning peamiselt implementions lahenduse antud Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Lahendus:

Lihtsalt lisage see javascripti kood saidi ...

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

Ja nimetavad seda mitte tavaline "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Rohkem koodi käivitumise leheküljel koormus *
 }); 

Eeliseid selle koodijupi ...
1. Peamiselt See võimaldab teil on mitu windows.onload sündmused, helistas Eralda osa oma koodi, ilma overridding eelmise määratlus
2. See on tõesti märkamatu. Seda saab panna pilti oma teiste skripte või eraldi failis.
3. See toimib isegi siis, kui window.onload on juba määratud.

Vahel hoida pageweight alla ... me oleme jagada meie skriptid killud ... Need javascript killud saab laadida ning kui vaja (on sündmus või klõpsuga link või nupp jne).

Laadimine Javascripts dünaamiliselt on lihtne ja üsna otse edasi, nagu allpool ...

= “text/javascript” > <Script type = "text / javascript">
funktsioon loadNewScript (allikas) {
var s = document.createElement ("script");
s.setAttribute ("tüüp", "text / javascript ');
s.setAttribute ("src", allikas);
document.body.appendChild (id);
}
</ Script>

ja sul võib olla järgmine kõne link kuskil kehas, või saab olema see script "OnLoad" dokumendi ise ...

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

või

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

Mitte, et seal on vaid mõned LIGHTBOX s, et leiad, kui google. Küsimus enamik Valguskastid, et ma leidsin oli see, et nad kõik tundus kasutada üht või teist raske kaal JAVASCRIPT raamistikke nagu jQuery, prototüüp, Mootools ja muud sarnast. Nad kõik on lahe ja šikk otsin. Aga kui teie nõue "Aga ma tahan SIMPLE ja kerge LIGHTBOX SCRIPT enda saidile ka saan", siis siin ta on;

Mõned kena funktsioonid lightbox

1. Väga kerge
   a. 4KB skripte kui pakitud (8 kb pakkimata)
   b. 2 KB CSS
   c. Paar rida HTML lightbox konteiner
2. Lihtne mõista ja rakendada
3. Võib olla mitu Valguskastid samal lehel.
4. Sama lightbox mahuti, mis näitab, eri sisu (mis on eraldi lisatud peidetud vaheseinad page), sõltuvalt link / variant, mis on klõpsatud.
5. Automaatselt keskused ise, võttes arvesse kõiki tegureid, nagu akna kõrgusest ja laiusest (ekraani resolutsioon), lk leidke summa ja kõrguse sisu lightbox
6. Testitud IE 7 ja FF

Vaata Demo |
Lae Lightbox Allikas Zip (Alla 1786 korda)

jo.js, jo_pack.js [pakitud version]: - lihtsate JavaScript objekti [JO], mis sisaldab elementi, akna-ja dokumendi asukoha skripte. Te saate avada JO.JS kui soovid, et su käed määrdunud mõne Advanced Javascripting, luues abstraktse funktsioone, mis ulatub element omadusi ja selline. Kui sul ei ole liiga palju Javascripting, jäta ta rahule.

lightbox.js, lightbox_pack.js [pakitud version]: - mis sisaldavad valguskast manager skripte. Kui olete lehe kujundaja, vastutab ka rakendamisel lightbox lehel, sa pead aru LightBoxManager. LightBoxManager põhiliselt sisaldab ainult kaks funktsiooni showLightBox ja closeLightBox.

lightbox.css: - Kui sa tead, CSS, saad mängida lightbox.css välimuse-n-tunne lightbox.css

index.html: Proovi rakendamise lightbox kahe erineva sisu

lb_underlay_bkg.png: - See on kerge / simi läbipaistev image, mida kasutatakse tausta lightbox aluskate [Underlay on kiht allpool lighbox, mis takistab kasutajal klõpsates muu üksus lehel, samal ajal kui lightbox on avatud]. Võite kasutada mingit pilti või isegi värviga selleks, sõltuvalt lehe disaini ja nõue.

icon_lb_close.gif: - image tiheda lightbox käepide üleval paremas valguses kasti. Võib kasutada mis tahes pildi disainilahenduse kohta

Vaata Demo |
Lae Lightbox Allikas Zip (Alla 1786 korda)

Palun andke meile oma kommentaare ja tagasisidet ...

Noh, ma pean ütlema, et ei ole sellist kasulikku tükk teadust, kuid kui te olete Web Developer, võivad tulla mugav, kunagi (või on?). Siin on väike funktsionaaljärjehoidjat, mis võimaldab muuta veebilehe mis tahes kohas.
Ja Sorry! Teil on võimalik salvestada tulemused kohalikus arvutis ainult.

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

Palju kordi me tunneme vajadust kirjutada brauseri specfic hacks (kuigi see ei ole hea tava, me UI arendajad pea kasutama nii kurja, kuni suur Brauserid Wars tegemist vaherahu). Varem oli mul käesolevas artiklis nimetatud Teie te ainult , kuidas kirjutada CSS väljavõtte, mis oleks nähtav IE brauserite <IE7 ainult.

Eile oli mul juhtum, kus ma tahtsin kirjutada mõned FireFox teatud CSS pikad. Hästi! Ma ei ole kindel, kas on CSS koodi selleks aga on HTML. On saagi aga see tükk HTML doesnot pass HTML valideerimist. Aga anywaz! Kui te ei suuda halvasti või kui sellist ei ole, seoses valideerimise (millalgi peame olema julm), siis võib kasutada järgmisi kuulutada link FF ainult stiil või isegi ainult koodi CSS selle blokeerida. Kood on

<comment> Pane oma FireFox ainult HTML / CSS / Scripts siin </ comment>

nt
<comment>
<style>
/ * Stiilid FF ainult * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>

I "m õnnelik praegu ...

Siin on kiire viis laiendada kohalike Javascript Array objekt, just selleks, et ...

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


Nüüd saab teha midagi sellist ...

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

Nüüd loomade array sisaldab "dog", "lõvi", "cat", "elevant";

PS: Ja siin on String Trim Prototype liiga ...

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

Naudi ....

Kaasa JavaScript oma allosas HTML Document

Kui sul ei ole document.write (või dünaamiline põlvkonna lehekülje sisu kasutamine javascripts) lisada osa lehe sisu oma skripte, liikuda script sisaldama avalduse lehe all, enne body.
HTTP/1.1 kirjeldus näitab, et brauserid laadida enam kui kaks komponenti paralleelselt kohta hostname. Kui te teenida oma pilte mitme nimesid, saad rohkem kui 2 downloads esineda paralleelselt. Kuigi script on allalaadimiseks siiski brauser ei käivitu tahes muid faile, isegi eri nimede.
On olemas ka võimalusi dünaamiliselt luua SCRIPT sõlmede ja koormus serveri skriptid pärast lehe laadimist AJAX.

Hajutavad sa JavaScript s

Väliseid JavaScript failid toob kaasa kiirema laadimise lehekülgi sest JavaScript failid on puhverdatud by brauseris. Inline JavaScript s "HTML dokumentide saad laadida iga kord HTML dokumenti taotletakse. See võib tegelikult vähendada HTTP taotlusi, kuid seejärel suurendab suurus HTML dokument. Väline JavaScript s on puhverdatud by brauser; suurus HTML dokument on vähendada ilma suurema hulga HTTP taotlusi.
Pange tähele, et kui kasutajad saidil on mitu kuvamiskorra per sessioon ja paljud lehed uuesti kasutada sama skriptid ja laaditabelite on suurem potentsiaalne kasu puhverdatud välistele failidele.

Paki oma Javascript Files

Juhul JavaScripts erinevalt CSS, failid võivad purustada kasutades mõned standard algoritme, mis annaks väiksema faili suurus kui lihtsalt eemaldada tühikuid või klapid. Näiteks javascript pakkija leiate siit http://dean.edwards.name/packer/

Vabaneda kõigist Duplicate Scripts

See on väga ebatavaline, et kogu skripte võib dubleerida, kuid vaadata 10 top USA veebilehti näitab, et kaks neist sisaldavad dubleeritud skripti. Eksemplaris skriptid kuid ilmselt vähendab jõudlust tarbetu HTTP päringuid ja raisatud JavaScript täitmist.
Ka paljudel juhtudel, kuigi skriptid nimed on erinevad, on tõenäoline eksemplaris skriptid sama lehe tõttu meeskonna suurus ja arv skripte.

Minimeeri tutvumise DOM elemente kui võimalik

Juurdepääs DOM elemente JavaScript on aeglane nii, et on paremini lehe, peaksite:
• Cache viited külastatud elemendid
• Uuenda sõlmed "offline" ja siis lisage need puud
• Väldi millega paigutuse JavaScript

Eraldi käitumise sisu ja esitusviisi

Nii nagu me eraldi esitamist (CSS / XSLT) alates Content (XHTML / XML), peaksime ka eraldi Behavior (JavaScript). Seda nimetatakse märkamatud Javascript. Nii nagu me linkida välise CSS faili, peaksime linkida välise javascript faili.

Selle asemel, et raske kodeerimine käitumine võetakse sisu (nt onmouseover, onclick jne), käitumine peaks olema dünaamiliselt lisada elemente, klassid ja unikaalseid elemente (IDS), kasutades DOM. Foundational dokumendi sisu, peaks olema ainus kehtiv XHTML / XML ja ei javascripti.
Javascript peab suurendama sisu, lisades käitumist. Sisu peaks jääma kasulik ja kasutatav ilma javascripti (või ilma täieliku javascript tugi).

Mitmel korral, tehes samal ajal lehe paigutusega popup osad / Valgusreklaam / Tips jne me kohanud olukordi, kus mingil kujul SELECT objektide juhtub olema nendel POPUP rajoonid, mille konstruktsioon ja see näitab läbi .... YUK!

Hästi! võid kergesti kindlaks see, korrigeerides oma Z-INDEX väärtused asjakohaselt FF ja IE7. Aga vana hea (pun mõeldud) IE6 ei käitu nagu ette nähtud .... SELECT BOX näitavad läbi, isegi pärast seda, kui kohaldatakse mõne drastiliselt kõrge Z-INDEX väärtusi oma PopUp Division ... kurb!!

On NO määratakse see probleem, kuid on olemas, ma usun, et rohkem kui paar teel tööle-ümber see probleem, kuid Im siin teile kõige lihtsam lahendus, et ma kasutan, mis töötab hästi minu jaoks, enamikus juhtudel ....

"Peida ROUGE SELECT kasti, siis sa NÄITA POPUP"

Lihtsalt oma skripti väljavõte, kus teil näidata oma popup, lisada tükk script määrata nähtavus SELECT Lahter "Varjatud"

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

Ja pidage meeles, et seada see tagasi CLOSE oma PopUp osakond

document.getElementById ('my_select "). style.visibilty =" nähtav ";

kus "my_select" on ID ärritus SELECT Box

Loodan, et see aitab ...

PS. On loomulikult ka teisi võimalusi nagu dünaamiliselt positionining IFRAME (sama suur kui te PopUp) all Popup DIV ... See toimib hästi ka, aga lisamine koormate DOM Elements, skripte ja peavalu. Olen kasutanud seda lahendust ka ja kui sa vajad abi selle võimaluse, ärge andke mulle teada. On hea meel aidata!