 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
mr187
Threadersteller
Dabei seit: 13.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 13.02.2013 22:32
Titel JS - ein Element soll verschwinden, wenn ein anderes scrollt |
  |
|
Tach und gleich mal danke, dass du dich hiermit befasst.
Situation:
Ein Div mit der CSS Eigenschaft "overflow:scroll;" in dem sich ein größeres Div befindet. Man kann also innerhalb dieses Divs scrollen. Darüber ein Text mit <h2> (könnte auch <p> etc. sein, völlig egal).
Ich will, dass der <h2> Text eine neue CSS Eigenschaft bekommt, wenn man das Div scrollt. Er soll "opacity:0;" bekommen. Das ganze mit einer "transition-duration:2s;".
Mein Ziel in einfachen Worten:
Wenn man das Div scrollt, dann verschwindet der Text darüber in Form von verblassen.
Fragen:
Möglich mit JS?
Eher viel Aufwand oder wenig?
Hat jemand vielleicht einen Link zu einem Tut oder selbst ein paar Anreize wie das geht?
Danke schonmal im Voraus.  In JS bin ich leider nicht so fit, bin eher ein PHP'ler.
EDIT:
Diesen Code Schnipsel habe ich schonmal. Problem: Bezieht sich auf das Scrollen der gesamten Seite und nicht eines Divs. Wer weiß weiter?
| Code: | <script>
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 175 || self.pageYOffset > 175) {
$('.div_um_das_es_mir_geht').css('display','block');
} else if (document.documentElement.scrollTop < 175 || self.pageYOffset < 175) {
$('.div_um_das_es_mir_geht').css('display','none');
}
}
}
</script> |
Zuletzt bearbeitet von mr187 am Mi 13.02.2013 22:48, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
buchstabensuppe
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht: 
|
Verfasst Do 14.02.2013 07:37
Titel
|
|
|
|
Wie sieht es mit jQuery aus? Kann das in deinem Projekt zum Einsatz kommen?
|
|
| |
|
|
|
Anzeige
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 37
Geschlecht:
|
Verfasst Do 14.02.2013 09:34
Titel
|
|
|
Kurzer Hinweis am Rande: CSS3 Transitions funktionieren nicht im IE <10: http://caniuse.com/css-animation - also an ein Fallback denken. Opacity funktioniert auch nicht in IE7 & IE8. Falls das relevanten Zielgruppen sind, bitte nicht vergessen.
Ansonsten: http://api.jquery.com/scroll/
|
|
| |
 |
|
mr187
Threadersteller
Dabei seit: 13.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 14.02.2013 12:58
Titel
|
|
|
Danke soweit.
jQuery kann gerne zum Einsatz kommen.
Nur sieht es da mit meinen Kenntnissen noch schlechter aus als in JavaScript allgemein.
Wegen dem IE: Kann man vielleicht das "Verschwinden" komplett mit JavaScript machen, also ohne CSS?
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
|
| |
|
|
mr187
Threadersteller
Dabei seit: 13.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 14.02.2013 15:15
Titel
|
|
|
D A N K E!!!
Das ist genau was ich brauche - fast.
Hat mir SEHR geholfen.
Ein paar Fragen: Wenn ich will, dass h2 dauerhaft verschwindet, dann muss ich einfach "else ... }" entfernen? Im Test hat es funktioniert. Ist es auch richtig so?
Wenn h2 in einem anderen Div ist, wie "verlinke" ich es dann richtig?
| Code: | | container.find ('.anderes_div h2').hide (); |
hat nicht funktioniert.
Ist so was möglich?
DANKE noch mal.
|
|
| |
|
|
labrar
Dabei seit: 04.04.2006
Ort: -
Alter: 49
Geschlecht:
|
Verfasst Do 14.02.2013 17:06
Titel
|
|
|
Also nur fast das was du brauchst?
Wenn es also so ein Verschwindibuseffekt oben und unten sein soll, also das der Text praktisch ins unsichtbare scrollt dann teste mal das da
| Code: | <div id="upscroll" style="position:absolute; left:100px; top:100px; width:400px; height:500px; overflow:auto;">
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2> 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. 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. 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. 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. 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. 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.
</div>
<script type="text/javascript">
var height=90;
var t=document.getElementById('upscroll').offsetTop;
var l=document.getElementById('upscroll').offsetLeft;
var pos=document.getElementById('upscroll').style.position;
var bg=document.getElementById('upscroll').style.backgroundColor;
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
if(!bg || bg==' '){
bg=getStyle(document.getElementsByTagName('body')[0],'background-color');
}
if(!bg || bg=='transparent'){
bg='#FFFFFF';
}
var inheight=document.getElementById('upscroll').offsetHeight;
var inwidth=document.getElementById('upscroll').offsetWidth-20;
var tops='<div style="position:absolute; top:'+t+'px; width:'+inwidth+'px; height:'+height+'px; left:'+l+'px;">';
var bottoms='<div style="position:absolute; width:'+inwidth+'px; height:'+height+'px; top:'+(t+(inheight-height))+'px; left:'+l+'px;">';
for(var i=0; i<height; i++){
var opacit=(100-Math.round(100/height*i));
var opacib=Math.round(100/height*i);
tops+='<div style="position:absolute; left:0px; top:'+i+'px; width:'+inwidth+'px; border:1px solid; border-color:'+bg+'; filter:alpha(opacity='+opacit+'); opacity:'+(opacit/100)+';"></div>';
bottoms+='<div style="position:absolute; left:0px; top:'+i+'px; width:'+inwidth+'px; border:1px solid; filter:alpha(opacity='+opacib+'); border-color:'+bg+'; opacity:'+(opacib/100)+';"></div>';
}
tops+='</div>';
bottoms+='</div>';
document.body.innerHTML+=tops+''+bottoms;
</script> |
Ist jetzt eine roughe Lösung und für den schönen IE muss die noch angepasst werden, aber das ganze reagiert auf die gegebene Hintergrundfarbe.
Wenn dein Scroller eine Hintergrundfarbe hat, scrollt alles in diese Farbe hinein. Wenn nicht, wird eben die Hintergrundfarbe der Seite genommen. Ja und wenn es die auch nicht geben sollte, eben weiß.
Viel Spaß damit
|
|
| |
|
|
mr187
Threadersteller
Dabei seit: 13.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 14.02.2013 20:12
Titel
|
|
|
Danke an euch alle für die Hilfe.
Das Script tut soweit was es soll - außer:
| Code: | | container.find ('h2').hide (); |
Das <h2> liegt in einem Div über dem Div das scrollt.
Was ich also bräuchte wäre etwas wie:
| Code: | | container.find ('.anderes_div h2').hide (); |
Das geht aber nicht. Gibt es einen Befehl der das ausführt was ich möchte? Danke noch mals.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Div Element bei bestimmter Fensterbreite verschwinden lassen
Menü Element bei Klick erscheinen und verschwinden lassen
über css ein Element nach definiertem Element ansprechen
Dreamweaver CS3 Objekt scrollt mit...
Hilfe Meine Navigation Scrollt mit -.-!
[Flash] Scrolltext scrollt nicht :-(
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
