PoolbillardDBU Regelwerk in HTML

Alles rund um Poolbillard

Moderator: Moderatoren

Benutzeravatar
Hibernate
Pomeranzenkiller
Pomeranzenkiller
Beiträge: 70
Registriert: 04.02.10 00:00
Reputation: 8
Spielqueue: Custom
Leder: Kamui Black SS
Breaker: der Powerbreak reicht
Jumper: Jumper wozu ? 4 Banden sollten doch wohl reichen
Kontaktdaten:

DBU Regelwerk in HTML

Beitragvon Hibernate » 09.11.17 14:13

Vor etwa einem Jahr habe ich unter folgendem Post Link das Regelwerk der DBU in der HTML Version veröffentlicht.
Hier nochmal der Direktlink DBU Regelwerk HTML Version
Die Seite wurde jetzt noch mal überarbeitet. Diverse Fehler im Code wurden entfernt und das Design farblich etwas aufgewertet. Von meiner Seite ist das Projekt daher so gut wie abgeschlossen, bis auf eine Ausnahme.

Die CSS Popups werden über Hyperlinks geöffnet. Das hat zur Folge das die Seite im Hintergrund on Top springt. Auf einem Desktop mit entsprechender Auflösung ist das noch in Ordnung. Auf einem Smartphone eher lästig, da ggf. wieder zur ursprünglichen Stelle zurück gescrollt werden muss. Für dieses Problem hatte ich vor etwa 5 Jahren mal ne Lösung gefunden, leider hab ich vergessen wie ich das damals realisiert habe, da ich nur Hobbycoder bin.

Ich weiss das hier im Forum einige sind die das beruflich machen. Eventuell kann mir jemand einen Tip oder gar eine fertige Lösung nennen. Einstweilen hab ich das auf der Seite Materialnorm mit simplen HTML Ankern gelöst. Eine Lösung mit CSS oder Javascript wäre schöner.

Wer möchte darf das ganze auch gerne erweitern, zum Beispiel mit einem responsiven Menü.
Da alles auf einzelnen Seiten zur Verfügung gestellt wird sollte ein möglicher Umbau schnell erledigt sein.



Benutzeravatar
Sharivari
Pool-Amateur
Pool-Amateur
Beiträge: 228
Registriert: 07.12.13 02:51
Reputation: 46
Facebook Benutzername: andreschickling
Name: André
Spielqueue: Lucasi Hybrid
Leder: Kamui Black Medium
Wohnort: Ingolstadt
Kontaktdaten:

Re: DBU Regelwerk in HTML

Beitragvon Sharivari » 11.11.17 13:46

Nicht böse gemeint, aber meine Augen bluten wenn ich mir die Seite ansehe :zuf:

Ich würde das ganze mit Modals lösen, die dann einfach auf visible gesetzt werden, und position: fixed haben. Weißt du wie das funktioniert? Wenn nicht, kannst du mir das Projekt schicken und ich bau das für dich um. Optional könnte ich dir auch das Design ein bisschen an 2017 anpassen.

andre.schickling@styledesign.de

Viele Grüße,
André



Benutzeravatar
bigpun6681
Zuschauer
Zuschauer
Beiträge: 18
Registriert: 24.08.04 00:00
Reputation: 1

Re: DBU Regelwerk in HTML

Beitragvon bigpun6681 » 11.11.17 14:23

Schau mal, ob du mit dieser quick+dirty Lösung leben kannst, ansonsten hat dir sharivari entsprechende Hilfe angeboten.

In der spielregel.css folgende Anpassungen machen:

in .overlay{ } position auf fixed ändern und border-radius auf 0 ändern;
in .popup .content { } max-height auf 350px setzen;
in .close_bottom { } visibility: hidden; einfügen



Benutzeravatar
Hibernate
Pomeranzenkiller
Pomeranzenkiller
Beiträge: 70
Registriert: 04.02.10 00:00
Reputation: 8
Spielqueue: Custom
Leder: Kamui Black SS
Breaker: der Powerbreak reicht
Jumper: Jumper wozu ? 4 Banden sollten doch wohl reichen
Kontaktdaten:

Re: DBU Regelwerk in HTML

Beitragvon Hibernate » 12.11.17 18:23

@sharivari
nun ja die Geschmäcker sind zum Glück nicht alle gleich,
aber du hast Recht, auf das Design hab ich keinen besonderen Wert gelegt
die Popup sind Modalboxen in reinem CSS

ich schick dir die Files mal zu
Danke für die Unterstützung :ban: :bei:

@bigpun
deine Lösung funzt leider nicht
wenn ich die Modalbox öffne oder schliesse springt die Seite im Hintergrund trotzdem nach oben

Danke für den Tip



Benutzeravatar
Sharivari
Pool-Amateur
Pool-Amateur
Beiträge: 228
Registriert: 07.12.13 02:51
Reputation: 46
Facebook Benutzername: andreschickling
Name: André
Spielqueue: Lucasi Hybrid
Leder: Kamui Black Medium
Wohnort: Ingolstadt
Kontaktdaten:

Re: DBU Regelwerk in HTML

Beitragvon Sharivari » 20.11.17 16:28

Wenn man auf einen Link klickt, wie bis jetzt umgesetzt mit href="#popupX" dann springt die Seite automatisch nach oben, da kann man in CSS rummodeln wie man will.

Habe zwei Mini Javascript funktionen eingebaut, openPopup() und closePopup():

function openPopup(elem) {
document.getElementById(elem).style.visibility = 'visible';
document.getElementById(elem).style.opacity = '1';
}

function closePopup(elem) {
document.getElementById(elem).style.visibility = 'hidden';
document.getElementById(elem).style.opacity = '0';
}

Wenn man die bei dem Link mit onclick aufruft, statt href, dann funktionierts.

Viele Grüße,
André




Zurück zu „Poolbillard“

Wer ist online?

Mitglieder in diesem Forum: davozv und 32 Gäste