Javascript gebruiken om meerdere afbeeldingen te bewerken

[Verwijderd]

Hallo allemaal,

voor een hobbyprojectje probeer ik een aantal afbeeldingen in een tabel weer te geven. Indien er een checkbox aangevinkt wordt, dienen bepaalde foto's een andere opacity te krijgen.

Een voorbeeld (het komt niet helemaal overeen, maar het lijkt er wel op) is hier te vinden: http://www.ox.ac.uk/videowall/

Waar ik niet op zit te wachten, is het zomaar kopieren van deze site. Ik wil graag begrijpen hoe ik meerdere images tegelijkertijd kan aanpassen. Heeft iemand tips of nuttige links?

[Wolfboy]

Dit kan vrij makkelijk met een library als jQuery.

Als je zoiets hebt:

HTML:

<img src="..." id="image_1" />
<img src="..." id="image_2" />
<img src="..." id="image_3" />

Dan kan je ze zo laten uitfaden:

JavaScript:

jQuery('#image_2, #image_3').fadeTo('slow', 0.5);

[Bosmonster]

Waarschijnlijk wil je eigenschappen eraan koppelen (misschien overlapt dit wel).

Handigste is overal gewoon een class aanhangen met de categorie en met bovenstaande jQuery-code bepaalde classes manipuleren.

[Verwijderd]

Je bedoelt dat je ongeveer dit zou krijgen?

HTML:

<div class="needToFade">
   <img src="..." id="image_1" />
   <img src="..." id="image_2" />
</div>
<div class="DontFade">
   <img src="..." id="image_3" />
</div>

en dan zoiets?

JavaScript:

jQuery('#needToFade').fadeTo('slow', 0.5);

[Luqq]

dan wordt het (".needToFade"). Lees je eens in over jquery selectors

[X-Lars]

Misschien zoiets voor wat meer flexibiliteit:

HTML:

<div id="container">
<div> 
   <img src="..." class="group1" /> 
   <img src="..." class="group2" /> 
</div> 
<div> 
   <img src="..." class="group2" />
   <img src="..." class="" /> 
</div>
</div>
<input type="checkbox" class="group1" onclick="inlineAndGlobalIsEvil(this)"/>
<input type="checkbox" class="group2" onclick="inlineAndGlobalIsEvil(this)"/>
<script>
function inlineAndGlobalIsEvil(oElement) {
    jQuery('#container .' + oElement.className).fadeTo(...);
}
</script>

[TJHeuvel]

Daar heb je toch geen jQuery voor nodig?

JavaScript:

<div id='imageContainer'>

</div>

<script type='text/javascript'>

var imgContainer;

var images = [
        {
            "Url" : "http://images.free-extras.com/pics/d/daisy_and_donald_duck-1057.jpg",
            "Tag" : "Tag1"
        },
        {
            "Url" : "http://art-canyon.com/motivational/wp-content/uploads/2010/09/donald-duck-stand-up.jpg",
            "Tag" : "Tag1"
        },
        {
            "Url" : "http://images.free-extras.com/pics/d/daisy_and_donald_duck-1057.jpg",
            "Tag" : "Tag2"
        },
        {
            "Url" : "http://images.free-extras.com/pics/d/daisy_and_donald_duck-1057.jpg",
            "Tag" : "Tag3"
        },
    ];

window.onload = function()
{
    imgContainer = document.getElementById('imageContainer');

    for each(var i in images)
    {
        var img = document.createElement('img');
        img.src = i.Url;
        img.tag = i.Tag;
        img.className = 'visible';

        imgContainer.appendChild(img);
    }
}

function ToggleTag(tagName)
{
    for each(var img in imgContainer.childNodes)
    {
        img.className = (img.tag == tagName) ? "visible" : "hidden";
    }
}

</script>

[X-Lars]

Nee, dat is inderdaad niet nodig.

Maar de images moeten ook nog een andere opacity krijgen En uiteraard heb je ook daar geen jQuery voor nodig. Etc. Juist in een "hobbyprojectje" ga je niet al die code kloppen, maar gebruik je lekker een of andere library en doe je het in een (suboptimale doch hippe) one-liner.

[RobIII]

X-Lars schreef op woensdag 10 november 2010 @ 01:13:
Juist in een "hobbyprojectje" ga je niet al die code kloppen, maar gebruik je lekker een of andere library en doe je het in een (suboptimale doch hippe) one-liner.

Dat is maar net hoe je 't bekijkt; ik persoonlijk heb altijd nét een graantje meer op met lui die in hun vrije tijd lekker freewheelen en leren en experimenteren en bezig zijn met dingen uitvogelen dan lui die 15 libraries tegen elkaar aan flempen en verder geen flauw benul hebben van wat er nou eigenlijk precies gebeurt. En je kunt ook als argument aandragen dat in de baas z'n tijd met deadlines in je nek zo'n jQuery of wat-dan-ook veel aantrekkelijker/efficiënter/logischer/etc. is om in te zetten dan als je zit te fröbelen op een hobby project.

Point being: "Juist in een 'hobbyprojectje'" gaat helemaal niet op. Een beetje devver weet wanneer 'ie iets wel en wanneer 'ie iets niet moet gebruiken. Een beetje devver weet wanneer 't loont iets zelf te schrijven en wanneer er beter naar een (zo goed als) kant-en-klaar oplossing gegrepen kan/mag/moet worden. En de pest is: een beetje devver word je alleen maar als je op z'n tijd ook eens lekker freewheeled en je verdiept in de materie

Dat een jQuery (om daar maar even bij te blijven) je werk uit handen neemt, browser-specifieke zaken voor je wegabstraheert en ga zo maar door ontken ik daarmee overigens niet.

[ Voor 8% gewijzigd door RobIII op 10-11-2010 01:32 ]

[Wolfboy]

RobIII: helemaal mee eens. Daarom gebruik ik in een voorbeeld als dit ook liever een regeltje jQuery dan dat ik een hele functie ga schrijven om de opacity in te stellen.

Als de TS de echte code ook wil hebben dan kan dat ook, maar voor een simpel voorbeeld waar er niet om gevraagd wordt vind ik het teveel werk

[Lye]

X-Lars schreef op dinsdag 09 november 2010 @ 23:37:
Misschien zoiets voor wat meer flexibiliteit:

HTML:

<div id="container">
<div> 
   <img src="..." class="group1" /> 
   <img src="..." class="group2" /> 
</div> 
<div> 
   <img src="..." class="group2" />
   <img src="..." class="" /> 
</div>
</div>
<input type="checkbox" class="group1" onclick="inlineAndGlobalIsEvil(this)"/>
<input type="checkbox" class="group2" onclick="inlineAndGlobalIsEvil(this)"/>
<script>
function inlineAndGlobalIsEvil(oElement) {
    jQuery('#container .' + oElement.className).fadeTo(...);
}
</script>

Klein vraagje..
Waarom gebruik je jQuery en zit je nog mooie onclick attributes aan je input te plakken.. Lijkt er een beetje op alsof je geen idee hebt wat jQuery kan en doet, alleen dat het leuke effectjes heeft.

Maar kan ook aan mij liggen..

[Kajel]

En waarom geef je 2 totaal verschillende soorten elementen (img tags en input elementen) dezelfde classes mee?

Wat betreft JQuery: Hoe nobel het ook is om zelf Javascript te gaan kloppen voor dit, is het een beetje overkill in dit geval vind ik. Zoiets is met JQuery selectors gewoon zoveel makkelijker op te lossen, zoals al geillustreerd.

[Bosmonster]

CyCloneNL schreef op woensdag 10 november 2010 @ 00:21:
Daar heb je toch geen jQuery voor nodig?

Dit is wel direct de meest ranzige jaren 90 manier om het op te lossen zonder jQuery Zonder javascript heb je helemaal niks meer.

Het maakt mij ook niet uit hoe het gebouwd wordt, met of zonder library, alleen legt het met jQuery-selectors altijd een stuk makkelijker uit.

Je kunt gewoon zeggen, hang er een class aan en selecteer ze aan de hand van de class. Ipv dat je vervolgens nog 3 posts van 2 pagina's nodig hebt om uit te leggen hoe je een crossbrowser class-selector maakt, xbrowser opacity change, animaties, etc.

HTML:

<ul>
   <li class="cat1"><img ...></li>
   <li class="cat2"><img ...></li>
   <li class="cat3"><img ...></li>
</ul>

JavaScript:

$('li.cat2>img').fadeIn();

etc.

[ Voor 53% gewijzigd door Bosmonster op 10-11-2010 10:59 ]

[MueR]

Luqq schreef op dinsdag 09 november 2010 @ 23:14:
dan wordt het (".needToFade"). Lees je eens in over jquery selectors

CSS selectors bedoel je?

RobIII schreef op woensdag 10 november 2010 @ 01:25:
En je kunt ook als argument aandragen dat in de baas z'n tijd met deadlines in je nek zo'n jQuery of wat-dan-ook veel aantrekkelijker/efficiënter/logischer/etc. is om in te zetten dan als je zit te fröbelen op een hobby project.

Waarom begin jij dan in de baas z'n tijd met jquery te experimenteren, jij pruts

[ Voor 50% gewijzigd door MueR op 10-11-2010 11:25 ]

[Verwijderd]

De uitleg van Bosmonster is erg constructief!

Een vraag:in hoeverre is de uitdrukking

"$('li.cat2>img').fadeIn();"

eigelijk als javascript op te vatten? Ik heb zelf tamelijk veel ervaring op het gebied van applicatie-ontwikkeling, en dergelijke termen ken ik dan weer totaal niet uit die Java omgeving; het verbaast me dan ook een beetje om te zien dat dit (het doet eerder aan Perl oid denken?). Mogelijk stel ik nu een zeer domme vraag hoor; ik ben pas sinds deze discussie op het spoor gekomen van het jQuery concept, waar ik me overigens nu ook in aan het verdiepen ben.

Volgende vraag: hoe netjes is het gebruik van jQuery nou eigenlijk? Ik refereer nu even aan de post van X-lars en de reactie van RobIII daarop; als ik jullie goed begrijp, is de netheid van het gebruik van jQuery een punt van discussie?

[TJHeuvel]

Bosmonster schreef op woensdag 10 november 2010 @ 10:53:
Dit is wel direct de meest ranzige jaren 90 manier om het op te lossen zonder jQuery Zonder javascript heb je helemaal niks meer.

Het maakt mij ook niet uit hoe het gebouwd wordt, met of zonder library, alleen legt het met jQuery-selectors altijd een stuk makkelijker uit.

Je kunt gewoon zeggen, hang er een class aan en selecteer ze aan de hand van de class. Ipv dat je vervolgens nog 3 posts van 2 pagina's nodig hebt om uit te leggen hoe je een crossbrowser class-selector maakt, xbrowser opacity change, animaties, etc.

Uiteraard is het niet de netste code, maar de TS vroeg ook helemaal niet om animaties. Het voorbeeld wat gegeven wordt heeft ook geen animaties. Mijn oplossing zette gewoon een class-name, zodat je de stijling in je CSS hebt en niet in je Javascript. Cross-browser opacity in CSS is echt geen rocket-science

Verwijderd schreef op woensdag 10 november 2010 @ 11:30:
De uitleg van Bosmonster is erg constructief!

Een vraag:in hoeverre is de uitdrukking

JavaScript:

$('li.cat2>img').fadeIn();

eigelijk als javascript op te vatten?

Dit is uiteraard 100% javascript, maar dan wel wat slimmer opgezet.
$ is een functie waar jQuery op gemapped staat. Hier stop je een string in, wat weer erg op CSS lijkt. jQuery returned daarna zijn eigen object, wat een functie fadeIn() heeft.

Verwijderd schreef op woensdag 10 november 2010 @ 11:30:
Volgende vraag: hoe netjes is het gebruik van jQuery nou eigenlijk? Ik refereer nu even aan de post van X-lars en de reactie van RobIII daarop; als ik jullie goed begrijp, is de netheid van het gebruik van jQuery een punt van discussie?

Dat is vooral persoonlijke voorkeur, maar mijn mening is dat je code na een tijdje erg onleesbaar wordt omdat je aangemoedigd wordt om veel anonymous functions te gebruiken. Oftewel, een groot document ziet er zo uit:

JavaScript:

$(window).load(function()
{
 $("div").click(function() {
   $(this).fadeIn("slow",function()
    {
      //Etc
    });
  } );
});

[Bosmonster]

Dat is vooral persoonlijke voorkeur, maar mijn mening is dat je code na een tijdje erg onleesbaar wordt omdat je aangemoedigd wordt om veel anonymous functions te gebruiken.

Als jQuery-evangelist ben ik dit uiteraard niet met je eens

De code is veel compacter en meer "to-the-point", waardoor juist kleine functionaliteit veel leesbaarder blijft, ook voor buitenstaanders. Anonymous functions zijn ook maar een tool die je grotendeels kunt negeren. In jouw voorbeeld is het overzicht vrij duidelijk mijnsinziens:

load -> function
click -> function
fadeIn -> function

Daarnaast ben je natuurlijk vrij om je code te structureren in minder-anonieme functies of plugins. Ook kun je gebruik maken van meer OO-based patterns als Backbone voor complexere applicaties.

Voor javascript en jQuery geldt hetzelfde als voor alle andere libraries en talen. Het is zo overzichtelijk als je het zelf maakt (in je voorbeeld ben je inconsistent met je accolades bijvoorbeeld)

[ Voor 9% gewijzigd door Bosmonster op 10-11-2010 12:01 ]

[TJHeuvel]

Bosmonster schreef op woensdag 10 november 2010 @ 11:58:
Voor javascript en jQuery geldt hetzelfde als voor alle andere libraries en talen. Het is zo overzichtelijk als je het zelf maakt (in je voorbeeld ben je inconsistent met je accolades bijvoorbeeld)

Als jQuery hatert ben ik het uiteraard niet met je eens

Code in Brainfuck zal nooit overzichtelijk worden, het maakt niet uit hoe hard je het probeert. Natuurlijk is leesbaarheid voor een (groot) gedeelte afhankelijk van de programmeur (dat 'ie z'n accolades concequent neerzet is erg belangrijk bv), maar het ligt ook zeker aan de taal/framework.

Maargoed, we kunnen zo wel even blijven doorgaan. Ik stel ook voor dat, mits je de functionaliteiten nodig hebt, het een goed idee is om een framework te gebruiken ipv zelf het wiel nogmaals uit te vinden. In dit voorbeeld zie ik alleen hier geen reden toe.

[ Voor 15% gewijzigd door TJHeuvel op 10-11-2010 12:52 ]

[X-Lars]

RobIII schreef op woensdag 10 november 2010 @ 01:25:
[...]

Dat is maar net hoe je 't bekijkt; ik persoonlijk heb altijd nét een graantje meer op met lui die in hun vrije tijd lekker freewheelen en leren en experimenteren en bezig zijn met dingen uitvogelen dan lui die 15 libraries tegen elkaar aan flempen en verder geen flauw benul hebben van wat er nou eigenlijk precies gebeurt. En je kunt ook als argument aandragen dat in de baas z'n tijd met deadlines in je nek zo'n jQuery of wat-dan-ook veel aantrekkelijker/efficiënter/logischer/etc. is om in te zetten dan als je zit te fröbelen op een hobby project.

Goed punt.
Maar 15? Met jQuery, MooTools én Prototype in de buurt ben je doomed... $ ftw

Point being: "Juist in een 'hobbyprojectje'" gaat helemaal niet op. Een beetje devver weet wanneer 'ie iets wel en wanneer 'ie iets niet moet gebruiken. Een beetje devver weet wanneer 't loont iets zelf te schrijven en wanneer er beter naar een (zo goed als) kant-en-klaar oplossing gegrepen kan/mag/moet worden. En de pest is: een beetje devver word je alleen maar als je op z'n tijd ook eens lekker freewheeled en je verdiept in de materie

Dat een jQuery (om daar maar even bij te blijven) je werk uit handen neemt, browser-specifieke zaken voor je wegabstraheert en ga zo maar door ontken ik daarmee overigens niet.

Mijn inschatting was dat TS, ondanks dat-ie geen code zomaar wilde kopiëren, niet in de groep devvers zit die zich echt wil verdiepen in de materie. Daar zat ik dus een beetje naast.

Daarnaast vind ik de code van CyCloneNL echt een heel slecht voorbeeld. Zoals Bosmonster ook zegt, zo heb je niet eens images in je content zonder Javascript. Hint: progressive enhancement.

Verwijderd schreef op woensdag 10 november 2010 @ 11:30:
De uitleg van Bosmonster is erg constructief!

Een vraag:in hoeverre is de uitdrukking

"$('li.cat2>img').fadeIn();"

eigelijk als javascript op te vatten? Ik heb zelf tamelijk veel ervaring op het gebied van applicatie-ontwikkeling, en dergelijke termen ken ik dan weer totaal niet uit die Java omgeving; het verbaast me dan ook een beetje om te zien dat dit (het doet eerder aan Perl oid denken?). Mogelijk stel ik nu een zeer domme vraag hoor; ik ben pas sinds deze discussie op het spoor gekomen van het jQuery concept, waar ik me overigens nu ook in aan het verdiepen ben.

Het is uiteraard "gewoon" Javascript. Dit is alleen een bepaalde syntax die o.a. door jQuery wordt gebruikt. De truuk bij jQuery zit hem er grotendeels in dat "$()" een function is die je kunt gebruiken als CSS selector (bijv. $('li.cat2>img')). Hieruit krijg je dan een set DOM elementen, waarmee je middels chaining direct verder kunt (in jouw voorbeeld voer je op elk resultaat uit de CSS selector een fadeIn() uit. Echter, "$" is ook een global object waarop allerlei nuttigs zit, zoals $.ready() en $.ajax(). Overigens is "$" hetzelfde als "jQuery".

Dat het je doet denken aan Perl o.i.d. komt waarschijnlijk door het chaining? Dat is op zich niet nieuw in Javascript, kijk maar naar bijv. getElementsByClassName('div')[0].style.display = 'none'.

Volgende vraag: hoe netjes is het gebruik van jQuery nou eigenlijk? Ik refereer nu even aan de post van X-lars en de reactie van RobIII daarop; als ik jullie goed begrijp, is de netheid van het gebruik van jQuery een punt van discussie?

Wat mij betreft is jQuery relatief "netjes", in de zin dat het geen native Javascript objecten aantast (iets wat bijv. Prototype wel doet). Zonder hier zelf verder op in te gaan staat hier één van de betere uiteenzettingen van dat probleem (want dat is het). Daarom wrapt jQuery alles in objecten, waarmee je dan weer vanalles kunt doen (zoals er event listeners aan hangen of animaties, etc.).

Persoonlijk ben ik geen fan van de "$" notatie, voornamelijk omdat meerdere libs dat doen. Daar valt soms wel omheen te werken, maar ideaal is het nooit. Dat staat overigens los van het feit of het een goed idee is om meerdere libs in één app te combineren Idealiter is iedere developer/team vrij om een shortcut aan een lib toe te wijzen, zonder dat de lib dat al op voorhand doet.

Uiteindelijk vind ik (alleen) jQuery niet geschikt voor complexere apps. Dan ga je toch eerder kijken naar bijv. YUI, of zorg je dat je een goed design neerzet, waarbinnen je met jQuery los kunt. Het probleem is dat je nu al wel veel projecten ziet, waarin met jQuery alsnog erg veel spaghetti-code geproduceerd wordt (anonymous functions, veel global vars, etc).

De kunst is dus om de juiste tool voor de job te kiezen.

[X-Lars]

Lye schreef op woensdag 10 november 2010 @ 04:05:
[...]


Klein vraagje..
Waarom gebruik je jQuery en zit je nog mooie onclick attributes aan je input te plakken.. Lijkt er een beetje op alsof je geen idee hebt wat jQuery kan en doet, alleen dat het leuke effectjes heeft.

Maar kan ook aan mij liggen..

Wat is je wat dat betreft niet duidelijk aan een functie die ik "inlineAndGlobalIsEvil" noem? Overigens, ik vind inderdaad dat jQuery alleen wat leuke effectjes heeft. Het zijn er alleen best veel, en er zijn ook nog "Ajax" effectjes.

[Bosmonster]

Overigens, ik vind inderdaad dat jQuery alleen wat leuke effectjes heeft.

De basis van jQuery (zoals de naam ook al zegt) ligt in de query-selector. Inmiddels is dat (mede door jQuery en Resig) inmiddels een standaard in nieuwe browsers geworden. jQuery zelf is inmiddels ook wel veel meer dan dat.

Als je jQuery beschouwt als iets dat "alleen wat leuke effectjes heeft", dan zou ik je aanraden er toch nog eens wat dieper in te duiken.

[X-Lars]

Bosmonster schreef op woensdag 10 november 2010 @ 13:57:
[...]


De basis van jQuery (zoals de naam ook al zegt) ligt in de query-selector. Inmiddels is dat (mede door jQuery en Resig) inmiddels een standaard in nieuwe browsers geworden. jQuery zelf is inmiddels ook wel veel meer dan dat.

Als je jQuery beschouwt als iets dat "alleen wat leuke effectjes heeft", dan zou ik je aanraden er toch nog eens wat dieper in te duiken.

Dan moet je me wel volledig quoten Daar gaf ik ook aan dat er Ajax-functionaliteiten in zitten. Overigens gebruikt jQuery de Sizzle CSS selector (ook van Resig), maar dat was je al bekend.

Hetgeen ik hier meld staat los van het feit dat ik heel erg veel respect heb voor Resig en het jQuery team. Zij hebben een uitstekende library neergezet met een grote community erachter (misschien wel de grootste in de open source wereld?). Maar het blijft een library, met een shitload aan handige utilities en cross-browser abstracties. Waarschijnlijk de beste in z'n soort.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Het gaat er niet om of ik jQuery goed genoeg ken (ik volg het project op github en heb al veel van de source gezien), ik heb er gewoon een mening over. Wellicht dat het woord "effectjes" bij jou/sommigen in het verkeerde keelgat is geschoten. Dat neem ik dan terug. Maar in de praktijk is het een verzameling "utility functions/methods" (dat klinkt beter), die niet bepaald best practices promoot w.b. design patterns en architectuur op de front-end. Ik vind het zelfs zorgwekkend dat "the way you write Javascript" voor velen "the only way" is.

Het is voor rapid development, en van zichzelf niet scalable/maintainable.

[Bosmonster]

X-Lars schreef op woensdag 10 november 2010 @ 14:28:
[...]


Dan moet je me wel volledig quoten Daar gaf ik ook aan dat er Ajax-functionaliteiten in zitten. Overigens gebruikt jQuery de Sizzle CSS selector (ook van Resig), maar dat was je al bekend.

Sizzle is een afgeleide van jQuery. De selector-engine uit jQuery is tot een los project gemaakt, zodat je deze ook los in je eigen libraries kunt gebruiken. Uiteraard gebruiken de laatste versies van jQuery intern ook Sizzle weer.

Maar in de praktijk is het een verzameling "utility functions/methods" (dat klinkt beter), die niet bepaald best practices promoot w.b. design patterns en architectuur op de front-end. Ik vind het zelfs zorgwekkend dat "the way you write Javascript" voor velen "the only way" is.

Het is voor rapid development, en van zichzelf niet scalable/maintainable.

Het is een library voor rapid development. Als je verwacht dat die library automagisch structuur voor je gaat aanbrengen heb je het inderdaad mis. jQuery is namelijk geen framework. De structuur wordt verwacht van de developer zelf (bijvoorbeeld met backbone of eigen implementaties).

[X-Lars]

Guess we're on the same track

[Verwijderd]

Ik ben dus eens aan het experimenteren gegaan, maar ik krijg toch niet de resultaten die ik wens.

Kan iemand me misschien een hint geven? Mijn code is als volgt:

JavaScript:

<body>
<div id="container"> 
    <div>   
        <img src="person1.jpg" class="group1" width="120" height="68" />
        <img src="person2.jpg" class="group2" width="120" height="68" />
    </div>
</div>
 
<input type="checkbox" class="group1" onclick="fade(this)"/> 
<input type="checkbox" class="group2" onclick="fade(this)"/> 

<script> 
function fade(oElement) 
{ 
    jQuery('#container .' + oElement.className).fadeTo('slow', 0.5); 
}
</script> 
</body>

[X-Lars]

Dat zou wel moeten werken (op het oog...). Krijg je een foutmelding? Is jQuery wel ingeladen/beschikbaar? Check bijv. eens in Firebug.

Het is wel de bedoeling dat je je probleem wat duidelijker omschrijft en aangeeft wat er precies gebeurt bij jou.

[Verwijderd]

Hallo Lars,

Ik krijg geen enkele foutmelding, de pagina laadt, het is mogelijk om de checkboxes te checken en de 'ontchecken', maar dit heeft geen zichtbaar resultaat tot gevolg.

Ik heb zojuist Firebug geinstalleerd in firefox, maar ik zie eerlijk gezegd niet in wat ik hier al dan niet in zou moeten zien?

In welk opzicht dient jQuery precies ingeladen/beschikbaar te zijn? Ik heb jquery-1.4.3.min gedownload en in dezelfde directory als mijn 'untitled-1' bestand gezet, maar dit heeft geen verbetering tot gevolg. Zie ik misschien iets over het hoofd?

Mijn complete code is op dit moment:

HTML:

<body> 
<div id="container">  
    <div>    
          <img src="person1.jpg" class="group1" width="120" height="68" /> 
          <img src="person2.jpg" class="group2" width="120" height="68" /> 
    </div> 
</div> 

<div>  
<input type="checkbox" class="group1" onclick="fade(this)"/>  
<input type="checkbox" class="group2" onclick="fade(this)"/>  
</div>

<script>  
function fade(oElement)  
{  
    jQuery('#container .' + oElement.className).fadeTo('slow', 0.5);  
} 
</script> 

<script>
    $("div").click
    (
        function () 
        {
            $('#container .group1').fadeTo("slow", 0.33);
        }
    );
</script>
 
</body>

De toevoeging van de '$("div").click' was overigens een poging van mij om jQuery buiten de onclick functie om te gebruiken, omdat Lye aangaf dat dat niet nodig/niet zo netjes was. Ik weet niet of dit uberhaupt werkt

[ Voor 8% gewijzigd door Verwijderd op 10-11-2010 20:23 ]

[X-Lars]

Kan je even je volledige document in je vorige post zetten (dus geen nieuwe reactie plaatsen)? Dus inclusief <html>, <head> en <script> tags. Of zet eventueel e.e.a. online waar we het kunnen bekijken.

Nu wordt het volgens mij wel erg basic debug werk, hoor.

[krvabo]

Ikzelf zou het dan op deze manier doen, getest en werkend:

JavaScript:

<div id="container"> 
    <div>   
        <img src="http://blog.internetnews.com/skerner/smk/testpilot.png" class="group1" />
        <img src="http://www.tanyakhovanova.com/Jokes/xkcd/turing_test.png" class="group2" />
    </div>
</div>
 
<input type="checkbox" class="group1 groups" /> 
<input type="checkbox" class="group2 groups" /> 



<script>
$(document).ready(function() {

    $('.groups').change(function () {

        var sClassname = $(this).attr('class').replace(' groups', '');
        /*
         * Note: Als je geen gebruik maakt van twee classes op de checkbox
         * dan is de replace niet nodig ;) Ik heb hem er bijgezet om wat nettere html te krijgen.
         */

        $('img.' + sClassname ).fadeTo('slow', 0.5);

    });
});
</script>

Door gebruik te maken van de $(document).ready-selector worden de onclick attributen netjes na het laden unobstrusive aan de selectboxes gehangen.


Ik denk dat de fout er (in je laatste code) in kan zitten dat #container en .group1 aan elkaar geschreven moeten zijn in je selector, maar zeker weten doe ik het niet.

[ Voor 14% gewijzigd door krvabo op 10-11-2010 21:09 ]

[RobIII]

Verwijderd schreef op woensdag 10 november 2010 @ 20:21:
In welk opzicht dient jQuery precies ingeladen/beschikbaar te zijn? Ik heb jquery-1.4.3.min gedownload en in dezelfde directory als mijn 'untitled-1' bestand gezet, maar dit heeft geen verbetering tot gevolg. Zie ik misschien iets over het hoofd?

Please tell me dat je jquery wel ergens in je pagina inlaadt? <script src="..."> anyone?

Verwijderd schreef op woensdag 10 november 2010 @ 20:21:
Mijn complete code is op dit moment:

Complete? Je complete body bedoel je? Ik mis namelijk nog een stukje head enzo...

[ Voor 21% gewijzigd door RobIII op 10-11-2010 23:30 ]

[Tharulerz]

RobIII schreef op woensdag 10 november 2010 @ 23:29:
[...]

Please tell me dat je jquery wel ergens in je pagina inlaadt? <script src="..."> anyone?

What he said... Ik vrees dat sommige mensen terug moeten naar Javascript 101...