Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jquery] podwójne wysokości w innerHeight()
lamcpp
post
Post #1





Grupa: Zarejestrowani
Postów: 372
Pomógł: 2
Dołączył: 10.05.2009

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

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?
Go to the top of the page
+Quote Post
devbazy
post
Post #2





Grupa: Zarejestrowani
Postów: 93
Pomógł: 4
Dołączył: 10.08.2009

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

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".
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: 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: 21.08.2025 - 07:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn