Suche Progressbar Hilfe

09/05/2015 18:31 RatexIndex#1
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.

[Only registered and activated users can see links. Click Here To Register...]

Mit freundlichen Grüßen
RatexIndex
09/05/2015 18:54 const*#2
Das Bild sagt leider wenig aus, ich weiß nicht, um welche Progressbar es sich handeln soll.

LG
09/05/2015 18:55 Mikesch01#3
Was für eine Art von Hilfe hast du denn erwartet?

Ich kann dir nur empfehlen, mal danach zu googeln: Progressbar Javascript
09/05/2015 18:57 RatexIndex#4
Wie gesagt die Seite ist in meiner Signatur so auch die Progressbar
ist ne .js

[Only registered and activated users can see links. Click Here To Register...]
09/05/2015 22:43 Mikesch01#5
Ach komm..da ist sogar eine Readme Datei im Github.

[Only registered and activated users can see links. Click Here To Register...]

Einfacher gehts eigentlich nicht mehr ;)
09/06/2015 08:01 RatexIndex#6
Quote:
Originally Posted by Mikesch01 View Post
Ach komm..da ist sogar eine Readme Datei im Github.

[Only registered and activated users can see links. Click Here To Register...]

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.
09/06/2015 10:21 sven12345#7
Du kannst Theoretisch auch den Html Tag dafür verwenden <progress> :
[Only registered and activated users can see links. Click Here To Register...]
Dann das ganze schön stylen (so wie du sie halt möchtest):
[Only registered and activated users can see links. Click Here To Register...]

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;
09/06/2015 10:25 RatexIndex#8
Quote:
Originally Posted by sven12345 View Post
Du kannst Theoretisch auch den Html Tag dafür verwenden <progress> :
[Only registered and activated users can see links. Click Here To Register...]
Dann das ganze schön stylen (so wie du sie halt möchtest):
[Only registered and activated users can see links. Click Here To Register...]

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 :/
09/06/2015 14:48 Mikesch01#9
Quote:
Originally Posted by RatexIndex View Post
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.
09/06/2015 16:51 RatexIndex#10
Quote:
Originally Posted by Mikesch01 View Post
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.'
				});
[Only registered and activated users can see links. Click Here To Register...]
09/06/2015 17:40 Mikesch01#11
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.
09/06/2015 17:59 RatexIndex#12
Quote:
Originally Posted by Mikesch01 View Post
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
09/07/2015 13:03 snow#13
#closed (on request)