Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] podwójne wysokości w innerHeight()
Forum PHP.pl > Forum > XML, AJAX
lamcpp
22.05.2011, 21:40:56
Witam oto przykład:
plik html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <title></title>
  6.     <script src="jquery.js"></script>
  7.     <script src="selektory.js"></script>
  8.     <style type="text/css">
  9.         #pierwszy, #drugi, #trzeci{
  10.             margin: 5px;
  11.             border: 3px solid red;
  12.             padding: 10px;
  13.  
  14.         }
  15.         #drugi{
  16.             margin: 5px;
  17.             border: 3px solid red;
  18.             padding: 15px;
  19.         }
  20.         #trzeci{
  21.             margin: 5px;
  22.             border: 3px solid red;
  23.             padding: 20px;
  24.         }
  25.     </style>
  26.   </head>
  27.   <body>
  28.       <div id="pierwszy"></div>
  29.       <div id="drugi"></div>
  30.       <div id="trzeci"></div>
  31.   </body>
  32. </html>
[HTML] pobierz, plaintext


plik js:
[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     $("div").click(function(){
  3.         $(this).text("Wys." + $(this).innerHeight());
  4.     });
  5. });
[XML] pobierz, plaintext


Z założenia w każdym z div ma być wyświetlana jego wysokość wewnętrzna (innerHeight()). Wysokość się pojawia po kliknięciu, ale gdy kliknę na to samo drugi raz pojawia się inna wysokość, skąd ona się bierze i dlaczego tak jest? Oraz prośba jak przerobić ten skrypt, żeby pokazywał wysokość elementów od razu, bez potrzeby kliknięcia na element?
devbazy
23.05.2011, 01:09:13
Na początku ten konkretny blok (ze schowanym tekstem) ma wysokość równą "30" (przypuszczalnie) - po kliknięciu dostajesz akurat tą wartość. Za drugim razem otrzymujesz wartość wraz z tekstem znajdującym się w obszarze tego elementu czyli np. "45". Wyświetl sobie tą informacje o wysokości poza blokiem, to zauważysz różnicę.

Po małej modyfikacji taki kod może wyglądać tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <title></title>
  6.     <script src="jquery.js"></script>
  7.     <script src="selektory.js"></script>
  8.     <style type="text/css">
  9.         #pierwszy, #drugi, #trzeci{
  10.             margin: 5px;
  11.             border: 3px solid red;
  12.             padding: 10px;
  13.  
  14.         }
  15.         #drugi{
  16.             margin: 5px;
  17.             border: 3px solid red;
  18.             padding: 15px;
  19.         }
  20.         #trzeci{
  21.             margin: 5px;
  22.             border: 3px solid red;
  23.             padding: 20px;
  24.         }
  25.     </style>
  26.   </head>
  27.   <body>
  28.       <div id="pierwszy"></div>
  29.       <div id="drugi"></div>
  30.       <div id="trzeci"></div>
  31. 	  <div id="info"></div>
  32.   </body>
  33. </html>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. 	var div1 = $("#pierwszy").innerHeight();
  4. 	var div2 = $("#drugi").innerHeight();
  5. 	var div3 = $("#trzeci").innerHeight();
  6.  
  7. 	$("#info").append("Wys. " + div1 + " | " + div2 + " | " +div3); 
  8.  
  9. });
[JAVASCRIPT] pobierz, plaintext


P.S: Dostępny jest tag "JavaScript".
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.