Liebe/-r Experte/-in,
ich habe hier ein großes Problem, vielleicht kann mir jemand weiterhelfen. Ich probiere es schon seit letzten Donnerstag, aber es haut nicht hin. Ich habe jetzt was von dynamicdrive.com, aber es soll eigentlich ganz anders sein (Mir würd’s ja reichen, aber der Chef will das unbedingt 
). Ich habe eine kleine „Skizze“ gemacht: http://www.migacut.de/bild1.jpg
http://www.migacut.de/bild2.jpg
Ich habe schon oft was gelesen über „Layer einfahren“ usw., aber irgendwie hatte nie jemand eine Lösung. Es sollte so sein: Wenn die Seite lädt, soll der Gutschein schon mal angezeigt werden, bzw. onload reinfahren (Bild2). Wenn man auf den schwarzen Balken klickt, soll der Gutschein an den oberen Rand fahren wie auf Bild 1. Wenn man wieder draufklickt, soll er wieder rausfahren (Bild2). Ist das überhaupt mit Javascript möglich oder braucht man da DHTML oder css oder …? Wäre wirklich super, wenn mir da jemand weiterhelfen kann. VIELEN Dank im Voraus.
Ja, das geht auf jeden Fall. DHTML ist HTML mit Javascript. Schau mal unter http://http://script.aculo.us
Gruß, Alex
Hallo R,
ist mit einer Kombination aus Div-Containern und Javascript durchaus möglich.
Also wenn du einen Div-Container um das Bild erstellst kannst du ihn mit css absolut bewegen.
im css gibst du dann für den Container folgende Styles an:
position: absolute;
top: 50px;
left: 50px;
width: ??px;
height: ??px;
und jetzt kannst du bei einem Klick mit einer Schleife innerhalb von Javascript über:
var neuTop = document.getElementById(‚Gutschein‘).style.top;
neuTop = neuTop - 10;
document.getElementById(‚Gutschein‘).style.top = neuTop;
Da findest du aber auch ein Haufen Vorlagen im Web. Schau einfach unter Layer und Move.
Wenn du nichts findest, dann meldest du dich einfach nochmal.
Grüße
Ingo
So in der Art?
function gutschein() {
pos1="-180px";
pos2=„0px“;
if(document.getElementById(„gutschein“).style.top==pos1) document.getElementById(„gutschein“).style.top=pos2;
else document.getElementById(„gutschein“).style.top=pos1;
}
GUTSCHEIN
Die Lösung wird sowohl mit JavaScript als auch mit CSS zu tun haben. Mit CSS kannst du erstmal zwei Zustände definieren:
- Den Kasten, wie er sich etwa in der Mitte der Seite befindet.
- Den Kasten, wie er über den oberen Seitenrand hinaus ragt, so dass nur noch der schwarze Balken zu sehen ist.
Dabei wirst du dich ein wenig mit der Positionierung via CSS auseinandersetzen müssen.
Dann würde ich dir empfehlen jQuery einzusetzen. Das bietet unter anderem eine Funktion „animate()“, mit der du eine CSS-Klasse in eine andere überführen kannst. Im Endergebnis fährt dann dein Kasten durch diese Funktion „animate()“ hoch und runter (siehe http://api.jquery.com/animate ).
VG,
Timo
Hallo,
ich hab mal ein kleines Script geschrieben, vielleicht hilft dir das weiter:
:: JavaScript
//Written By Saskia Brückner - www.saskiabrueckner.com
var wsize=window.outerWidth;
var opened=0;
var size=-98;
function whichvoucher() {
if(opened) {
closevoucher();
} else {
showvoucher();
}
}
function showvoucher() {
if(size < 1) {
size++;
document.getElementById(‚voucher‘).style.top=size;
window.setTimeout(„javascript:showvoucher()“,10);
} else {
opened=1;
}
}
function loadvoucher() {
// wsize / 2 - Breite des Layers/2, um das Layer mittig darzustellen.
document.getElementById(‚voucher‘).style.left=wsize/2-250;
showvoucher();
}
function closevoucher() {
if(size > -98) {
size–;
document.getElementById(‚voucher‘).style.top=size;
window.setTimeout(„javascript:closevoucher()“,10);
} else {
opened=0;
}
}
#voucher {
font-family: Ubuntu, Trebuchet MS;
position: absolute;
visibility: visible;
width: 500px;
height: 121px;
top: -98px;
left: 400px;
border-color: #000000;
border-width: 1px;
border-style: solid;
}
Nur Heute
1 Gutschein für dies und das!
Gutschein
Liebe Grüße,
Saskia
Hallo,
JavaScript alleine kann lediglich Elemente auf der Seite einfügen, entfernen odre den Inhalt ändern. Für Positionierung (das schließt Bewegungen ein) muss man fast immer mit CSS-Attributen arbeiten, die man mittels JavaScript anspricht.
Für das „hereinfahren“ braucht man z.B. einen JavaScript-Timer, der die Position z.B. 25-mal pro Sekunde ändert.
Viele Grüße
BurninLeo
Hallo R_FE,
die einfachste Art so etwas zu realisieren ist mit jQuery. Über die offset()-Methode bekommst du bzw. setzt du die aktuelle Position deines DIVs. Wie es geht steht unter: http://api.jquery.com/offset/
Events hängst du an dein DIV mit: http://api.jquery.com/category/events/
Oder du startest ein animate() über dein Event. Nachzulesen unter http://api.jquery.com/animate/.
Da kannst du dann einfach alle möglichen CSS-Eigenschaften ändern lassen. Natürlich auch den .top-Wert deines DIVs.
MfG
Snoopy
Also, ich würds hiermit machen:
http://api.jquery.com/slideDown
http://api.jquery.com/slideUp
Viele Grüße
Mit der Seite komm ich nicht ganz klar, aber trotzdem danke.
Ja, das geht auf jeden Fall. DHTML ist HTML mit Javascript.
Schau mal unter http://http://script.aculo.usGruß, Alex
Danke. Nicht schlecht, daraus lässt sich schon was machen.
So ungefähr. Danke.
Danke.
Danke. Das ist die beste Antwort für mich. Im Firefox fährt der Gutscheon beim ersten Mal sogar von selbst raus, beim IE leider nicht. Aber ist trotzdem gut.
Danke…
Die Seite ist wirklich gut, wurde mir schon ein paarmal empfohlen. Danke.
Teilweise auch ganz gut, kann ich bestimmt noch mal für was anderes brauchen. Danke.
Click doch mal auf „documentation site“ und dann auf Effect.SlideDown, das resultiert in http://madrobby.github.com/scriptaculous/effect-slid… und da ist es gutes Beispiel.
Ah okay. Ich müsste den SlideDown und SlideUp - Effekt kombinieren und an der Position was ändern, dann könnt ich’s hinkriegen. Danke.
Click doch mal auf „documentation site“ und dann auf
Effect.SlideDown, das resultiert in
http://madrobby.github.com/scriptaculous/effect-slid… und
da ist es gutes Beispiel.
Moin.
Habe die Frage eben bei mir gefunden. Bin zur Zeit nicht so aktiv hier. Die Bewegung eines Fensters oder Objektes ist mit Javascript ohne weiteres zu machen, in dem man die Koordinaten über eine Schleife pixelweise verändert. So kann man das Objekt sicher auch oben hinaus wandern lassen, aber das habe ich selbst noch nie gebraucht. Dazu gibt es garantiert Beispielcode im Netz.
Viele Grüße
Thomas