Suche auf lima-city
-
in: Website kreieren - mit welchen Hilfsmitteln?
geschrieben von lumix
Viele Meinungen beinhalten u.a. auch viele Wahrheiten.
Das Thema "eine Seite SOLLTE auch ohne JS laufen"
würde ich(just my 2cent) mal so zusammenfassend erläutern.
Erstmal würde ich das "SOLLTE" wörtlich nehmen und kein "MUSS" daraus machen.
Das mit dem "laufen" würde ich so interpretieren,
das vorallem die Seiteninhalte(vorallem Texte) stets auch "ohne JS" zugänglich bleiben sollten.
Gleiches gilt auch für "ohne CSS".
Dies lässt sich relativ einfach und konfliktfrei umsetzen,
indem man für korrekte Default-Werte sorgt und via JS nicht umbedingt Inhalte hinzulädt (sondern sie stattdessen schon in der Seite enthalten hat und sie nur ausblendet bis auf Weiteres).
Beispiel:
Blende ich einen Textpart als Zugeklappt aus und blende ich ihn als Aufgeklappt via JS+Style wieder ein,
so sollte der Textpart(HTML-Tag) generell in der HTML-Seite enthalten sein mit style-display-block
und erst via JS default-mässig ausgeblendet werden (style-display-none).
Somit kann nur Zugeklappt werden was auch Aufgeklappt werden kann.
Ist JS deaktiviert so wird der Textpart auch gar nicht erst zugeklappt.
In dem Sinne und so weiter...mit diesem Grundprinzip lässt sich JS+CSS so einsetzen das selbst noch diverse Reader alles richtig anzeigen.
Inwiefern heutzutage ein Browser-/Client-Seitiges JS erforderlich ist, hängt von der Seite/WebApp ab.
Ich habe schon oft Lösungen gesehen welche versucht haben sämtliche Funktionalität Server-Seitig abzubilden
und auf Client-Seitiges-JS möglichst ganz zu verzichten.
Aber die Ergebnisse waren eher entäuschend,
deshalb allein würde ich auf Client-Seitiges-JS nicht verzichten solange es keine zwingende Erforderniss einer ganz speziellen Sonderseite ist.
Beispiel(nur zur Veranschaulichung was ich meine, das Beispiel ist keine zwingende Fall-Schlussfolgerung):
Es gibt Webshops welche Produkte anbieten bei denen man die Variante wählen kann (z.B. Farbe des T-Shirts).
Machne Webshops lösen die Varianten-Auswahl Server-Seitig, das heisst der Besucher wählt eine Farbe
und dann muss die ganze Seite automatisch neu geladen werden nur damit man Bild/Text/Preis/Verfügbarkeit/etc. zu sehen bekommt.
Das fühlt sich für einen Seiten-Besucher nicht gerade eben zeitgemäß an, das ruckeln und zuckeln anstatt flüssig ohne holprigen Übergang wie von anderen Shops gewohnt.
Auch ist es mir bei solchen Shops schon oft passiert das ich Farbe ausgewählt habe und gleich anschliessend den Button "In den Warenkorb" gedrückt habe
noch bevor die Seite mit der gewünschten/ausgewählten Variation geladen wurde.
Dies hatte zur Folge das ich entweder kein Produkt oder das falsche Produkt im Warenkorb hatte.
Das halte ich für nicht mehr zeitgemäß, wenn online-shopping eher was für Tech-Freaks mit Kontroll-Zwang ist als den Otto-Normal-Verbraucher,
auch wenn ich ein Tech-Freak bin der jeden seiner Clicks doppelt und dreifach im Ergebniss nachprüft.
Sicher Stolper-Schwellen gibt es mit jeder Lösung(egal ob Client- oder Server-Seitig), trotzdem kann man gewisse Dingen besser lösen
indem man jenachdem eben das eine oder das andere einsetzt was Fallspezifisch besser geeignet ist
und nicht versucht auf Teufel komm raus umbedingt ALLES ausschliesslich nur Server-Seitig (oder ausschliesslich nur Client-Seitig) zu lösen.
So hat in meinen Augen Client-Seitiges-JS eine absolute Daseinsberechtigung
und stures Einhalten(ohne das dafür zwingende Gründe vorliegen) von Konzept-Prinzipien ala "niemals Client-Seitiges-JS" führen nur allzu oft zu haarsträubenden Lösungen.
Mein Motto lautet deshalb, man geht stets den besten Weg wenn man das tut was der jeweilige Fall erfordert sowie vorher die jeweiligen spezifischen Anforderungen gründlich analysiert.
Wer glaubt er könne eine solche Recherche blind ersetzen durch akademische Grundsätze/Regeln als "es muss immer der eine BESTE Weg beschritten werden",
der hat meist oft gerade eben nicht den Besten-Weg gewählt sondern stattdessen einem "dicken Mann" eine viel zu enge Jacke in "Grösse=Idealgewicht" verpasst.
Ganz ohne Client-Seitiges-JS geht es heute nicht mehr (gilt für die meisten aber nicht für ALLE).
Aktuell baut man eine Seite meistens Client-Seitig MIT HTML5+CSS3+JS auf.
Eine Seite sollte zumindest ihre zentralen Inhalte auch ohne CSS+JS notdürftig wiedergeben können.
Bei einem Online-Shop oder anderen vergleichbaren Lösungen bedeutet dies jedoch nur das man die Grundseiten
zumindest einsehen kann (z.B. Startseite/Impressum/ProduktKategorien/Produkte/...)
aber natürlich ganz und gar nicht deren Funktion nutzen kann (z.B. etwas tatsächlich einkaufen incl. diverse Bezahlsysteme). -
in: JavaScript: Farbe des Pixels der Mausposition ermitteln
geschrieben von lumix
Viel Erfolg und Spaß beim ausprogrammieren,
aber nicht unterschätzen das ist ein Stück Arbeit alle Feinheiten und Workarrounds vollständig zu implementieren.
Wenn du dafür nur 2*Nachmittage investieren willst, dann glaube ich das du damit nicht zu einem zufriedenstellenden Ergebnis kommen wirst.
Wenn du aber das ganze wirklich bis zum Ende durchziehen willst, dann ist es durchaus machbar
und die verbleibenden Lücken/Probleme, welche du nicht via Workarround umschiffen könntest, wären letztendlich durchaus tragbar.
Also eine eigene gangbare/eronomische pureJavaScript Lösung(ColorPicker incl. Magnifier) mit HTML5+SVG+Canvas ist machbar.
Einen zusätzlichen LupenAusschnitt als Navigatinshilfe zur gezielten Pixelauswahl sehe ich jedoch als umbedingt notwendig an,
alles andere wäre nur oberflächlich gesehen eine Lösung und in der Praxis jedoch unbrauchbar.
Beispiel: jPipette
Hier hat z.B. schon jemand eine Pixel-Pimette in JavaScript umgesetzt, jedoch leider OHNE den umbedingt erforderlichen LupenAusschnitt.
Aubgebaut ist das ganze auf jQuery und https://html2canvas.hertzen.com
Übrigens html2canvas geht im Grundprinzip den selben Weg wie von ggamee und mir vorgeschlagen ( SVG-foreignObject - Canvas ).
http://havalite.com/experiment/jPipette/
Man kann eine ColorPimpette(incl. Lupe) auch haben indem man einfach nur das html-tag "input" verwendet mit html-attribut type="color".
Ein Click auf das Eingabefeld/Farbkästchen ruft sodan das Standard-System-Tool(oder ein Browser-Tool) zur Farbauswahl auf.
Auf MacOSX enthält dieses Farbauswahltool eine Pimpette, aber dies gilt dort nur für z.B. Firefox/Chrome/Opera umd ist leider bei SafariBrowser momentan nicht integriert.
Auf Windows vermute ich daß das Farbauswahltool stets OHNE Pimpette ist.
Andere Betriebssysteme/Browser weiss ich leider nicht was dort das Farbauswahltool enthält oder nicht enthält.
<form><input type="color" name="myColor" value="#ffffff"></form> -
in: JavaScript: Farbe des Pixels der Mausposition ermitteln
geschrieben von lumix
So, bis ich meinen Kommentar nun endlich fertig getippt hatte, war ggamee hier schneller.
Eigentlich hat er in seinem Kommentar schon alles gesagt und meiner ist damit weitgehend überflüssig/doppelt geworden.
Trotzdem hier noch mein Erklärungsversuch (vielleicht ist ja was ergänzendes mit dabei).
---------
Wie schon erkannt, eine einfache Lösung in JavaScript gibt es nicht
mit der man einen Pixel des gerenderten Inhalts in einem Browserfenster auslesen könnte.
Es ist zwar möglich das ganze in pure JavaScript zu realisieren,
aber ich vermute du unterschätzt ganz massiv die Problemstellung sowie dessen allumfassende Lösung ansich.
Hier nur ein einfaches Grund-Beispiel wie man aus einem HTML-DOM ein SVG-Image machen kann (via foreignObject)
um dieses sodann in einem Canvas-Element zu zeichnen (via drawImage)
Die Pixel in einem Canvas-Element-Context können sodann ausgelesen werden (via getImageData(sx, sy, sw, sh).data).
Jeder Pixel wird mit 4 ArrayElementen wiedergegeben und entspricht dem RGBA-Color-Wert[r, g, b, a].
var myImg = new Image(); myImg.src = "data:image/svg+xml," + myImg.src += "<svg xmlns='http://www.w3.org/2000/svg' width='300' height='80'>" + myImg.src += "<foreignObject width='100%' height='100%'>" + myImg.src += "<h1 xmlns='http://www.w3.org/1999/xhtml'>DasIstNurEinBeispiel</h1>" + myImg.src += "</foreignObject>" + myImg.src += "</svg>" var myCanvas = document.createElement("canvas"); var myContext = canvas.getContext("2d"); myImg.onload = function() { myContext.drawImage(myImg, 0, 0); }; function getImagePixelColor(myX, myY) { var myRGBA_Array = myContext.getImageData(myX, myY, 1, 1).data; alert("rgba(" + myRGBA_Array[0] + "," + myRGBA_Array[1] + "," + myRGBA_Array[2] + "," + myRGBA_Array[3] + ")"); }
Das ganze ist aber wenn man es allumfassend lösen will, wesentlich aufwendiger als in diesem primitiven Beispiel gezeigt.
Mit dem CodeBeispiel wollte ich nur den Lösungs-Ansatz verdeutlichen/veranschaulichen.
Natürlich wären width+height des SVG-Area dem window.innerWidth+Height anzupassen.
Natürlich gäbe es so einige Stolperschwellen bezüglich svg-foreignObject, welches kein iframe/canvas/flash unterstützt.
Natürlich wäre mehr zu tun als einfach nur document.documentElement.outerHTML ins svg-foreignObject zu kippen,
ggf. script-tags und style-tags entfernen und stattdessen inlineStyles je Element aus getComputedStyles().cssText zu generieren...etc...
Auch wäre es wichtig überhaupt mal abzuklären was man überhaupt möchte
und wie man das in einer Art präsentiert welche auch tatsächlich vom Nutzer gangbar angewendet werden kann.
Einfach nur einen Pixel auszulesen auf welchen der Cursor/Mauszeiger zeigt ist so nicht ausreichend,
denn kein Mensch kann sich da orientieren auf welchen mikromillimeter der Zeiger zeigt.
Normalerweise löst man das anders, man zeigt einen kleinen Ausschnitt(Bsp: 15x15px) sehr stark vergrössert in einer hinzugeblendeten LupenAnsicht an
damit man genau verfolgen kann über welchen Pixel da der Zeiger gerade gleitet.
Nur so kann man zielsicher einen Pixel auswählen.
U.a. ein Buchstabe auf einer HTML-Seite welcher die Farbe Schwarz hat, wird nicht nur einfach mit schwarzen Pixeln gerendert.
Das FineRendering zur Vermeidung des Treppcheneffekts verwendet hierzu mind. unterschiedliche Graustufen oder gar unterschiedliche Farbtöne.
Normalerweise benötige ich eine Pixel-Farb-Pimpette nur im Rahmen meiner eigenen Arbeiten.
Deshalb programmiere ich mir sowas nicht extra selber.
Ich benutzte hierzu einfach fertige Tools(keine WebApps) welche mir normalerweise jedes Betriebssystem zur Verfügung stellt.
Diese Tools/Programme lesen einfach nur generell die Pixel am Screen stellen diese in einer Lupe dar inclusive des Farbcodes zu jedem gewünschten Pixel.
Unter Mac-OSX heisst das System-Tool "Digital Color Meter".
Unter Windows gibt es mindestens zig tausende kostenlose Programme ala "Color-Pimpette" (bitte selber raussuchen).
Für so ziehmlich jedes Betriebssystem gibt es da schon Native-Programme kostenlos oder von haus aus mit dabei.
Als Not-Ersatz-Beispiel-Lösung in Form eines Browser-Plugins für Firefox/Chrome könnte man noch nennen http://www.colorzilla.com/firefox/ -
in: ö,ä,ü werden komisch dargestellt
geschrieben von lumix
Nur um Missverständnisse zu vermeiden,
hier nochmal,
die Datei (egal ob .html oder .php)
muss mit dem richtigen Zeichensatz befüllt worden sein sowie beim Abspeichern
als Textdatei mit dem richtigen Zeichensatz abgespeicher worden sein.
Darüber hinaus ist im HTML-HEAD das richtige META-Tag zu setzen.
<meta charset="utf-8" />
-----
Weiterhin ist auch noch wichtig das dein Web-Server die Datei an den Browser(Web-Client)
mit dem richtigen Response-Header versendet (Ich glaube das läuft bei dir falsch).
Wäre es eine PHP-Datei(PHP-Skript), könnte man diese u.a. auch direkt mit der php-header-function bestücken:
<?php header('Content-Type: charset=utf-8');
.......
?>
Wäre es erforderlich für zumindest alle Standard-Webdateien
dann könnte man das besser zentral lösen via z.B. der Datei .htacess eines z.B. ApacheWebservers:
AddType text/css;charset=UTF-8 .js
AddType text/css;charset=UTF-8 .css
AddType text/html;charset=UTF-8 .html
AddType application/xhtml+xml;charset=UTF-8 .xhtml
Oder auch in der .htacess Datei für alle Dateien den Default-Charset auf UTF-8 setzen:
AddDefaultCharset UTF-8 -
in: ö,ä,ü werden komisch dargestellt
geschrieben von lumix
Vermutlich hast du nur die HTML-Text-Datei nicht im richtigen Zeichensatz abgespeichert.
Ausserdem findest du hier noch Infos
http://www.w3.org/International/questions/qa-html-encoding-declarations
http://www.w3.org/International/questions/qa-byte-order-mark
Hier noch ein Beispiel-HTML-Text-Dokument:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test-UTF8</title> </head> <body> <h1>Test-UTF8</h1> <h2>Umlaute: ÄÖÜ äöü</h2> <h2>daß Scharfe-S</h2> <h2>Euro-Zeichen: €</h2> <h2 style="white-space: pre-wrap"> العربية অসমীয়া Беларуская Беларуская (тарашкевіца) Български বাংলা Català کوردیی ناوەندی Čeština Чӑвашла Ελληνικά Español فارسی Français ગુજરાતી עברית हिन्दी Հայերեն 日本語 Basa Jawa ქართული Қазақша ಕನ್ನಡ 한국어 कॉशुर / کٲشُر Kurdî Кыргызча Lietuvių Latviešu Олык марий മലയാളം Монгол मराठी नेपाली नेपाल भाषा Nederlands Norsk bokmål ਪੰਜਾਬੀ Română Русский संस्कृतम् Саха тыла Srpskohrvatski / српскохрватски Slovenčina Slovenščina Српски / srpski தமிழ் తెలుగు Тоҷикӣ ไทย Türkçe Українська اردو Tiếng Việt ייִדיש Yorùbá 中文 粵語</h2> </body> </html> -
in: Verpixelte Webfont
geschrieben von lumix
Falls sich deine Seite nur an dich und andere Besucher
mit der exact gleichen Betriebssystem(win) und Browserausstattung(wie deine)
richtet wäre es ja einfach;)
Richtet sich deine Seite generell an alle Besucher der WebWelt
so ist es nicht allein maßgeblich was gerade auf deiner Ausstattung angezeigt wird.
Sicher ist es schwierig komromisslos alle korrekt zu bedienen
egal wie alt/exotisch ihre Browser(Firefox,Chrome,Opera,Safari...)
oder Betriebssysteme(Win,OSX,iOS,Android,Linux...) sind.
Jedoch kann man zumindest den Mainstream berücksichtigen,
soweit dessen Alter noch akzeptabel ist
und der Hersteller eine technisch ernstzunehmende sowie akzeiptable BrowserEntwicklung abgibt.
Alles andere muss man notfalls irgenwann mal als zuAlt/zuSchlechtEntwickelt
hinnehmen und damit in Kauf nehmen dass es dort dann mal nicht so gut aussieht.
Du schreibst von Safari und deiner Win-Maschine,
falls du damit meinst das du Safari als WindowsVersion zum testen deiner Seite
heranziehst, muss ich dich leider enttäuschen.
Das kannst du als Referenz total vergessen,
denn die WindowsVersion kam nie richtig aus der Beta raus
und wurde von Apple vor über 5Jahren eingestellt da
man nun wirklich nicht noch einen Browser für Windows aufrecht erhalten wollte.
Von Version 3 bis 5 war Safari auch für Windows verfügbar.. https://de.wikipedia.org/wiki/Apple_Safari.
Auf folgenden aktuellen Browsern wird bei mir unter OSX10.11(sowie iOS)
sämliche googleOpenSans Schriften korrekt und sauber dargestellt wenn ich sie ordnungsgemäß eingebunden/definiert habe.
Ich nehme einfach mal an das gilt auch für Win-Maschinen mit aktueller Ausstattung.
- Safari Version 9
- Firefox Version 42
- Chrome Version 46
- Opera Version 33
Selbstverständlich, gibt es auch Argumente die dafür sprechen, eine Seiten-Lösung so aufzubauen
damit auch veraltete Systeme noch einen korrekten Inhalt anzeigen.
Aber was bedeutet das schon in diesem Zusammenhang eine "etwas pixelige SonderExtraFont Darstellung"?
Wenns denn doch so schlimm aussieht auf den Altsystemen
warum verzichtet man dann nicht auf den SonderExtraFont generell
oder eben nur speziell bei Browsern zu denen bekannt ist das sie den SonderExtraFont nicht sauber darstellen
indem man dann einen entsprechden alternativen Standardfont nur für diese Browser anbietet.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Generell gilt:
Die Systeme welche unten stehende Seite in guter Schriftqualität richtig wiedergeben können,
können ebefalls das mit deiner Seite richtig anzeigen (ansonsten hast du es falsch eingebaut).
Ein System welches dazu nicht mehr in der Lage ist diese Seite richtig anzuzeigen,
dem sollte stattdessen eine alternative Standardschrift angeboten werden.
https://www.google.com/fonts/specimen/Open+Sans
Ich hoffe dies hilft dir Weiter. -
in: Verpixelte Webfont
geschrieben von lumix
Hallo
Vielleicht hilft dir folgende Vorlage weiter.
U.a. beim STYLE-Tag habe ich nur den inline-style="display:none;" sicherheitshalber dazugesetzt,
falls jemand das STYLE-Tag unerlaubter-weise im HTML-BODY unterbringen sollte;)
Die font-smooth Regeln brauchst du natürlich nicht zwingend, das ist nur meine persönlich bevorzugte Variante für u.a. Firefox auf OSX(apple).
Das ich den Font auf den BODY-Tag lege, ist natürlich nur ein Anwendungsbeispiel.
Die Regel " font-family: 'Open Sans'; " kannst du natürlich auf beliebige cssSelektoren/HTMLinlineStyles anwenden.
Das ist der Code den ich verwende (natürlich im HTML-HEAD und nicht im HTML-BODY)
um OpenSans bei mir einzubinden.
<style style="display: none !important;" type="text/css"> body { -moz-osx-font-smoothing: grayscale !important; /* font-smoothing under OSX-Firefox */ -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; font-smooth: always; font-family: 'Open Sans'; } </style> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" property="stylesheet" rel="stylesheet" type="text/css">
Das LINK-Tag sorgt dafür das eine CSS-Datei hinzu-geladen wird.
Diese CSS-Datei enthält dann folgende fertigen CSS-Regeln.
Diese sind natürlich dann nicht nochmal in eigenen Codes zu erwähnen.
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype'); } -
in: Optimierung für Smartphone: Scrollbar nicht anzeigen
geschrieben von lumix
StylingScrollbars für Webkit-Browser(Safari/Chrome/Opera/...)/* DEN SELECTOR #myElement bitte wie benötigt ändern */ /* set vertical-scrollable and horizontal-nonscrollable */ #myElement { overflow-y: auto; overflow-x: hidden; } /* set on webkit scrollbars invisible, alternative you can use display:none; */ #myElement::-webkit-scrollbar { opacity: 0; } /* set on IE10 scrollbars invisible */ #myElement { -ms-overflow-style: none; } /* set on IE5.5+ scrollbars invisible */ #myElement { scrollbar-base-color: transparent; scrollbar-face-color: transparent; scrollbar-highlight-color: transparent; scrollbar-3dlight-color: transparent; scrollbar-shadow-color: transparent; scrollbar-darkshadow-color: transparent; scrollbar-track-color: transparent; scrollbar-arrow-color: transparent; } /* set on IE8+ scrollbars invisible */ #myElement { -ms-scrollbar-base-color: transparent; -ms-scrollbar-face-color: transparent; -ms-scrollbar-highlight-color: transparent; -ms-scrollbar-3dlight-color: transparent; -ms-scrollbar-shadow-color: transparent; -ms-scrollbar-darkshadow-color: transparent; -ms-scrollbar-track-color: transparent; -ms-scrollbar-arrow-color: transparent; } /* set on IE10 scrollbars invisible */ #myElement { -ms-overflow-style: none; }
https://www.webkit.org/blog/363/styling-scrollbars/
https://css-tricks.com/custom-scrollbars-in-webkit/
StylingScrollbars für InternetExplorer:
https://docs.webplatform.org/wiki/css/properties/-ms-scrollbar-face-color
-ms-scrollbar-3d-light-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Bitte beachten, sollte auf Firefox(Gecko) Browser das Scolling/Overflow auf dem HTML-Element liegen,
so kann es sein das bei ein und dem selben Document das Scrolling/Overflow hingegen bei Webkit-Browsern auf dem BODY-Element liegt.
Dies hier nur als kleine Hilfe zur Fehlerursachensuche, falls mal was nicht wie gewünscht auf allen Browsern gleichermassen klappt.
Ich persönlich empfehle, falls möglich, entsprechende DIV-Container zu verwenden und diese gezielt mit dem Style "overflow: auto;" zu versehen.
Man kann sich aber auch auf das Spiel mit "HTML oder BODY" einlassen, nur ist eben entsprechend zu berücksichtigen das die CSSRegeln dann beide Elemente je verwendeten Browser regeln muss.
----
Man kann statt "StylingScrollbar" auch eine Alternative-Lösung verwenden,
indem man den DIV-ContainerB welcher das "overflow: auto;" besitzt einfach um die ScrollbarDicke breiter/höher macht via grösseren Innenabstand(padding)
und das Elternelement(DIV-ContainerA welches diesen DIV-ContainerB enthält) eben fast genauso gross (also ohne dem zusätzlichen Padding) setzt plus dem Style "overflow: hidden !important". So wird die Scrollbar selbst in den HiddenOverflow-Bereich verschoben und ist nicht am Schirm zu sehen.
Diese Lösung funktioniert für alle Browser, hat jedoch die Einschränkung das man einen zusätzlichen ElternElement-Container benötigt.
----
Auf Mozilla/Firefox(Gecko) gibt es leider momentan noch keine Lösung um die Scrollbar frei gestalten zu können via CSS.
Dafür haben Mozilla/Firefox(Gecko) Browser als einzige eine schöne Lösung um Smooth-Snapping-Scrollbar-Positions zu setzen.
Das hat zwar nichts mit der Frage "Scrollbar verstecken" zu tun, aber trotzdem der vollständigkeitshalber weils mit CSS und Scrollbars zu tun hat.
Siehe hier:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate
scroll-snap-coordinate
scroll-snap-destination
scroll-snap-points-x
scroll-snap-points-y
scroll-snap-type
scroll-snap-type-x
scroll-snap-type-y
-------
Fast alles zu dem Thema findet man auch hier:
http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page -
in: Yosemite - keine FTP Verbindung
geschrieben von lumix
Also bei mir funktioniert es und es hat auch von Anfang an geklappt ohne das ich jemals irgendwelche Default-Einstellungen anpassen musste.
Das schreibe ich nur um aufzuzeigen das es prinzipiell geht und die Fehlerursache wahrscheinlich auffindbar ist.
Ich verwende FileZilla auf MacOSX um mich mit dem Server ftp.lima-city.de zu verbinden.
Das klappt heute mit OSX-Yosemite 10.10.4(14E46) sowie FileZilla 3.11.0.2
und klappte auch schon mehrere Jahre davor mit älteren Versionen einwandfrei ohne Probleme.
Meine Einstellungen:
OSX-Systemeinstellungen/Sicherheit/FileVault = deaktiviert
OSX-Systemeinstellungen/Sicherheit/Firewall = Aus
OSX-Systemeinstellungen/Netzwerk/Proxies = KeineProxies
FileZilla-Einstellungen/Verbindung/FTP = Passiv(empfohlen)
FileZilla-Einstellungen/Verbindung/FTP/PassiverModus = StattdessenExterneIP
FileZilla-Einstellungen/Verbindung/FTP/FTPproxy = Keiner
FileZilla-Einstellungen/Verbindung/GenerischerProxy = Keiner
Ausserdem ist mir aufgefallen das neuerdings seit ca. 2-3Monaten im FileZilla nach dem Passwort-Login-Dialog für Server ftp.lima-city.de stets ein Hinweis-Dialog-Fenster eingeblendet wird "Unbekanntes Zertifikat..." welchen ich mit OK-Button bestätigen muss (oder alternativ Checkbox "...immer vertrauen").
Es kann unter ganz besonderen Umständen passieren dass dieses FileZilla-Hinweisdialog-Fenster hinter das FileZilla-Hauptfenster gerät und dann sieht man es nicht solang bis man auf die Idee kommt das Hauptfenster zu verschieben.
Viel Erfolg noch mein Ursache finden! -
in: Vektorgrafik
geschrieben von lumix
Hier ist noch als Alternative eine Online-Variante:
http://image.online-convert.com/convert-to-svg
Ganz wichtig um gute Ergebnisse zu erhalten ist natürlich die Konvertierungsfunktion richtig einzustellen je nachdem wie das SVG ausschauen soll und wie die Bildquelle aussieht.
Zum Beispiel, bei der obigen Online-Version verwende ich öfter mal "Monochrome"...etc...
Meistens, wenn meine Bildquelle ein Photo ist, bearbeite ich das Quell-Bild mit Effekt-Filtern in einem Bildbearbeitungsprogramm vor, um von den Objekten im Bild klare Umrisse zu erhalten bevor ich nach SVG konvertiere.
Da ich nur sehr selten eine solche Konvertierungsfunktion benötige,
kann ich leider nicht sagen unter welchen Bedingungen man mit welchem Programm die besten Ergebnisse erzielt.
-
in: Nützliche Tools für CSS & Co
geschrieben von lumix
Vielen Dank, fürs sammeln, aussortieren und das geordnete Bereitstellen.
Vielleicht ist da noch ein brauchbarer Vorschlag bei:
Falls man mal auf die Schnelle einen BrowserCompatibilityReport von seinem JS braucht:
http://jscc.info
http://www.javascriptlint.com/online_lint.php
ServerDiagnostics&BlacklistsCheck
http://mxtoolbox.com
https://www.ssllabs.com/ssltest/
Den svg-editor kennt natürlich auch schon jeder;)
http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html
Den w3c-validator kennt natürlich jeder:
Für HTML, XHTML: http://validator.w3.org
Für CSS oder HTML mit CSS: http://jigsaw.w3.org/css-validator/
Und noch:
http://www.quirksmode.org/dom/w3c_css.html
http://www.quirksmode.org/dom/w3c_cssom.html -
in: jQuery Selector
geschrieben von lumix
Thats not a bug, its an optional feature
So gut wie immer , wie Du auch sagst, ist es richtig wenn wenigstens der ZusatzAufklappText zu sehen ist
falls mal JS deaktiviert ist oder wg. eines anderen JS-Fehlers(oder auch HTML-DOM Struktur korrupt)
der Klappmechanismus ausser Funktion ist.
Möchte man aber aus einem exotischen Gesamt-Anforderungs-Kontext heraus
lieber die Not-Alternative "Default-Style: display: none;" implementieren,
dann bekäme man dadurch eben den exotischen Wunsch erfüllt
das bei defekten Aufklappmechanismus keine Zusatztexte angezeigt werden (for ever).
Also für die extrem exotischen AnwendungsFälle von "lieber nie überflüssige Zusätze" als "immer alles im vollem Umfang".
Aber trotzdem, vielen Dank für die Bestätigung, das ich damal instinktiv/zufällig den richtigen Weg gewählt habe,
indem ich es an Ort und Stelle im JS untergebracht habe und keinen Mix eingegangen bin.
Das ist dann scheinbar pauschal richtig so und der (Exoten)Alternativ-Comment ist dann wohl eher irreführend gewesen;)
Schönen Abend noch -
in: jQuery Selector
geschrieben von lumix
@leichtlatein
Probier es mal damit (siehe code unten).
Generell könnte man sowas aber auch ohne jQuery basteln, in pure JavaScript...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Toggle Elemente AUFKLAPPEN/ZUKLAPPEN (jquery/1.7.0)</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> </head> <body> <br> <p class="hstil">ALLEGORIE-1</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <br> <p class="hstil">ALLEGORIE-2</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <br> <p class="hstil">ALLEGORIE-3</p> <div class="bstil"> <p>bildhaft belebte Darstellung eines abstrakten Begriffs oder Gedankens</p> <p>Justitia - Gerechtigkeit</p> </div> <script type="text/javascript"> $(document).ready(function () { $('.hstil').click(function () { $(this).next('.bstil').slideToggle('fast'); }); $('.bstil').hide(); /* SetDefault: Anzeige startet mit display='none' für Elemente der class='bstil'...Alternativ set Default "display: none;" via inline-style oder stylesheet */ }); </script> </body> </html> -
in: Hintergrundgrafik wird nicht richtig angezeigt.
geschrieben von lumix
@lol-2015
Leider geht aus deiner Frage nicht hervor wie du es haben möchtest
und was du meinst mit "...nicht richtig angezeigt...".
Aus deinem css-code ist das nicht zu ersehen,
u.a. enthält er doppelte Angabe zu font-family und ein merkwürdiges 420px Innenabstand-Unten(padding-button).
Für was benötigst du diese 420px ??
Was für eine Art Bild ist denn eigentlich das "f.gif" (wie gross ist das genau in Höhe&Breite und ist das ein Foto oder nur ein StrukturMuster)?
Vielleicht hilft es dir ja weiter wenn ich mal ein vollständiges HTML-Beispiel zum Thema Hintergrund-Bild mache(siehe Code unten).
Ein Hintergrundbild kann z.B. nicht nur auf das body-element gesetzt werden,
sondern natürlich auch auf das html-element oder ein beliebiges container-element(z.B. div) innerhalb des body-elements.
Hier findest du entsprechende Dokumentation zu css "background" : http://www.w3schools.com/cssref/css3_pr_background.asp
Hier nur ein übersichtliches HTML-Beispiel, in Anlehnung an den von dir skizzierten css-code.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test Hintergrundbild</title> <style> html { min-width: 100%; min-height: 100%; } body { background-color: rgb(166, 215, 1); /* color|transparent|initial|inherit */ background-image: url(f.gif); /* url|none|initial|inherit */ background-repeat: no-repeat; /* repeat|repeat-x|repeat-y|no-repeat|initial|inherit */ background-attachment: scroll; /* scroll|fixed|local|initial|inherit */ background-position: left bottom; /* Alternativen: background-position: left 420px; background-position: left -420px; */ -webkit-background-clip: content-box; -moz-background-clip: content-box; -o-background-clip: content-box; -ms-background-clip: content-box; background-clip: content-box; /* border-box|padding-box|content-box|initial|inherit */ -webkit-background-origin: content-box; -moz-background-origin: content-box; -o-background-origin: content-box; -mx-background-origin: content-box; background-origin: content-box; /* padding-box|border-box|content-box|initial|inherit */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; /* auto|length|cover|contain|initial|inherit */ padding-bottom: 420px; /* ????Warum 420px Innenabstand-Unten???? */ padding-left: 0px; padding-right: 0px; padding-top: 0px; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 16px; } </style> </head> <body> <div style="font-size: 40vw; overflow: hidden; color: rgba(255, 0, 0, 0.5); outline: 2vw solid; text-align: center; max-height: 100%; max-width: 100%; outline-offset: -2vw;">XXX</div> </body> </html> -
in: Bild-Container Drag'N'Drop
geschrieben von lumix
Hi c143
Vielleicht hilft dir dieses Code-Beispiel von mir etwas weiter, ich habe das an dein Post-JSFiddle-Probleme angelehnt.
<style> div#image-container{ position: relative; background: url('http://www.lima-city.de/images/community_logo.png'); background-size: cover; background-repeat: no-repeat; border: 1px solid red; } </style> <div id="image-container"></div> <script> var myDiv, myBackImage; function setDivSizePropToImage() { var imgWidth, imgHeight; imgWidth = myBackImage.naturalWidth; imgHeight = myBackImage.naturalHeight; myDiv.style.width = imgWidth + 'px'; myDiv.style.height = imgHeight + 'px'; alert('Original-Bildgroesse(Width/Height): ' + imgWidth + 'px / ' + imgHeight + 'px'); } function initByWinOnLoad() { myBackImage = new Image(); myBackImage.onload = setDivSizePropToImage; myDiv = document.getElementById('image-container'); myBackImage.src = window.getComputedStyle(myDiv, null).getPropertyValue("background-image").replace('url(', '').replace(')', ''); } initByWinOnLoad(); </script>
MLG lumix