mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:24 Benutzername: Passwort: Auto-Login

Thema: Ebenen Position in Cookie speichern vom 05.08.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Ebenen Position in Cookie speichern
Autor Nachricht
snaich
Threadersteller

Dabei seit: 05.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 05.08.2008 14:27
Titel

Ebenen Position in Cookie speichern

Antworten mit Zitat Zum Seitenanfang

Hallo,
ich habe eine Webseite mit Ebenen, diese kann ich verschieben. Nun möchte ich das die Position der Ebenen in einem Coockie gespeichert wird. In der Zwischenzeit habe ich folgend Anleitung gefunden (den oberen Teil benötige ich - glaube ich nicht - meine Ebenen kann ich ja schon bewegen). Allerdings gelingt es mir nicht aus den unteren beiden Teilen ein Script zu erstellen das meine Ebenenposition speichert... Kann mir bitte jemand auf die Sprünge helfen ? Danke : )

<DEFANGED_script language="JavaScript1.2" type="text/javascript">
<!--
drag = "inaktiv";
aktivX = 0;
aktivY = 0;
// Wir brauchen eine neue globale Variable, die das derzeit
// aktive Element angibt:
aktivDiv = null;
// Ausserdem halten wir den z-index-Wert des derzeit aktiven
// Elements fest, damit wir das nächste aktive Element
// darüber legen können. Am Anfang setzen wir ihn einfach
// auf 1000:
aktivZindex = 1000;
function init() {
// Im Array divs[] sammeln wir alle (positionierten) div-
// Elemente der Seite:
divs = (document.layers) ? document.layers :
(document.all) ? document.all.tags("DIV") :
document.getElementsByTagName("DIV");
// Jetzt weisen wir jedem div den MouseDown-Handler zu:
for (i=0; i<divs.length; i++) {
if (divs[i].captureEvents) // Netscape 4
divs[i].captureEvents(Event.MOUSEDOWN);
divs[i].onmousedown = mdown;
}
// die andern Handler nicht vergessen:
if (document.captureEvents) // Netscape
document.captureEvents(Event.MOUSEMOVE |
Event.MOUSEUP);
document.onmouseup = mup;
document.onmousemove = mmove;
}
window.onload = init;
function mdown(e){
// Wir müssen onmousedown herausfinden, welches div-
// Element aktiviert wurde. Dazu benutzen wir "this".
// Dann zählen wir den bislang höchsten z-Index-Wert eins
// nach oben und weisen ihn dem aktiven div zu. Der Rest
// ist wie gehabt.
aktivDiv = this;
if (document.layers) aktivDiv.zIndex = aktivZindex++;
else aktivDiv.style.zIndex = aktivZindex++;
drag = "aktiv";
aktivX = (e) ? e.pageX :
event.clientX + document.body.scrollLeft;
aktivY = (e) ? e.pageY :
event.clientY + document.body.scrollTop;
return false;
}
function mmove(e){
// fast keine Änderungen im Vergleich zum einfachen
// Drag&Drop
if (drag == "inaktiv") return;
var neuX = (e) ? e.pageX :
event.clientX + document.body.scrollLeft;
var neuY = (e) ? e.pageY :
event.clientY + document.body.scrollTop;
var distX = (neuX-aktivX);
var distY = (neuY-aktivY);
aktivX = neuX;
aktivY = neuY;
if (document.layers) {
aktivDiv.left += distX;
aktivDiv.top += distY;
}
else {
aktivDiv.style.left =
parseInt(aktivDiv.style.left) + distX;
aktivDiv.style.top =
parseInt(aktivDiv.style.top) + distY;
}
}
function mup(e){
drag = "inaktiv";
}
//-->
</DEFANGED_script>


Was noch fehlt, ist die Speicherung des Layouts in einem Cookie.
Zuerst ergänzen wir die Funktion mup() so, dass bei jedem Mouseup-Event die aktuellen div-Positionen in den Cookie geschrieben werden. Dazu gehen wir den Array divs[]durch, fragen die Koordinaten ab und hängen sie zusammen an einen String. Aus diesem String müssen wir später die Koordinaten wieder rekonstruieren können, deshalb stellen wir zwischen zwei zusammengehörige x/y-Werte jeweils ein Komma und trennen sie vom nächsten Wertpaar mit einem Plus-Zeichen:


function mup(e){
drag = "inaktiv";
// Cookie-String zusammenstellen:
var cookieString = "";
for (i=0; i<divs.length; i++) {
var posX = (document.layers) ? divs[i].left :
parseInt(divs[i].style.left);
var posY = (document.layers) ? divs[i].top :
parseInt(divs[i].style.top);
cookieString += posX + "," + posY + "+";
}
// Verfallspunkt in 100 Tagen:
var jetzt = new Date();
var verfall = new Date(jetzt.getTime() +
1000*60*60*24*100);
// Cookie schreiben:
schreibCookie("Layout", cookieString, verfall);
}



In der init()-Funktion lesen wir den Cookie aus und setzen alle Elemente an ihren dort gespeicherten Platz:



function init() {
... bisherige Anweisungen ...
// Cookie lesen:
var cookieString = liesCookie("Layout");
if (cookieString) {
// Array mit Wertpaaren erzeugen:
var divPosArray = cookieString.split("+");
for (i=0; i<divs.length; i++) {
// Werte aus Wertpaar lesen:
var posX = divPosArray[i].split(",")[0];
var posY = divPosArray[i].split(",")[1];
// Elemente positionieren:
if (document.layers) {
divs[i].left = posX;
divs[i].top = posY;
}
else {
divs[i].style.left = posX;
divs[i].style.top = posY;
}
}
}
}
  View user's profile Private Nachricht senden
snaich
Threadersteller

Dabei seit: 05.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 06.08.2008 15:10
Titel

Antworten mit Zitat Zum Seitenanfang

Leute : ) was ist los... Kann mir keiner helfen ?

Für jemand der es kann sollte das doch echt kein Ding sein...

Grüße
  View user's profile Private Nachricht senden
Anzeige
Anzeige
snaich
Threadersteller

Dabei seit: 05.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 14.08.2008 20:46
Titel

Antworten mit Zitat Zum Seitenanfang

HELP !
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 14.08.2008 21:54
Titel

Antworten mit Zitat Zum Seitenanfang

Setz doch bitte den Code mal in BBCode um, dann wird es übersichtlicher, am besten rückst du ihn dann noch ein. Dann findet sich eher einer, der sich das durchliest.
Bin leider selbst kein JS-Profi, aber wäre cool, wenn du ne Fehlermeldung oder wenigstens sagen könntest, wo das Problem nun liegt.

Lieber Gruß
Smooth-Graphics
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
snaich
Threadersteller

Dabei seit: 05.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 14.08.2008 22:07
Titel

Antworten mit Zitat Zum Seitenanfang

hey : )

also - stand der dinge ist dieser:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script language="JavaScript1.2" type="text/javascript">
<!--
drag = "inaktiv";
aktivX = 0;
aktivY = 0;
// Wir brauchen eine neue globale Variable, die das derzeit
// aktive Element angibt:
aktivDiv = null;
// Ausserdem halten wir den z-index-Wert des derzeit aktiven
// Elements fest, damit wir das nächste aktive Element
// darüber legen können. Am Anfang setzen wir ihn einfach
// auf 1000:
aktivZindex = 1000;
function init() {
// Im Array divs[] sammeln wir alle (positionierten) div-
// Elemente der Seite:
divs = (document.layers) ? document.layers :
(document.all) ? document.all.tags("DIV") :
document.getElementsByTagName("DIV");
// Jetzt weisen wir jedem div den MouseDown-Handler zu:
for (i=0; i<divs.length; i++) {
if (divs[i].captureEvents) // Netscape 4
divs[i].captureEvents(Event.MOUSEDOWN);
divs[i].onmousedown = mdown;
}
// die andern Handler nicht vergessen:
if (document.captureEvents) // Netscape
document.captureEvents(Event.MOUSEMOVE |
Event.MOUSEUP);
document.onmouseup = mup;
document.onmousemove = mmove;
}
window.onload = init;
function mdown(e){
// Wir müssen onmousedown herausfinden, welches div-
// Element aktiviert wurde. Dazu benutzen wir "this".
// Dann zählen wir den bislang höchsten z-Index-Wert eins
// nach oben und weisen ihn dem aktiven div zu. Der Rest
// ist wie gehabt.
aktivDiv = this;
if (document.layers) aktivDiv.zIndex = aktivZindex++;
else aktivDiv.style.zIndex = aktivZindex++;
drag = "aktiv";
aktivX = (e) ? e.pageX :
event.clientX + document.body.scrollLeft;
aktivY = (e) ? e.pageY :
event.clientY + document.body.scrollTop;
return false;
}
function mmove(e){
// fast keine Änderungen im Vergleich zum einfachen
// Drag&Drop
if (drag == "inaktiv") return;
var neuX = (e) ? e.pageX :
event.clientX + document.body.scrollLeft;
var neuY = (e) ? e.pageY :
event.clientY + document.body.scrollTop;
var distX = (neuX-aktivX);
var distY = (neuY-aktivY);
aktivX = neuX;
aktivY = neuY;
if (document.layers) {
aktivDiv.left += distX;
aktivDiv.top += distY;
}
else {
aktivDiv.style.left =
parseInt(aktivDiv.style.left) + distX;
aktivDiv.style.top =
parseInt(aktivDiv.style.top) + distY;
}
}
function mup(e){
drag = "inaktiv";
// Cookie-String zusammenstellen:
var cookieString = "";
for (i=0; i<divs.length; i++) {
var posX = (document.layers) ? divs[i].left :
parseInt(divs[i].style.left);
var posY = (document.layers) ? divs[i].top :
parseInt(divs[i].style.top);
cookieString += posX + "," + posY + "+";
}
// Verfallspunkt in 100 Tagen:
var jetzt = new Date();
var verfall = new Date(jetzt.getTime() +
1000*60*60*24*100);
// Cookie schreiben:
schreibCookie("Layout", cookieString, verfall);
}
//-->
</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 253px; top: 203px; background-color: #666666; layer-background-color: #666666; border: 1px none #000000;"></div>

</body>
</html>


das ermöglicht es mir die erstellte ebene zu ziehen. nur schaffe ich es nicht folgenden teil noch einzubinden

function init() {
// Cookie lesen:
var cookieString = liesCookie("Layout");
if (cookieString) {
// Array mit Wertpaaren erzeugen:
var divPosArray = cookieString.split("+");
for (i=0; i<divs.length; i++) {
// Werte aus Wertpaar lesen:
var posX = divPosArray[i].split(",")[0];
var posY = divPosArray[i].split(",")[1];
// Elemente positionieren:
if (document.layers) {
divs[i].left = posX;
divs[i].top = posY;
}
else {
divs[i].style.left = posX;
divs[i].style.top = posY;
}

wenn ich das beim bestehenden function init() teil dazufüge geht gar nichts mehr...
  View user's profile Private Nachricht senden
 
Ähnliche Themen Cookie soll bestimmten Wert speichern?
Photoshop Ebenen per Batch in als gif speichern
Ebenen automatisch einzeln speichern?
Photoshop: Ebenen einzeln speichern + eine zusätzliche
Cookie auslesen
AgeVerification Cookie behandlung
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.