Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> JS migracja na DOM, ak zrobic document.write ?
JohnySpot
post
Post #1





Grupa: Zarejestrowani
Postów: 106
Pomógł: 0
Dołączył: 9.09.2003
Skąd: Włocławek

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

Szukałem długo znlazłem textnode coś atm ale jak zmieniłem rozszerzenie pliku na xhtml to przestało działać... o co chodzi ? Strona wygląda mniej więce tak:

Kod
--------------------
|     |          |     |
|     |          |     |
|     |          |     |
|     |          |     |
--------------------


Po środku jest treść natomiast po lewej i prawej stonir ma być albo nie być... rysunku, w zależności od rozdzielczości .... Przy 800x600 te rysunki przestają mieścić się na ekranie a stronę trzba przwijać w poprzek.... Więc jak to było jeszcze na HTML-u to robiło się tak:

[HTML] pobierz, plaintext 
  1. <script type="javascript/text">
  2. if (screen.width > 800) {
  3. klisza();
  4. }
  5. </script>
[HTML] pobierz, plaintext


a klisza to było:

[HTML] pobierz, plaintext 
  1. <script type="javascript/text">
  2. function klisza() {
  3. document.write('<img src="image.png" alt="klisza" />');
  4. }
  5. </script>
[HTML] pobierz, plaintext


i działało .... nie pamiętam czy to było document.width czy screen.width ale coś co działało smile.gif I teraz pytanie brzmi... jak to zapisać w DOM bo chyba inaczej nie da sie tego zrobić ? Chyba, że się da... Dodam jeszcze, że obydwa obrazki były uzależnione od rozdzielczości.

Ten post edytował JohnySpot 3.05.2005, 11:29:26


--------------------
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
bregovic
post
Post #2





Grupa: Zarejestrowani
Postów: 562
Pomógł: 15
Dołączył: 8.08.2003
Skąd: Denmark/Odense

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

Rozszerenie pliku musisz miec html (chyba ze wysylasz inne naglowki, to wtedy mozesz miec jakie chcesz).


--------------------
Prank - for the fun. Mac - for the simplicity. Deviantart - for the kick.
Life is ours, We live it our way -- Metallica
Go to the top of the page
+Quote Post
mario
post
Post #3





Grupa: Zarejestrowani
Postów: 186
Pomógł: 0
Dołączył: 23.09.2003
Skąd: Siemianowice Śląskie

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

Cytat(JohnySpot @ 2005-05-03 12:28:34)
Szukałem długo znlazłem textnode coś atm ale jak zmieniłem rozszerzenie pliku na xhtml to przestało działać... o co chodzi ? Strona wygląda mniej więce tak:

Kod
--------------------
|     |          |     |
|     |          |     |
|     |          |     |
|     |          |     |
--------------------


Po środku jest treść natomiast po lewej i prawej stonir ma być albo nie być... rysunku, w zależności od rozdzielczości .... Przy 800x600 te rysunki przestają mieścić się na ekranie a stronę trzba przwijać w poprzek....

Ja stosuję prostą metodę:

robię tabelkę na 100% szerokości strony, w niej tabelkę wyśrodkowaną na szerokość dla 800px rozdziałki, w środku w tej tabelce 800px daję treść, a na bocznych komórkach daję lewe i prawe tło. Wtedy bardzo ładnie to wygląda, bo dla większych rozdziałek widać wszystko, a dla 800px widać tylko srodkową część. I to bez żadnej JAVA smile.gif Wygląda to mniej więcej tak:

[HTML] pobierz, plaintext 
  1. <table width=100% border=0>
  2.  <tr>
  3.   <td width=50% align=right><img src='lewe_tlo.jpg'></td>
  4.   <td width=779>
  5.  
  6.   <table width=779 align=center border=0>
  7.    <tr>
  8.     <td>TRESC</td>
  9.    </tr>
  10.   </table>
  11.  
  12.   </td>
  13.   <td width=50% align=left><img src='prawe_tlo.jpg'></td>
  14.  </tr>
  15. </table>
[HTML] pobierz, plaintext


Teraz nie musisz już robić wersji strony dla różnych rozdzielczości. Musisz tylko wyciąć część garfiki po lewej i prawej stronie - gotowe rozwiązanie i sprawdzone.


--------------------
W życiu piękne są tyko chwile....
Życie choć piękne tak krótkie jest....
Wystarczy chwila by zgasić je....
Go to the top of the page
+Quote Post
JohnySpot
post
Post #4





Grupa: Zarejestrowani
Postów: 106
Pomógł: 0
Dołączył: 9.09.2003
Skąd: Włocławek

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

Fajne rozwiązanie ... dzięki... ale nie chodziło mi o to bo robię layout na div-float i zależy mi na takim właśnie skrypcie :/


--------------------
Go to the top of the page
+Quote Post
bregovic
post
Post #5





Grupa: Zarejestrowani
Postów: 562
Pomógł: 15
Dołączył: 8.08.2003
Skąd: Denmark/Odense

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

Ok, więc chcesz dodać nowy element (img). Aby to uczynić, musisz mieć jakiś id na elemencie do którego będziesz dodawał. Dodajesz w następujący sposób:

Kod
var element = document.getElementById('idTwojegoElementu');
var nowyElement = document.createElement('img');
nowyElement.src = 'obrazek';

element.appendChild(nowyElement);


--------------------
Prank - for the fun. Mac - for the simplicity. Deviantart - for the kick.
Life is ours, We live it our way -- Metallica
Go to the top of the page
+Quote Post
JohnySpot
post
Post #6





Grupa: Zarejestrowani
Postów: 106
Pomógł: 0
Dołączył: 9.09.2003
Skąd: Włocławek

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

Może tak, bez ściemy. Oto fragment mohego pliku:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. 	<title>Mój pierwszy layout</title>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. 	<link rel="stylesheet" type="text/css" media="all" href="style/main.css" />
  8. 	<script type="text/javascript" src="skrypty/main.js" />
  9. </head>
  10.  
  11. <body>
  12. 	<div class="glowny">
  13. 		<div class="klisza">
  14. 			<img src="images/klisza.jpg" alt="klisza" />
  15. 		</div>
  16. [...]
[HTML] pobierz, plaintext


Rozumiem, że mam zmienić na:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. 	<title>Mój pierwszy layout</title>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. 	<link rel="stylesheet" type="text/css" media="all" href="style/main.css" />
  8. 	<script type="text/javascript" src="skrypty/main.js" />
  9. </head>
  10.  
  11. <body>
  12. 	<div class="glowny">
  13. 		<div class="klisza" id="lewy_obrazek">
  14. 			<script type="text/javascript">
  15. 				klisza();
  16. 			</script>
  17. 		</div>
[HTML] pobierz, plaintext


a w moim main.js zrobic:

Kod
function klisza() {
var element = document.getElementById('lewy_obrazek');
var nowyElement = document.createElement('img');
nowyElement.src = 'images/klisza.jpg';

element.appendChild(nowyElement);    
}


:/ bo jeżeli tak to nie działa :/ plik ma rozszerzenie xhtml :/


--------------------
Go to the top of the page
+Quote Post
bregovic
post
Post #7





Grupa: Zarejestrowani
Postów: 562
Pomógł: 15
Dołączył: 8.08.2003
Skąd: Denmark/Odense

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

Jesli otwrozysz w twojej przegladarce plik z rozszerzeniem xhtml, z dysku, bez wysylania dodadkowych naglowkow, to ci nie zadziala. Zmien rozszerzenie na html, lub wysylaj poprawne naglownki z serwera...


--------------------
Prank - for the fun. Mac - for the simplicity. Deviantart - for the kick.
Life is ours, We live it our way -- Metallica
Go to the top of the page
+Quote Post
JohnySpot
post
Post #8





Grupa: Zarejestrowani
Postów: 106
Pomógł: 0
Dołączył: 9.09.2003
Skąd: Włocławek

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

Wilekie dzięki jesteś wielki działa smile.gif Teraz jeszcze zastanawiam się jak sprawdzić rozdzielczość ekranu skoro obiekt screen jest niekompatyblny z w3c :?


--------------------
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 Aktualny czas: 19.08.2025 - 23:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn