Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery a IE
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
paawian
25.05.2011, 20:07:11
Poniższy kod nie działa mi pod IE. Nie mam pojęcia dlaczego. Ma on za zadanie po kliknięciu w link (lewy lub prawy) przesunąć zdjęcia ustawione w kolejce, tak, że po jednej stronie znikną zdjecia (schowają sie pod DIV nadrzędny) a po drugiej stronie pojawią się kolejnę - taka mała galeria.

Link: http://mateuszpelplinski.prv.pl/kasiaurban - przepraszam za reklamy, darmowa domena.

Pod Chrome, Firefox i Operą działa bez zarzutu. Mógłby ktoś rzucić okiem?

[HTML] pobierz, plaintext 
  1.  
  2. var roller = document.getElementById("roller");
  3. var allPhotos = roller.getElementsByTagName("div").length - 3;
  4.  
  5. var maxMargin = allPhotos * 236 * -1;
  6.  
  7. $("#roll_left").click(function(e)
  8. {
  9.     e.preventDefault();
  10.  
  11.     if(blocked)return;
  12.  
  13.     pause=true;
  14.     blocked=true;
  15.  
  16.     setTimeout('blocked=false',1000);
  17.  
  18.     margin=parseFloat($("#roller").css('marginLeft'));
  19.     if(margin > 0)return;
  20.  
  21.  
  22.      $("#roller").animate({
  23.           marginLeft: "+=236px"
  24.     }, 500);
  25. });
  26.  
  27. $("#roll_right").click(function(e)
  28. {
  29.     e.preventDefault();
  30.  
  31.     if(blocked)return;
  32.  
  33.     pause=true;
  34.     blocked=true;
  35.  
  36.     setTimeout('blocked=false',1000);
  37.  
  38.     margin=parseFloat($("#roller").css('marginLeft'));
  39.     if(margin < maxMargin) return;
  40.  
  41.      $("#roller").animate({
  42.           marginLeft: "-=236px"
  43.     }, 500);
  44. });
  45.  
[HTML] pobierz, plaintext
gargamel
25.05.2011, 21:37:03
Nie zagłębiałem się w kod, ale z doświadczenia tylko Ci powiem że często gdy tego typu skrypty nie chodzą pod IE, pomaga deklaracja:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[HTML] pobierz, plaintext
paawian
31.05.2011, 22:13:02
Niestety nic z tego... ktoś ma jeszcze jakiś pomysł?

Naprawdę nikt, nic? Ludzie, zbierzcie się do kupy, to dla mnie ważne..
proooooszęquestionmark.gif? smile.gif

Chciałbym ponowić prośbę o pomoc gdyż nadal nie mogę znaleźć rozwiązania.
Anybody?
zegarek84
31.05.2011, 22:44:29
link nie działa... luknij sobie w konsoli co pokazuje, jakie błędy są w IE... mi osobiście nie pasuje sam zapis setTimeout('blocked=false',1000); - jeśli już prędzej setTimeout(function(){blocked=false;},1000);
paawian
2.06.2011, 10:34:17
link nie działał akurat jak kliknąłeś bo serwer miałem wyłączony, przepraszam smile.gif

później sprawdzę to co mówisz, dzięki

teraz link już działa
zegarek84
2.06.2011, 15:36:35
problem był głównie w strukturze HTML - a raczej w sposobie ostylowania (pozamieniałem najważniejsze):
[CSS] pobierz, plaintext 
  1. #hidder {
  2. 	WIDTH: 708px; FLOAT: left; HEIGHT: 160px; OVERFLOW: hidden; position: relative;
  3. }
  4. #roller {
  5. 	WIDTH: 2000px; MAX-HEIGHT: 160px; position: absolute;
  6. }
[CSS] pobierz, plaintext

hiderowi dalem pozycjonowanie relatywne coby w nim względnie móc pozycjonować absolutnie... przez floaty na obrazkach musiałem dać jakąś w kosmos sporą szerokość - dałem na rolerze szerokość 2000...

w skryptach powywalałem wszystkie niejawne eval'e na setTimeout i zamieniłem to o czym wspominałem, że mi nie pasuje - być może tam błędów nie było gdyż konsolę włączyłem po dokonaniu zmian... chociaż skrypt chodzi to pytanie po co Ci float do wartości marginesu?? - raczej powinno być parseInt zamiast:
margin=parseFloat($("#roller").css('marginLeft'));

a dokładniej powinno być margin=~~parseInt($("#roller").css('marginLeft')); coby się jeszcze tego NaN pozbyć na początku...
no i obiekty jQuery mogłeś zbuforować - zapamiętać w jakiejś zmiennej coby nie szukać co chwila w drzewie DOM...

NIE SPRAWDZAŁEM TEŻ JAK TO TERAZ WYGLĄDA W INNYCH PRZEGLĄDARKACH - i tak specjalnie musiałem windowsa włączać a konsola pod IE jest tragiczna

cały skrypt js i css poniżej
[JAVASCRIPT] pobierz, plaintext 
  1. var textarea = document.getElementById("description");
  2. var title;
  3. var description;
  4. var password;
  5.  
  6. $("#title").focus(function(e){
  7.    title = $("#title").attr("value");
  8.  
  9.    if(title == "Podaj tytuł zdjęcia...")
  10.         $("#title").attr("value","")
  11. })
  12.  
  13. $("#title").blur(function(e){
  14.     title = $("#title").attr("value");
  15.  
  16.     if(title == "")
  17.         $("#title").attr("value","Podaj tytuł zdjęcia...")
  18. })
  19.  
  20. $("#password").focus(function(e){
  21.    password = $("#password").attr("value");
  22.  
  23.    if(password == "Podaj tytuł zdjęcia...")
  24.         $("#password").attr("value","")
  25. })
  26.  
  27. $("#password").blur(function(e){
  28.     password = $("#password").attr("value");
  29.  
  30.     if(password == "")
  31.         $("#password").attr("value","Podaj tytuł zdjęcia...")
  32. })
  33.  
  34.  
  35. $("#description").focus(function(e){
  36.     if(textarea.innerHTML == "Wpisz opis do zdjęcia...")
  37.         textarea.innerHTML = "";
  38. })
  39.  
  40. var pause = false;
  41. var margin;
  42. var blocked = false;
  43. var count = 0;
  44.  
  45. var roller = document.getElementById("roller");
  46. var allPhotos = roller.getElementsByTagName("div").length - 3;
  47.  
  48. var maxMargin = allPhotos * 236 * -1;
  49.  
  50. $("#roll_left").click(function(e)
  51. {
  52.     e.preventDefault();
  53.  
  54.     if(blocked)return;
  55.  
  56.     pause=true;
  57.     blocked=true;
  58.  
  59.     setTimeout(function(){blocked=false;},1000);
  60.  
  61.     margin=parseFloat($("#roller").css('marginLeft'));
  62.     if(margin > 0)return;
  63.  
  64.  
  65.      $("#roller").animate({
  66.           marginLeft: "+=236px"
  67.     }, 500);
  68. });
  69.  
  70. $("#roll_right").click(function(e)
  71. {
  72.     e.preventDefault();
  73.  
  74.     if(blocked)return;
  75.  
  76.     pause=true;
  77.     blocked=true;
  78.  
  79.     setTimeout(function(){blocked=false;},1000);
  80.  
  81.     margin=parseFloat($("#roller").css('marginLeft'));
  82.     if(margin < maxMargin) return;
  83.  
  84.      $("#roller").animate({
  85.           marginLeft: "-=236px"
  86.     }, 500);
  87. });
  88.  
  89. $(".single_photo").mouseenter(function(){
  90.     pause=true;
  91. });
  92.  
  93. $(".single_photo").mouseleave(function(){
  94.     pause=false;
  95. });
  96.  
  97. function roll()
  98. {
  99.     margin=parseFloat($("#roller").css('marginLeft'));
  100.  
  101.     if(!pause)
  102.     {
  103. 	//console.log('!pause', margin);
  104.         if(margin <= -1888) {
  105.             $("#roller").animate({marginLeft: "472px"}, 500);
  106.             setTimeout(roll,2500);
  107.             return;
  108.         }
  109.  
  110.         $("#roller").animate({marginLeft: "-=236px"}, 500);
  111.         setTimeout(roll,2500);
  112.     }
  113.     else
  114.     {
  115. 	//console.log('pause');
  116.         setTimeout(roll,2500);
  117.     }
  118. }
  119.  
  120. setTimeout(roll,2500);
  121.  
  122. var xmlHttp = createXmlHttpRequestObject();
  123.  
  124. $(".thumbnail").click(function(e){
  125.     e.preventDefault();
  126.     var element_id = jQuery(this).attr("id");
  127.     process(element_id);
  128. })
  129.  
  130. function createXmlHttpRequestObject()
  131. {
  132.     var xmlHttp;
  133.  
  134.     xmlHttp = new XMLHttpRequest();
  135.  
  136.     if(!xmlHttp)
  137.         alert("Blad podczas tworzenia obiektu XMLHttp");
  138.     else
  139.         return xmlHttp;
  140. }
  141.  
  142. function process(element_id)
  143. {
  144.     if(!xmlHttp)
  145.     {
  146.         alert("Obiekt xmlHttp nie istnieje!");
  147.         return;
  148.     }
  149.  
  150.     xmlHttp.open("GET","change_photo.php?id="+element_id, true);
  151.     xmlHttp.onreadystatechange = handleRequestStateChange;
  152.     xmlHttp.send(null);
  153.  
  154. }
  155.  
  156. function handleRequestStateChange()
  157. {
  158.     div = document.getElementById("photography");
  159.  
  160.     if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
  161.     {
  162.         response = xmlHttp.responseText;
  163.  
  164.         div.innerHTML = response;
  165.     }
  166. }
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. BODY {
  2. 	BACKGROUND-COLOR: #576366; FONT-VARIANT: small-caps; MARGIN: 0px; COLOR: #c9ccca
  3. }
  4. HTML {
  5. 	TEXT-ALIGN: center
  6. }
  7. BODY {
  8. 	TEXT-ALIGN: center
  9. }
  10. IMG {
  11. 	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
  12. }
  13. A {
  14. 	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; TEXT-DECORATION: none
  15. }
  16. H1 {
  17. 	MARGIN: 0px 0px 10px; FONT-FAMILY: Impact; FONT-SIZE: 56px
  18. }
  19. #container {
  20. 	MARGIN: 0px auto; HEIGHT: 1000px
  21. }
  22. #header {
  23. 	BACKGROUND-IMAGE: url(../images/area_bg.jpg); WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; HEIGHT: 300px; PADDING-TOP: 56px
  24. }
  25. #logo {
  26. 	BACKGROUND-IMAGE: url(../images/logo.jpg); MARGIN: 0px auto; WIDTH: 1004px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 192px
  27. }
  28. #menu {
  29. 	MARGIN: 9px auto; PADDING-LEFT: 10%; WIDTH: 1004px; HEIGHT: 40px
  30. }
  31. A.menu_link {
  32. 	FILTER: alpha(opacity=40); FLOAT: left; opacity: 0.4
  33. }
  34. A.menu_link:hover {
  35. 	FILTER: alpha(opacity=100); opacity: 1
  36. }
  37. #content {
  38. 	TEXT-ALIGN: left; MARGIN: 0px auto; MIN-HEIGHT: 400px; WIDTH: 1004px
  39. }
  40. #photo_large {
  41. 	BACKGROUND-IMAGE: url(../images/ajax-loader.gif); BACKGROUND-COLOR: #c9ccca; WIDTH: 527px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; FLOAT: left; HEIGHT: 358px
  42. }
  43. #photo_large IMG {
  44. 	MARGIN: 10px
  45. }
  46. #photo_description {
  47. 	WIDTH: 450px; FONT-FAMILY: Comic Sans MS; FLOAT: right; FONT-SIZE: 28px
  48. }
  49. #hidder {
  50. 	WIDTH: 708px; FLOAT: left; HEIGHT: 160px; OVERFLOW: hidden; position: relative;
  51. }
  52. #roller {
  53. 	WIDTH: 2000px; MAX-HEIGHT: 160px; position: absolute;
  54. }
  55. #rolling_gallery {
  56. 	MARGIN: 40px auto; WIDTH: 846px
  57. }
  58. .single_photo {
  59. 	WIDTH: 236px; FLOAT: left; HEIGHT: 160px
  60. }
  61. .single_photo IMG {
  62. 	MARGIN: 5px; WIDTH: 226px; HEIGHT: 150px
  63. }
  64. #roll_left {
  65. 	MARGIN: 43px 0px; DISPLAY: block; FLOAT: left
  66. }
  67. #roll_right {
  68. 	MARGIN: 43px 0px; DISPLAY: block; FLOAT: left
  69. }
  70. .thumbnail {
  71. 	DISPLAY: block
  72. }
  73. #links A {
  74. 	FONT-SIZE: 14px; TEXT-DECORATION: underline
  75. }
  76. #author A {
  77. 	FONT-SIZE: 14px; TEXT-DECORATION: underline
  78. }
  79. #links A:hover {
  80. 	FONT-SIZE: 15px; TEXT-DECORATION: none
  81. }
  82. #author A:hover {
  83. 	FONT-SIZE: 15px; TEXT-DECORATION: none
  84. }
  85. #links {
  86. 	WIDTH: 50%; FLOAT: left
  87. }
  88. #author {
  89. 	WIDTH: 50%; FLOAT: right
  90. }
  91. #contact_data {
  92. 	LINE-HEIGHT: 25px; MARGIN: 5% 0px 0px 5%; FONT-SIZE: 20px
  93. }
  94. #sessions_data {
  95. 	TEXT-ALIGN: justify; LINE-HEIGHT: 27px; MARGIN: 10px 0px 0px 25px; FONT-SIZE: 25px
  96. }
  97. #author_data {
  98. 	LINE-HEIGHT: 30px; MARGIN: 10px 0px 0px 25px; FONT-SIZE: 20px
  99. }
  100. #worktools {
  101. 	LIST-STYLE-TYPE: none; MARGIN: 0px 0px 0px 15px
  102. }
  103. #worktools A {
  104. 	TEXT-DECORATION: underline
  105. }
  106. #worktools A:hover {
  107. 	TEXT-DECORATION: none
  108. }
[CSS] pobierz, plaintext
paawian
2.06.2011, 22:34:18
Serdecznie dziękuję Ci za to, że poświęciłeś temu czas i chęci. Mam akurat drugą zmianę w pracy więc w wolnej chwili sprawdze, pozdrawiam.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.