Javascript - Wenn-Dann-Funktion bei Prozenten & Schieberegler Bewertung

D

Dan3er

Grünschnabel
Hallo liebes tutorials.de Team und Mitglieder,

seit einiger Zeit betreibe ich eine (noch) kleine Internet-Community bzgl. Games, Konsolen etc.

Dieses Internetportal ist mit dem CMS/ OS Joomla und als Forum WoltLab WBB 4 aufgebaut.

Ich kenne mich recht gut mit Templates, Design und einigermaßen HTML aus.
Leider schwinden meine Kräfte bei den JavaScript-Funktionen.

Auf der Startseite meines Internetportals erscheinen rechts (Box) Top 5 (meist gesehen).
Darunter versteckt sich ein Joomla Modul (k2) mit denen ich diese Top 5 einstellen und automatisch aktualisieren lassen kann.

Die Zahl hinter den einzelnen "Top Games" sind Prozente, welche die Plattform-Redakteure selber vergeben können.
Wie man sieht, sind alle Zahlen mit einem grünen Hintergrund hinterlegt.

Nun habe ich mich ein wenig schlau gemacht und erfahren, dass es eine Wenn-Dann-Funktion von JavaScript geben soll.

Es soll am Ende so sein, dass der Hintergrund bei:
0-24 % rot,
25-49% orange,
50-69% gelb,
70-79% gelb-grün,
80-100% grün

sein soll.

Das zweite Anliegen ist ein JavaScript - Schieberegler für ein Bewertungssystem.
Dieser Schieberegler sollte mit dem Joomla OS funktionieren und den Gästen eine Möglichkeit sein, die Beiträge selber so zu bewerten, dass die Games eine Art Leser Meinung erhalten.

Als Beispielt:

Wir bewerten FIFA 14 mit 67 %, die Leser sind anderer Meinung und bewerten das Game mit nur 60%.

Ich hoffe ich habe das alles soweit beschrieben, dass Ihr mir ein wenig weiter helfen könnt.

Vorab erst einmal vielen Dank für Eure Hilfe und mit freundlichen Grüßen

Philipp von gamersboardsDE



Die Homepage findet ihr hier!
 
Hi,

da bereits jQuery auf deiner Seite eingebunden ist, sollte folgendes Grundgerüst reichen, das Einfärben zu ermöglichen:
Code: 
$(function(){
$('.moduleItemExtraFieldsValue').each(function(index, value){
  var $this = $(this),
      $par = $this.closest('.moduleItemExtraFields');

  if(parseInt($(value).html())<75){
    $par.css('background', '#f00');
  }else{
    $par.css('background', '#468847');
  }
});
});
Die Anpassungen solltest du selbst hinbekommen.

Schieberegler gibt es z.B. in der jQueryUI.

Ciao
Quaese
 
Hallo,
da du eine Integration in Joomla wünscht ist es leider mit einer reinen JS Lösung nicht getan.
Du musst deinen Nutzern ja eine Einbindung in das Joomla Backend anbieten und dann müssen die eingestellten Werte ja auch irgendwie in der Datenbank abgespeichert werden.

Je nachdem was du willst reicht eventuell die Entwicklung eines Moduls.
Aber mach dich darauf gefasst das dies kein Kinderspiel wird.

Da Joomla ja inzwischen Bootstrap unterstütz, es gibt schon fertige Slider für Bootstrap.
Aber eben auch nur mit der Reinen Frontendfunktion.

http://api.joomla.org/

Grüße
 
Vielen Dank Quaese,

habe den Script von dir noch überarbeitet und es funktioniert alles.


Jan-Frederik Stieler,

ne die User sollen doch nicht ins Backend, da hätten sie ja alle Berechtigungen.
Es gibt ein vorgefertigtes Bewertungssystem, welches automatisch mit geliefert wird.

Ist es möglich dieses mit JavaScript zu bearbeitet?
 
Hi,
bei entsprechend gesetzten Rechten hätten Sie diese nicht.
Aber auch bei einem Frontendediting, benötigst du eine Datenbankanbindung. Oder wie willst du die eingestellten Werte speichern?

Wenn es nur darum geht das Aussehen bzw. die Usability zu verändern dann geht dies natürlich auch ohne das du eine eigene Erweiterung schreibst. Ich hatte nicht verstanden gehabt das es schon ein Bewertungssystem gibt.

Ich müsste mir erstmal dein Bewertungssystem anschauen. Aber Quese hat dazu ja schonwas geschrieben gehabt.

Grüße
 
Hallo Jan-Frederik Stieler,

also das Bewertungssystem habe ich mal eben auf der Seite freigeschaltet:
Sternenbewertung unter Überschrift GTA V

Hier habe ich ein Bild erstellt wie es eigentlich aussehen sollte:
Bild der Bewertung

Eine Datenbank ist ja vorhanden, das Bewertungssystem an sich ja auch. Leider kann man bei diesem Bewertungssystem nicht einstellen, ob Gäste, registrierte oder bestimmte Benutzergruppen abstimmen dürfen.

Die Abstimmung an sich soll eigentlich mit einem Kommentar verbunden sein.

Ich denke aber nicht das, dass alles so funktioniert.

Aber vielleicht habt ihr ja noch Ideen.
 
Hi,
dein Board spielt bei mir auf dem System einfach so einen Film mit Namen „nLZGoXO3NAs“ ab.
Bzw. eine Datei mit diesem Namen wird bei automatisch in Quicktime geöffnet.

Wenn ich das nun richtig sehe werden die Sterne in Prozentzahlen umgerechnet.
Was man hier machen könnte wäre einen Slider welcher sich in 5 Schritten verstellen lässt. Nicht frei über die ganze Breite des Sliders.

Welche Joomla Version setzt du den ein?
Bei Version 3 ist ja Bootstrap mit an Board: http://bootstrapformhelpers.com/slider/#jquery-plugins

Grüße
 
Meine Erfahrung bei solchen Plugins:
Lieber ganz selber machen als 100Stunden rumdoktoren bis man es endlich so umgebogen hat wie man es will.

-

Und deine Seite will da ein Youtube Video "komisch" einbinden:
HTML: 
<object style="display: block; margin-left: auto; margin-right: auto;" width="550" height="350" data="http://www.youtube.com/embed/nLZGoXO3NAs" type="application/x-mplayer2"><param name="url" value="http://www.youtube.com/embed/nLZGoXO3NAs"><param name="frameborder" value="0"><param name="url" value="http://www.youtube.com/embed/nLZGoXO3NAs"></object>

Bei mir will er dafür auf jeden Fall den Windows Media Player öffnen..

Gibt es einen Grund wieso nicht den offiziellen Einbettungscode von Youtube verwendest? :
HTML: 
<iframe width="560" height="315" src="//www.youtube.com/embed/nLZGoXO3NAs" frameborder="0" allowfullscreen></iframe>
 
Hi,
naja also die Bootstrapsachen, auch die von anderen sind eigentlich recht einfach hinzubiegen. Ist ja eigentlich nur etwas CSS.

Siehe:

Mehr Arbeit macht das JS und das muss er eh selbst schreiben, da ja das Wertungstool die Infos irgendwie abgreifen muss und das muss man erstmal einbinden bzw. sich darauf einstellen wie man das JS schreibt.
Da können wir Dan3er auch erstmal nicht helfen denn den Teil sehen wir ja nicht.

Ein weiterer Slider für Bootstrap:
http://www.eyecon.ro/bootstrap-slider/

Ich habe auf Basis dieses dir mal eine Version erstellt. ist noch nicht perfekt sollte aber funktionieren.
Vielleicht versteht ja jemand warum sich die Breite des Sliders nicht ändern lässt.

Grüße
 

Anhänge

  • slider.zip
    9,9 KB · Aufrufe: 9
Hi Leute,

ich habe jetzt die Java-Funktion (Wenn-Dann-Funktion bei Prozenten) geschafft.

Mein Problem ist jetzt noch immer die Kommentar und JavaSchieberegler funktion für Kommentare (Plugin - K2)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück