Ik gebruik een meervoudige button.
Telkens klikken naar volgende keuze,
en 2 seconden ingedrukt houden om keuze uit te voeren.
Dat werkt voor 1 button, zowel met tekst als met wisseling in buttonafbeelding.
Nu zit die button in een loop. Dus veel meer buttons.
En ik krijg de functie van die button niet uitgewerkt per afzonderlijke button.
Ik krijg bijv. de ID's niet naar de jscript toe.
Nu kom ik in de foreach loop toch nog wat tegen.
Bij het script van Thomas heb ik maar 1 Div id.
In de loop heb ik telkens een andere Div id.
Ik kan wel de Div id's achterhalen met onderstaand script.
Maar weet niet hoe ik het in moet voegen in het script van Thomas.
$("[id^=buttonContainer]").on("click", function () {
var id = this.id;
alert(id);
});
Er is maar één div die het gebied afbakent waarbinnen buttons bepaalde functionaliteit hebben. Je hebt dus ook maar één div nodig in principe. Als het echter een herhalende groep is dan kun je dus ook geen id gebruiken, maar kun je beter een class gebruiken, die hebben namelijk geen restrictie qua uniek zijn.
Bedankt voor je snelle reactie Thomas.
Had al tijdje gezocht.
Zal dit Woensdag direct testen.
[size=xsmall]Toevoeging op 31/01/2018 18:29:24:[/size]
Het werkt onafhankelijk van elkaar nu.
Ik heb alleen een probleem om een teller te resetten.
Dat moet gebeuren bij de switch naar een andere button met dezelfde class '.button'.
butA is de voorgaande value, but is de nieuwe value.
Met 'if (but & 1)' bepaal ik of het een even of oneven getal betreft.
Maar het rolt niet goed.
Het betreft de 1e en de 5e button (meervoudig) in elke groep.
if (butA != but)
{
if (but & 1)
{
i=1;
p=0;
}
else
{
i = 0;
p =1;
}
//but = 1;
imag =0;
butA = 1;
$('.button').css("background-image", "url(vrienden1.png)");
}
imag = but-1;
gegevens = info.split(",");
if (but & 1)
{
if (i==7)
{
i=1;
}
.
.
.
De voorlopige plek waar je het volledige kunt bekijken:
Wat probeer je hier uberhaupt te doen? Je hoeft buttons niet te nummeren? Je kunt data-tags toevoegen aan buttons en die informatie kun je hier weer uittrekken via $(this) (de geklikte button) zoals eerder beschreven. Dit zorgt er juist voor dat je buttons verder niet op een specifieke manier hoeft de identificeren, wat de code een stuk schoner maakt en dat je geen constructies zoals de bovenstaande nodig hebt.
En bij het uitdraaien van de button kun je deze gewoon een class meegeven waarin je de achtergrondafbeelding regelt? Dit kun je dus volledig verplaatsen naar CSS, hier hoeft geen letter JavaScript aan te pas te komen?
Je kunt ook verschillende data-tags aanmaken zodat je niet alles hoeft te serialiseren en te splitten...
Probeer dit alles eens zonder / met zo min mogelijk JavaScript en dit alles wordt een stuk eenvoudiger denk ik.
Die buttons nummers heb ik even toegevoegd om te testen.
Het werkt nu ook wel zoals ik het hebben wil.
Zit nog 1 klein dingetje in.
Maar weet waar dat probleem zit.
Gaat om de tellers die bijhouden in welke stand de multi-drukknop staat.
Bij elke switch naar een andere multi-drukknop moet die stand gereset worden.
En dat was moeilijk. Ook met de switch naar een andere buttonafbeelding.
Je hebt helemaal gelijk als het om jquery en javascript gaat.
Maar mijn kennis van jquery is zeer beperkt.
Dus beperk me tot nu toe tot wat ik met zoeken vindt of krijg.
Zou me wel helpen, als ik hiermee klaar ben, om het te zien in jquery.
Het werkt wel.
Alleen wanneer er alleen kort wordt gedrukt naar de volgende stand,
zonder dat er een keuze is gemaakt.
Als ik dan op een andere multi-button click, dan wordt die waarde overgenomen.
Ik heb nog niet kunnen ontdekken hoe ik dat kan blokkeren.
Dit is het gewijzigde scriptje.
Wel een beetje rommeltje door allerlei probeersels.
Maar het werkt zoals ik omschreef. https://www.pctraverse.nl/thomas.html
[size=xsmall]Toevoeging op 02/02/2018 12:26:48:[/size]
Hij werkt nu functioneel zoals ik het hebben wil.
Alleen bij de reset moet ik nog de background images splitsen in twee.
De oneven buttons in groep (de eerste multi) moeten een ander startplaatje hebben als de even.(tweede muliti)
Dat zelfde geldt voor de titels.
Dus nog even puzzelen.
In dat voorbeeld zitten twee rijen met buttons.
Als ik op de eerste (multi)button van de tweede rij klik, dan wordt de eerste (multi)button van de eerste rij ook gereset, dat lijkt mij ook niet de bedoeling?
Nog een ander ding, op welk moment wordt de stand van de buttons opgeslagen? In principe zou je dit met AJAX-calls kunnen doen. In dat geval zend je op de achtergrond informatie van de knopstanden door zonder weg te navigeren van de pagina, alle wijzigingen zijn dan direct doorgevoerd.
En wat ik nog steeds verwarrend/onduidelijk vind is dat je niet echt kunt zien welke opties in de multi-button nu actief zijn?
En die YouTube knop in de laatste kolom van een rij, hoe werkt die precies? Daar kun je maar één optie kiezen, in plaats van meerdere? Wat als iemand nu geïnteresseerd is in meerdere YouTube categorieën?
Verder hebben -nogmaals- sommige knoppen echt apart, en m.i. niet standaard, gedrag. Normaal klik je op een knop, en dan gebeurt er iets. Ik snap dat je binnen beperkte ruimte iemand wil laten kiezen uit een heleboel opties, maar als je dat nu even loslaat en puur kijkt aan wat voor data je hebt, en welke keuze(s) men hier in kan maken. Maar ook hoe dit eventueel makkelijk te veranderen valt (denk aan de YouTube knop, hoe makkelijk is het om dit om te zetten van 1 keuze naar eventueel meerdere in deze categorie)?
Als je puur een rijtje zou maken van opties per gebruiker, eventueel afhankelijk van de platformen waarop zij zich bewegen, hoe zou dit er dan uitzien? En als je dat een beetje hebt vastgelegd, denk dan nog eens na hoe je dit visueel organiseert. Want ik krijg nu de indruk dat niet precies vaststaat welke keuze(combinatie)s er gemaakt kunnen worden of in ieder geval dat de nadruk nogal ligt op wat een knop zou moeten kunnen. Specificeer dat dan eerst eens, wat voor typen knoppen heb je?
- een normale knop (aan/uit)
- een knop waarbij je kunt schakelen tussen opties waarbij je er maximaal één kiest?
- een knop waarbij je kunt schakelen tussen opties waarbij meerdere keuzes gemaakt kunnen worden?
Ik zou dus beginnen met een soort van specificatie (waarbij je nogmaals na zou moeten denken of exotische knoppen een goed idee zijn) en daarvan uit werken.
Een alternatief is bijvoorbeeld: Je hebt één categorie knop voor een rubriek, afhankelijk daarvan laat je andere knoppen zien die alle in- of uitgeschakeld kunnen zijn. Daarmee los je misschien voor een deel het probleem op? Dus je hebt bijvoorbeeld een categorie-knop in de stand "social media", in dat geval toon je social media buttons. Klik je nogmaals op de categorie-knop schakelt deze naar de stand "youtube", en toon je die bijbehorende knoppen, et cetera. In deze opzet hoef je dus (ook) niet alle knoppen in 1x op je scherm te proppen, mogelijk in een (zeer) beperkte ruimte.
Als het goed is, staan bij de start alle multi-buttons op neutraal met de titel waar ze voor dienen.
En met de juiste logo's (moet ik nog werken maken)
Het is inderdaad zo dat bij het wisselen naar een andere multibutton
alle multibuttons worden terug gezet naar de neutrale stand.
Dat is ook de bedoeling.
Links komen de opties voor social media.
Rechts de keuze voor categorie youtubes..
Vanaf de neutrale stand (afbeelding youtube op button) verschijnt
na elke click een andere categorie van youtube.
Bij de multibutton links (social media) verandert het logo en de titel.
Zowel rechts als links moet je een button 1 sec. ingedrukt houden
om je keuze te bevestigen.
Dit werkt volgens mij nu goed.
Ik moet nu alleen in de neutrale stand de logo weer terug van alle social media buttons.
En de titel moet weer terug naar 'social media'.
Bij de youtube moet ook de logo weer terug, en de titel.
Bovendien moet bij youtube ook de innerHTML weer weg.
De scheiding tussen links en rechts heb ik telkens gemaakt
door te bepalen of het een even- of een oneven button was.
Omdat het allemaal in een foreach lop komt, kunnen er tot
max. 100 leden (groepen) per pagina worden opgenomen in fijen van 5.
Er wordt met pagination gewerkt.
Afhankelijk van aantal leden kan ik kiezen tussen 1 en 100 leden per pagina.
En meer of minder pagina's.
Bedankt Thoma voor het meedenken steeds....
[size=xsmall]Toevoeging op 02/02/2018 18:46:36:[/size]
De standen van de multibuttons social media en youtube worden bijgehouden bij het clicken.
Er vanuitgaande dat er niet meer dan 1 button tegelijk wordt gebruikt, heb ik dus 2 tellers.
Een voor links en een voor rechts.
Er wordt bij elke click tevens gekeken of er een wisseling van button is geweest.
Dan worden alle standen gereset. Dat was ook nodig want als een stand zou blijven staan
zonder dat er is geclickt (1 sec.), dan worden bij 1 sec. clicken, op willekeurige multibutton
die stand overgenomen.
[size=xsmall]Toevoeging op 03/02/2018 01:12:47:[/size]
Ik heb alles nu zoals ik het wil.
Ook wat betreft titles en logo's.
Nu nog wat ordenen.
En wat css zijzigen.
En wat proberen met jquery om het wat compacter te maken.
Heb het nu in een loop getest (100 groepen).
Het werkt zoals ik het bedoelde.
Niet alle youtubes zijn bezet in een categorie.
Daar zie je dus nog niks.
Nu veel met jquery gedaan.
