Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zmiana rozmiaru div-a - problem
dag1980
post 27.01.2010, 11:43:35
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Nie mam pojęcia jak zrobić aby po najechaniu na diva powiększał on się ale równomiernie na prawo i lewo a nie jak do tej pory na prawo.
Ktoś może pomóc.

Korzystam z biblioteki mootols

Strona

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<title></title>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. 	<script type="text/javascript" src="mootools.js"></script>
  8. 	<script type="text/javascript" src="mootools-2.js"></script>
  9. 	<link rel="stylesheet" type="text/css" href="style-2.css" />
  10.  
  11.  
  12. </head>
  13. <body>
  14. <ul id="menu">
  15. 	<li><div class="el" >asa</div></li>
  16. 	<li><div class="el">asa</div></li>
  17. 	<li><div class="el">asa</div></li>
  18. 	<li><div class="el">asa</div></li>
  19.  
  20. </ul>
  21.  
  22.  
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext



style.css

[HTML] pobierz, plaintext 
  1. div#content{
  2. 	padding-bottom: 100px;
  3. }
  4.  
  5. ul#menu{
  6. 	list-style-type: none;
  7. }
  8.  
  9. ul#menu  li{
  10. 	padding: 5px;
  11. 	text-align: center;
  12. 	display: block;
  13. 	float: left;
  14. 	width: 128px;
  15. 	height: 128px;
  16. }
  17.  
  18. ul#menu  li img{
  19. 	width: 48px;
  20. 	height: 48px;
  21. 	border: 0px;
  22. }
  23.  
  24. ul#menu li a{
  25. 	color: #000;
  26. 	font-weight: bold;
  27. 	font-size: 24px;
  28. 	font-family: "Trebuchet MS";
  29. 	text-decoration: none;
  30. }
  31.  
  32. div.el {
  33. 		width:48px; height: 48px;
  34. 		background-color:#00FF66;
  35. }
[HTML] pobierz, plaintext


Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
karolrynio
post 27.01.2010, 14:49:52
Post #2





Grupa: Zarejestrowani
Postów: 144
Pomógł: 25
Dołączył: 2.02.2009

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

Jak zwiększasz szerokość diva to dodaj mu ujemny margines, żeby było równomiernie możesz margines obliczyc wedlug wzoru: margines = (obecna szerokosc - domyslna szerokosc) / 2
Go to the top of the page
+Quote Post
skowron-line
post 27.01.2010, 16:45:04
Post #3





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Sprawdź sobie taki kod.
[HTML] pobierz, plaintext 
  1. <div id="a" style="width:100;height:100;background-color:pink;margin-left:300px; margin-top:200"></div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long'});
  3.         m.start({
  4.             'width': [100, 400],
  5.             'height':[100, 500],
  6.             'margin-left': [ $('a').getStyle( 'margin-left'), 200 ],
  7.             'margin-top': [ $('a').getStyle('margin-left'), 200 ]
  8.         });
  9. })
[JAVASCRIPT] pobierz, plaintext

Dokładnie to co napisał kolega wyżej ale w przełożeniu na mootools -a


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
dag1980
post 28.01.2010, 07:49:47
Post #4





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Skopiowałem ten kod, wstawiłem w odpowiednie miejsca i nic się nie dzieje, oprócz tego że wyświetla mi się purpurowy kwadrat ...
Go to the top of the page
+Quote Post
skowron-line
post 28.01.2010, 09:22:55
Post #5





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Cytat(dag1980 @ 28.01.2010, 07:49:47 ) *
Skopiowałem ten kod, wstawiłem w odpowiednie miejsca i nic się nie dzieje, oprócz tego że wyświetla mi się purpurowy kwadrat ...


I pewnie nie sprawdziłeś w konsoli błędów co jest nie tak
http://skowronline.pl/a/ wrzuciłem do siebie podejrzyj źródło i wszystko stanie się jasne.


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
dag1980
post 28.01.2010, 22:58:48
Post #6





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Racja, zapomniałem o tym by sprawdzić to w konsoli, ale ok, teraz działa.
Chcąc iść dalej próbowałem wywołać powiększanie i pomniejszenie elementu po najechaniu i zjechaniu z niego kursorem myszy,
udało się ale nie do końca, na początku widoczny jest lekki skok, i drugi problem to taki że nieraz efekt równomiernego powiększania nie działa.
Problem ten występuje wtedy kiedy przed zakończeniem animacji zjedziemy kursorem z obiektu .

Przykład

A tu kod

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <META HTTP-EQUIV="Pragma" CONTENT="no-cache"; charset="windows-1250">
  4. <script type="text/javascript" src="a_pliki/mootools-1.2.4-core-nc.js"></script>
  5. <script type="text/javascript" src="a_pliki/mootools-1.2.4.2-more.js"></script>
  6. <script type="text/javascript">
  7. window.addEvent( 'domready', function(){
  8.  
  9.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  10.  
  11. 	$('a').addEvents({'mouseenter': function(){
  12.         m.start({
  13.             'width': [100, 400],
  14.             'height': [100, 500],
  15.             'margin-left': [ $('a').getStyle( 'margin-left'), 200 ],
  16.             'margin-top': [ $('a').getStyle('margin-left'), 200 ]
  17.         });
  18. 	}});
  19.  
  20. 	$('a').addEvents({'mouseleave': function(){
  21.         m.start({
  22.             'width': [400, 100],
  23.             'height': [500, 100],
  24.             'margin-left': [ $('a').getStyle( 'margin-left'), 300 ],
  25.             'margin-top': [ $('a').getStyle('margin-left'), 300 ]
  26.         });
  27. 	}});
  28.  
  29.  
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div id="a" style="width:100px;height:100px;background-color:pink;margin-left:300px; margin-top:200px"></div>
  35.  
  36. </body>
  37. </html>
  38.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
skowron-line
post 29.01.2010, 10:21:23
Post #7





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  3.     var size = $H( $('a').getStyles('width','height', 'margin-left', 'margin-top'));
  4.  
  5.     $('a').addEvents({
  6.         'mouseenter': function(){
  7.             m.cancel();
  8.             m.start({
  9.                 'width': [ size.width, 400 ],
  10.                 'height': [ size.height, 400 ],
  11.                 'margin-left': [ size.get('margin-left'), '-200' ],
  12.                 'margin-top': [ size.get('margin-top'), '-200' ]
  13.             });
  14.         },
  15.         'mouseleave': function(){
  16.             m.cancel();
  17.             m.start({
  18.                 'width': [ 400, size.width ],
  19.                 'height': [ 400, size.height ],
  20.                 'margin-left': [ '-200', size.get('margin-left') ],
  21.                 'margin-top': [ '-200', size.get('margin-top') ]
  22.             });
  23.         }
  24.     });
  25. });
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. .divs {
  2.     width:200px;
  3.     height:200px;
  4.     position:absolute;
  5.     left:50%;
  6.     top:50%;
  7.     background-color: silver;
  8.     margin-top: -100px;
  9.     margin-left: -100px;
  10. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <div id="a" class="divs"></div>
[HTML] pobierz, plaintext


Zwróć uwagę na to że kiedy zjedziesz z elementu przed końcem animacji to będzie przeskok wielkości i zmniejszenie, nie jest błąd jest to spowodowane tym że na sztywno są ustawione wartości dla width i height. Dla płynnego rozszerzania i zmniejszania potrzebne jest policzenie przyrostu wartości width i height tak by było wiadomo do ilu przyrosło przed zjechaniem / wjechaniem myszki z / na element.

EDIT:

Żeby nie było przeskoku, należy nie podawać wartości początkowej animacji.

[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  3.     var size = $H( $('a').getStyles('width','height', 'margin-left', 'margin-top'));
  4.     $('a').addEvents({
  5.         'mouseenter': function(){
  6.             m.cancel();
  7.             m.start({
  8.                 'width': 400,
  9.                 'height': 400,
  10.                 'margin-left':  '-200' ,
  11.                 'margin-top': '-200' 
  12.             });
  13.         },
  14.         'mouseleave': function(){
  15.             m.cancel();
  16.             m.start({
  17.                 'width': size.width,
  18.                 'height': size.height ,
  19.                 'margin-left': size.get('margin-left'),
  20.                 'margin-top': size.get('margin-top')
  21.             });
  22.         }
  23.     });
  24. });
[JAVASCRIPT] pobierz, plaintext


http://skowronline.pl/a/

Ten post edytował skowron-line 29.01.2010, 10:53:06


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
dag1980
post 2.02.2010, 09:27:47
Post #8





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Elegancko, dzięki za pomoc.
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 07:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn