Meervoudige button in loop
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.
Iemand die me op weg kan helpen?
Voorbeeld: Eerste button werkt.
https://www.pctraverse.nl/button220118.php
De code staat in de bron.
Er staat PHP omdat er waarschijnlijk wel wat PHP bij komt.
function onClick() wordt dan => function onClick(buttonID).
En in de function worden alle document.getElementById("click") => document.getElementById(buttonID)
Dat had ik ook uitgeprobeerd.
Maar hoe schrijf je dat dan in de jscript?
Code (php)
1
2
3
4
2
3
4
$('#click'.mouseup(function){
.
.
}
.
.
}
En sinds je gebruik maakt van jQuery heb je ook geen onclick-attribuut nodig. Al deze clicks en hun afhandeling kun je verplaatsen naar JavaScript/jQuery zelf zodat (ook) al het gedrag op dezelfde plek kan worden gedefinieerd.
Op deze manier trek je alle JavaScript-manipulatie verder terug uit de HTML, wat e.e.a. leesbaarder maakt.
Gewijzigd op 22/01/2018 23:36:56 door Thomas van den Heuvel
Maar de button zit in een loop (PHP foreach)
Er kunnen wel 100 buttons zijn per pagina.
Ik zoek hoe ik via mouseup en down de id kan achterhalen van de betreffende button.
En het doorgeven van die naam naar andere functies lukt ook nog niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buttons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="buttonContainer">
<button type="button" class="button" data-info="1">een</button>
<button type="button" class="button" data-info="2">twee</button>
<button type="button" class="button" data-info="3">drie</button>
<button type="button" class="button" data-info="4">vier</button>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#buttonContainer .button').click(function(e) {
e.preventDefault(); // prevent default button clicking behavior
var info = $(this).data('info');
alert('clicked '+info);
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>buttons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="buttonContainer">
<button type="button" class="button" data-info="1">een</button>
<button type="button" class="button" data-info="2">twee</button>
<button type="button" class="button" data-info="3">drie</button>
<button type="button" class="button" data-info="4">vier</button>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#buttonContainer .button').click(function(e) {
e.preventDefault(); // prevent default button clicking behavior
var info = $(this).data('info');
alert('clicked '+info);
});
});
//]]>
</script>
</body>
</html>
Die timeout dat je een knop in zou moeten houden is wellicht ook een beetje overdreven? Te meer als je daarna nogmaals om een bevestiging vraagt en/of het heel makkelijk is om dingen aan/uit te zetten. Het zou natuurlijk helemaal leuk zijn als de stand van de knop aangeeft of je iets volgt of niet (rood/groen of wat dan ook). Je zou dus iets met afbeeldingen kunnen doen ofzo. Via jQuery kun je dan een "on" en "off" stijlklasse toevoegen, zodat je echt een soort van paneel krijgt met knoppen in een aan/uit stand.
EDIT: merk ook op dat in het bovenstaande voorbeeld de HTML en JavaScript volledig van elkaar gescheiden zijn. De JavaScript zou je dus ook naar een apart bestand kunnen verplaatsen wat als bijkomend voordeel heeft dat het gecached kan worden.
Gewijzigd op 23/01/2018 00:11:18 door Thomas van den Heuvel
Die bevestiging is er ingekomen om een lid te vragen of hij die persoon wil volgen.
Dat is overigens alleen de eerste keer. daarna verschijnt hij niet meer.
De andere timeouts heb ik nodig om een keuze te bevestigen en uit te voeren.
In mijn script kun je ook al eenvoudig afbeeldingen plaatsen bij de buttons.
Ik gebruik de title als verwijzing om bij 2 seconden door te verwijzen naar juiste pagina.
Heb geen verstand van jquery.
Ik snap een beetje wat men beoogt. Maar moet het hebben van bestaande oplossingen.
Toevoeging op 23/01/2018 13:35:16:
Ik heb even een prtScr gemaakt.
Denk dat dit het wat duidelijker maakt.
Elk geregistreerd lid heeft een eigen blokje.
De gegevens per lid (id, linkjes, etc.) zijn bekend.
Om te voorkomen dat er bij elke link een button geplaatst moet worden,
heb ik bedacht om een meervoudige button te maken.
De eerste button bevat de linkjes naar de social media (facebook, instagram, twitter, reactie-email, linkedin, website).
Dan volgen twee gewone buttons (nieuwsbrief, googlemaps).
De laatste is weer een meervoudige button, en bevat de afspeellijsten van de verschillende categorieen youtube muziekfilmpjes (Persoonlijk, Nederlands, Engels, Duits, Overig, Country, Grap).
Dit geldt per lid. Het is het openbare gedeelte, waar iedereen kan klikken. Alleen de reactie-email is geblokkeerd voor niet-leden.
De blokken zijn opgenomen in een foreach loop met PHP.
Zou ik alle linkjes en verwijzingen opnemen in losse buttons, dan is er geen probleem.
Omdat ik dan ook kan werken met de ID van het lid om de scheiding tussen de blokken aan te geven.
Die meervoudige buttons zijn probleem BINNEN een blok, maar ook tussen de blokken onderling.
https://www.pctraverse.nl/view_buttons.jpg
Dit is de versie van de werkende button met linkjes en wisselende afbeeldingen.
https://www.pctraverse.nl/multi-color-button.html
Gewijzigd op 23/01/2018 00:35:25 door Hans De Ridder
Iets wat mogelijk wel een dingetje is: een button inhouden om iets te laten gebeuren is geen standaard navigatie (voor zover ik dat ken), is het niet beter om de "gecombineerde" buttons uit te schrijven, althans, de buttons die relevant zijn (als iemand geen facebook heeft, laat button achterwege), en op een of andere manier visueel te maken waarvoor je je al hebt aangemeld?
En heb nog even zitten nadenken over die bevestigingen via popups, daarmee voelt het toch een beetje aan als een jaren 90 website, dus qua stijlpunten is dat niet iets waar je veel mee scoort.
Dat is bij de eerste keer dat je op de knop drukt.
Ik heb dat ingevoerd om te voorkomen dat leden zomaar vrienden toevoegt.
Bij de overige linkjes gebeurt dat niet.
Knopjes kleuren grijs als een lid een of meerdere social media niet heeft ingevoerd.
Ik ben dank zij jou wel een stuk verder al.
Zodat de buttons wel afzonderlijk in een blokje werken.
Zoek nog wel een vertraging zoals bij de oude knop.
En ik moet nog een link zien te vinden tussen blokken onderling.
De ID van het lid in het blok is bekend.
Dit zijn mijn voortgangsbuttons.
De eerste en de laatste button hebben bij meerdere keren klikken een andere afbeelding en een andere link. Ze zijn onafhankelijk van elkaar.
De data-info heb ik gebruikt om de string/array in te zetten.
Nu vooral kijken of op grond van ID lid, het ene blok onafhankelijk
kan werken tov het andere blok.
Ik kan als <div id="buttonContainer"> natuurlijk de ID van het lid gebruiken.
Dan krijgt elk blok een ander ID als buttonContainer.
Blijft er wel een probleem met de class van de button.
Want die wijzigt niet.
Maar die kan ik meenemen in de telling van de foreach.
Bij elk blok komen er 5 bij.
Dat gaat lukken.
Nu de delay nog.
Delay staat er nu ook in.
En er kan maar 1 pagina tegelijk open zijn.
Zit nog met 1 dingetje.
Je moet nu telkens 'dubbelclick' doen op een button.
Dan pas wordt button actief.
Dat komt omdat bij eerste keer, 'but' nog op 0 staat.
En dat is niks.
Code staat in de bron.
De link is gewijzigd naar de nieuwste versie.
Misschien dat iemand daar nog een oplossing voor heeft?
https://www.pctraverse.nl/buttontest2.html
Gewijzigd op 25/01/2018 15:38:49 door Hans De Ridder
de enkele functies buiten de jquery te plaatsen.
Iedereen bedankt voor het meedenken.
Gewijzigd op 25/01/2018 23:17:02 door Hans De Ridder
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.
Code (php)
1
2
3
4
2
3
4
$("[id^=buttonContainer]").on("click", function () {
var id = this.id;
alert(id);
});
var id = this.id;
alert(id);
});
Als je dus zoiets hebt, gebruik een klasse:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="buttonContainer">
<button type="button" class="button" data-info="1">een</button>
<button type="button" class="button" data-info="2">twee</button>
<button type="button" class="button" data-info="3">drie</button>
<button type="button" class="button" data-info="4">vier</button>
</div>
<div class="buttonContainer">
<button type="button" class="button" data-info="5">vijf</button>
<button type="button" class="button" data-info="6">zes</button>
<button type="button" class="button" data-info="7">zeven</button>
<button type="button" class="button" data-info="8">acht</button>
</div>
etc.
<button type="button" class="button" data-info="1">een</button>
<button type="button" class="button" data-info="2">twee</button>
<button type="button" class="button" data-info="3">drie</button>
<button type="button" class="button" data-info="4">vier</button>
</div>
<div class="buttonContainer">
<button type="button" class="button" data-info="5">vijf</button>
<button type="button" class="button" data-info="6">zes</button>
<button type="button" class="button" data-info="7">zeven</button>
<button type="button" class="button" data-info="8">acht</button>
</div>
etc.
En koppel je buttons met:
Code (php)
1
2
3
2
3
$('.buttonContainer .button').click(function(e) {
// ...
}
// ...
}
Let op het verschil: met een # (hekje) geef je een id aan, met een . (punt) een class.
Had al tijdje gezocht.
Zal dit Woensdag direct testen.
Toevoeging op 31/01/2018 18:29:24:
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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;
}
.
.
.
{
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:
https://www.pctraverse.nl/thomas.html
Gewijzigd op 31/01/2018 18:30:07 door Hans De Ridder
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.
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.
En hier vervolgens op kunnen acteren in jQuery met behulp van een toggle (het schakelen tussen de actieve en inactieve stand).
met functies als .hasClass(), .addClass() en .removeClass().
Gewijzigd op 01/02/2018 19:28:43 door Thomas van den Heuvel
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
Toevoeging op 02/02/2018 12:26:48:
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.
https://www.pctraverse.nl/thomas.html
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.
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....
Toevoeging op 02/02/2018 18:46:36:
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.
Toevoeging op 03/02/2018 01:12:47:
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.
https://www.pctraverse.nl/thomas.html
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.
https://www.pctraverse.nl/thomas.php