Skift af visibility på billeder med forskellige ID

Kan du vise, hvor langt du selv er kommet? :)

Uha.. du tvinger mig til at blotte mine ringe scripting-egenskaber.. Selve scriptet har jeg ingen idé om hvordan jeg skal gribe an - men jeg har forsøgt med noget værre rod i selve html-delen..

    <a href="#" onclick="display('ac','tx','ut')='hidden'">KNIVE</a><br />   
    <a href="#" onclick="visibility('ac','tx','kn')=false">REDSKABER</a><br />
    <a href="#" onclick="visibility('ac', 'kn', 'ut')=false">TEXTILER</a><br />
    <a href="#" onclick="visibility('kn', 'tx', 'ut')=false">TILBEHØR</a><br />

Jeg er jo på dybt vand.. :-S

http://blog.movalog.com/a/javascript-toggle-visibility/

Hej keysersoze,
Tak for link! Jeg har forsøgt mig med at bruge det, men jeg opnår et noget underligt resultat.. Først og fremmest,
- bryder den mit gitter af billeder - hvor min ambition er at lade alle billeder beholde deres respektive pladser
- dernæst, lader den til ikke at skjule billederne
- og slutteligt, påvirker den kun en af mine kategorier - mens det jeg ønsker, er at den skal påvirke 3 ud af 4, ved at skjule indholdet.

Jeg håber du eller andre kan hjælpe med at kaste lys over hvad jeg gør galt?

    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
          var e = document.getElementById(id);
          if(e.style.display == 'block')
              e.style.display = 'none';
          else
              e.style.display = 'block';
        }
    //-->
    </script>



<div id="produktindhold">
            <a id="kn" href="bigchopper.html"><img src="img/bigc0.jpg" height="100px"></a>
            <a id="kn" href="bread.html"><img src="img/bread0.jpg" height="100px"></a>
            <a id="kn" href="fruit.html"><img src="img/fruit0.jpg" height="100px"></a>
            <a id="kn" href="herb.html"><img src="img/herb0.jpg" height="100px"></a>
            <a id="kn" href="fish.html"><img src="img/fish0.jpg" height="100px"></a>
            <a id="kn" href="santoku.html"><img src="img/santoku0.jpg" height="100px"></a>
            <a id="kn" href="meat.html"><img src="img/meat0.jpg" height="100px"></a>
            <a id="ac" href="sharpener.html"><img src="img/ceramic0.jpg" height="100px"></a>
            <a id="ac" href="blackknifeholder.html"><img src="img/blackholder0.jpg" height="100px"></a>
            <a id="ac" href="whiteknifeholder.html"><img src="img/whiteholder0.jpg" height="100px"></a>
            <a id="ac" href="bigchoppingboard.html"><img src="img/bigboard0.jpg" height="100px"></a>
            <a id="ac" href="smallchoppingboard.html"><img src="img/smallboard0.jpg" height="100px"></a>
            <a id="tx" href="whiteapron.html"><img src="img/wapron0.jpg" height="100px"></a>
            <a id="tx" href="brownapron.html"><img src="img/bapron0.jpg" height="100px"></a>
            <a id="tx" href="whitedishtowel.html"><img src="img/wtowel0.jpg" height="100px"></a>
            <a id="tx" href="browndishtowel.html"><img src="img/btowel0.jpg" height="100px"></a>
            <a id="tx" href="whiteovenmit.html"><img src="img/woven0.jpg" height="100px"></a>
            <a id="tx" href="brownovenmit.html"><img src="img/boven0.jpg" height="100px"></a>
            <a id="ut" href="spade.html"><img src="img/spade1.jpg" height="100px"></a>
            <a id="ut" href="bigspoon.html"><img src="img/bspoon1.jpg" height="100px"></a>
            <a id="ut" href="littlespoon.html"><img src="img/lspoon1.jpg" height="100px"></a>
            <a id="ut" href="littlerollingpin.html"><img src="img/lroller1.jpg" height="100px"></a>
            <a id="ut" href="bigrollingpin.html"><img src="img/broller1.jpg" height="100px"></a>
</div>

<div id="produktmenu">
    <a href="#" onclick="toggle_visibility('ac','tx','ut');">KNIVE</a>    <br />   
    <a href="#" onclick="toggle_visibility('ac','tx','kn');">REDSKABER</a><br />
    <a href="#" onclick="toggle_visibility('ac','kn','ut');">TEXTILER</a><br />
    <a href="#" onclick="toggle_visibility('kn','tx','ut');">TILBEHØR</a><br />
</div>

Du prøver at smide 3 variabler ind i en funktion der kun kan modtage én variabel.

jeg ville nok lave en
<div id="kn">
            <a href="bigchopper.html"><img src="img/bigc0.jpg" height="100px"></a>
            <a href="bread.html"><img src="img/bread0.jpg" height="100px"></a>
            <a href="fruit.html"><img src="img/fruit0.jpg" height="100px"></a>
            <a href="herb.html"><img src="img/herb0.jpg" height="100px"></a>
            <a href="fish.html"><img src="img/fish0.jpg" height="100px"></a>
            <a href="santoku.html"><img src="img/santoku0.jpg" height="100px"></a>
            <a href="meat.html"><img src="img/meat0.jpg" height="100px"></a>
</div>

og tilsvarende 3 mere - alle liggende i
<div id="produktindhold">

Hej Michael,
Som du ganske glimrende statuerer, så er jeg ganske grøn i forhold til javascripts.

Jeg har med andre ord, ikke den fjerneste anelse om hvor mange variable funktioner kan modtage, og dermed ligevidt, ingen anelse om hvordan jeg skriver en funktion, som kan modtage de tre variable jeg ønsker at påvirke.


Mit håb er, at der findes nogen derude, som måske kan række en hjælpende hånd - eller et link til en tutorial, som kan redde mig ud af mit dilemma?

det giver i hvert fald ikke mening med flere elementer med samme id.

Meningen er, ud fra min idé, at jeg kan klikke på et link, som skal bevirke at x antal billeder forbliver synlige, mens de resternede forsvinder. Det hele bygger på en tanke om, at man skal kunne vælge, eksempelvis kategorien "redskaber" hvorved kategorierne "tekstiler", "knive" og "tilbehør" forsvinder.

Eftersom hver kategori rummer flere produkter, var tanken så at give dem samme id, for at lade dem påvirke samtidigt.

Hej Claes..
Tak for dit indspark - dog har jeg behov for at have hvert billede for sig, for at kunne blande dem så det grafiske udtryk kommer til at passe chefen når dagen er omme..

på hvilken måde er #6 visuelt forskelligt fra #4?

Det er to forskellige knive.. Tanken er sådan set bare, at de skal sættes op i en gitterform, hvor billederne bliver blandet, så de står flot visuelt - og at de efterfølgende får denne toggle_visibility-funktion

min kode laver altså helt det samme - bare opdelt i grupper idet div id="kn" kun indeholder knive (du må selv vælge rækkefølgen inde i div'en)

<div id="produktindhold">
  <div id="kn">
... alle knive her
  </div>
  <div id="ac">
... alt tilbehør her
  </div>
  <div id="tx">
... alle tekstiler her
  </div>
  <div id="ut">
... alle redskaber her
  </div>
</div>

inde i den enkelte gruppe, fx
  <div id="kn">
... alle knive her - opdelt evt i en tabel så du let styrer placeringen
  </div>

problemet er dog bare, at alle knive så indgår i samme tabel, og at der for eksempel ikke kan optræde "kniv, redskab, kniv, tekstil" på samme række i tabellen, hvis de skal kunne bruge funktionen efter hensigten?

Jeg er stadig ikke helt med - opdelingen fra claes57 sorterer vel netop på samme måde som du har forsøgt at gøre med dine id'er?

- det skulle jeg også mene, men når engang jeg har implementeret et funktionelt script, vil jeg gerne have muligheden for, frit at opstille mine thumbs i en endnu ikke fastlagt orden. Så a lt i alt, har jeg givet hvert enkelt billede en id, for senere at kunne rykke rundt på dem.

Men som du skriver, så er der vel ikke den store praktiske forskel?

Jeg vil til enhver en tid mene at gruppering er at foretrække - nu som i fremtiden - simpelthen for at holde det overskueligt og undgå unødig kompleksitet. Det eneste der kunne gøre at andet gav mening var hvis billeder kunne ligge i flere kategorier eller at klik skulle kunne vise billeder fra flere kategorier.

Vil du fortsætte ad din sti så benyt class i stedet for id og skift for lethedens skyld til jQuery og benyt show() og hide(); http://api.jquery.com/category/effects/basics/

Jeg er ret sikker på, at måden jeg gerne vil fortsætte, er ved at have en klassifikation, knyttet til det enkelte billede.

Når du siger "for lethedens skyld" så rammer du mig et sted hvor det gør ondt.. Efter at have læst igennem på linket, er jeg nemlig efterladt uden nogen som helst idé om, hvordan jeg skal bruge jQuery?

Igen - jeg er ganske grøn.. Beklager uhjælpeligheden!

<ole>

Uanset hvilket scriptlibrary, du vælger, kan det ikke friholde dig fra at tage beslutninger.

Beslut dig til, hvordan strukturen skal være. Så er det muligt for dig at lave en god løsning. Ellers skyder du dig selv i foden. Det er en helt elementær grundregel i al programmering  =)

/mvh
</bole>

Hej Ole
Jeg er bange for at min begrundelse for ikke at have valgt et scriptlibrary, er at jeg ganske enkelt ikke har kendskab til hverken det ene eller det andet. Jeg håber dog at der findes nogen, som forstår hvor jeg vil hen, med mit visuelle udtryk og dermed kan hjælpe mig på rette vej til valg af scriptlibrary og implementering på siden..

Det er sikkert ikke svært, hvis bare du begynder at tage beslutninger. PC'en er dum som snot, så det er dig, der skal fastlægge strukturer i din kode.

At din chef så åbenbart ikke kan beslutte sig til, hvordan det skal se ud - eller at du ikke har tvunget ham til at beslutte sig - er en helt anden ting. Så må du forklare ham, at hans PC ikke er clairvoyant, men skal have nøjagtig besked

Ok..
Jeg forsøger igen med en grundlæggende forklaring på, hvad jeg ønsker at få min produkt-side til at kunne.

- den skal vise en masse forskellige produkter, i form af små billeder, som er sat op i vilkårlig orden.

- dernæst skal den have en lille menu, bestående af fire forskellige kategorier, som ved klik på hver enkelt kategori, viser billederne i den pågældende kategori, mens de tre andre kategorier skjules - men stadigvæk bevarer deres plads og udfylder samme areal på siden.

Jeg har ikke nogen helt klar idé om hvordan det skal opbygges - så alle bud er kærkommen. Det er dog vigtigt at understrege, at jeg ønsker at placere kategorierne i en blandet orden, og at jeg derfor ikke påregner at samle hver kategori i samme overordnede id eller class.

Grundlæggende består fejlen i at sætte en spejlblank til at kode siden. Men hvis din chef har en vane med at fjerne sin egen og familiens blindtarme, er der vel ikke noget at stille op i den sammenhæng  =)

Du kan bruge disse to funktioner:


- som begge tager et vilkårliogt antal argumenter (id'er). Det er ikke en god eller elegant løsning ... tværtimod! Det er den løsning, der er mulig under de givne forhold

$(function() {
            var activeLinkClass = 'active';
            var transparencyLevel = 0;
            var fadeTime = 400;
            var productLinks = $('#produktmenu a');
            var productImages = $('#produktindhold a img');
            productLinks.click(function(e) {
                e.preventDefault();
                var link = $(this);
                productLinks.removeClass(activeLinkClass);
                var currentClass = link.attr('class');
                var showAll = currentClass === 'all';
                link.addClass(activeLinkClass);
                productImages.each(function(){
                    var img = $(this);
                    img.fadeTo(fadeTime,( showAll || img.hasClass(currentClass) ? 1.0 : transparencyLevel ));
                });
            });
            $('#produktmenu a.all').addClass(activeLinkClass);
        });

Sådan skulle det øjensynligt skrives - med lidt tilføjet fade effekt..