Web fragen

Moin, liebe Gemeinde, ich geren dieses Thema als ein Pool für meine fragen nutzen die mit dem Thema HTML/CSS Web zu tun haben. ICH ARBEITE OHNE CMS!

MEINE FRAGE
So sieht die Seite aus:
Klick me

Meine <a> befinden sich in <aside> und <div data-filter> in <article>. Leider geht durch diese Konstellation die Funktion verloren, ich möchte aber gerne das Design beibehalten. Ich könnte natürlich für Rund um RMK spiele und deren unter Seiten jeweils eine datei.html. erstellen aber wenn ich 50 spiele hab und diese in demo / Vollversion /adventure / horror ect. unterteilt werden mach ich mir echt viel zu viel Arbeit. Wie kann ich das Dilemma umgehen? Ich dachte schon das ich den Inhalt der <div class="box" data-filter="red"> in eine Zeile in PHP rein packe und mir immer den entsprechenden inhalt mit IDs abfrage. aber ich denke das ist noch komplizierter da ich net mit PHP(ausser Formulare).

Wie löse ich das Dilemma?

MfG

VD3???

Zitat:

---

Zitat von VD3???

Leider geht durch diese Konstellation die Funktion verloren

---

Welche Funktion? Was willst du überhaupt?

Ich will einen Filter der mir meine <div(s)> anordnet, je nachdem was ich auswähle.
wie hier

Ich arbeite mit data-filter...

Das data-Attribut allein hat keinen Einfluss auf die Ausgabe deines HTMLs. - Es ist lediglich ein "Speicher-Container", in dem du Informationen über das entsprechende HTML-Element eintragen kannst.

Für das, was du machen willst, brauchst du Javascript. Die von dir verlinkte Website bindet mixitup zur dynamischen Sortierung der Div-Elemente ein:
http://mixitup.io/

k und dann kann ich das ach auf mein layout benutzen? also mit dem was ich schon hab

Zitat:

---

Zitat von VD3???

k und dann kann ich das ach auf mein layout benutzen? also mit dem was ich schon hab

---

Wenn du so ein layout auf die beine stellst, solltest du auch wissen, dass du ein Javascript natürlich nutzen kannst. Du musst nur ggf. dein Layout daran anpassen.

ok danke, wenn ich weitere Fragen hab schreib ich wieder hier rein =)

Folgendes Problem ich benutze:

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="webspot.webm" type="video/webm">
<source src="webspot.mp4" type="video/mp4">Video not supported
</video>

in Chrome und FF geht alles seinen gewohnten gang, aber der IE 11 - 5 will das video nicht anzeigen. Ich hab schon geschaut, der Browser ist bei mri HTML5 redy die video formate sind auch richtig codiert und sogar als mp4. ich bin mit dem latein am ende... er will einfach nciht die videos anzeigen. Ich hab sogar schon alles auf HTML5 und HTML4.0 gesetzt aber es hilft ncihts. der IE streikt... Help?

IE11 unterstützt kein MPEG4 und auch kein WebM.

damn boy W3C shool sagst zwar das der IE das format schluken soll, aber scheiß drauf... kann ich auf Flash ausweichen? Ich hab ne LP seite ge-googelt. dort war ein Video als Background (genau das was ich wollte). Dort wurde Flash genutzt^^ WEnn cih das selber net in flash hin bekomme melde cih mich nochmal =)

Zitat:

---

Zitat von VD3???

damn boy W3C shool sagst zwar das der IE das format schluken soll, aber scheiß drauf... kann ich auf Flash ausweichen? Ich hab ne LP seite ge-googelt. dort war ein Video als Background (genau das was ich wollte). Dort wurde Flash genutzt^^ WEnn cih das selber net in flash hin bekomme melde cih mich nochmal =)

---

Die Frage ich doch, welches Videoformat das Video besitzt.
MP4 ist ja nur der Container. Für den IE11 muss das Video im h.264-Format vorliegen.

achso, jap es ist in h.264-Format aber ich hab ne lösung gefunden swf...

Zitat:

---

<object style="position: absolute; z-index: -2000;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%">
<param name="movie" value="{mediumUrl}video/webspot.swf" />
<param name="quality" value="high" />
<PARAM NAME="SCALE" VALUE="exactfit">
<param name="wmode" value="transparent">
<embed src="{mediumUrl}video/webspot.swf" quality="high" type="application/x-shockwave-flash" width="100%" height="100%" SCALE="exactfit" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

---

kann mir einer sagen/zeigen wo ich VOLUME=0 einsetzen kann? iwie will das jetzt bei mir nicht funzen =/ dan wär cih für heute fertig mit dem IE =D

Simple timer

JS

Code:

---

function countdown(time,id){
  t = time;
  // Minuten berechnen
  // Sekunden durch 60 ergibt Minuten
  // Minuten gehen von 0-59
  //also Modulo 60 rechnen
  m = Math.floor(t/60) %60;
  // Sekunden berechnen
  s = t %60;
  m = (m < 10) ? "0"+m : m;
  s = (s < 10) ? "0"+s : s;

  // Ausgabestring generieren
  strZeit =m + ":" + s;
  // Falls der Countdown noch nicht zurückgezählt ist
  if(time > 0)
  {
    //Countdown-Funktion erneut aufrufen
    //diesmal mit einer Sekunde weniger
    window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);
  }
  else
  {
    //führe eine funktion aus oder refresh die seite
    //dieser Teil hier wird genau einmal ausgeführt und zwar
    //wenn die Zeit um ist.
    strZeit = "ENDE";
  }
  // Ausgabestring in Tag mit id="id" schreiben
  document.getElementById(id).innerHTML = strZeit;
}
//Helfer Funktion erlaubt Counter auch ohne Timestamp
//countdown_specific(Tage,Stunden,Minuten,Sekunden,ID)
function countdown_specific(d,h,m,s,id)
{
  countdown(d*60*60*24+h*60*60+m*60+s,id);
}

---

HTML

HTML-Code:

---

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta charset="UTF-8">

        <script language="JavaScript" src="time_jser.js"></script>
</head>
<body>
       
        <center>
        <p>
        <div id="zähler">
                <script>countdown_specific(0,0,0,5,'zähler' );</script>
        </div>
        </p>
        </center>

</body>
</html>

---

Ich würde gerne den
else
{
strZeit = "ENDE";
}
in der HTML defenieren wollen, aber ich kriege es net hin... kann mir einer zeigen was ich genau machen muss?

HTML ist keine Programmiersprache und somit hast du auch keine Kontrollmöglichkeiten.

Außerdem solltest du dich mal mit dem Model-View-Controller auseinandersetzen.
Eine Funktion, die sowohl die Daten, als auch die Ausgabe erzeugt ist ein absolutes No-Go.
Du solltest, aufgrund von Internationalisierung, auch keine Umlaute verwenden.

setInterval() ist auch wohl die bessere Alternative, als setTimeout(), da setInterval() schon sich selbst aufruft.
Auch wird nur noch aus historischen Gründen ein String als Parameter erlaubt. Dies sollte man heute bestmöglich vermeiden.
Du solltest dir auch mal das Date-Objekt anschauen. Das bietet für dich im Grunde schon alles, was du für die Umrechnung benötigst.

uff das soll keine große Sache werden, mein Mentor meinte ich muss die Nachricht "ENDE" so in js einbauen das ich bei bedarf die sprache ändernkann. Momentan müsste man für jede Sprache einen neuen Timer anlegen und das ist nicht günstig...

Wenn man es richtig machen will, dann ist die Lokalisierung eine große Sache ;)
Wie gesagt, mit HTML hast du keine Kontrollmöglichkeiten. Das ist statischer Text. Erst mit Scriptsprachen, wie php oder JavaScript kann HTML in gewisser Maßen dynamisch werden, indem der Inhalt dynamisch ermittelt wird.
Du musst dir also eine Lokalisierung mittels JavaScript basteln, und wenn du danach unter Google suchst, findest du auch tausende Ansätze, wie man so was realisieren könnte. Das simpelste ist wohl ein assoziatives Array.

Code:

---

var localizedStrings = {
      "de": {
        'hello'    : 'Hallo'
      , 'welcome'  : 'Willkommen'
    }
    , "en": {
        'hello'    : 'Hello'
      , 'welcome'  : 'Welcome'
    }
};

document.write(localizedStrings['en']['hello']);

---

Dies wäre ein erster Versuch, der aber noch sehr fehleranfällig ist, und auch nicht grad effizient, da man das Array immer mitübertragen muss. Bei komplexeren Webseiten, die dann mehrere Hundert Strings besitzen, kann das Laden der Webseite ggf. länger dauern. Das ganze könnte man aber dann noch in eine Methode packen, die die Sprache des Browsers ermittelt und automatisch den lokalisierten String zurückgibt, und auch einen Default-Wert zurückgibt, falls eine Sprache ein String nicht besitzen sollte (z.B. die deutsche Übersetzung). Für die Sprache gibt es zwar die Eigenschaft language im navigator-Objekt, aber der gehört nicht zwingend zum Standard und kann u.U. in unterschiedlichen Browsern leer sein. Der IE benutzt auch stattdessen UserLanguage. Eine bessere Methode wäre die Eigenschaft Accept-Language im HTTP-Header, aber hierfür musst du eine JSON-Abfrage abfeuern. Eine effizientere Methode wäre wohl, ein Teil der Webseite mittels AJAX neuzuladen, wenn der Countdown beendet ist. Die AJAX-Abfrage würde dann ein serverseitiges Script starten, welches dann schon den lokalisierten String zurückgibt. Auch wäre es klüger, die Strings in eine Datenbank-Struktur (z.B. SQLite) abzulegen, weil so eine Struktur wartbarer und ggf. effizienter ist.

danke das werde ich mal versuchen =)

Da fehlt mir gerade ein das in meinen Firefox Chrome IE Safarie, die eingebundenen schriften/icons nciht so scharf ausschauen wie erhoft. Ist es bei euch auch so? Mir scheint als würden die Standertschriften besserausschauen(render) als die eingebundenen, wie zum beispiel Nova oder Gotham Pro

So leute iwie bin ich kurz vorm aussrasten..

JS Funktion funktioniert

aber hier

Funktioniert es nciht

ich habe dafür dieses tutorial benutzt: Overlay js im Ordner war noch .hg_archival & .hgtags, da ich diese net brauche hab ich sie gelöscht. Ausserdem hab ich die jsin ein lyout eingefügt udn nun funzt es net mehr... wo kann der fehler sein? stören sich da zwei js files? PS: ich benutze initilizer

Kann ich jetzt so auch nicht sagen. JavaScript ist nicht so mein Fachgebiet, aber aus irgendeinem Grund registriert er diese Overlay-Erweiterung nicht.
Mir ist aufgefallen, dass du dort auch unterschiedliche jQuery Versionen benutzt. Vielleicht liegt da irgendwo der Knackpunkt. Diese Overlay-Erweiterung ist auch nicht grad neu. Die letzte Aktualisierung fand 2012 statt. Vielleicht funktioniert diese Erweiterung mit aktuelleren jQuery-Versionen nicht mehr.

nop, wir haben den Fehler gefunden. Die js nicht mehr so richtig deswegen wirds net angezeigt. Liegt am js xY, auf den wir leider keinen Zugriff haben XD

So folgende Sache ich habe eine Overlay.js geschrieben. So eine wie auf Winrar.com Quasi eine "Dont leave massage". Ich will aber gern das es nur dann aktiviert wir wenn die Maus von unten nach oben geführt wird(tabschlisen). leider funktioniert meine funktion in beide richtungen. Was muss ich machen damit es nur von unten nach oben getrackt wird? Vorschläge?

Ich versteh nicht, was du meinst, aber wenn ich dich richtig verstanden habe, dann muss immer ein Delta der Mauszeiger-Position ermittelt werden, den du dann auswertest.
Vielleicht kann man auch einen endlichen Automaten bauen, der durch Mausbewegungen seinen Zustand ändert, und dann bei einem bestimmten Zustand den Pop-Up auslöst.

Ich weiß aber nicht, wofür man sowas für eine Webseite benötigt. Mir persönlich gehen eh schon diese Warnhinweise, einiger Webseiten, auf den Sack, wenn man ein Tab schließen möchte. Das zeigt eine gewisse unseriösität, da man letztem Endes überhaupt nich weiß, was passiert, wenn man auf die Buttons klickt.

Zuerst mal: Volle Zustimmung mit Whiz-zarD. Solche Meldungen sind nur dann angemessen, wenn ein Formular angezeigt wird, das der Besucher bereits (teilweise) ausgefüllt, aber noch nicht abgesendet hat. Eine allgemeine Meldung, weil jemand die Seite verläßt, ist für mich ein guter Grund, die Seite nicht wieder zu betreten. Bei halb ausgefüllten Formularen ist die Rückfrage okay, weil man möglicherweise das Absenden vergessen hat, aber ansonsten ist es schlicht ein Versuch, den Benutzer auf einer Seite festzuhalten, die ihn gerade nicht weiter interessiert. Höchst unprofessionell.

So, nachdem das aus dem Weg ist: Sehe ich das richtig, dass du eine Aktion ausführen willst, wenn jemand mit der Maus den Viewport über den oberen Rand verläßt? Das halte ich für problematisch:

• Das Verlassen des Viewports nach oben korreliert nicht zwangsläufig mit dem Schließen des Tabs. Der Besucher könnte schlicht zu einem anderen Tab wechseln.
• Der Besucher könte auch den Viewport in eine andere Richtung verlassen und von dort aus zur Tableiste gehen, z.B. wenn er zwischendurch in eine andere Anwendung klickt. Nicht jeder hat den Browser auf Vollbild laufen.
• Man kann Tabs auch auf andere Arten schließen, z.B. über Tastenkombinationen oder Mausgesten.
• Die Methode funktioniert nicht auf Mobilgeräten, weil die in der Regel andere Events erzeugen.

Du solltest statt dessen einen Event-Handler auf beforeunload binden, welcher selbstverständlich sicher stellt, dass auch mindestens ein Formularfeld ausgefüllt ist – es macht meist keinen Sinn, zu warnen, wenn das Formular gar nicht angefaßt wurde.

Danke für diese Tipps =) Hat mir sehr geholfen. Ich konnte mein Problem lösen =D

Ihr kennt sicherlich jqueryUI ich hab mir daraus eine einfache "shake" funktion gebastelt die sogar css enthält. Ich habe dafür den Shaker Effect genutzt. Nun weiss ich aber nciht wie ich diesen effect aufrufenkan(mit hilfe eines buttons(beispiel klick. Ansich funzt alles wunderbar aber ich muss leider auf "demo-box make bg-color visibel" klicken damit es anfängt zu shaken.

onclick="myFunction() kommt also nicht in Frage da es net funzt.

HTML-Code:

---

<script>
$(function(shake_by_time){
                var demoTimeout;
                $('#shake_me').click(function(){
                        $this = $(this);
                        clearTimeout(demoTimeout);
                        $this.trigger('startShake');
                        demoTimeout = setTimeout(function(){$this.trigger('stopShake');}, 700)
                });
                $('#shake_me').jshaker({
                        x: 4,
                        y: 0,
                        rotation: 0
                });

                shakeStart();
               
});
</script>

....

<div id="shake_me">demo-box make bg-color visibel</div> // dieser Inhalt macht den shaker

<button id="btn"> Click to Shake </button>

---

ich glaube ich muss iwas mit document.getElementsByClassName machen, aber ich hab kp wie ich das machen soll damit der Button funktioniert

kann einer sagen was ich tippen muss ?

Wenn du jQuery verwenden willst, schadet es nicht sich ein wenig damit auseinander zu setzen.
In der jQuery UI API Documentation steht ja eigentlich schon drin was du brauchst:

Code:

---

$( document ).click(function() {
  $( "#toggle" ).effect( "shake" );

});

---

Statt document nimmst du jetzt halt das Element, welches du mit der Funktion belegen willst.

THX für die antwort, ich werde ma schauen ob es klappt =)

Frage:

Ich würde gern einen dashboard erstellen wo ich namen + email + infotext einfügen kann. Ich könnte das per hand in HTML machen, jedoch will ich das gern dynamisch machen. Sprich ich hab ein extra feld wo ich alles eintragen kann + speichern. Ist es möglich das dieser Vorgang auch in offline modus funktioniert?

Zitat:

---

Zitat von VD3???

Ich würde gern einen dashboard erstellen wo ich namen + email + infotext einfügen kann. Ich könnte das per hand in HTML machen, jedoch will ich das gern dynamisch machen. Sprich ich hab ein extra feld wo ich alles eintragen kann + speichern. Ist es möglich das dieser Vorgang auch in offline modus funktioniert?

---

Was ist an einem extra Feld dynamisch?

Ich denke, er meinte auf dem Dashboard wird das alles angezeigt.
Er möchte aber nicht, das alles dort statisch rumliegt und er jedes Mal seine HTML-Datei anfassen muss, um was hinzuzufügen,
sondern eben über dieses Feld.

Mit JavaScript only geht's jedenfalls nicht, auch nicht "online". Wenn du z.B. PHP installiert hast, geht das schon (auch "offline").

Zitat:

---

Zitat von Eli

Wenn du z.B. PHP installiert hast, geht das schon (auch "offline").

---

Und wie willst du ein serverseitiges Script ohne Server ausführen?
Irgendwer muss dem Interpreter Bescheid geben, dass er arbeiten soll. Ein Browser macht dies nicht.

Zitat:

---

Zitat von Whiz-zarD

Und wie willst du ein serverseitiges Script ohne Server ausführen? Irgendwer muss dem Interpreter Bescheid geben, dass er arbeiten soll. Ein Browser macht dies nicht.

---

Ja, den Server kann er sich ja auch installieren.

Dann ist es aber nicht mehr offline ;)

Zitat:

---

Zitat von Whiz-zarD

Dann ist es aber nicht mehr offline ;)

---

Nicht wenn der Server im localhost läuft. Da gibt es sicherlich viele praktische Anwendungen. :-O

Zitat:

---

Zitat von Mivey

Nicht wenn der Server im localhost läuft.

---

Naja, finde ich schon. Offline heißt für mich, dass keinerlei Verbindung zu einem Server aufgebaut wird.
Auch wenn der Server zufällig auf der eigenen Maschine läuft, wird eine Verbindung aufgebaut. Es wird hier ja ein Loopback aufgebaut, folglich muss hier was laufen, was über das Netzwerk kommunizieren kann.
Wenn ein Gerät offline ist, heißt das, dass nicht mal ein Loopback aufgebaut werden kann.

Zitat:

---

Zitat von Whiz-zarD

Naja, finde ich schon. Offline heißt für mich, dass keinerlei Verbindung zu einem Server aufgebaut wird.
Auch wenn der Server zufällig auf der eigenen Maschine läuft, wird eine Verbindung aufgebaut. Es wird hier ja ein Loopback aufgebaut, folglich muss hier was laufen, was über das Netzwerk kommunizieren kann.
Wenn ein Gerät offline ist, heißt das, dass nicht mal ein Loopback aufgebaut werden kann.

---

Kann man auch so sehen. So oder so sicherlich komplett nutzlos für jede praktische real-world Anwendung. Eventuell zum Austesten?

Ich find, btw, das ist echt der bizzarste Hilfe-Thread im MMX, sicherlich aber im Progforum :hehe:

@ Mivey
ja das kann schon sein hier gehts ja immer um Web fragen das für mich ein sammle therad für random fragen die ich nicht jedesmal im thema aufmachen will ^^

@ all
Die Vorschläge hören sich gut an, aber vielleicht sollte ich dann diese offline Geschichte fürn Anfang raus nehmen. Ich könnte natürlich auf google docs oder sogar FB gruppe ausweichen, aber das ist ja nicht wirklich mein ziel.

so leute ne kurze frage, befor ich mich vor dem dozenten blamiere XD

t = time;
m = Math.floor(t/60) %60;
s = t %60;
m = (m < 10) ? "0"+m : m;
s = (s < 10) ? "0"+s : s;

also ich bin mir nicht sicher wie der browser das rechnet: nehmen wir einen wer in sec zb. 1850 s

s= Math.floor(1850/60) %60; ergebnis- 30,83 >> d.h. 30min

diesen wert noch durch 60 und wir kriegen 30min & 50sec

ist da soweit richtig?

Wo liegt denn das Problem?

Code:

---

var second = Math.floor(time / 60);
var minute = time % 60;

---

Warum rechnest du für die sekunden noch mal mit Modulo 60? Das ist doch unsinn.
Math.floor(time / 60) gibt dir schon die 30, und 30 Modulo 60 ergibt nur 0 Rest 30.

Edit:
Außerdem wäre es Sinnvoller den Teil:

Code:

---

m = (m < 10) ? "0"+m : m;
s = (s < 10) ? "0"+s : s;

---

in eine Funktion auszulagern. Also sprich eine Funktion, die dir die Zahl mit den passenden Nullen am Anfang zurückgibt.
Halte dich ein wenig an das DRY-Prinzip.

z.B.

Code:

---

...
m = pad(m, 2) + "m";
s = pad(s, 2) + "s";
...
function pad(num, size) {
    var result = num + "";

    while (result.length < size)
        result = "0" + result;

    return result;
}

---

Das ist jetzt ein bisschen generischer, falls man sowas öfters braucht und sich die Anzahl der Ziffern ändert.
Leider bietet JavaScript von Haus aus keine Möglichkeit Strings bequem zu formatieren.

Danke für den Feedback, hat mir sehr geholfen =)

Nun hab ich ein paar Unklarheiten Bezüglich der Lade zeit bzw Preformance der Internet seiten.

Ich weiss schon mal das zuerst die docs geladen werden und dan erst die bilder. Damit die lade zeit kürzer bleibt fasst man scripte (docs) zusammen genau wie die css ect. Gibts eine Funktion zum download die alle meine css docs zusammen fast in eine x.min.css ? Bzw wie geht man da vor?

Was muss noch alles beachtet werden damit die Seite nicht aus gebremst wird? Klar je nach Anbieter und Lokalisation kann die Übertragungsrate variieren, aber gehen wir mal von der Programmierung aus.

MfG
vd3