Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Div podążający za ekranem ale dopiero od pewnego momentu...
emitra
post
Post #1





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 23.06.2002
Skąd: Opole

Ostrzeżenie: (0%)
-----

Witam serdecznie.
Potrzebuje pomocy i za wszelkie pomysły będę niezmiernie wdzięczny.

Na początek obrazek który zobrazuje problem opisany pod nim.

(IMG:http://xfighter.net/fotoInne/divS.gif)

Legenda:
To czerwone to jakiś obiekt powiedzmy Obrazek albo <div> bedący nagłówkiem kolumny..

Problem:
Chciał bym żeby po załadowaniu strony gdy "Czerwony Obiekt" jest ładnie widoczny był on na miejscu tak jak widac na rysunku z lewej.

Następnie gdy zjeżdżamy skrollem w dół i dochodzimy do momentu ze "Czerwony Obiekt" zaczyna znikac z ekranu ten podąża za nami.


Moj pomysł:
Moim, pomysłem było by wykryć moment znikania "Czerwony Obiekt" i przelaczyc go w tym momencie na position: fixed jednak jak to wykryc.
Probowałem z offsetTop jednak on wskazuje w FF i IE zawsze przesuniecie w pionie wzgledem poczatku strony a nei tego co widzimy.
Probowałem ustawić ukrytego DIVa w pozycji fixed i odejmowac ich offsety od siebie niestety offsetTop obiektu w possition: fixed jest staly co dla mnie jest czyms niezrozumialym skoro sie przemiszcza rrazem z tym co widzimy a jego offsetTop wciaz bez zmian.

Moze istnieje inny parametr niz offsetTop który mogę wykorzystac. a moze jest jaksi prostrzy sposob.

Sprawa dość pilna bo dalsze prace w projekcie czekaja na rozwiazanie lub nie. Twego problemu.
Aha zastępowanie "glowego Diva" Iframem nei wchodzi w gre.

Z pozdrowieniami
czekający na pomoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował emitra 11.10.2007, 07:05:55
Go to the top of the page
+Quote Post
Stalos
post
Post #2





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 28.12.2006

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script>
  4. var t_nazwaPrzegladarki = navigator.appName;
  5. var m_IE = false;
  6. var m_Y = 0;
  7. var m_Y_zmiana = 0;
  8. var licznik = 0;
  9.  
  10.  
  11.         m_IE = (t_nazwaPrzegladarki.indexOf("Explorer")>=0)?true:false;
  12.  
  13.          onload = function(){
  14.         	window.onscroll = sprawdzaj;
  15.         }
  16.  
  17.  
  18.         function mierz_odleglosc(){
  19.         	var obrazek = document.getElementById("obrazek");
  20. 	m_Y = obrazek.offsetTop;
  21.         }
  22.  
  23.         function mierz(){
  24.         	if (!m_IE) document.captureEvents(Event.MOUSEMOVE);
  25.         	document.onmousemove = pobierz_wspolrzedne;
  26.  
  27.         	function pobierz_wspolrzedne(e) {
  28.                 	if (m_IE) { 
  29.         		m_Y_zmiana = event.clientY + document.body.scrollTop;
  30. 		} 
  31. 	else {
  32. 		m_Y_zmiana = e.pageY;
  33. 		}
  34.  
  35. 	if (m_Y_zmiana < 0){
  36. 		m_Y_zmiana = 0;
  37. 	}
  38.  
  39. 	}
  40.         }        
  41.  
  42.         function sprawdzaj(){
  43. 	var obrazek = document.getElementById("obrazek");
  44.         	mierz_odleglosc();
  45.         	window.onmousemove = mierz;
  46.  
  47.  
  48. 	if (m_Y_zmiana >(m_Y+220)){
  49. 		licznik++;
  50. 		var podstaw =licznik +  "0 0 0";
  51. //		alert(m_Y_zmiana);
  52. 		obrazek.style.margin = podstaw;
  53. 	}
  54.  
  55.         }
  56.  
  57. </script>
  58. </head>
  59. <body>
  60. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  61.  
  62. <div id="nazwa" style="margin-left:200px;"><img src="images/1.gif" id="obrazek" /></div>
  63.  
  64. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  65. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  66. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  67.  
  68.  
  69.  
  70. </body>
  71. </html>
[HTML] pobierz, plaintext



Tam jest jeszcze dużo błędów - tylko tak mniej więcej pokazałem że to może działać.

PS - zdaje mi się że można to zrobić dużo łatwiej!
PS2 - jest tam taka wartość 220 - ją trzeba zmienić w zależności od przeglądarki
PS3 - na IE nie testowałem
Go to the top of the page
+Quote Post
emitra
post
Post #3





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 23.06.2002
Skąd: Opole

Ostrzeżenie: (0%)
-----

żeby takie coś działo w takiej formie trzeba powolutku przewijac okno. bo małe szarpniecie naprawdę malutkie i już obrazek nie nadąża.
Poza Ty oparte to jest o miejsce zlapania za scrola i wystaczy ze zlapie sie za wysoko to nie zjezdza w innej odleglosci od ogry niz gdy zalapiemy w sordku. Jak zlapiemy na dole to w ogole zjezdza juz gdy wciaz jest widoczny (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ale dziękuję za odpowiedź.
Może ktoś jeszcze jakiś pomysł.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script>
  4.  
  5. var pozycjaStartowaY = 269;
  6.  
  7. onload = function(){
  8. 	window.onscroll = sprawdzaj;
  9. }
  10.  
  11. function sprawdzaj()
  12. {
  13. 	var obrazek = document.getElementById("obrazek");
  14.  
  15. 	//jezeli jestesmy wyzej to porpawnei umiejscawiamy obrazek nastartowej bo czasem potrafi dosjc do rozbierznosci
  16. 	if ( document.body.scrollTop < pozycjaStartowaY )
  17. 		obrazek.style.top = pozycjaStartowaY;
  18. 	else
  19. 		obrazek.style.top = document.body.scrollTop ; 
  20.  
  21. }
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  27.  
  28. <div id="nazwa" style="margin-left:200px; border:1px solid red; height: 500px;">
  29. <img src="images/address-book.png" id="obrazek" style='position: absolute; top: 269;' /></div>
  30.  
  31. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  32. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  33. <br /><br /><br /><br /><br /><br /><br />
  34.  
  35.  
  36. </body>
  37. </HTML>
[HTML] pobierz, plaintext



Takie coś spłodziłem. Tylko że tak naprawde nie do konca to dziala bo ten Div z czerowna ramka ma byc obszarem w ktorym sie porusza obrazem a ok on wyzej nie poleci ale z dolu wychodzi i teraz czy jest mozliwosc sprawdzenia dolnej granicy Diva. pozycji border-bottom (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) ?

Ten post edytował emitra 12.10.2007, 06:53:20
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.12.2025 - 03:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn