Berufsschule - Webseite mit CSS3 und Jquery

Raben_Herz · 11.11.2014

Hallo alle zusammen,

wir sollen für die Berufsschule eine Webseite gestalten, in der CSS3 und Jquery Elemte eingefügt werden sollen, Effekte also.
Es sollen 5 Stück werden und ich habe mich mittlerweile bis auf 4 durchgeschlagen.

Auf der 5. Seite möchte ich gerne eine sortable List machen (so wie hier beschrieben http://jqueryui.com/sortable/)

ich habe nun schon alles ausprobiert in meinem Code, aber leider klappt es nicht...

Ich gehöre eigentlich zu einer Printlerklasse, daher sind meine Fähigkeiten fürs Programmieren leider auch nicht allzu weit her...

Vllt weiß jemand Rat und kann mir sagen wo der Fehler liegt?

Ich wäre so dankbar!

Hier ein paar Screenshots:

Der Quellcode den ich größtenteils aus den obigen Link entnommen habe

Der CSS Bereich den ich eingefügt habe

und die Vorschau, wo eigentlich dann die eigentlich sortable List sein sollte, in Firefox wird sie mir aber nicht als solche angezeigt..

Wie man sieht möchte ich hier eigentlich eine "fiktive" Liste erstellen in der der Kunde sich seine Bücher, die er in Zukunft bestellen/ausleihen möchte, selbst sortieren kann, eine Wunschliste also.. (so richtig Sinn muss es halt nicht machen, muss eben alles nett verpackt sein & wir sollen erklären, was wir so gemacht haben).

Wer eine Idee hat, dem würde ich auch meine Email zukommen lassen, und das Dokument schicken falls nötig.
Wäre wirklich toll wenn mir jemand helfen könnte! Wenn es an diesem letzten Punkt nun scheitert wäre das sehr schade (eigener Ehrgeiz), aber auch andere Webseiten konnten mir da noch nicht weiterhelfen.

Vielen Dank

Myhar · 11.11.2014

Besser als screenshots ist der Code im Textformat geeignet, so dass man sich das Beispiel schnell auf zB jsfiddle zusammenbauen kann.
Wenn du den Code postest, dann verwende dafür auch unbedingt die CODE-Tags hier im Forum.
Stelle sicher, dass sich dein Problem mit dem von dir geposteten Code nachvollziehen lassen kann. Auch kannst du ein Beispiel auf jsfiddle zusammenstellen und dieses dann verlinken.

Raben_Herz · 11.11.2014

Ich hatte eigentlich erwähnt dass ich mich was programmieren angeht nicht auskenne...

Mir war auch klar, dass die Screenshots eher doof sind, und ich weiß auch nicht was jsfiddle ist.. nie von gehört.

Raben_Herz · 11.11.2014

Und diese Seite habe ich mir gerade angeschaut, sry. KA was ich da machen muss. :/

dn3d_fanboy · 11.11.2014

Ich habe zwar auch nicht DIE Ahnung von jQuery, aber fehlt in deinem Markup unten nicht noch das document.ready beim Javascript?

Raben_Herz · 11.11.2014

Hallo und danke für deine Antwort..

ich weiß leider nicht was document.ready ist ... ich könnte es aber mal ausprobieren, wenn ich wüsste was ich einfügen muss.

Im Grunde hab ich nur das <script> rauskopiert von der Webseite jqueryui, so wie dort angegeben war... und da stand eigentlich nichts von document.ready..

dn3d_fanboy · 11.11.2014

Also laut diesem Tutorial (http://www.hongkiat.com/blog/jquery-ui-sortable/) muss das Javascript, dass du am Ende des Markups lädst in den <head>-Bereich.

Raben_Herz · 11.11.2014

Okay, ich habs nun mal ins head, direkt unter die anderen scripts... aber da passiert leider nichts. Ich werde auf der Seite nochmal nachschauen, ob ich was finde, die kannte ich noch nicht. Aber ich befürchte fast nein. :/

dn3d_fanboy · 11.11.2014

Hmm... dann weiß ich so langsam auch nicht weiter. Es wäre wirklich besser, wenn du uns mal den Code gibtst.

Das einzige was mir noch einfällt:
ich hatte bei mir lokal manchmal Probleme, externen JS-Code auszuführen.
Schreib oben, wo du die beiden jQuery-Dateien von einer anderen URL einbindest, mal http: vor den Link. Also statt

HTML:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

dann:

HTML:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Raben_Herz · 11.11.2014

Okay.. aber hey ich bin grad schrittweise das Tutorial durchgegangen, das du mir geschickt hattest und bisher klappt es!
Sie sieht zwar aus wie im Tutorial aber ich versuch dann farblich nochmal alles zu ändern, immerhin ist es aber eine sortierbare Liste!!

Vielen Dank für den Link.

afr0kalypse · 26.11.2014

hier noch etwas lektüre zu jquery: ist sehr einfach erklärt und hilft dir bestimmt weiter:
http://jqfundamentals.com/

offtopic: welchen beruf erlernst du denn, dass du in der berufsschule websites erstellst?
hätte ich damals auch gerne gemacht, aber wir mussten java klöppeln