[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
|