Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] div na cala szerokosc
xix
post 9.03.2011, 23:09:45
Post #1





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 14.11.2008

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

mam cos takiego:
[PHP] pobierz, plaintext 
  1. <div funkcja_java_script> <img> </div>
[PHP] pobierz, plaintext

obrazek jest po prawej stronie strony. chcialbym aby funkcja z diva reagowala na calej szerokosci strony, a nie tak, jak jest teraz, gdy reaguje tylko po najechaniu na obrazek.
probowalem roznych roznosci css, jak width:100%, position, margin, float... ale nie trafilem na nic, co by dzialalo tak, jak tego potrzebuje. nie moge znalesc, wiec co moze rozszerzyc mi diva na cala szerokosc strony?
Go to the top of the page
+Quote Post
bmL
post 10.03.2011, 00:05:51
Post #2





Grupa: Zarejestrowani
Postów: 301
Pomógł: 25
Dołączył: 15.07.2007
Skąd: Olsztyn

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

[HTML] pobierz, plaintext 
  1. <body funkcja_java_script>
  2.     <div id="kontener"> <img> </div>
  3. </body>
[HTML] pobierz, plaintext

W funkcji jeżeli masz jakieś słówka "this" to zamień je na "document.getElementById('kontener')"


--------------------
Tutaj miał być jakiś mądry tekst. Miał być... No ale jest głupi tekst.
Go to the top of the page
+Quote Post
xix
post 10.03.2011, 01:57:56
Post #3





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 14.11.2008

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

Niestety teraz caly dokument <body> na calej wysokosci mi reaguje, a nie tylko jeden div o wysokosci obrazka.
Probuje caly tez tylko diva zmieniac, ale tez to nic nie daje - reakcja jest tylko po dotknieciu obrazka, a nie szerokiego diva.
Go to the top of the page
+Quote Post
frantic09
post 10.03.2011, 07:26:21
Post #4





Grupa: Zarejestrowani
Postów: 42
Pomógł: 6
Dołączył: 7.03.2011
Skąd: Kraków

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

Fajnie by było jakbyś pokazał trochę więcej kodu. Co jak co, ale
[HTML] pobierz, plaintext 
  1. <div funkcja_js> <img /> </div>
[HTML] pobierz, plaintext

przecież powinno działać wink.gif może div nie jest odpowiednio szeroki? smile.gif

Ten post edytował frantic09 10.03.2011, 07:27:10


--------------------
[PHP] pobierz, plaintext 
  1. echo "Wydaje mi się, że mogłoby to zadziałać... ;)";
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
xix
post 10.03.2011, 10:45:38
Post #5





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 14.11.2008

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

niech pliki wygladaja tak, jak mi bmL doradzil:

1.php:
[PHP] pobierz, plaintext 
  1. <body onMouseOver="fun1(document.getElementById('kontener'))" onMouseOut="fun2(document.getElementById('kontener'))">
  2. <div id="kontener" class="obr" ><img id="obra" src="./1a.png" />
  3. </div>
  4. ...
  5. COSTAM
[PHP] pobierz, plaintext


2.js:
[PHP] pobierz, plaintext 
  1. function fun1()
  2. {
  3.  var zmi1=document.getElementById('obra');
  4.  zmi1.src='./1b.png';
  5. }
  6. function fun2()
  7. {
  8.  var zmi2=document.getElementById('obra');
  9.  zmi2.src='./1a.png';
  10. }
[PHP] pobierz, plaintext


3.css (tu juz wstawialem wszystko, co mi przyszlo do glowy, chociaz width:100% na chlopski rozum powinno wystarczyc - mimo tego funkcja dziala po najechaniu na COSTAM na calym body, a mnie jest potrzebne dzialanie tylko do wysokosci obrazka):
[PHP] pobierz, plaintext 
  1. div.obr
  2. {
  3.  width:100%;
  4. }
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
bmL
post 10.03.2011, 11:07:46
Post #6





Grupa: Zarejestrowani
Postów: 301
Pomógł: 25
Dołączył: 15.07.2007
Skąd: Olsztyn

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

[HTML] pobierz, plaintext 
  1. <img onmouseover="fun1()" onmouseout="fun2()" id="obra" src="./1a.png" />
[HTML] pobierz, plaintext

. . .

Ten post edytował bmL 10.03.2011, 11:07:57


--------------------
Tutaj miał być jakiś mądry tekst. Miał być... No ale jest głupi tekst.
Go to the top of the page
+Quote Post
frantic09
post 10.03.2011, 11:53:08
Post #7





Grupa: Zarejestrowani
Postów: 42
Pomógł: 6
Dołączył: 7.03.2011
Skąd: Kraków

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

Jeśli podajesz funkcje z parametrami w eventach jak onmouseout, onmouseover, onclick... 
[HTML] pobierz, plaintext 
  1. <body onMouseOver="fun1(document.getElementById('kontener'))" onMouseOut="fun2(document.getElementById('kontener'))">
[HTML] pobierz, plaintext

Wtedy w plikach js definiuj funkcje także z parametrami
[PHP] pobierz, plaintext 
  1. function fun1(parametr)
  2. {...}
  3. function fun2(parametr)
  4. {...}
[PHP] pobierz, plaintext


Wydaje mi się że lepiej byłoby przekazywać jedynie ID elementu, w następujący sposób:
[HTML] pobierz, plaintext 
  1. <img onMouseOver="fun1('obra')" onMouseOut="fun2('obra')" id="obra" src="./1a.png">
[HTML] pobierz, plaintext

A dopiero w JS bawić się z getElementById()
[PHP] pobierz, plaintext 
  1. function fun1(parametr)
  2. { 
  3.   var zmi1=document.getElementById(parametr);
  4.   zmi1.src='./1b.png';
  5. }
  6. function fun2(parametr)
  7. {
  8.   //może uda się krócej niż powyżej...
  9.   document.getElementById(parametr).src='./1a.png';
  10. }
[PHP] pobierz, plaintext


--------------------
[PHP] pobierz, plaintext 
  1. echo "Wydaje mi się, że mogłoby to zadziałać... ;)";
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
xix
post 10.03.2011, 12:17:31
Post #8





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 14.11.2008

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

nadal to u mnie nie dziala po zastosowaniu doslownym, jak i przenoszeniu Waszych porad na diva.
tak to powinno dzialac, jak ponizej, a nie wiem, gdzie blad:
http://www.pasteall.org/pic/show.php?id=9799
Go to the top of the page
+Quote Post
frantic09
post 10.03.2011, 12:47:03
Post #9





Grupa: Zarejestrowani
Postów: 42
Pomógł: 6
Dołączył: 7.03.2011
Skąd: Kraków

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

Hm pokaże jak to działa u mnie (a działa, bo właśnie sobie to sprawdziłem smile.gif )

mój prosty plik HTML:
[HTML] pobierz, plaintext 
  1. <html>
  2. <script type="text/javascript" src="skrypt.js"></script>
  3. <body>
  4. <div style="width:50%; border: 1px solid blue;text-align:right;padding:10px">
  5. <!-- Tutaj słowo JAVASCRIPT powinno być pisane razem... nie wiem czemu mi to rozdziela -->
  6. <img onmouseover="java script:funkcja1('obra')" onmouseout="java script:funkcja2('obra')" id="obra" src="1.jpg">
  7. </div>
  8. Jakiś tekst, na którym funkcje maja nie działać... Dużo tekstu, kilka linijek.<BR/>
  9. Jakiś tekst, na którym funkcje maja nie działać... Dużo tekstu, kilka linijek....
  10. </body>
  11. </html>
[HTML] pobierz, plaintext


mój prosty plik JS (skrypt.js) :
[PHP] pobierz, plaintext 
  1. function funkcja1(parametr)
  2. { 
  3. document.getElementById(parametr).src='2.jpg';
  4. }
  5. function funkcja2(parametr)
  6. {
  7.   document.getElementById(parametr).src='1.jpg';
  8. }
[PHP] pobierz, plaintext


Oprócz tego mam też dwa pliki:
- 1.jpg

- 2.jpg


Wszystko w jednym katalogu.


############
A gdy chcesz, aby funkcje były wykonywane po najechaniu na DIVa wtedy przeklejasz eventy z IMG na DIV, mamy wtedy
[HTML] pobierz, plaintext 
  1. <!-- Tutaj oczywiście słowo JAVASCRIPT powinno być pisane razem... -->
  2. <div style="width:50%; border: 1px solid blue;text-align:right;padding:10px" onmouseover="java script:funkcja1('obra')" onmouseout="java script:funkcja2('obra')">
[HTML] pobierz, plaintext


Ten post edytował frantic09 10.03.2011, 12:51:48


--------------------
[PHP] pobierz, plaintext 
  1. echo "Wydaje mi się, że mogłoby to zadziałać... ;)";
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
xix
post 10.03.2011, 13:15:25
Post #10





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 14.11.2008

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

dobra zrobilem. dzieki wszystkim za pomoc.
problem tkwil jednak w zupelnie innym miejscu - w glebi pliku css przy pozycjonowaniu tekstu COSTAM tongue.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 13.06.2025 - 02:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn