PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
H

Meervoudige button in loop

Door Hans De Ridder op 22-01-2018 22:50
5.326 views
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.

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.
- SanThe -
22-01-2018 23:08
Bij de buttons onClick="onClick()" het id meegeven. => onClick="onClick('click2')"
function onClick() wordt dan => function onClick(buttonID).
En in de function worden alle document.getElementById("click") => document.getElementById(buttonID)
H
Hans De Ridder
22-01-2018 23:26
Bedankt voor je snelle reactie.
Dat had ik ook uitgeprobeerd.
Maar hoe schrijf je dat dan in de jscript?


$('#click'.mouseup(function){
.
.
}
- SanThe -
22-01-2018 23:34
Dat is jquery en daar werk ik nooit mee, dus geen idee.
Thomas van den Heuvel
22-01-2018 23:36 gewijzigd op 22-01-2018 23:36
Alternatieve aanpak: stop de buttons in een container met een uniek id, en geef de buttons elk een class. Zo kun je op elke button-click binnen die container plaatsvindt inzoomen. Eventueel kun je nog meer data-attributen aanmaken om relevante informatie door te geven.

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.
H
Hans De Ridder
22-01-2018 23:51
Met de classes heb ik ook al even gekeken.
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.

Thomas van den Heuvel
23-01-2018 00:08 gewijzigd op 23-01-2018 00:11 
<!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>

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.
H
Hans De Ridder
23-01-2018 00:21 gewijzigd op 23-01-2018 00:35
Bedankt Thomas, ik zal het nog even vlot testen.
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.



[size=xsmall]Toevoeging op 23/01/2018 13:35:16:[/size]

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


Thomas van den Heuvel
23-01-2018 16:20
Wat probeer je precies te bereiken (hoe zou het moeten werken)?

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.
H
Hans De Ridder
23-01-2018 16:53 gewijzigd op 25-01-2018 15:38
Er is maar 1 keer een popup voor een bevestiging Thomas...
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





H
Hans De Ridder
25-01-2018 22:31 gewijzigd op 25-01-2018 23:17
Problemen zijn opgelost door
de enkele functies buiten de jquery te plaatsen.
Iedereen bedankt voor het meedenken.

Reageren

Inloggen om te reageren