Layer stop!
Andri Roner
- html
Hallo!
Ich habe vollgende Frage. Gibt es irgend einen script oder Befehl, der verhindert das ein Layer fest auf der Page ist? d.H. Ich will, der er, wenn ich scrolle, mitkommt. Ist das irgendwie möglich?
Danke für eure Hilfe!
Hallo!
Ich habe vollgende Frage. Gibt es irgend einen script oder Befehl, der verhindert das ein Layer fest auf der Page ist? d.H. Ich will, der er, wenn ich scrolle, mitkommt. Ist das irgendwie möglich?
Klar geht sowas:
position:fixed; in CSS. Die Positionierung mit top und left bezieht sich dann auf den "Viewport", also das Browserfenster. right und bottom sind natürlich auch möglich.
Einziges Problem: Der Internet Explorer (und natürlich Netscape 4) verstehen diese Anweisung nicht.
Alternativlösung: Rufe regelmäßig ein Javascript auf, welches den gewünschten Layer positioniert (ein neues top reicht ja schon, wenn nur vertikal gescrollt wird). Addiere zum Startwert top einfach den Scrollwert ( siehe http://selfhtml.teamone.de/javascript/objekte/window.htm#page_y_offset und die Anmerkung zum IE)
- Sven Rautenberg
Hallo!
Klar geht sowas:
position:fixed; in CSS. Die Positionierung mit top und left bezieht sich dann auf den "Viewport", also das Browserfenster. right und bottom sind natürlich auch möglich.
Einziges Problem: Der Internet Explorer (und natürlich Netscape 4) verstehen diese Anweisung nicht.
Alternativlösung: Rufe regelmäßig ein Javascript auf, welches den gewünschten Layer positioniert (ein neues top reicht ja schon, wenn nur vertikal gescrollt wird). Addiere zum Startwert top einfach den Scrollwert ( siehe http://selfhtml.teamone.de/javascript/objekte/window.htm#page_y_offset und die Anmerkung zum IE)
Ich glaube, Einer von uns beiden hat die Frage falsch verstanden...
Wenn ich das richtig verstanden habe, war die Frage, wie man den Layer bzw. die Ebene _nicht_ fixiert....
Und darauf wäre die Antwort dann: Mit allen Positionierungen außer "fixed".
Aber ich möchte mal nicht behaupten, daß Du falsch liegst. Wie gesagt, kann auch sein, daß bei mir ein "Mist"Verständnis vorliegt ;)
Viele liebe Grüße,
Der Dicki
Du hast mich falsch verstanden, ich möchte wissen was ich machen muss, damit der Layer mittkommt wenn ich scrolle!!!!
(Übrigens der erste vorschlag von mc.bench ist mir zu kompliziert, aber trozdem danke)
Du hast mich falsch verstanden, ich möchte wissen was ich machen muss, damit der Layer mittkommt wenn ich scrolle!!!!
Das macht er bei diesem Vorschlag im Prinzip doch auch. Da er im viewport immer an derselben Stelle steht ist daselbe wie mitscrollen.
Gruß,
Henning
Aloha!
Du hast mich falsch verstanden, ich möchte wissen was ich machen muss, damit der Layer mittkommt wenn ich scrolle!!!!
Deine Frage kommt ja deshalb, weil du ein Problem hast, was nur dann entsteht, wenn man etwas will, was normal nicht passiert.
Wenn du gewöhnlicherweise in einer HTML-Seite einen Layer definierst (mit <div> und Positionierung durch CSS), dann ist der fest verankert auf der _Seite_, und beim Scrollen bewegt er sich mit. Das ist Normalzustand. Alle Elemente der Seite bewegen sich mit der Scrollbewegung mit.
Das ist so ein Layer:
<div style="position:absolute; left:100px; top:300px;">Das bewegt sich mit der Seite mit!</div>
Da sowas der Normalzustand ist, hatte ich erwartet, dass du genau dies nicht willst.
Und dann kann man eben (außer im IE und im Netscape 4) sowas benutzen:
<div style="position:fixed; top:10px; left:10px;">Das bleibt immer oben links in der Fensterecke, auch beim Scrollen</div>
Könntest du beides mal in eine Seite reinkopieren und die dann z.B. im Opera, Mozilla oder Konqueror angucken und sagen, was du genau haben willst? Oder nimm nur die erste Variante, schau im Internet Explorer, und sage, ob das das ist, was du willst.
- Sven Rautenberg
hai andri
probiere mal dieses script:
self.onError=null;
currentX = currentY = 0; whichIt = null; lastScrollX = -leftside; lastScrollY = -topside;
NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0;
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.dropin.style.pixelTop += percent; if(NS) document.dropin.top += percent; lastScrollY = lastScrollY + percent; } if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.dropin.style.pixelLeft += percent; if(NS) document.dropin.left += percent; lastScrollX = lastScrollX + percent; } }
function checkFocus(x,y) { var totalY, totalX; floatx = document.dropin.pageX; floaty = document.dropin.pageY; floatwidth = document.dropin.clip.width; floatheight = document.dropin.clip.height;
if(20 == 0) totalY = floatheight; else totalY = 25; if(0 == 0) totalX = floatwidth; else totalX = 0; if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true; else return false; }
function grabIt(e) { if(IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("dropin") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop);
if(20 == 0) totalY = whichIt.style.pixelHeight; else totalY = 20; if(0 == 0) totalX = whichIt.style.pixelWidth; else totalX = 0; if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) || !(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null; } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.dropin; FloatTouchedX = e.pageX-document.dropin.pageX; FloatTouchedY = e.pageY-document.dropin.pageY; } } return true; }
function moveIt(e) { if (whichIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-FloatTouchedX,e.pageY-FloatTouchedY); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return false; }
function dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; }
if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; }
if(NS || IE) action = window.setInterval("heartBeat()",1);
dropin ist in diesem fall der name des div's. funzt im ie und netscape 4, allerdings muß der inhalt in einem div stehen und nicht im layer.
gruß mc.bench