Wie kann ich ein Bild (position:fixed) erst ab einer bestimmten Stelle einblenden?

Hi,
ich habe ein normales Bild in meinen HTML Code eingebunden. Vor und hinter dem Bild habe ich jeweils eine section mit Text drin. Das Bild ist in CSS auf position:fixed; gesetzt, damit es immer zu sehen ist. Das Problem ist jetzt, dass das Bild nicht wirklich immer zu sehen sein soll. Es soll erst eingeblendet werden, wenn man von der ersten section auf die zweite scrollt (unter der zweiten section sollen noch weitere folgen, da soll das Bild auch immer zu sehen sein).
Ich habe versucht, der ersten section einen höheren z-index zu geben als dem Bild, damit sie an der Stelle über dem Bild liegt, aber das Bild ist trotzdem zu sehen. Hat jemand eine andere Idee? Gibt es eine CSS Lösung? Oder JQuery?

3 Antworten

abbrechen

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

09.09.2016, 18:40

Ergänzend zu meinem Vorredner wäre das jQuery PlugIn ScrollMe interessant. Damit kannst du deinem Scroll Event etwas Animationsspaß gönnen.

JokerNurse

09.09.2016, 17:22

Habe die Lösung selbst gefunden. Falls irgendwer das hier liest: Man muss der oberen section "position:relative" geben...

anobi86

09.09.2016, 17:23

sollte auch mit CSS machbar sein aber da müsste ich jetzt auch erstmal kurz rumprobieren.

schau dir lieber mal die "scroll" Funktion von jquery an ->

https://api.jquery.com/scroll/

damit gehts auch jedenfall

Ähnliche Fragen

HTML/CSS/JS Sections einfliegen lassen?

Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.

...zur Frage

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zur Frage

Zahlenindex Pseudocode?

Bei der folgenden Aufgabe bin ich mir nicht sicher ob meine Lösung stimmt.

Lücke: i (Zu beginn muss der Laufbereich des Index definiert werden)
Lücke: a (Es geht ja um das Array a)
Lücke: z (Ich möchte ja die Elemente von a mit z vergleichen und den ersten Index ausgeben)
Lücke: i (Wie gesagt es geht ja um den ersten Index also muss ich auch den Index ausgeben.)
Lücke: -1 (Dies wird ja ausgegeben wenn z nicht in a vorkommt)
Lücke: 4 (Wenn ich das richtig verstanden habe fügt a.add() am Index 0 die Zahl ein und a.insert(Indez,Zahl) fügt die Zahl beim entsprechenden Index ein und verschiebt die Elemente dahinter um eine Stelle. a startet dabei mit dem Element 0 beim Index 0. Also müsste vor dem Output für a gelten a={0, 0, -5, 1, 5, 4 0})
Lücke: 0
Lücke: 1

Stimmt das soweit?

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

css automatisches nach unten scrollen einer section?

Hallo Community,

ich benötige mal wieder eure Hilfe. Im Standard Messenger von Buddypress werden die Konversationen und damit der weg zur neuesten Nachricht und zum Eingabefeld immer länger werden, dem habe ich entgegengewirkt indem ich via css die höhe begrenzt und einen y-overflow gesetzt habe. Nun besteht allerdings das Problem das die neueste Nachricht unten, der Scrollbalken aber Standardmäßig oben ist, also immer noch extremes scrollen.

Gibts da nicht eine Option das ich nur diesen Bereich sage das er automatisch nach unten soll bis der Nutzer ggf hoch scrollt, ohne das davon alle scrollbalken betroffen wären?

...zur Frage

SS im Falle von uppercase im style gegen ß ersetzen?

Hi,

das Eszett ist ja immer so ein Problem, falls man eine fancy font gefunden hat, die diesen Buchstaben nicht als Kapitälchen anbietet und es durch "SS" ersetzt, was bei manchen Wörtern furchtbar falsch aussieht. (AUSSERDEM, SPASS, FLEISS, usw.)

Daher meine Überlegung, dass man mit js vielleicht etwas machen könnte, falls die tags h1 bis h6, blockquote, p, usw. in der Eigenschaft text-transform, den Wert uppercase haben.

Meine Überlegung war bisher etwas in der Richtung

$(document).ready(function () {
  if($('h1, p').prop("text-transform", "uppercase")) {
     ... hier passiert die Magie
  }
});

Nur habe ich keine Möglichkeit gefunden, einzelne Buchstaben zu ändern, die irgendwo in einem Wort stehen. Immer nur Möglichkeiten, wie ich tags gegen andere komplett ersetze oder Endungen entferne, aber keine bestimmten Buchstaben.

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

jQuery('#hoverdiv').hoverdiv(

function() {$('#Kindelement').show();},

function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

background-color: red;

z-index: 1;

}

.Kindelement

{

position: absolute;

top:0;

background-color: blue;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

opacity: 0;

z-index: 2;

}

.hoverdiv

{

position: relative;

}

.hoverdiv:hover + .Kindelement

{

opacity: 1;

}

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey;

color: white;

border-radius: 50px !important;

font-family: "Helvetica Neue",

Arial, sans-serif !important;

float: none !important;" ;>

<div id="Kindelement"

style="color: white;

background: grey;

position: absolute;

top: 770px !important;

opacity: 0;">

</div>

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

...zur Frage

Script Datei an bestimmter Stelle der Website anzeigen?

Guten Tag, ein Freund und ich haben für eine Arbeit unserer Schule, eine Website mit HTML und CSS programmiert. Dazu haben wir auch noch das Spiel Flappy Bird mit der P5 Library (vereinfacht Java-Script Codes) programmiert. Leider wird unser nachgemachtes Spiel erst unter dem Footer angezeigt und nicht in der Body Section.
Wir sind recht neu im Programmieren und wir finden einfach keine Lösung dafür, dass wir das Spiel nach oben verschieben können oder eben, dass es in der Body Section angezeigt wird.
Kann uns hierbei jemand helfen, bitte?

Grüße Alex

...zur Frage

CSS: Bereiche der Website wie bei LightBox verdunkeln, wenn CSS-PopUp offen

Hallo,

ich versuche gerade einen Weg zu finden, wie ich den Rest einer Seite verdunkeln kann (er soll nicht komplett verschwinden sondern noch durchschimmern), während ich eine Art "PopUp" offen habe.

Eine Art "PopUp" daher, da es sich um eine Box handelt die komplett mit CSS realisiert wurde und ohne Java-Script.

Aber bevor ich es erkläre gebe ich lieber das "Pop-Up"-Gerüst an.

<div id="infoMenu">     
    <input type="checkbox" id="linkbox" class="popUpControl">
    <label for="linkbox">
        <div class="infoBubble"></div><!--END .infoBubble-->
        <div class="infoBox">
            Inhaltstext:
        </div><!--END .infoBox -->      
    </label><!--END linkbox -->         
</div> <!--END infoMenu-->

Das "Pop-Up" - Fenster, was bei "gecheckter" Checkbox aufgeht ist die "infoBox", der ich ihre Position absolute mitgegeben habe und die den z-index: 100 hat. Dies ist zwar von der Zahl her eher übertrieben, da normal 2 oder 3 auch reichen würden, aber egal.

Nun will ich noch über alles was unter der Box ist und je nach Bedarf den infoBubble (der zu drückende Button) einen Schleier legen.

Meine Versuche es damit zu realisieren einen Weiteren Layer einblenden zu lassen oder der InfoBox einen angepassten Rahmen (border) zu geben würden zwar technisch auch gehen. Doch da ein "Klick" bzw. "Drücken" auf diese Stellen ebenfalls für ein Schließen der infoBox führt ist es eher ungünstig.

Könnte mir jemand ggf. einen Tipp geben wie ich es so umsetzen kann, dass die Box sich nur bei Klick auf die Infobox und/oder einem Button auf dieser schließt?

Perfekt wäre natürlich eine rein CSS basierte Lösung, da ich die Box nicht mit JavaScript mache, sondern sie nur als HTML bzw. JSP-Code zur Verfügung steht.

Bisher habe ich hierfür nur die Begriffe Lightbox, Litebox, Shadowbox und Slimbox gelesen. Wobei diese vorwiegend nur für Bilder genutzt werden und es sich dabei um JS - Scripte handeln soll.

Aber wie bereits erwähnt habe ich ja vor keine Grafik so darzustellen sondern einen Teil aus einer Website.

Wäre super, wenn mir jemand helfen bzw. einen Tipp geben könnte, wo ich noch nachsehen kann. ^^

Chiru

...zur Frage

Website Hintergrundbild interaktiv gestalten?

Guten Tag,

ich habe mich nun in html und css eingelesen, bin noch relativ neu und habe eine Design Idee.

Ich versuche einen "interaktiven" Hintergrund für eine Website zu entwickeln, ( Zahnräder die verrostet sind )
Wenn man runterscrolled sollen diese Zahnräder von einem Sonnenstrahl angeschienen werden.
- Wenn man nun weiter runterscrolled sollen diese Zahnräder nach dem Sonnenstrahl mit Moos bedeckt sein.

Die Idee war:
3 Bilder erschaffen;
1. Zahnräder mit Moos
2. Zahnräder werden angestrahlt.
3. Zahnräder sind mit Moos bedeckt.

Nun habe ich den ersten Maincontent der einen gewissen Platz auf der Website bedeckt.
Die Leute scrollen weiter runter zu den relevanten Sachen
Durch das scrollen wird das 2. Bild auf einem ganz schmalem Content eingeblendet.(überlagert das fixe Bild 1.)
Danach sieht man Bild 3.
Nun ist das Zahnrad vollständig mit Moos bedeckt.
Und das nur durch die 3 Bilder.

Es hat also den Anschein, dass dieses Hintergrund interaktiv ist.

Ich habs ein wenig kompliziert erklärt und die Beispielbilder mit denen ich das getestet habe sind leider verloren gegangen. Allerdings hat die Veränderung von Bild 1 auf Bild 3 schon sehr gut funktioniert. Bloß der Lichtstrahl erschien mir schwierig, da es eben nur ein weiteres fixes Bild ist und die Aktion der Strahlung dadurch nur sehr schwer umsetzbar schien.

Frage: Gibt es andere Möglichkeiten bzw. Kann das mit irgendwelchen Ideen von euch gut umsetzbar gemacht werden?

Beste Grüße und Danke im vorraus.

...zur Frage

jQuery: An- und Ausschalter programmieren mit einer Variablen Programmieren?

Ich muss folgende Aufgabe lösen:

"Beim Überfahren des großen Bildes wird die Grafik „bild1.jpg“ gegen die Grafik „bild2.jpg“ ausgetauscht – beim Verlassen des Bildes wird die ursprüngliche Grafik wieder angezeigt.

Dieses Austauschen funktioniert aber nur, wenn zuvor der Ausschalter mit einem Klick „angeschaltet“ wurde – Grafiktausch mit Datei „schalterein.png“. Wird der Schalter wieder ausgeschaltet, dann geht auch die Mouseover-Funktionalität nicht mehr. Wichtig: Arbeiten Sie mit einer Variablen namens schalter."

Bei dem Schalter handelt es sich um ein Image und keinen Button.

Der erste Teil der Aufgabe - der Grafiktausch beim Hovern - ist kein Problem.

Den Schalter bekomme ich aber nicht programmiert. In anderen Aufgaben haben wir immer einen separaten An- und Ausschalter programmiert, bisher nicht beides zusammen und ich komme einfach nicht auf eine Lösung.

Bisher habe ich nur den Anschalter programmiert (kann natürlich falsch sein):

var Schalter=0;

$("img:eq(2)").click(function (){ Schalter=1; $("img:eq(2)").attr("src","schalterein.png"); })

Wenn man wieder auf das Schalter img klickt soll der Schalter=0 werden, das Bild soll sich wieder ändern & somit wäre er ausgeschaltet.

Ob der Schalter auf 0 oder 1 steht dient zur Abfrage um den Hover Effekt/ Grafiktausch zu aktivieren bzw. deaktivieren.

Kann auch sein, dass mein Ansatz total falsch ist. Ich hoffe jemand kann mir hier weiterhelfen.

...zur Frage

Wenn man auf einer Website einen Button integrieren möchte, der die Farbe ändert wenn man mit dem Mauszeiger drüber geht, nutzt man da eher Javascript oder?

jQuery Code dafür? Und der Button soll natürlich wenn man mit der Maus wieder vom Button runtergeht die Ursprungsfarbe annehmen?

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen