Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JS migracja na DOM
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
JohnySpot
3.05.2005, 11: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.... 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.
bregovic
3.05.2005, 12:42:55
Rozszerenie pliku musisz miec html (chyba ze wysylasz inne naglowki, to wtedy mozesz miec jakie chcesz).
mario
3.05.2005, 12:56:55
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.
JohnySpot
3.05.2005, 14:17:15
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 :/
bregovic
3.05.2005, 19:15:43
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);
JohnySpot
4.05.2005, 06:27:58
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 :/
bregovic
4.05.2005, 08:57:41
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...
JohnySpot
4.05.2005, 19:07:53
Wilekie dzięki jesteś wielki działa smile.gif Teraz jeszcze zastanawiam się jak sprawdzić rozdzielczość ekranu skoro obiekt screen jest niekompatyblny z w3c :?
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.