✔ [jQuery] SlideToggle | anderes Div scrollt nicht mit

BlueBull

BlueBull

Grünschnabel
Servus. Ich habe sogar bei stackoverflow nachgefragt, leider bekomme ich irgendwie keine Antwort, da ich noch wegen Link was bearbeiten muss. Immerhin habe ich versucht alles zu bearbeiten, jedoch schaltet man meine Frage dort irgendwie nicht frei.

Und jetzt versuche ich also hier.

Also ein DIV A soll aufgemacht werden, wenn man auf Link bzw. DIV B klickt. Es funktioniert schon, aber ein DIV C darunter scrollt nicht so mit. Ich meine, DIV C wird dann irgendwie ausgeblendet, wenn DIV A aufgemacht wurde. Das wollte ich nicht. Ich möchte, dass DIV C mit runter scrollt und da auch mit bleibt statt weg sein.

Siehe bei JSFiddle Demo.

Ich meine das um besser zu verstehen, falls man mich nicht so verstanden hat:
beispiel.jpg


Was habe ich nun falsch geschrieben? Was & wo ist der Fehler?
 
Das Div C verschwindet zwar, aber der HTML-Inspektor zeigt, dass es noch da ist, jedoch von Div A überdeckt wird. Der Grund ist, dass Du dem Container #head eine feste Höhe gegeben hast. Wenn Du das auf min-height änderst, ist alles gut:
CSS: 
#header {
    background-color: #1d1e20;
    background-image: url(../img/bg_header.png);
    background-position: right;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    min-height: 100px;
}
 
Komischerweise funktioniert JSFiddle's Vorschau mit deinem Idee recht gut, aber dann habe ich versucht auf HTML zu schreiben und auf meinem Server hochladen. Um nachzugucken ob sie auch tatsächlich in Google Chrome und Firefox Browser funktioniert, das hat leider nicht so geklappt.
 
Komischerweise wahr das bei mir genau so. Bei mir lag es an Jquery 3.3.1
Habe dann mal aus dein Fiddle Jquery 2.1.1 genommen und dann wahr Fehler weg.
Habe jetzt zwar nicht weiter gesucht warum das so ist,aber vieleicht hilft euch das weiter bei Fehler eingrenzen
 
Sempervivum hat gesagt.:
Dann poste doch Mal die URL der Seite. Sicher kann man dann den Fehler finden.
Zum Vergrößern anklicken....
Okey hier: URL

basti1012 hat gesagt.:
Komischerweise wahr das bei mir genau so. Bei mir lag es an Jquery 3.3.1
Habe dann mal aus dein Fiddle Jquery 2.1.1 genommen und dann wahr Fehler weg.
Habe jetzt zwar nicht weiter gesucht warum das so ist,aber vieleicht hilft euch das weiter bei Fehler eingrenzen
Zum Vergrößern anklicken....
Es kann sein. Dann welche JQuery Version soll ich also wohl nehmen?
 
Das Problem bei der Seite, die Du gepostet hast, ist, dass links das #header-logo eine Höhe von 100% hat und das umgebende #header auf die volle Fensterhöhe streckt, wenn man für letzteres min-height: 100px setzt. Lösung wie so oft, indem man Flexlayout einsetzt. Weil deine Container keinen Inhalt haben, bin ich nicht sicher, ob ich richtig verstanden habe, was Du vorhast. Prüfe, ob diese CSS deinen Vorstellungen entspricht:
CSS: 
body {
    text-align: center;
    background-color: #6c7079;
}
#wrapper {
    /* width: 1235px; // Breite der Website */
    text-align: left;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
}
#header {
    background-color: #1d1e20;
    background-image: url(../img/bg_header.png);
    background-position: right;
    background-repeat: no-repeat;
    /* display: inline-block; */
    width: 100%;
    min-height: 100px;
    display: flex;
    position: relative;
}
#header_logo {
    background-image: url(../img/header_logo.png);
    background-position: left 30px top 18px;
    background-repeat: no-repeat;
    display: block;
    flex: 0 0 250px;
}
#toggle {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
}
.toggle {
    background-color: #1d1e20;
    height: 250px;
    width: 100%;
    display: inline;
    flex: 1;
}
#toptippsbar {
    background-image: url(../img/bg_toptippsbar.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 42px;
    background-color: lightgrey;
}
Außerdem habe ich bei dem Klick-Button das umgebende Div heraus genommen:
HTML: 
        <div id="header">
            <div id="header_logo"></div>
            <a href="#" id="toggle">Click hier</a>
            <div class="toggle" style="display: none;">aaa</div>
        </div>
 
PS: Außerdem habe ich mir erlaubt, die feste Breite des Wrappers zu deaktivieren, weil damit der Klick-Buttton verschwindet, wenn man den Browser nicht im Vollbild hat oder einen kleineren Bildschirm.
 
Sempervivum hat gesagt.:
PS: Außerdem habe ich mir erlaubt, die feste Breite des Wrappers zu deaktivieren, weil damit der Klick-Buttton verschwindet, wenn man den Browser nicht im Vollbild hat oder einen kleineren Bildschirm.
Zum Vergrößern anklicken....
Erstmal herzlich Dank für deine Mühe und Zeit.

Meine Meinung: "Ich bin kein Freund für responsive Webseiten, aber leider in Zukunft sollen die Webseiten responsiv sein wegen Bildschirmauflösungen oder alte Browser ebenso auch Monitor. Deswegen habe ich so in CSS einbisschen responsive-freundlich umgesetzt, aber doch die Breite muss fest sein und zwar 1235 Pixel. Aber wenigstens ist meine Webseite responsive-mittig in Bildschirm. Wenn die Besucher doch stören dass sie sei zu groß oder problematisch mit Auflösung ist, dann hat er einfach Pech und muss neue Monitor besorgen oder Auflösung umändern. Ich weiß selbst, es klingt hart von mir."

Also das DIV C mit runterscrollt, klappt es fantastisch. So habe ich mir ja vorgestellt. Aber DIV C muss hinter von DIV A ( #header ) sein, denn wenn man auf Link ( "Click hier" ) drauf klickt erscheint DIV C geöffnet, aber #header Hintergrundbild ist dann aber weg. So möchte ich nicht. Ich möchte dass Hintergrundbild bzw. besser gesagt, dass #header immer vorne stehen muss ( ich habe mit z-index probiert, geht leider nicht.. )

EDIT: Ich hab CSS ja von deinem CSS-Vorschlag reingefügt und bisschen umbearbeitet wegen feste Breite. Das mit Runterscrollen hat ja geklappt nur die andere Sachen ist dann wieder schief. Hast du eventuell eine andere Alternative bzw. Lösung? Ich bin immer noch am Suchen wie es dann besser funktionieren kann. Siehe URL
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück