Beiträge von Sempervivum

Bei dem zweiten schließenden <div fehlt die schließende Klammer.

Ich habe mehrere DE-Mail-Konten und bin sehr ernüchtert, weil offenbar die breite Akzeptanz fehlt. In meiner Kommunikation beim Onlineshopping etc. ist es mir erst einmal passiert, dass ein Partner eine Korrespondenz per DE-Mail angeboten hat. Im Impressum und auf Briefköpfen findet man fast nie eine DE-Mail-Adresse.

Dieses Skript müsste dein Problem lösen:

$(document).ready(function () { var positions = [];
                $("#nav a").each(function () {
                    var anchr = $(this).attr("href");
                    var entry = { anchor: anchr, pos: $(anchr).offset().top };
                    positions.push(entry);
                });
                function highlightnav() {
                    var currentPos = $(window).scrollTop();
                    var idx = 0, anchr;
                    for (var i = 0; i < positions.length; i++) {
                        if (positions[i].pos < currentPos) idx = i;
                    }
                    anchr = positions[idx].anchor;
                    $("#nav a").each(function () {
                        if ($(this).attr("href") == anchr) {
                            $(this).addClass("current");
                        } else {
                            $(this).removeClass("current");
                        };
                    });
                }
                $(window).on("scroll", highlightnav)                             });

Es setzt die Klasse "current" bei dem betr. a-Tag. Daraus kannst Du dann das Hervorheben ableiten.

Versuch mal, das span absolut zu positionieren:

.tooltip { position:relative; z-index:20; }.tooltip span { display:none; position:absolute; left:0px; top:10px;}.tooltip:hover {z-index:21;}.tooltip:hover span {	 display:block;}

Und wenn das nicht funktioniert, poste mal die URL deiner ganzen Seite. Ich überblicke nicht, was das area-Tag und das Bild, das damit zusammen hängt, für eine Auswirkung hat.

"Ich frage nur mal nach, gibt es noch eine andere Möglichkeit oder ist das die gebräuchliche Methode?
Es sind hier javascripte einzubinden und von javascript habe ich noch keine ahnung.
da bin ich etwas zurückhaltend."

Ja, Lightbox ist eine gebräuchliche Methode und ja, es geht auch anders, indem man es selbst in Javascript programmiert, wie es hier schon beschrieben wurde.
Wenn Du von Javascript "noch keine Ahnung" hast, ist es mit Sicherheit einfacher, ein fertiges Lightbox-Plugin zu verwenden, als es selber zu programmieren. Bei diesen Plugins gibt es i. allg. eine Anleitung, die leicht umzusetzen sein sollte.

Freut mich, dass es funktioniert. Ich vermute, dass das Einbinden eines Frames sich wie ein Include verhält, so dass es Probleme gibt, wenn Vater und Kind in verschiedenen Verzeichnissen liegen.

Hallo Kurtus,
ich weiß nicht genau, wie es sich mit der Adressierung bei Frames verhält, aber ich würde probieren, mal den vollständigen Pfad zum Video anzugeben (http://www.mcv-moemlingen.de/startfiles/mcv-breit.mp4). Dann umgehst Du Probleme damit.

Danke für den Link, aber wie ich schon schrieb, gibt es genug Plugins. Meine Absicht war nur, Rantanplans Frage zu beantworten, warum sein Skript nicht mehrfach angewendet werden kann.

Zitat: " wieso geht denn die eine gallerie nur einmal pro seite?"
Der Grund ist, dass dieser Code globale Variablen verwendet und sich pauschal auf alle img-Tags bezieht, ein häufiges Problem bei älteren Skripts:

var images = document.getElementById("divId");
document.getElementsByTagName("img");

Eine schlechte Lösung wäre, die Variablen zu vervielfachen und ihnen und den IDs eindeutige Namen zu geben:

// 1st gallery
var images1 = document.getElementById("divId1");
// 2nd gallery
var images2 = document.getElementById("divId2");

Um die zugehörigen Bilder zu ermitteln, müsste man dann die Kind-Elemente der Container ermitteln. Wie gesagt, eine sehr schlechte Lösung.

Eine bessere Lösung besteht darin, alle Variablen in einer Funktion zu kapseln und alle HTML-Elemente in einem Container unterzubringen und dessen Selektor an die Funktion zu übergeben:

function mygallery(sel) {
	var bigimg = <img class="bigimg">;
	$(sel + " img").on("click", function() {
    	$(sel + ".bigimg").attr("src", $(this).attr("src"));
	});
	$(sel).prepend(bigimg);
}

Dann für die verschiedenen Galerien diese Funktion mit dem betr. Selektor aufrufen:

mygallery("#gallery1");
mygallery("#gallery2");

Ungetestet, ich wollte nur mal die ungefähre Vorgehensweise skizzieren.
BTW: Es gibt viele gute, fertige Galerie-Skripts, so dass es sich nicht lohnt, so etwas selber zu schreiben, es sei denn, man nimmt es als Übungsaufgabe, um Javascript/jQuery zu lernen. Z. B. dieses:
http://galleria.io/

Da fehlt das schließende </a>-

Sollte funktionieren, wenn Du das a-href-Tag um den Swiffycontainer legst:

<a href="deinlink.html">
<div id="swiffycontainer" style="width: 468px; height: 60px">
   </div>
</a>

Es würde das Verständnis wirklich sehr erleichtern, wenn Du einen Link zu der Seite posten würdest.

Verstehe ich dich richtig: Um die kleinen Bilder herum ist kein Platz, um das Hover aufzuheben? Wo willst Du denn dann den Link bzw. den Button für das Wegschalten unterbringen? Es würde wahrscheinlich das Verständnis deines Problems erleichtern, wenn Du einen Link zu der Seite posten würdest. Du hast meine Frage gar nicht beantwortet, ob diese Galerie mit CSS realisiert ist.

Ist diese Galerie nur mit CSS realisiert? Dass die Bilder beim Hover vergrößert werden, spricht dafür.
Leider leuchtet mir dein Vorhaben nicht ganz ein: Du schreibst ja: "Für eine kleinere Darstellung (Smasrtphone etc.) soll nun ein Close-Image oder dergleichen her.". Warum machst Du dann nicht einfach das große Bild kleiner, dann würde die Galerie immer noch funktionieren? Und wenn Du das große Bild auf einem kleinen Bildschirm verschwinden lassen willst, wäre es dann nicht besser, das automatisch mit einer Media-Query zu machen?

Ich sehe dagegen die Gefahr, dass Einsteiger resigniert aufgeben, wenn man sie mit fortgeschrittenen Techniken überfordert und es dann gar nicht zu einem fortgeschrittenen Lernprozess kommt.

Du setzt bei deinen Postings immer die Gültigkeit von Definitionen des "guten Programmierstils" voraus, die teilweise axiomatisch und praxisfremd sind (wie bei den Lösungen für das Problem des TO). Aber dazu habe ich ja schon in Posting #8 geschrieben.

Glücklicher Weise habe ich neben der Webprogrammierung noch einige andere Interessen, wo es meistens entspannter zugeht. Und dadurch kann ich diese Dinge aus einer gesunden Distanz beurteilen und das bringt mich zu der Einschätzung, dass ich ihnen nicht so eine große Bedeutung beimesse. Wichtig finde ich jedoch das, was in #11 geschrieben habe.

Leider verstehe ich dein Posting nicht richtig. Nur, dass Du auf Knopfdruck Klassen wechselst und transition verwendest, also offenbar etwas animieren willst. Was machst Du denn genau mit deinen Divs? Und was willst Du mit deinen Bildern machen und was funktioniert dabei nicht? Wahrscheinlich ist es am besten, wenn Du etwas mehr Code postest, von einem Div, das funktioniert und von einem Bild, das nicht funktioniert.

Ein Aspekt, der noch gar nicht zur Sprache gekommen ist, ist folgender: Ein großer Teil der Besucher, die in Computerforen Fragen stellen, sind Einsteiger, die nur geringe oder gar keine Kenntnisse in der Programmierung haben. Und ich bin der Meinung, dass man diesen einfache und leicht zu verstehende Lösungen anbieten und sie nicht mit fortgeschrittenen Techniken überfordern sollte. Genau das war meine Absicht bei dem Code, den ich am Anfang gepostet hatte. Andernfalls sehe ich die Gefahr, dass der betr. die Lösung kopiert, ohne sie zu verstehen und dann nicht in der Lage ist, sie selbständig weiter zu entwickeln. Ich selber habe, als ich am Anfang der Einarbeitung in JS war, anonyme Funktionen undurchsichtig und schwer zu verstehen gefunden. Im Verlauf der Entwicklung habe ich sie dann verstanden und mich damit angefreundet. Ebenso das Vermeiden von globalen Variablen: Hat auf jeden Fall seine Berechtigung für umfangreichere Projekte aber nicht für Einsteiger und wenn es sich um ein Skript von ein paar Zeilen handelt.

Aufheben kannst Du die Formatierung natürlich, indem Du es aus der CSS-Datei heraus nimmst. Wenn ich dich richtig verstanden habe, stört dich, dass der Text das Hintergrundbild (Menüsymbol) überdeckt. Dazu hatte ich dir empfohlen, ein padding-top einzuführen. Würde dann so aussehen:

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
        padding-top: 100px;
}

Dort kannst Du auch die Schriftgröße verringern.

"lightbox für html-elemente" Ja, gibt es und mit Fancybox bist Du ja fündig geworden. Die Lightbox von http://lokeshdhakar.com kann jedoch nur Bilder anzeigen.
Für die Formatierung der a-Tags in aside ist jedoch dieses in demo.css verantwortlich:

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
}

Hast Du das auch irgendwoher übernommen?

Die Wiki von SelfHTML stellt beide Varianten wertfrei nebeneinander:
http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler
Ich habe den Eindruck, dass bei der Einschätzung, was "guter Stil" ist, außertechnische Motive im Vordergrund stehen: Dogmatismus und das Streben nach Profilierung statt Praxisrelevanz und Verständlichkeit. Welche Blüten das treiben kann, kann man sich hier ansehen:
https://www.tutorials.de/threads/bilder…scandir.401675/