Wiem że któryś z użytkowników forum kiedyś pisał okienka ale ich nie mogę znaleźć. To co znalazłem na sieci miało zakodowany kod js, a jak chciałbym coś podobnego umieścić na swoje stronie i przy okazji nauczyć się pisać kod odpowiadający za nie.
Jeśli ktoś mógł by podać jakiś prosty kod był bym wdzięczny.
Tak wiem że są, ale nie potrafię ich znaleźć jedyna co mam praktycznie pasujące do moich wymagań to: http://jetlogs.org/jquery/floating_dialog.php.
Mi potrzebne jest jedynie okienko takie samo jak w powyższym przykładzie, dlaczego nie użyję tamtego?
- Zmutowany kod samego okienka.
Jeśli ktoś zna coś podobnego (interesuje mnie samo okienko bez zbędnych dodatków) poprosił bym o link.
Mi potrzebne jest jedynie okienko takie samo jak w powyższym przykładzie, dlaczego nie użyję tamtego?
- Zmutowany kod samego okienka.
Jeśli ktoś zna coś podobnego (interesuje mnie samo okienko bez zbędnych dodatków) poprosił bym o link.
Tak oglądałem ten skrypt jednak jest on ogromny i znalezienie odpowiednich elementów będzie trudne - zaraz zresztą popatrzę.
Wiem, że ktoś z tego forum już kiedyś to pisał i wyglądało to ładnie ale nie mogę tego znaleźć!
Wiem, że ktoś z tego forum już kiedyś to pisał i wyglądało to ładnie ale nie mogę tego znaleźć!
Ściągnij jQuery, będziesz mógł robić dialogboxy: http://docs.jquery.com/UI/Dialog
Okienko jest super, tylko czas ładowania strony wzrósł od 0.300 do 2.150... 
Z tego co patrzę jest to bardzo skomplikowane rozwiązanie i nie powiem by się nie zacinało...
Znacie jeszcze może coś podobnego interesuje mnie mechanizm ruszania divem po kliknięciu i sposób zablokowania tak by nie można było okienkiem jechać nieskończenie w dół.
Z góry dzięki!
Z tego co patrzę jest to bardzo skomplikowane rozwiązanie i nie powiem by się nie zacinało...
Znacie jeszcze może coś podobnego interesuje mnie mechanizm ruszania divem po kliknięciu i sposób zablokowania tak by nie można było okienkiem jechać nieskończenie w dół.
Z góry dzięki!
To zwykły drag&drop z pewnym 'dodatkiem' jakim jest ramka za którą można przeciągać div-a - kilka linijek kodu - kiedyś pisałem(na podstawie innego kodu) własny skrypt, którego jak zwykle nie dokończyłem, ale akurat tamto zrobiłem: zaraz go poprawię i przedstawię tutaj 
--edit--
No i już - możliwe, że trochę zbędnego kodu by się znalazło, jakieś błędy i te sprawy, ale działa pod FF3 - w innych nie testowałem, gdyż jak pisałem był to skrypt niedokończony - teraz wywaliłem kilkanaście opcji, żeby to było lekkie - jak czegoś Ci brakuje to napisz to dopisze może :
--edit--
No i już - możliwe, że trochę zbędnego kodu by się znalazło, jakieś błędy i te sprawy, ale działa pod FF3 - w innych nie testowałem, gdyż jak pisałem był to skrypt niedokończony - teraz wywaliłem kilkanaście opcji, żeby to było lekkie
- jak czegoś Ci brakuje to napisz to dopisze może :Kod
<html>
<head>
<script>
function dnd(obj,handle){
function init(){
handle.onmousedown = function(e){ dragDrop(obj,e); }
obj.onselectstart = function(){return false;};
obj.unselectable = "on";
obj.style.MozUserSelect = "none";
}
function dragDrop(o,e,x,y){
e = e || e.event;
if(document.last) document.last.style.zIndex = 1;
with(document.last = o){
e = e || e.event;
o.style.zIndex = 10;
x = ~~(e.layerX || e.offsetX);
y = ~~(e.layerY || e.offsetY);
}
document.onmousemove = function(e){
e = e || e.event;
document.last.style.left = e.clientX - x;
document.last.style.top = e.clientY - y;
return false;
}
document.onmouseup = function(){
this.onmousemove = null;
}
}
init();
}
window.onload = function(){
dnd(document.getElementById('test1'),document.getElementById('handle1'));
dnd(document.getElementById('test2'),document.getElementById('handle2'));
}
</script>
<style>
div{ position: absolute; width: 100px; height: 100px; border: 1px solid black;}
#handle1,#handle2 { text-align: center; width: 80%; height: 30px; top: 5%; left: 10%; background-color: white;}
</style>
</head>
<body>
<div id="test1" style="left: 100px; top:100px; background-color: brown;"><div id="handle1">Handle</div</div>
<div id="test2" style="left: 300px; top:300px; background-color: red;"><div id="handle2">Handle</div></div>
</body>
</html>
<head>
<script>
function dnd(obj,handle){
function init(){
handle.onmousedown = function(e){ dragDrop(obj,e); }
obj.onselectstart = function(){return false;};
obj.unselectable = "on";
obj.style.MozUserSelect = "none";
}
function dragDrop(o,e,x,y){
e = e || e.event;
if(document.last) document.last.style.zIndex = 1;
with(document.last = o){
e = e || e.event;
o.style.zIndex = 10;
x = ~~(e.layerX || e.offsetX);
y = ~~(e.layerY || e.offsetY);
}
document.onmousemove = function(e){
e = e || e.event;
document.last.style.left = e.clientX - x;
document.last.style.top = e.clientY - y;
return false;
}
document.onmouseup = function(){
this.onmousemove = null;
}
}
init();
}
window.onload = function(){
dnd(document.getElementById('test1'),document.getElementById('handle1'));
dnd(document.getElementById('test2'),document.getElementById('handle2'));
}
</script>
<style>
div{ position: absolute; width: 100px; height: 100px; border: 1px solid black;}
#handle1,#handle2 { text-align: center; width: 80%; height: 30px; top: 5%; left: 10%; background-color: white;}
</style>
</head>
<body>
<div id="test1" style="left: 100px; top:100px; background-color: brown;"><div id="handle1">Handle</div</div>
<div id="test2" style="left: 300px; top:300px; background-color: red;"><div id="handle2">Handle</div></div>
</body>
</html>
A więc:
- pod ie nie działa (i nie wiem jak to naprawić może jakiś pomysł)?
- okienko skacze o jakieś 10 px w górę i lewo przy pierwszym ruchu (poprawię sam)
Wielkie dzięki, jeszcze tylko pomysł na naprawę tego w ie i będzie super. ;]
- pod ie nie działa (i nie wiem jak to naprawić może jakiś pomysł)?
- okienko skacze o jakieś 10 px w górę i lewo przy pierwszym ruchu (poprawię sam)
Wielkie dzięki, jeszcze tylko pomysł na naprawę tego w ie i będzie super. ;]
W IE nie działa bo to badziew - a tak na serio to nie mam jak sprawdzić bo nie mam IE(linux), ale tak:
Co do skakania - u mnie to nie występuje
- a tak na serio to nie mam jak sprawdzić bo nie mam IE(linux), ale tak:Kod
// dodaj to e=e || e.event; <-- może gdzieś zapomniałem: tu np. handle.onmousedown = function(e){ /*Tu to dodaj*/dragDrop(obj,e); }
Co do skakania - u mnie to nie występuje
Skacze gdy:
- Klikam na kwadrat - wszystko jest ok
- trzymam - ok
- ruszę o 1px (może być dowolny ruch) w którą kolwiek stronę - ramka przesuwa się o około 10px w up i left
- ruszę o 1px (może być dowolny ruch) w którą kolwiek stronę - jest ok
- puszczam myszkę - ok
- zaczyna się od nowa, czyli się przesunie
Problem jest taki że jak zaznaczymy przesuniemy minimalnie puścimy i znowu ruszymy, tak kilku krotnie to ramka jest już poza kursorem..
Co do tego dla je zaraz sprawdzę.
- Klikam na kwadrat - wszystko jest ok
- trzymam - ok
- ruszę o 1px (może być dowolny ruch) w którą kolwiek stronę - ramka przesuwa się o około 10px w up i left
- ruszę o 1px (może być dowolny ruch) w którą kolwiek stronę - jest ok
- puszczam myszkę - ok
- zaczyna się od nowa, czyli się przesunie
Problem jest taki że jak zaznaczymy przesuniemy minimalnie puścimy i znowu ruszymy, tak kilku krotnie to ramka jest już poza kursorem..
Co do tego dla je zaraz sprawdzę.
Rzeczywiście masz rację - to dobry kod:
Kod
document.onmousemove = function(e){
e = e || e.event;
document.last.style.left = (e.clientX - x - handle.offsetLeft) + 'px';
document.last.style.top = (e.clientY - y - handle.offsetTop) + 'px';
return false;
}
e = e || e.event;
document.last.style.left = (e.clientX - x - handle.offsetLeft) + 'px';
document.last.style.top = (e.clientY - y - handle.offsetTop) + 'px';
return false;
}
Jest też takie cuś, http://mintajax.pl/Przewodnik/Drag-n-Drop/, z doświadczenia powiem, że się sprawdza całkiem nieźle.
Mimo to przesiadłem się na jQuery jakiś czas temu.
Mimo to przesiadłem się na jQuery jakiś czas temu.
Pomogło w przypadku skakania okna ale w ie nadal nie działa... ;/
Co do jquery to zamierzam ten kod przepisać do niego, ale dialog w jquery jest że tak powiem "głupi" w moim odczuciu.
Czekam na pomysł dla ie, twój kod bardzo mi się podoba. ;]
Edit:
pejott - Twoje rozwiązanie też jest fajne ale daje mniejsze możliwości nauki...
Co do jquery to zamierzam ten kod przepisać do niego, ale dialog w jquery jest że tak powiem "głupi" w moim odczuciu.
Czekam na pomysł dla ie, twój kod bardzo mi się podoba. ;]
Edit:
pejott - Twoje rozwiązanie też jest fajne ale daje mniejsze możliwości nauki...
Cytat
twój kod bardzo mi się podoba. ;]
Cieszę się
Co do IE - nie wiem co to może być patrząc tylko na kod - wieczorem postaram się wejść na Windows-a i spróbuje poprawić(wyedytuje posta)
--edit--
Pod IE6 nie daje rady - pod resztą nie sprawdzałem bo nie mam. Mam zły dzień, może później coś wymyślę na razie daj wszędzie(tam gdzie wtedy Ci pokazałem też) (powinno zadziałać na IE7|8 - choć nie obiecuje...) :
Kod
e = e || window.event;
Pod IE6 badzIEw zapamiętuje jak gdyby zmienne obj z poprzedniego zdarzenia - nie wiem co jest źle, wszystko napisane jest ok, pewnie to jakiś ich rażący błąd - możliwe, że będę musiał dodać jakąś zmienną globalną(na razie jest 1), co nie jest wskazane - jak zadziała pod IE7 proponuję olać IE6, która ma już swoje lata - bodajże 8. Ale i tak pomyślę jeszcze co da się zrobić..
Słyszałeś o HTML Application - dokument HTML jako aplikacja?
W necie znajdziesz informacje na ten temat. Jeżeli chcesz przykład to daj znać.
W necie znajdziesz informacje na ten temat. Jeżeli chcesz przykład to daj znać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.