Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[javascript] Przesuwanie diva z zapamiętywaniem położenia - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [javascript] Przesuwanie diva z zapamiętywaniem położenia (/thread-javascript-przesuwanie-diva-z-zapamietywaniem-polozenia)



[javascript] Przesuwanie diva z zapamiętywaniem położenia - jagron - 25-11-2008

No właśnie wypracowałem taki oto kod:
Kod:
<html>
<head>
<script>
var twojDiv;
function czytaj_ciacho(nazwa)

{

nazwa+="=";

startCookie=document.cookie.indexOf(nazwa);

if (startCookie==-1) {return ""}

startCookie+=nazwa.length;

if (document.cookie.indexOf(";",startCookie)==-1)

{

koniecCookie=document.cookie.length;

}

else

{

koniecCookie=document.cookie.indexOf(";",startCookie);

}

textCookie=document.cookie.substring(startCookie,koniecCookie);
//kopiuje treść cookie

textCookie=unescape(textCookie);
//rozkodowuje treść
return textCookie;
//zwraca wartość

}

function przemiescDiva()
{
twojDiv.style.left = Math.round(Math.random()*100)+'%';
twojDiv.style.top = Math.round(Math.random()*100)+'%';
}
function zamknij()
{
    przesuwany = document.getElementById("1234");
    przesuwany.style.visibility = "hidden";
    twojDiv.style.visibility="hidden";    
    clearInterval(timer);
}
function ukryj()
{
    przesuwany = document.getElementById("1234");
    przesuwany.style.visibility = "visible";
    twojDiv.style.visibility="hidden";
    clearInterval(timer);
}
function pokaz()
{
    przesuwany = document.getElementById("1234");
    przesuwany.style.visibility = "hidden";
    twojDiv.style.visibility="visible";
    setInterval(timer);
}
onload = function()
{
twojDiv = document.getElementById("123");
twojDiv.style.position = 'absolute';
timer = setInterval(przemiescDiva, 5*1000);//co pięć sekund
}

var global = false;

document.onmousemove = function(e)
{
  if(global)
  {
    if(e) event = e;
    global.style.top = (event.clientY - 50) + 'px';
    global.style.left = (event.clientX - 50) + 'px';
        
        gst_tresc=escape(global.style.top); //kodujemy tekst
        gsl_tresc=escape(global.style.left); //kodujemy tekst
        document.cookie="gst="+gst_tresc;
        document.cookie="gsl="+gsl_tresc;
        
  }
}

document.onmouseup = function()
{
   global = false;
}


</script>
</HEAD>
<BODY>
<!-- wrap starts here -->
<div id= "123" style="visibility:hidden;">
<a href="java script:zamknij();">Wyłącz</a><img src=papuga.png><br><a href="java script:ukryj();" style="color:black;">Wył±cz automatyczne przesuwanie</a>
</div>
<div id = "1234" onmousedown="global=this" style="position:absolute;width:100px;height:100px;left:10px;top:10px;visibility:vi
sible;">
<a href="java script:zamknij();">Wyłącz</a><img src=papuga.png><br><a href="java script:pokaz();" style="color:black">Wł±cz automatyczne przesuwanie</a>
</div>
</body>
</html>
No włąśnie i teraz się zapytam, jak zrobić do tego zapamiętywanie pozycji na cookies? Dodawanie cookies z pozycją już dałem, ale teraz nie wiem, gdzie tę pozycję zczytać i gdzie ją wstawić, dodam że cookies ma treść np. 100px. Proszę o szybką pomoc!


RE: [javascript] Przesuwanie diva z zapamiętywaniem położenia - pRzemo - 01-12-2008

Nie wiem dokładnie do czego chcesz wykorzystać taki kod, ale mam nadzieję, że chodziło Ci o coś takiego:
Kod:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test</title>

<script type="text/javascript">

var twojDiv;
var interval;

function przemiescIZapisz()
{
    twojDiv.style.left = Math.round(Math.random()*100)+'%';
    twojDiv.style.top = Math.round(Math.random()*100)+'%';
    
    document.cookie = 'left=' + twojDiv.style.left.toString();
    document.cookie = 'top=' + twojDiv.style.top.toString();
}

function start()
{
    var dim;
    
    if(document.cookie.indexOf('left') != -1)
    {
        var tmp = document.cookie.replace(/left=/, "");
        var tmp = tmp.replace(/top=/, "");
        dim = tmp.split("; ");
    }
    else
    {
        dim = new Array(2);
        dim[0] = '0px'; dim[1] = '0px';
    }
    
    twojDiv.style.left = dim[0];
    twojDiv.style.top = dim[1];
}

window.onload = function()
{
    twojDiv = document.getElementById("dif");
    start();
    interval = setInterval('przemiescIZapisz()', 2000);
}

</script>
</head>

<body>

<div id="dif" style="position:absolute;background:#FF0;border:1px solid black;width:50px;height:50px"></div>

</body>
</html>
Na początku funkcja start() sprawdza czy ciastko zostało utworzone. Jeżeli tak - pobiera wartości top i left, jeżeli nie - ustawia div'a na pozycji 0px/0px. Następnie setInterval() wywołuje funkcję przemiescIZapisz(), ktora to umieszcza diva w losowo wybrane miejsce i zapisuje wartości do ciastka...

Mam nadzieję, że pomogłem Smile