Zwei Links ohne ID Dynamisch einen Wert zuweisen
Malcolm Beck´s
- javascript
hi,
nur mal zum Verständnis.
Ich habe 2 Buttons (Lautstärkeregler für ein Video) für jeweils Laut und Leise, wenn man auf „Laut“ klickt, setze ich den Wert für Volume um 10% hoch, dass heisst, in diesem Moment müsste der Wert für „Leise“ auch um 10‰ erhöht werden, damit bei Klick auf „Leise“ ab dem neu gesetzten Wert -10% abgezogen werden können.
Das Problem ist, dass diese Links ohne ID auskommen müssen.
So weit habe ich es eigentlich schon gelöst bekommen, allerdings über einen mMn ungünstigen Weg.
Ich speichere den Aktuell gesetzten Wert in einem rel-Attribut direkt in den Links für „Lauter“ und „Leiser“ (im Firebug kann man es sehr gut nachvollziehen) und zustäzlich in einem Cookie.
Ich weiss nicht, wie ich es erklären soll, daher verlinke ich einfach auf ein Online-Beispiel:
Volume JS
So soll es sein, nur, wie löse ich es am besten?
mfg
Hi,
Ich habe 2 Buttons (Lautstärkeregler für ein Video) für jeweils Laut und Leise, wenn man auf „Laut“ klickt, setze ich den Wert für Volume um 10% hoch, dass heisst, in diesem Moment müsste der Wert für „Leise“ auch um 10‰ erhöht werden, damit bei Klick auf „Leise“ ab dem neu gesetzten Wert -10% abgezogen werden können.
Das klingt weniger sinnvoll.
Der Lautstärkewert wird doch sicher in irgendeiner Variablen o.ä. abgelegt sein? Dann reicht es doch aus, von den Links aus deren Wert um 10 zu erhöhen oder zu verringern.
Das Problem ist, dass diese Links ohne ID auskommen müssen.
Warum?
Ich speichere den Aktuell gesetzten Wert in einem rel-Attribut direkt in den Links für „Lauter“ und „Leiser“ (im Firebug kann man es sehr gut nachvollziehen) und zustäzlich in einem Cookie.
Warum rel-Attribut? Willst du den Wert schon per HTML übergeben?
Rein von JavaScript aus kannst du einem HTML-Elementobjekt problemlos eigene Eigenschaften verpassen (sog. expando-properties). Du solltest nur darauf achten, dass diese mit ggf. schon vorhandenen Eigenschaften kollidieren.
Volume JS
So soll es sein, nur, wie löse ich es am besten?
Da ist ja noch nicht zu erkennen, wie das mit irgendeinem Player interagieren soll.
Was aber zu erkennen ist, ist dass der Wert bereits in „gespeicherter” Form vorliegt - momentan in dem P-Element, in dem du ihn zur Kontrolle ausgeben lässt. Auch von dort wäre er wieder auslesbar, so dass die Buttons selber voneinander nichts weiter wissen müssen.
MfG ChrisB
Hi,
Rein von JavaScript aus kannst du einem HTML-Elementobjekt problemlos eigene Eigenschaften verpassen (sog. expando-properties). Du solltest nur darauf achten, dass diese mit ggf. schon vorhandenen Eigenschaften kollidieren.
Dass im letzten Satz ein „nicht” fehlte, wird dem aufmerksamen Leser wohl nicht entgangen sein :-)
MfG ChrisB
hi,
Rein von JavaScript aus kannst du einem HTML-Elementobjekt problemlos eigene Eigenschaften verpassen (sog. expando-properties). Du solltest nur darauf achten, dass diese mit ggf. schon vorhandenen Eigenschaften kollidieren.
Dass im letzten Satz ein „nicht” fehlte, wird dem aufmerksamen Leser wohl nicht entgangen sein :-)
Ist mir garnicht aufgefallen, ich lese mit Autovervollständigen :)
mfg
Grundlage für Zitat #1593.
hi,
Der Lautstärkewert wird doch sicher in irgendeiner Variablen o.ä. abgelegt sein? Dann reicht es doch aus, von den Links aus deren Wert um 10 zu erhöhen oder zu verringern.
Das erreiche ich ja derzeit mit dem rel-Attribut (ich wusste mir nicht anders zu helfen).
Das Problem ist, dass diese Links ohne ID auskommen müssen.
Warum?
Mit getElementById
scheint mir das programmieren leichter, allerdings auch HTML-Technisch aufwendiger.
Rein von JavaScript aus kannst du einem HTML-Elementobjekt problemlos eigene Eigenschaften verpassen (sog. expando-properties). Du solltest nur darauf achten, dass diese mit ggf. schon vorhandenen Eigenschaften kollidieren.
Mir kam auch schon die Idee, den Wert direkt in einem body-Attribut zu speichern, dann könnte ich statt „rel“ ja ein volume-Attribut anlegen.
Kann es bei selbst definierten Attributen zu Problemen in älteren Browsern kommen?
Ist überhaupt der Ansatz mit Attributen der richtige?
Volume JS
Da ist ja noch nicht zu erkennen, wie das mit irgendeinem Player interagieren soll.
http://dj-tut.de/z_test/selfhtml/mynewjs.php
Sorry, ist noch etwas unübersichtlich und durcheinander (vor allem für mich), daher wollte ich es Schritt für Schritt machen.
Was aber zu erkennen ist, ist dass der Wert bereits in „gespeicherter” Form vorliegt - momentan in dem P-Element, in dem du ihn zur Kontrolle ausgeben lässt. Auch von dort wäre er wieder auslesbar, so dass die Buttons selber voneinander nichts weiter wissen müssen.
Hier ist wieder mein Problem mit IDs.
Ich übergebe einer Funktion den Wert und brauche, um diesen Wert ins HTML zu schreiben, ein Element mit einer ID, weil ich nicht weiss, wie ich es anders machen kann.
Welche Methode wäre hier die Sinnvollste?
mfg
Hi,
Das Problem ist, dass diese Links ohne ID auskommen müssen.
Warum?Mit
getElementById
scheint mir das programmieren leichter, allerdings auch HTML-Technisch aufwendiger.
Ich wollte nicht wissen, warum das ein Problem ist, sondern warum keine IDs vergeben werden können.
Mir kam auch schon die Idee, den Wert direkt in einem body-Attribut zu speichern, dann könnte ich statt „rel“ ja ein volume-Attribut anlegen.
Kann es bei selbst definierten Attributen zu Problemen in älteren Browsern kommen?
Ist überhaupt der Ansatz mit Attributen der richtige?
Fraglich. Klingt eher so, als ob es eine simple JavaScript-Variable auch tun würde.
Hier ist wieder mein Problem mit IDs.
Ich übergebe einer Funktion den Wert und brauche, um diesen Wert ins HTML zu schreiben, ein Element mit einer ID, weil ich nicht weiss, wie ich es anders machen kann.
Welche Methode wäre hier die Sinnvollste?
Die, erst mal die Frage zu beantworten, warum keine IDs vergeben werden können.
MfG ChrisB
hi,
Ich wollte nicht wissen, warum das ein Problem ist, sondern warum keine IDs vergeben werden können.
Falls auf einer Seite mehr als ein Video vorkommt -- bzw. möchte ich mir die Option offen halten, mehrere Videos in eine Seite einzubetten.
In diesem Fall müsste ja jeder Button eine neue ID bekommen, die ich dann noch im Script kennen muss.
Fraglich. Klingt eher so, als ob es eine simple JavaScript-Variable auch tun würde.
http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren
„Wenn Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren, dann sind diese Variablen global.“
Das muss ich gleich mal testen.
mfg
Hi,
Ich wollte nicht wissen, warum das ein Problem ist, sondern warum keine IDs vergeben werden können.
Falls auf einer Seite mehr als ein Video vorkommt -- bzw. möchte ich mir die Option offen halten, mehrere Videos in eine Seite einzubetten.
In diesem Fall müsste ja jeder Button eine neue ID bekommen, die ich dann noch im Script kennen muss.
Generiert dein Script denn auch den Player dynamisch?
Dann arbeite gleich objektorientiert, dann brauchst du auch keine IDs, um die vom Script generierten HTML-Elemente anzusprechen, sondern kannst die Referenzen auf diese gleich bei ihrer Erstellung als Eigenschaften deines Objektes ablegen.
(Bzw., dann brauchst du eigentlich überhaupt keine Referenzen auf die Buttons mehr - wenn diese einmal mit dem Click-Handler ausgestattet sind, brauchst du sie ja anschliessend überhaupt nicht mehr ansprechen, sofern du nicht noch mehr mit ihnen vor hast.)
MfG ChrisB
hi,
Generiert dein Script denn auch den Player dynamisch?
Ja, so ist es gedacht. Ich habe ein <object>
-Element und ersetze es mit Javascript durch <embed>
(als Lernaufgabe), und dass <embed>
möchte ich komplett über Javascript steuerbar machen.
(Bzw., dann brauchst du eigentlich überhaupt keine Referenzen auf die Buttons mehr - wenn diese einmal mit dem Click-Handler ausgestattet sind, brauchst du sie ja anschliessend überhaupt nicht mehr ansprechen, sofern du nicht noch mehr mit ihnen vor hast.)
Objektorientiert bedeutet doch in diesem Zusammenhang, dass ich viele kleine funktionen (helfer) habe, die alle teilaufgaben übernehmen, und in einer Funktion zusammen geführt werden, oder?
So habe ich jedenfalls OOP verstanden.
mfg
Hi,
Objektorientiert bedeutet doch in diesem Zusammenhang, dass ich viele kleine funktionen (helfer) habe, die alle teilaufgaben übernehmen, und in einer Funktion zusammen geführt werden, oder?
So habe ich jedenfalls OOP verstanden.
Jein.
Nein:
Du hast eine Klasse, und die hat bestimmte Methoden. Bspw. eine Klasse Player, und die hat Methoden zur Initialisierung (erzeugt das nötige HTML für einen neuen Player, verpasst den Elementen die Eventhandler, hängt den Player ggf. auch gleich ins DOM ein), zur Lautstärkeregelung, etc.
Und wenn du einen weiteren Player in der Seite haben willst, dann erzeugst du eine neue Instanz dieser Player-Klasse.
Ja:
Es ist lediglich eine spezielle Eigenart von JavaScript, dass dort „Klassen” und auch deren Methoden über function abgebildet werden.
http://aktuell.de.selfhtml.org/artikel/javascript/oomodell/
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/
MfG ChrisB
hi,
Und wenn du einen weiteren Player in der Seite haben willst, dann erzeugst du eine neue Instanz dieser Player-Klasse.
Ja, sowas in diese richtung hatte ich ja schon.
<script type="text/javascript"> <!-- HTML-Dokument -->
var addParam = new Array();
addParam["id"] = 'container';
addParam["swfplayer"] = '/js/player_flv_multi.swf';
addParam["configxml"] = '/js/flv_config_multi.xml';
addParam["video"] = '/dj-tut-videos/n-the-mix.flv';
addEmbedVideo(addParam);
</script>
Und es funktioniert auch mit mehreren Videos auf einer Seite -- und die Controller funktionieren natürlich unabhängig voneinander.
http://aktuell.de.selfhtml.org/artikel/javascript/oomodell/
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/
Danke für die Links, die werde ich gleich mal durcharbeiten.
Mit den Variablen habe ich es nämlich noch nicht ganz verstanden.
Eine frage habe ich aber noch.
function volumetest(vol)
{
return vol;
}
function volumecontrol(value)
{
var volume = (volumetest(vol)) ? volumetest(vol) : 70 ;
}
<button onclick="volumecontrol(+10)">Lauter</button>
<button onclick="volumecontrol(-10)">Leiser</button>
Wie soll ich in dem Fall, wo auf einen der button geklickt wird, den Wert speichern und auch wieder abrufen? Irgendwie versagt hier meine Logik komplett.
mfg
Hi,
<button onclick="volumecontrol(+10)">Lauter</button>
<button onclick="volumecontrol(-10)">Leiser</button>
>
> Wie soll ich in dem Fall, wo auf einen der button geklickt wird, den Wert speichern und auch wieder abrufen?
onclick-Attribute raus aus dem HTML, Eventhandler stattdessen per JavaScript beim Erzeugen der Button-Elemente (auch Aufgabe der Initialisierungsfunktion des Player-Objektes) dynamisch zuweisen.
Dabei keine frei im globalen Gültigkeitsbereich herumschwebende Funktion als Handlerfunktion zuweisen, sondern eine Methode des Player-Objektes\*. Diese hat Zugriff auf die Eigenschaften des Player-Objektes - also auch auf die, in welcher der aktuelle Lautstärkewert abgelegt ist.
\* Zwei einzelne Methoden für Hoch- und Runterdrehen der Lautstärke zu verwenden, bietet sich dabei (für den Anfang) an. Dann braucht nämlich kein Parameter übergeben zu werden, was sich bei der dynamischen Zuweisung von Eventhandlern über JavaScript etwas komplizierter gestaltet (üblicherweise über Closures; direkt am HTML-Elementobjekt des Buttons eine expando-Eigenschaft abzulegen wäre auch ein möglicher Weg).
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
hi,
onclick-Attribute raus aus dem HTML, Eventhandler stattdessen per JavaScript beim Erzeugen der Button-Elemente (auch Aufgabe der Initialisierungsfunktion des Player-Objektes) dynamisch zuweisen.
* Zwei einzelne Methoden für Hoch- und Runterdrehen der Lautstärke zu verwenden, bietet sich dabei (für den Anfang) an.
Das klingt zwar schwer, aber nicht unmöglich. Ich werde es jetzt einfach mal versuchen. Zur Not kann ich ja auch erstmal ein Script schreiben, dass mit IDs arbeitet, um einfach die Logik zu verinnerlichen.
Event Handler im Skript ist auch genau das, was ich lernen möchte -- jetzt habe ich wenigstens Ansatzweise verstanden, wie ich dass umsetzen kann.
Danke für die Hilfe und vielen Hinweise -- ich werde mal sehen, was ich davon alleine umgesetzt bekomme.
mfg
[latex]Mae govannen![/latex]
Generiert dein Script denn auch den Player dynamisch?
Ja, so ist es gedacht. Ich habe ein
<object>
-Element und ersetze es mit Javascript durch<embed>
(als Lernaufgabe), und dass<embed>
möchte ich komplett über Javascript steuerbar machen.
Und weshalb ersetzt du ein passendes (object) durch ein unpassendes (embed) Element?
Cü,
Kai
hi,
Und weshalb ersetzt du ein passendes (object) durch ein unpassendes (embed) Element?
Embed scheint ja passender zu sein. Jedenfalls habe ich gemerkt, dass die meisten Video-Portale, wenn sie ein embed-Code anbieten, eben das Invalide <embed> anbieten, statt <object>.
Da muss ja was dran sein, warum die dass so Handhaben. Auch der Longtail-Player erzeugt ein <embed>, statt <object>.
Mich würde mal interessieren, warum diese Portale das so Handhaben, und was hier wirklich geeigneter ist.
mfg
@@Malcolm Beck´s:
nuqneH
Jedenfalls habe ich gemerkt, dass die meisten Video-Portale, wenn sie ein embed-Code anbieten, eben das Invalide <embed> anbieten, statt <object>.
Da muss ja was dran sein, warum die dass so Handhaben.
Weil viele Entwickler, die es eigentlich besser wissen sollten, gar nicht wissen, wie es richtig geht.
Und so, wie die Rechtschreibdeform viele Fehler als Regeln sanktionierte (und viele Unsinnigkeiten einführte), wird dies auch HTML5 tun. [HTML5 §4.8.4]
Qapla'
hi,
Weil viele Entwickler, die es eigentlich besser wissen sollten, gar nicht wissen, wie es richtig geht.
Ich habe jetzt einen unterschied ausfindig gemacht. Vielleicht auch ein Grund, warum diese Entwickler embed statt object nutzen, was ich auch durchaus nachvollziehen kann.
Das Embed-Element wird auch bei deaktivierten Styles angezeigt, das Object-Element hingegen nicht.
http://dj-tut.de/z_test/selfhtml/embedvsobject.html
Was ist nun wichtiger, wie sollte man hier vorgehen? Ich finde die Funktionalität sollte auch bei deaktiviertem CSS gegeben sein, warum kriegt es object nicht hin?
mfg
@@Malcolm Beck´s:
nuqneH
Das Embed-Element wird auch bei deaktivierten Styles angezeigt, das Object-Element hingegen nicht.
Wie kommst du darauf?
Da ist kein Stylesheet.
Qapla'
hi,
Das Embed-Element wird auch bei deaktivierten Styles angezeigt, das Object-Element hingegen nicht.
Wie kommst du darauf?
Da ist kein Stylesheet.
Deaktiviere mal CSS, wenn du auf der Seite bist (mit dem FF bei mir 3.5) -- ich habe mich auch schon gefragt, warum bei deaktivierstem CSS das Video nicht angezeigt wird.
Wenn das Video läuft und du während dessen CSS deaktivierst, läuft dass Video zwar weiter, aber man sieht es nicht.
Das habe ich hier an meinem Arbeitsrechner, und auch Zuhause auf der Kiste.
mfg
@@Malcolm Beck´s:
nuqneH
Wenn das Video läuft und du während dessen CSS deaktivierst, läuft dass Video zwar weiter, aber man sieht es nicht.
Kann ich nicht bestätigen.
Qapla'
hi,
Wenn das Video läuft und du während dessen CSS deaktivierst, läuft dass Video zwar weiter, aber man sieht es nicht.
Kann ich nicht bestätigen.
Wird Object bei dir in jedem Fall angezeigt?
Ich habe es jetzt nochmal getestet, auch im Abgesicherten Modus ohne Addons, Object wird nicht angezeigt, wenn ich "Styles" deaktiviere.
mfg
@@Malcolm Beck´s:
nuqneH
Wird Object bei dir in jedem Fall angezeigt?
Ja.
wenn ich "Styles" deaktiviere.
Wie tust du das? Web Developer Toolbar?
Qapla'
hi,
wenn ich "Styles" deaktiviere.
Wie tust du das? Web Developer Toolbar?
Über Ansicht -> Webseiten-Stil -> Kein Stil.
Vermutlich ist die von mir verwendete Bezeichnung, CSS-Deaktivieren, falsch. Webseiten-Stil deaktivieren.
mfg
ARE!
Über Ansicht -> Webseiten-Stil -> Kein Stil.
jetzt kann ich es auch bestätigen, ich weiß ja nicht, wie man im FF CSS deaktiviert. Mit Safari hatte ich es getestet (dort geht's unter Entwickler -> Styles deaktivieren) und da bleibt das Object-Video weiterhin zu sehen!
Viele Grüße aus Frankfurt/Main,
Patrick
AOP!
Über Ansicht -> Webseiten-Stil -> Kein Stil.
jetzt kann ich es auch bestätigen, ich weiß ja nicht, wie man im FF CSS deaktiviert. Mit Safari hatte ich es getestet (dort geht's unter Entwickler -> Styles deaktivieren) und da bleibt das Object-Video weiterhin zu sehen!
Rückblickend auf diesen Thread bin ich auch ein wenig verwirrt über dieses FF-Feature.
Mich würde mal interessieren, was dieses Feature im FF überhaupt sein soll? Ich hielt es immer für "CSS" deaktivieren, aber es scheint ja mehr dahinter zu stecken, als nur die Stile.
Macht auch wenig Sinn, dass das Video ausgeblendet wird, wenn CSS deaktiviert wird. Aber was sollen Webseiten-Stile sein, wenn nicht CSS?
Eine kurze Recherche brachte auch nichts brauchbares.
mfg
@@Malcolm Beck´s:
nuqneH
Über Ansicht -> Webseiten-Stil -> Kein Stil.
OK, da sehe ich’s auch. Muss ein Bug im Firefox sein.
Aber welcher Nutzer benutzt das schon?
Qapla'
hi,
Aber welcher Nutzer benutzt das schon?
Na ich ;)
Mit dieser Option teste ich Seiten ohne CSS -- jedenfalls dachte ich, dass ich das tue.
Dann kann ich ja doch bei object bleiben, muss mir nur das verwenden dieses FF-Features abgewöhnen. Wer weiss, was dieses Feature noch alles falsch darstellt.
Danke dir und Onkel P. für die Hilfe und fürs testen.
mfg
Aber welcher Nutzer benutzt das schon?
Ich.
Du glaubst gar nicht wie viel man mit dieser Einstellung eine Seitendarstellung beschleunigen kann.
Struppi.
[latex]Mae govannen![/latex]
Der Lautstärkewert wird doch sicher in irgendeiner Variablen o.ä. abgelegt sein? Dann reicht es doch aus, von den Links aus deren Wert um 10 zu erhöhen oder zu verringern.
Das erreiche ich ja derzeit mit dem rel-Attribut (ich wusste mir nicht anders zu helfen).
Warum kannst du die Werte nicht direkt übergeben? onclick="volumecontrol(10)"
bzw. onclick="volumecontrol(-10)"
?
Warum?
Mit getElementById scheint mir das programmieren leichter, allerdings auch HTML-Technisch aufwendiger.
Was ist an <button id="lauter" onclick="...>
so viel aufwendiger als an <button onclick="....>
BTW: Du solltest den Buttons noch ein Attribut type="button"
spendieren
Cü,
Kai
hi,
Warum kannst du die Werte nicht direkt übergeben?
onclick="volumecontrol(10)"
bzw.onclick="volumecontrol(-10)"
?
Das frage ich mich gerade auch ;)
Ich mache es gerne komplizierter als es ist.
Was ist an
<button id="lauter" onclick="...>
so viel aufwendiger als an<button onclick="....>
Das Problem mit IDs ist ja, dass sie eindeutig sein sollen. Diese Buttons können aber mehrmals im Dokument vorkommen.
Auch möchte ich Generell lernen, eher ohne IDs zu programmieren, soweit es möglich ist.
BTW: Du solltest den Buttons noch ein Attribut
type="button"
spendieren
Danke für den Hinweis, ist geschehen.
mfg
[latex]Mae govannen![/latex]
Ich mache es gerne komplizierter als es ist.
Kenne ich. „Kompliziert“ ist mein zweiter Vorname.
Was ist an
<button id="lauter" onclick="...>
so viel aufwendiger als an<button onclick="....>
Das Problem mit IDs ist ja, dass sie eindeutig sein sollen. Diese Buttons können aber mehrmals im Dokument vorkommen.
Auch möchte ich Generell lernen, eher ohne IDs zu programmieren, soweit es möglich ist.
Unterscheidung wäre noch über Klassen möglich, z.B. <button class="increasevol" type...><button class="decreasevol" type...>
, welche man dann im JS per elementreferenz.className
auslesen und entsprechend verarbeiten könnte.
Wenn die Buttons mehrfach vorkommen können, stellt sich gleich die nächste Frage: Sollen sie nur auf auf genau ein bestimmtes Video einwirken oder die Lautstärke für alle Videos gleichzeitig setzen? Im ersten Fall müßtest du wiederum eine Unterscheidungsmöglichkeit haben. Einfachste Lösung wäre ein weiterer Parameter beim Funktionsaufruf. Aber du siehst, es kommt immer wieder eine neue Anforderung hinzu, vielleicht weitere Controls ... insofern ist die OOP-Herangehensweise, die Chris vorgeschlagen hat, sicherlich auf lange Sicht sinnvoll, um pro Objekt alle Eigenschaften unabhängig voneinander zu verwalten.
Cü,
Kai
hi,
Wenn die Buttons mehrfach vorkommen können, stellt sich gleich die nächste Frage: Sollen sie nur auf auf genau ein bestimmtes Video einwirken oder die Lautstärke für alle Videos gleichzeitig setzen?
Was das Volume angeht, wäre es natürlich Sinnvoller, wenn diese gleich Global auf der Seite für alle Videos greift -- wäre aber auch kein Problem, wenn für jedes Video Seperat.
Mein Problem ist derzeit nur, wie ich ohne Cookies und ohne Attribute für ein HTML-Element diesen Wert gespeichert bekomme; da will meine Logik nicht durchsteigen.
Ich muss mich mal da ein wenig reinlesen -- ich habe vor ein Paar Tagen einfach angefangen zu machen, ohne viel zu lesen. Falsche herangehensweise.
mfg
[latex]Mae govannen![/latex]
Wenn die Buttons mehrfach vorkommen können, stellt sich gleich die nächste Frage: Sollen sie nur auf auf genau ein bestimmtes Video einwirken oder die Lautstärke für alle Videos gleichzeitig setzen?
Was das Volume angeht, wäre es natürlich Sinnvoller, wenn diese gleich Global auf der Seite für alle Videos greift -- wäre aber auch kein Problem, wenn für jedes Video seperat.
Ein Video, das z.B. eine sehr laute Passage enthält, will man üblicherweise mit anderen Werten fahren als ein Video, das nur sehr leise ist. Insofern hat getrennte Einstellbarkeit deutliche Vorteile. Stell dir mal vor, $Leser regelt die Lautstärke auf max, schaut das leise Video, denkt an nichts böses und startest dann das laute Video ... Dann mußt du seine Herzmedikamente (oder die Beerdigung) zahlen *gg*
Cü,
Kai
hi,
Ein Video, das z.B. eine sehr laute Passage enthält, will man üblicherweise mit anderen Werten fahren als ein Video, das nur sehr leise ist. Insofern hat getrennte Einstellbarkeit deutliche Vorteile.
Ja, dass stimmt natürlich.
Stell dir mal vor, $Leser regelt die Lautstärke auf max, schaut das leise Video, denkt an nichts böses und startest dann das laute Video ... Dann mußt du seine Herzmedikamente (oder die Beerdigung) zahlen *gg*
Ich bin jetzt nur von meinem Fall ausgegangen -- und in meinem Fall ist das kein Problem, da ich die Lautstärke der Videos selber bearbeite, und da achte ich auf ein Konstantes Level.
Wobei ich dir zustimme und es auch so Handhaben werde.
mfg
Hallo,
hast du es nicht schon gelöst?
Wenn du die Seite nicht verlässt, wo dann Markup und Js mischen?
Wenn du sie verlässt, dann gibt es auch andere Wege, Querystring, Cookie, window["name"].
Gruß
jobo
hi,
hast du es nicht schon gelöst?
Qua-si ;)
Wenn du die Seite nicht verlässt, wo dann Markup und Js mischen?
Ich verstehe gerad die Frage nicht.
Wenn du sie verlässt, dann gibt es auch andere Wege, Querystring, Cookie, window["name"].
Cookie genügt für diese Spielerei. Ist übrigens schon mit einer Cookie-Funktion versehen.
mfg
hi,
ich habe diese OOP-Geschichte, Methoden und Objekte nicht verstanden, daher habe ich mir erstmal eine einfache Lösung gebastelt, mit der ich schon ganz zufrieden bin (auch wenn das Script nicht unbedingt durch schönheit glänzt).
http://dj-tut.de/z_test/selfhtml/my-volume-js.php
Allerdings habe ich ein anderes Problem.
Ich kann zwar setAttribute per knopfdruck setzen, nur beim auslesen bekomme ich den ersten Wert des Attributes, so wie er gesetzt wurde.
Also änderungen am Attribut kann ich mit getAttribute nicht auslesen, obwohl ich sie mit setAttribute ändern kann, gibt es da einen Trick, den Aktuell gesetzten Wert auszulesen?
<script type="text/javascript">
function setnewattribute()
{
var divcontainer = document.getElementById("container");
var button = document.getElementById("mybutton");
divcontainer.setAttribute("myattr", '50'); // Attribut setzen
button.onclick = function() {
divcontainer.setAttribute("myattr", '100'); // Bei Klick Attributwert ändern
}
/* Testausgabe */
document.getElementById("wert").innerHTML = divcontainer.getAttribute("myattr");
/*
Bei der Ausgabe bekomme ich nur den ersten Wert (50),
obwohl sich der Wert bei klick ändert (Firebug)
*/
}
</script>
Online-Beispiel: http://dj-tut.de/z_test/selfhtml/setattribute-js.php
mfg
Also änderungen am Attribut kann ich mit getAttribute nicht auslesen, obwohl ich sie mit setAttribute ändern kann, gibt es da einen Trick, den Aktuell gesetzten Wert auszulesen?
Du liest den Wert nicht aus.
button.onclick = function() {
divcontainer.setAttribute("myattr", '100'); // Bei Klick Attributwert ändern
}
Du änderst ihn nur.
Struppi.
hi,
Du liest den Wert nicht aus.
button.onclick = function() {
divcontainer.setAttribute("myattr", '100'); // Bei Klick Attributwert ändern
}Du änderst ihn nur.
Das ist mir gestern kurz nach meinem Posting auch aufgefallen.
Gibt es denn eine möglichkeit, den Aktuell gesetzten Wert trotzdem auszulesen, ohne auf onclick zu reagieren?
Wenn ich mit onclick arbeite, habe ich ein Problem mit der reihenfolge, da die Elemente Dynamisch erzeugt werden und ins DOM eingefügt werden, bevor ich auf klicks reagieren kann.
Das ist auch sehr schwer zu erklären für mich.
Das Schema an sich:
-- Video mit diversen Parametern: vars="flv=/path.flv&volume=70"
/* Den Wert für „volume“ möchte ich bei klick auf die Buttons Dynamisch ändern */
-- Video in den DOM einfügen
-- Button mit IDs werden erzeugt und ins DOM eingefügt
Erst nach dem die Buttons im DOM sind, kann ich ja mittels ID auf onclick reagieren.
Wie kann ich jetzt noch den Wert für den Parameter „volume“ bei klick ändern?
Den Parametern kann ich keine ID mitgeben, so wie bei den button.
mfg
Hi,
Wie kann ich jetzt noch den Wert für den Parameter „volume“ bei klick ändern?
Den Parametern kann ich keine ID mitgeben, so wie bei den button.
Aber auf sie zugreifen kannst du trotzdem - bspw. dadurch, dass sie Nachfahrenelemente des OBJECT sind.
Allerdings hilft das Austauschen von Parameter-Attributen oder selbst des PARAM-Elements IIRC im IE wenig - da ist das Austauschen des kompletten OBJECTs die praktikabelste Methode. (Sofern der Flash-Player nicht direkt per JavaScript steuerbar ist.)
MfG ChrisB
hi,
Aber auf sie zugreifen kannst du trotzdem - bspw. dadurch, dass sie Nachfahrenelemente des OBJECT sind.
Ich habe es jetzt endlich gelöst bekommen.
Das Problem war, und das hatte ich hier nicht richtig formuliert gekriegt, dass, wenn man das Video anhält oder stoppt, dass bei erneutem Play klicken der Defaultwert für die Lautstärke gesetzt wurde, nicht der, den man mit den Buttons eingestellt hat.
Die lösug ist, bei klick auf Play einfach die Aktuell gesetzte Lautstärke auslesen und erneut setzen.
Das Script sieht zwar Fürchterlich aus, aber es funktioniert :) (auch mit mehreren Videos)
http://dj-tut.de/z_test/selfhtml/my-volume-js.php?
Jetzt werde ich versuchen, dass Chaos in den Griff zu kriegen und das Script aufräumen.
Was haltet ihr denn Generell von diesem Lösungsansatz? Zu umständlich, auch für das Rendering in den Browsern, oder kann man damit leben?
Allerdings hilft das Austauschen von Parameter-Attributen oder selbst des PARAM-Elements IIRC im IE wenig
Ich habe es jetzt in einem Multiplen IE6, IETester und in einem 8er getestet -- die Lautstärke lässt sich zwar einstellen, wird aber nicht in einem Cookie gespeichert.
Aber damit kann ich leben. IE-User können überhaupt froh sein, dass sie meine Seite betreten dürfen, ohne dass ihr Browser gleich abstürzt :)
mfg
[latex]Mae govannen![/latex]
Ich habe es jetzt in einem Multiplen IE6, IETester und in einem 8er getestet -- die Lautstärke lässt sich zwar einstellen, wird aber nicht in einem Cookie gespeichert.
Aber damit kann ich leben. IE-User können überhaupt froh sein, dass sie meine Seite betreten dürfen, ohne dass ihr Browser gleich abstürzt :)
Na dann brauche ich dir ja nicht zu erzählen, daß IE teilweise mit setAttribute() und getAttribute() so seine Probleme hat :)
embed.setAttribute("id", id_js_embed);
embed.setAttribute("src", '/js/player_flv_multi.swf');
embed.setAttribute("flashvars", 'flv=/dj-tut-videos/n-the-mix.flv&configxml=/js/flv_config_multi.xml');
embed.setAttribute("type","application/x-shockwave-flash");
Eigentlich sollte es auch so gehen:
embed.id = id_js_embed;
embed.src ='/js/player_flv_multi.swf';
embed.flashvars = 'flv=/dj-tut-videos/n-the-mix.flv&configxml=/js/flv_config_multi.xml';
embed.type = "application/x-shockwave-flash";
bin aber jetzt zu müde, um noch groß was zu testen.
Cü,
Kai
hi,
IE-User ... ohne dass ihr Browser gleich abstürzt :)
Na dann brauche ich dir ja nicht zu erzählen, daß IE teilweise mit setAttribute() und getAttribute() so seine Probleme hat :)
Ne, nicht wirklich ;)
Eigentlich sollte es auch so gehen:
embed.id = id_js_embed;
embed.src ='/js/player_flv_multi.swf';
embed.flashvars = 'flv=/dj-tut-videos/n-the-mix.flv&configxml=/js/flv_config_multi.xml';
embed.type = "application/x-shockwave-flash";
>
> bin aber jetzt zu müde, um noch groß was zu testen.
Ich hab's mal mit dem FF getestet,
~~~javascript
var embed = document.createElement('embed');
embed.id = id_js_embed;
embed.src ='/js/player_flv_multi.swf';
embed.class = 'js_embed';
embed.flashvars = 'flv=/dj-tut-videos/n-the-mix.flv&configxml=/js/flv_config_multi.xml';
embed.type = "application/x-shockwave-flash";
div_container.appendChild(embed);
komischerweise werden weder „class“, noch die „flashvars“ übernommen (und hier werden sie nicht ge„highlight“et), alle anderen Variablen schon.
Da ich mich aber Spontan dazu entschlossen habe, Gunnars empfehlung zu beherzigen, ist es halb so Wild.
Ich binde das Video direkt per Object ein und füge mittels Javascript nur noch die Steuerungselemente ein -- sollte eigentlich reichen.
Zumindest habe ich endlich Blut geleckt, was Javascript angeht :)
mfg
@@Malcolm Beck´s:
nuqneH
komischerweise werden weder „class“,
Der alte Hut sollte nicht mehr komisch sein. 'class' ist in JavaScript ein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort>, deshalb heißt die Eigenschaft 'http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className'.
noch die „flashvars“ übernommen
Mal geraten: Vielleicht muss es 'flashVars' heißen?
Qapla'
hi,
Der alte Hut sollte nicht mehr komisch sein. 'class' ist in JavaScript ein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort>, deshalb heißt die Eigenschaft 'http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className'.
Ich hatte schon das vergnügen mit className, und zwar in fogenden Konstrukt:
embed.setAttribute('className', 'container');
So funktionierte es nicht, hier musste ich 'class' setzen, ansonsten wird dem Element das Attribut <elem className="container">
hinzugefügt.
Daher hatte ich className im Gedanken ausgeschlossen.
Mal geraten: Vielleicht muss es 'flashVars' heißen?
Mal schauen, ob es sich highlighten lässt (sitze zuhause und habe keine möglichkeit, es zu testen)
embed.className = 'container';
embed.flashVars = 'flv=/dj-tut-videos/n-the-mix.flv&configxml=/js/flv_config_multi.xml';
className passt, flashVars teste ich heute Abend.
Danke für den Hinweis und die Links.
mfg
hi,
className passt, flashVars teste ich heute Abend.
Bis auf flashVars funktioniert alles.
embed.id = id_js_embed;
embed.src = '/js/player_flv_multi.swf';
embed.className = 'js_embed';
embed.type = "application/x-shockwave-flash";
embed.flashVars = 'flv=/video.flv';
Für die flashVars muss man wohl weiterhin auf „setAttribute“ zurückgreifen.
mfg
hi,
bevor der Thread verschwindet.
Es geht um JQuery: Ich möchte einige Elemente Faden, das setzt aber vorraus, dass ich diese Elemente auf display:none
setze.
Das kann ich ja mit JQuery direkt lösen
$(document).ready(function(){
$("#content").css("display","none");
$("#content").fadeIn(1000);
});
Das Problem ist aber, dass die Elemente bereits zu sehen sind, und erst wenn die Seite fertig geladen ist, ausgeblendet und wieder reingefadet werden.
Also muss ich die Elemente direkt beim Seitenaufruf ausblenden, mit CSS. Dann ist aber das Problem, dass, wenn der Client Javascript deaktiviert hat, er/sie den Inhalt nie zu Gesicht bekommen.
Also muss ich auch die Styles mit Javascript setzen, dass geht aber nur, wenn die Seite bereits geladen ist.
Ich habe mir eine Notlösung einfallen lassen.
Notlösung:
Im Head der Seite binde ich ein Javascript ein, in dem folgendes steht:
document.write('<style type="text/css">[id="content"]{display:none;}<\/style>');
Es funktioniert zwar soweit, nur werde ich das Gefühl nicht los, dass diese Variante nicht das Gelbe vom Ei ist; irgendwelche Tipps, wie ich es sonst und vor allem Sinnvoll lösen könnte?
Hier könnt ihr euch das ganze Online ansehen.
mfg
@@Malcolm Beck´s:
nuqneH
Das Problem ist aber, dass die Elemente bereits zu sehen sind, und erst wenn die Seite fertig geladen ist, ausgeblendet und wieder reingefadet werden. […]
Es funktioniert zwar soweit, nur werde ich das Gefühl nicht los, dass diese Variante nicht das Gelbe vom Ei ist; […]
Dein Gefühl trügt nicht.
irgendwelche Tipps, wie ich es sonst und vor allem Sinnvoll lösen könnte?
Javascript mehrstufig zünden [PERFORMANCE-BP2]
S.a. http://forum.de.selfhtml.org/archiv/2009/10/t191732/#m1278745
Qapla'
hi,
Javascript mehrstufig zünden [PERFORMANCE-BP2]
S.a. http://forum.de.selfhtml.org/archiv/2009/10/t191732/#m1278745
Danke für die Links. Werde das gleich mal angehen. Damit könnte ich es sogar IE < 7 tauglich kriegen, auch wenn nicht nötig.
mfg
hi,
Javascript mehrstufig zünden [PERFORMANCE-BP2]
Habe es mittlerweile übernommen.
Allerdings möchte ich fürs Archiv festhalten (weil ich selbst ein Paar Minuten gebraucht habe, um zu verstehen, wo diese Klasse gesetzt wird):
document.documentElement.className += "jsstart";
im Head-Block bewirkt, dass ...
<html class="jsstart" lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
die Klasse "jsstart" zugewiesen bekommt, aber halt nur, wenn Javascript aktiviert ist.
Dann kann man mit
.jsstart #element {}
nach Lust und Laune formatieren und nachträglich mit Javascript manipulieren -- sämtliche formatierungen funktionieren nur, wenn Javascript aktiviert ist.
mfg
ARE!
Das Problem ist aber, dass die Elemente bereits zu sehen sind, und erst wenn die Seite fertig geladen ist, ausgeblendet und wieder reingefadet werden.
Also muss ich die Elemente direkt beim Seitenaufruf ausblenden, mit CSS.
Eine Möglichkeit ist, alle Elemente vor dem Laden auszublenden, sie dann mittels window.onload() _nach_ dem Laden wieder einzublenden. Bei Usern ohne JS wird nichts ausgeblendet, also auch nichts wieder eingeblendet.
Den Tipp hatte ich von Cybaer: Sehtest.
Viele Grüße aus Frankfurt/Main,
Patrick
AOP!
Eine Möglichkeit ist, alle Elemente vor dem Laden auszublenden, sie dann mittels window.onload() _nach_ dem Laden wieder einzublenden. Bei Usern ohne JS wird nichts ausgeblendet, also auch nichts wieder eingeblendet.
Den Tipp hatte ich von Cybaer: Sehtest.
Danke dir für den Link. Ist zwischengespeichert.
Dieses Bsp. ist aber so ziemlich wie das Webkrauts Bsp. (oder umgekehrt :)):
document.documentElement.style.visibility = "hidden";
Mit dem Unterschied, dass hier die Styles direkt gesetzt werden.
document.documentElement.className += "jsstart";
Ich bleibe wohl beim zweiten Bsp., sieht mMn besser aus, wenn nur bestimmte Elemente reingefadet werden, als die ganze Seite. Jedenfalls habe ich wieder was zum spielen :)
mfg
@@Patrick Andrieu:
nuqneH
Eine Möglichkeit ist, alle Elemente vor dem Laden auszublenden, sie dann mittels window.onload() _nach_ dem Laden wieder einzublenden.
Eine schlechte Möglichkeit. 'window.onload' ist viel zu spät.
Den Tipp hatte ich von Cybaer
Der Name ist Programm: seine Tips vor dem Verwenden besser genau auf Nützlichkeit prüfen! ;->
Qapla'
Hallo Gunnar!
Eine schlechte Möglichkeit. 'window.onload' ist viel zu spät.
Außer gelegentliches Flackern in den IEs, habe ich damit keinerlei Probleme bei meinen bisherigen Anwendungen festgestellt.
Der Name ist Programm: seine Tips vor dem Verwenden besser genau auf Nützlichkeit prüfen! ;->
Und Du? Du predigst hier mit etlichen Specs- und sonstigen Links-Keulen [1] die absolute Trennung von Markup und CSS- bzw. JS-Code, und dann soll der JavaScript-Bereich voll mitten (naja, eher unten) im HTML stehen?
[1] Das ist kein Vorwurf!
Viele Grüße aus Frankfurt/Main,
Patrick
@@Patrick Andrieu:
nuqneH
Eine schlechte Möglichkeit. 'window.onload' ist viel zu spät.
Außer gelegentliches Flackern in den IEs
Schon das ist zu viel. Das sollte stutzig machen.
habe ich damit keinerlei Probleme bei meinen bisherigen Anwendungen festgestellt.
Du hast keine externen Ressourcen (Bilder etc.) in deinen Anwendungen?
'window.onload' feuert erst, wenn alles geladen ist. Erst dann wird bei dir eingeblendet – viel zu spät.
Qapla'
Hallo Gunnar!
»»Außer gelegentliches Flackern in den IEs
Schon das ist zu viel. Das sollte stutzig machen.
Der flackert auch in anderen Fällen (wird hier oft genug bemängelt) ;)
Du hast keine externen Ressourcen (Bilder etc.) in deinen Anwendungen?
Ich verstehe Deinen Einwand nicht. Es wird _erst_ alles (also auch die externen Ressourcen) angezeigt, wenn _alles_ geladen ist. Natürlich sollte drauf geachtet werden, dass eingebundene Ressourcen schnell geladen werden und vom selben Server kommen.
Ein Beispiel habe ich in meiner Seite »Achtung Agentur« (s. Sig), dort der erste Nachbau (Vergleich 1, standadarkonforme Version).
Die Lösung im Webkraut-Artikel eignet sich beispielsweise, wenn man Sachen wie Google Analytics benutzt: Da dort die Ressourcen von einem fremden Server kommen, eignet sich diese Lösung in dem Fall ja besser. Benutze ich auch bei einem Kunden, dem ich ein eigenes Tracking-Tool angeboten habe, dessen Server aber kein Perl zur Verfügung steht: Der Counter ist bei mir gehostet, der JavaScript-Aufruf auf jeder Seite ist ganz unten, direkt vor </body>.
Falls mein Server mal nicht will, sind die Kundenseiten dennoch ohne Absrich abrufbar. Nur gezählt wird dann halt nicht.
Viele Grüße aus Frankfurt/Main,
Patrick
@@Patrick Andrieu:
nuqneH
Ich verstehe Deinen Einwand nicht. Es wird _erst_ alles (also auch die externen Ressourcen) angezeigt, wenn _alles_ geladen ist.
Zu spät. Bis dahin sieht der Nutzer nichts und ist vielleicht schon wieder weg, bevor er was sehen würde. Siehe meine Antwort an Malcolm Beck´s.
Natürlich sollte drauf geachtet werden, dass eingebundene Ressourcen schnell geladen werden […]
Du kannst (lies: solltest) Grafiken fürs Web optimieren, ja. Aber auf die Anbindung des Nutzers ans Internet (Mobilfunk, Modem, …) hast du keinen Einfluss.
[…] und vom selben Server kommen.
?? Warum?
Qapla'
Hallo Gunnar!
[…] und vom selben Server kommen.
?? Warum?
Damit es im Falle eines (fremden) Serverausfalls nicht zu lange Wartezeiten kommt.
Viele Grüße aus Frankfurt/Main,
Patrick
hi,
Eine Möglichkeit ist, alle Elemente vor dem Laden auszublenden, sie dann mittels window.onload() _nach_ dem Laden wieder einzublenden.
Eine schlechte Möglichkeit. 'window.onload' ist viel zu spät.
Im Gunde ist es doch dem von dir verlinkten Bsp. sehr ähnlich, nur dass hier dem HTML-Element direkt ein Style untergeschoben wird.
document.documentElement.style.visibility = "hidden";
Damit kann ich zwar nicht einzelne Elemente ansprechen, aber dennoch geht es doch in die gleiche Richtung, oder[1]?
mfg
[1] Bitte nicht Sarkastisch verstehen -- vielleicht übersehe ich Anfänger ja etwas
@@Malcolm Beck´s:
nuqneH
Im Gunde ist es doch dem von dir verlinkten Bsp. sehr ähnlich, nur dass hier dem HTML-Element direkt ein Style untergeschoben wird.
Die Vermischung von JavaScript und CSS ist die eine Sache. Das ist nicht gut, aber darum ging es hier gar nicht.
Bei der Variante von Patrick/Cybaer wird vor Beginn des Ladens des Seiteninhalts gesagt, diesen nicht anzuzeigen:
dc.documentElement.style.visibility = "hidden";
Erst nachdem alle Inhalte (incl. Bilder etc) geladen sind, wird der Inhalt dargestellt:
window.onload = function() {
dc.documentElement.style.visibility = "visible";
dc.getElementById('visibleOnlyWith').style.visibility = "visible";
}
Warum soll der Nutzer so lange auf die Anzeige des Inhalts warten? Er kann doch schon Textinhalt lesen, während noch Bilder geladen werden.
Die eventuell mehrere Sekunden lang erscheinende leere Seite gibt dem Nutzer keinen Hinweis, dass überhaupt was passiert. Er wird sie womöglich verlassen, bevor der Inhalt dargestellt wird.
Also Textinhalt so früh wie möglich darstellen, nicht erst 'onload'!
Das passiert bei der Variante aus dem Webkrauts-Adventskalender: Vor dem Laden des Inhalts erhält das 'html'-Element per JavaScript eine Klasse. Wenn der Textinhalt geladen wird, weiß der Browser bereits durch das Stylesheet, ob er ihn einblenden soll oder nicht.
Qapla'
hi,
Die eventuell mehrere Sekunden lang erscheinende leere Seite gibt dem Nutzer keinen Hinweis, dass überhaupt was passiert. Er wird sie womöglich verlassen, bevor der Inhalt dargestellt wird.
Ja, in dem Punkt stimme ich dir absolut zu. Wenn überhaupt, dann auf jedenfall einen Hinweis-Text, oder einen Ladebalken, dass der User sieht, dass etwas vor sich geht.
Also Textinhalt so früh wie möglich darstellen, nicht erst 'onload'!
Was hältst du denn von dem, was ich auf der Disko-Seite verbrochen habe? Content und Navi werden "reingefadet" (falls dein Browser Effekte nicht darstellen sollte).
Das CSS bin ich gerade am überarbeiten -- da habe ich viel Mist verbockt, als ich diese erstellt hatte.
mfg