Antwort an „Robert B.“ verfassen

Anker funktioniert nicht richtig

Robert B. 20.03.2024 14:15

Moin envoy,

im Grunde kannst Du mit einem (scroll- und navigierbaren) Grid-Layout arbeiten und lediglich das Navigieren animieren. Das wäre

zugänglich
modernes HTML
schlankes HTML
ohne jQuery möglich

Damit würden sich etliche der im Folgenden angesprochenen Probleme von alleine erledigen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML (?) 1.0 (?) Transitional (?) – warum das denn?

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Wenn XHTML als XML ausgeliefert würde, wäre es per Default UTF-8. Und in HTML5 ist die Angabe einfacher:

<meta charset="utf-8">

<title></title>

Ein leerer Title?

<link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>         
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Ich kenne mich mit jQuery nicht aus, daher vermag ich nicht zu sagen, ob man beide Skripte hier benötigt – ich glaube allerdings, dass dein Fall auch komplett ohne jQuery auskommt:

$(document).ready(function() {
	var AnzahlMember=$('div.Member').length;
	var MemberSliderLaenge=AnzahlMember*1000;
	$('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'});
});

… wird zu:

document.addEventListener('DOMContentLoaded', () => {
    const AnzahlMember = document.querySelectorAll('div.Member').length;
    const MemberSliderLaenge = AnzahlMember * 1000;
    document.getElementById('MemberSlider').style.width = `${MemberSliderLaenge}px`;
});

function MemberSlider(MemberNr) {
	var ZielPosition=(MemberNr-1)*1000;
	$('#MemberSlider').css({'left':'-'+ZielPosition+'px'});
}

Hier wird das Element mit der ID MemberSlider einfach nur ziemlich weit (mehrere Tausend Pixel) nach links verschoben. Wie breit ist das Element und wie breit muss der Bildschirm sein, damit das halbwegs vernünftig funktioniert?

function spiegelPanelSelect(spiegelPanel) {
	$('.spiegelPanel').css({'display':'none'});
	$('#'+spiegelPanel).fadeIn( "1000", function() {
	});
	$('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow');
}

Im Einblenden (Fade-In) passiert sonst nichts weiter – eine Noop?

Das sieht für mich nach einem Anwendungsfall von CSS-Animationen aus:

#MemberWrapper {
    transition: opacity 10s;
}

Und dann braucht nur noch die opacity-Eigenschaft geändert werden.

$(document).ready(function() {
	$('.rectangle').click(function(){
	$('.spiegelPanel').css({'display':'none'});
	$('#MemberWrapper').css({'display':'block','opacity':1.0});
	});
});

Das kann natürlich auch im DOMContentLoaded-Eventhandler passieren und braucht ebenfalls kein jQuery …

<style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>

Das JavaScript ist halbwegs ordentlich formatiert, aber das CSS ein Einzeiler … das muss ich nicht verstehen, oder? Also (zumindest ein bisschen verschönert):

.rectangle { opacity: 1.0; cursor: pointer; }
body {
    margin: 0px; padding: 0px;
    background-color: rgb(53, 61, 64); color: rgb(255, 255, 255);
    height: 100%; overflow-x: hidden;
}
#spiegelWrapper { position: absolute; z-index: 1000; }
#navi {
    position: fixed;
    z-index: 2000;
    left: 0px;
    width: 100%;
    bottom: 0px;
    height: 180px;
}
#MemberWrapper {
    position: absolute;
    z-index: 100;
    margin-top: 20px;
    width: 1000px;
    overflow-x: hidden;
    display: none;
}
.Member {
    width: 1000px;
    float: left;
    padding: 0px 0px 0px 0px;
}

Was steht eigentlich im globalen css/Fenster.css?

<body> 
    <div id="spiegelWrapper"> 
        <div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed> 
        </div>

Lecker, div-Suppe 🤮. Wozu brauchst Du das „Spiegel-Panel“ überhaupt in seiner vollen inhaltsleeren Breite?

<div id="MemberWrapper"> 
    <style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>

Was hindert dich daran, die relevanten Regeln oben schon zu definieren?

<div id="MemberSlider"> 
    <div id="Member1" class="Member" data-pg-collapsed> 
        <p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p> 
        <img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/> 
        <img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/> 
</div>

Du hast hier also so in deinem Hauptbereich etwas wie eine section mit einem Textabsatz (p class="text" wirkt auf mich doppelt gemoppelt) mit einem Link auf den nächsten Abschnitt, gefolgt von zwei Buttons, die eigentlich auch Links sein möchten.

Zudem haben die Bilder keinen alternativen Text und durch den Verzicht auf richtige Links ist diese Navigation nicht zugänglich.

<div id="navi"> 
    <div style="width:960px; margin:0 auto;">
        <div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer">
            <img class="rectangle" src="01.jpg"/>
        </div>                 
    </div>             
</div>

Ich wollte erst vorschlagen, dass das die Navigation ist, aber im Grunde enthält sie nur einen Button, der wiederum auch nur ein Link auf den ersten Abschnitt sein möchte.

Viele Grüße
Robert