Suche Progressbar Hilfe

RatexIndex · 09/05/2015, 18:31

Hallo Community.
So wie der Titel schon sagt brauche ich Hilfe bei einer Progressbar.

Diese sollte die Funktionen haben Pot Price auszugeben und
je nach Item stand sich Füllen.

Da ich aber keine Ahnung habe wie sowas umgesetzt wird
Frage ich hier nach.

In der Signatur ist die Seite wo sie Funktionieren soll,
bis jetzt habe ich die Funktionen nicht hinbekommen.

Mit freundlichen Grüßen
RatexIndex

const* · 09/05/2015, 18:54

Das Bild sagt leider wenig aus, ich weiß nicht, um welche Progressbar es sich handeln soll.

LG

Mikesch01 · 09/05/2015, 18:55

Was für eine Art von Hilfe hast du denn erwartet?

Ich kann dir nur empfehlen, mal danach zu googeln: Progressbar Javascript

RatexIndex · 09/05/2015, 18:57

Wie gesagt die Seite ist in meiner Signatur so auch die Progressbar
ist ne .js

Mikesch01 · 09/05/2015, 22:43

Ach komm..da ist sogar eine Readme Datei im Github.

Einfacher gehts eigentlich nicht mehr

RatexIndex · 09/06/2015, 08:01

Quote:

Originally Posted by Mikesch01

Ach komm..da ist sogar eine Readme Datei im Github.

Einfacher gehts eigentlich nicht mehr

Die Progressbar ist drin

Nur wie die Funktionen gehen das ist mein Problem dass sagt mir die Readme auch nicht.

Items: 0 / 20 | Total Pot Price: $0.00
You have deposited 0 items worth $0.00 for a 0% chance.

sven12345 · 09/06/2015, 10:21

Du kannst Theoretisch auch den Html Tag dafür verwenden <progress> :

Dann das ganze schön stylen (so wie du sie halt möchtest):

Mit javascript passt du die Werte dann je nach Anzahl der items an -> deine progressbar hat ein max von 20 und deine value musst du dann mit javascript anpassen:
document.getElementById("progressBar").value= deinwert;

RatexIndex · 09/06/2015, 10:25

Quote:

Originally Posted by sven12345

Du kannst Theoretisch auch den Html Tag dafür verwenden <progress> :

Dann das ganze schön stylen (so wie du sie halt möchtest):

Mit javascript passt du die Werte dann je nach Anzahl der items an -> deine progressbar hat ein max von 20 und deine value musst du dann mit javascript anpassen:
document.getElementById("progressBar").value= deinwert;

Ok Danke für die Info ich versuche mich dann mal daran und melde mich hier erneut

#Edit

Ich habe kein Plan mehr versuche das jetzt schon 2 Tage raffe es aber nicht mit funktionen zu versorgen. Das Teil soll je nach Item anzahl sich füll max ist halt 11 Items momentan sobald jemand ein Items setzt soll es wandern bis Pot voll ist.

Wenn mir jemand Helfen kann Bitte in Skype adden :/

Mikesch01 · 09/06/2015, 14:48

Quote:

Originally Posted by RatexIndex

Nur wie die Funktionen gehen das ist mein Problem dass sagt mir die Readme auch nicht.

Das steht sowas von drinne :P

Code:

$(document).ready(function(){
    $('#sample_goal').goalProgress({
        goalAmount: 150,
        currentAmount: 100,
        textBefore: '$',
        textAfter: ' raised'
    });
});

"goalAmount" ist die Maximalmenge
"currentAmount" ist die aktuelle Menge

Du brauchst nur die Skripte wie in der readme einzufügen und zusätzlich ein Element mit der ID "sample_goal".

Das kannst du natürlich auch umbenennen wenn du weisst, wie es geht.

RatexIndex · 09/06/2015, 16:51

Quote:
Originally Posted by Mikesch01
Das steht sowas von drinne :P
Code:
$(document).ready(function(){
    $('#sample_goal').goalProgress({
        goalAmount: 150,
        currentAmount: 100,
        textBefore: '$',
        textAfter: ' raised'
    });
});
"goalAmount" ist die Maximalmenge
"currentAmount" ist die aktuelle Menge

Du brauchst nur die Skripte wie in der readme einzufügen und zusätzlich ein Element mit der ID "sample_goal".

Das kannst du natürlich auch umbenennen wenn du weisst, wie es geht.

Das weis ich doch wie oder was die Readme sagt, aber es geht um meinen Pot Items die sollen Automatisch dort gelistet werden und je nach dem wie viel drin ist soll die Progressbar es Abspielen ich war mit Sven schon einen Schritt weiter jedoch Dupliziert er dann die Pot Progressbar.

Um es deutlicher zu machen werte gehen jetzt so wie es gehen soll nur Dupliziert sich die Bar wenn man ein Item Reinpackt..

html

Code:

<div id="progress"></div>

js

Code:

				//Set number of pot items
				$('#pot-items').text(potCount);
				
				$('#progress').goalProgress({
				goalAmount: 11,
				currentAmount: potCount,
				textBefore: '',
				textAfter: ' / 11 Items Placed.'
				});

Mikesch01 · 09/06/2015, 17:40

Ach jetzt glaub ich verstehe ich, was dein Problem ist und wie des möchtest:

Code:

$(document).ready(function(){
    var $amount = $('#sample_goal').data('amount');
    var $goalAmount = 11;
    var $potPrice = 1.5;
    var $totalPotPrice = $amount * $potPrice;
    var $chance = 50.0;
    var $worth = 123;

    $('#sample_goal').goalProgress({
        goalAmount: $goalAmount,
        currentAmount: $amount,
        textBefore: 'Items: ',
        textAfter: ' / ' + $goalAmount + ' | Total Pot Price: $' + $totalPotPrice + '<br/>
You have deposited ' + $amount + ' items worth $' + $worth + ' for a ' + $chance + '% chance. '
    });
});

Und HTML:

PHP Code:


			
<div id="sample_goal" data-amount="1"></div>

Oder dynamisch mittels PHP ermiteln:

PHP Code:


			
<div id="sample_goal" data-amount="<?php echo $amount; ?>"></div>

Den Rest musst du selber anpassen. Hoffe das hilft dir weiter.

RatexIndex · 09/06/2015, 17:59

Quote:
Originally Posted by Mikesch01
Ach jetzt glaub ich verstehe ich, was dein Problem ist und wie des möchtest:
Code:
$(document).ready(function(){
    var $amount = $('#sample_goal').data('amount');
    var $goalAmount = 11;
    var $potPrice = 1.5;
    var $totalPotPrice = $amount * $potPrice;
    var $chance = 50.0;
    var $worth = 123;

    $('#sample_goal').goalProgress({
        goalAmount: $goalAmount,
        currentAmount: $amount,
        textBefore: 'Items: ',
        textAfter: ' / ' + $goalAmount + ' | Total Pot Price: $' + $totalPotPrice + '<br/>
You have deposited ' + $amount + ' items worth $' + $worth + ' for a ' + $chance + '% chance. '
    });
});
Und HTML:

PHP Code:

<div id="sample_goal" data-amount="1"></div>

Oder dynamisch mittels PHP ermiteln:

PHP Code:

<div id="sample_goal" data-amount="<?php echo $amount; ?>"></div>

Den Rest musst du selber anpassen. Hoffe das hilft dir weiter.

Ich mache jetzt erst mal ne Pause *Lach*
Schaue später mir das weiter an Danke dir Melde mich später mit #Edit

#Edit

Ich habe jetzt eigentlich das soweit an funktionen drin was ich haben will das eigentliche Problem ist nur das sich die Bar verdoppelt sobald mehrere items in den Pot geworfen werden. Also statt eine ist nach Einsatz eine zweite da.

#Closerequest Danke Sven u. Mikesch01

snow · 09/07/2015, 13:03

#closed (on request)