HTML javascript in eine script.js umwandeln/schreiben

  • Hallo leute,


    ich Arbeite an einer Fan Page mit Spiele Guide und würde gerne meine verwendeten Javascript in einer .js deitei haben wie ich wie ein binde ist nur bewust doch habe ich keine plan wie ich das in der datei screiben muss.


    HTML

  • Ich bin der Meinung, dass Du es unnötig kompliziert gemacht hast: #card1 und #card2 unterscheiden sich nur in dem großen Bild und die Belegung der Pfeiltasten in der Mitte. Es würde ausreichen, diese Struktur nur einmal anzulegen, nur das Bild auszutauschen und das Schalten durch die Pfeiltasten allgemein gültig zu programmieren.

  • 1. bin ich immer noch am Basteln

    2. habe ich nicht mal HTML gelernt oder css und javascript

    3. lerning by doing (viel lesen und testen und dan selber versuchen)


    Nein es ändern sich ja auch die Zahlen und ja würde es kleiner haben wollen da ich das ja zichmal brauche, als beispiel könnt ihr euch gerne mal http://www.sse.de.to/mokuba_kaiba.html anschauen und selbst das sind noch nicht alle Decks die dann auf einer Seite sind.


    Die große ansicht ist ja auch noch nicht fertig da kommen noch ein paar elemente rein die sich dann auch von Karte zu Karte ändern.


    Mir gehts jetzt aber nicht ums kleiner machen nur wie ich den javascript: void(0) mittels javascript lade bzw. ich dass in einer script.js datei schreiben muss.


    Ich würde lieber erst weiter machen wenn ich die langen scripte aus der html raus habe und ich muss wohl so oder so ein .js benutzten da die noch fehlenden Elemente kein platz mehr haben und auch per javascript eingebaut werden abder da für habe ich schon was gefunden wie ich das machen muss kann.

  • Na gut, dann lasse ich mal alle Verbesserungsvorschläge außen vor:

    Das Javascript kannst Du dann in eine externe Datei auslagern. Ich habe jQuery benutzt, Du musst es einbinden, damit das Skript funktioniert.

    Den Links, die eine Großansicht aufschalten, habe ich ein data-Attribut gegeben, das festlegt, welche Karte angezeigt werden soll.

    Bei dem back-Buttton war das nicht nötig, weil damit ja das Overlay und die Kartenansicht unsichtbar gemacht werden sollen.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Sempervivum ()

  • Sry wollte ja nicht merken oder so wegen des tipp, wolte da mit nur sagen das es mir erst eine mal um dem script geht nehme ratschläge immer gerne an.


    Super Danke Funtzt, nur ein kleine Problem ist da noch card_overlay wird nicht geladen oder es greift so nicht mehr die background-color.


    Nicht lachen aber alleine für die variante habe ich locker 14std gebraucht :(

    html seite habe ich ja schon einige gemacht, das man nicht immer gleich den Perfekten weg findet ist klar wenn man das per lerning by doing prinzip macht.

    und nun wieder was dazu gelernt und kann ich mich dann auch mal in die data-toshow funktion ein lesen.

  • Zitat

    nur ein kleine Problem ist da noch card_overlay wird nicht geladen oder es greift so nicht mehr die background-color.

    Hast Du auch die letzte Version von meinem Skript? Ich hatte zwei Mal editiert, weil ich das mit dem Overlay vergessen hatte.

    Wenn es nicht funktioniert, dann poste noch einmal deinen neuen Code.

  • wie es ausschaut hatte ich das aktuelle benutzt.


    farm-decks-display.js

    deck-style .css


    html

  • sehr merkwürdig es ist ja in der css und selbst wenn ich es direkt in die html packe gehts nicht, hab es auch mit andren browser getestet geht auch net.

    Kann es sein das es dran liegt das ich den jquery von google lade oder ist das kein kompertibler ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js


    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Seevan ()

  • achso lesen sollte man schon richtig, habe jetzte verschidene jQuery code getestet kein plan warum es nicht geht obwohl alles richtig ist.

    https://ajax.googleapis.com/aj…uery/1.10.2/jquery.min.js aber am code haperts nicht.


    Wie es meinstens der fall ist hats an dem vorm PC gehapert ;) hatte den div für das overlay vergessen peinlich.

    So ist das wenn man von allen seiten abgelenkt ist hehe, noch mal vielen dank für deine unterstützung.


    Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit ansonsten wurde ja meine frage so zu sagen beantwortet und das auch noch super fix.


    Werde aber sicher im laufe der hp gestallung sicher noch 2-3 fragen haben aber das gehört dann ja wieder in einen neuen post.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Seevan ()

  • Zitat

    Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit

    Da will ich dich beim Wort nehmen: Missbrauchen von Tabellen für Layout-Zwecke ist nicht mehr zeitgemäß. Eine gute Alternative ist das Flexlayout. Um es zu demonstrieren, habe ich mal eine Karte darauf umgestellt:

    Ich habe, soweit es ging, auf absolute Maßangaben verzichtet. Ausnahme: Das .card_case, wo ich die Maße absolut angeben musste, damit sie dem Hintergrundbild entsprechen. Alternativen wäre eher noch schlechter gewesen. Durch relative Maße und selbst anpassende Container wird dir u. U. die Arbeit erleichtert, wenn Du weitere Elemente hinzu fügst. Du schriebst ja, dass das der Fall sein wird.

    Möglicherweise könnte man noch die a-Tag weg rationalisieren und die Clickhandler direkt auf die Grafiken registrieren.

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von Sempervivum ()

  • Ja normalerweise arrangiere ich bilder egal mit oder ohne text auch immer mit div. Da ich das mit mit dem responsive media sreen nicht richtig hinbekommen habe und eine vorlage benutze mit der ich Arbeite müste ich da wieder viel testen. Da die Unterseite mit denn Karten die göße anpassen muss und es komischerweise ohne table nicht greift hab ich es wieder in table gepackt. Ich werde mal heute abend oder morgen mir das genauer anschauen thx.