Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2314[/thread]

HTML-Code mittels JavaScript einbinden



<< >> 3 Einträge, 1 Seite
pug
 2006-09-25 15:17
#24897 #24897
User since
2005-08-17
91 Artikel
BenutzerIn
[default_avatar]
Hallo zusammen,
ich habe folgendes Problem. Ich habe eine statische HTML-Datei, in welcher sich ein dynamisches Element befindet.
Am unteren Ende soll sich eine Bildleiste befinden, die sich über Pfeilbuttons verändern lassen. Also (von links kommend ) ein Pfeil links, dann vier Bilder und ein Pfeil rechts. Wenn ich nun auf den Pfeil rechts klicke. Dann erscheint am rechten Ende ein neues Bild und dafür verschwindet eines am linken Ende. Ich dachte mir ich mache das mit Ajax, bzw. Json. Also ein Javascript das einen HTML-Code-Fragment einfügt, welches ich dann mit meinem HTML-Template-System und CGI mit Inhalt fülle.

Das bedeutet die Bilder kommen aus einer Datenbank (bzw. die Links auf diese Bilder ).

Ist das ein guter Entwurf oder gibt es eine praktikabere Lösung?

Ganz konkrete Frage: Wie kann ich in einem statischen HTML-Dokument JavaScript dazu auffordern ein HTML-Dokument einzubinden, und zwar so, daß es mit einem CGI-Script mit Inhalt gefüllt wird?

Ne harte Nuss, oder?

Gruss Christian
Ein Betriebssystem sie zu knechten, sie alle zu finden, Ins Dunkel zu treiben und ewig zu binden.

William Gates III
renee
 2006-09-26 12:40
#24898 #24898
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Ich verstehe nicht ganz, warum Du ein HTML-Dokument einbinden willst. Du kannst doch mit AJAX die neuen Links zu den Bildern bekommen und dann mit JS innerHTML = ... das HTML der Seite verändern...

Oder habe ich Dein Problem falsch verstanden?
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
topeg
 2006-09-26 12:41
#24899 #24899
User since
2006-07-10
2611 Artikel
BenutzerIn

user image
Das ist ungetestet, aber so ähnlich könnte man es machen.
Zu bemerken ist:
- Keine Größenveränderung der Bilder (bilder, die größer/kleiner sind werden in das vorgebene Format skaliert)
- Die Seite wird nicht neu geladen. Alle anderen Bilder beiben unverändert.
- So wie es jetzt ist, werden die beim einsetzen neu geladen.
- "getElementByID" ist DOM und wird veon älteren Browsersn nicht immer unterstützt, aber es gibt alternativen. (SelfHTML ist da eine gute Anlaufstelle)
- Die Bilderliste könntest du noch in eine extrene js-datei packen und dynamisch auf dem Server erzeugen und in der seite nachladen lassen.
- Das leere Bild könnte ein transparentes gif mit 1x1 pixeln sein, dann sieht man es nicht.
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
 <head>
  <title>BL&Auml;TTERN</title>
 </head>
 <script language="JavaScript">
var bilder=new Array();
var pos=0;

var pfad="/pfad/zu/vorschau/";
var bild_leer=pfad+"leer.jpg";

bilder[ 0]="001.jpg";

bilder[ 1]="002.jpg";

bilder[ 2]="003.jpg";

bilder[ 3]="004.jpg";

bilder[ 4]="005.jpg";

bilder[ 5]="006.jpg";

bilder[ 6]="007.jpg";

bilder[ 7]="008.jpg";

bilder[ 8]="009.jpg";

bilder[ 9]="010.jpg";

bilder[10]="011.jpg";

function blaettern(wert)
{
 var last=getElementByID("LAST");
 var now=getElementByID("NOW");
 var next=getElementByID("NEXT");
 
 if(wert+pos <= bilder.length && wert+pos >= 0)
 {
  pos+=wert;
  now.src=pfad+bilder[pos];

  if(pos-1 <= bilder.length && pos-1 >= 0)
  { last.src=pfad+bilder[pos-1]; }
  else
  { last.src=bild_leer; }

  if(pos+1 <= bilder.length && pos+1 >= 0)
  { next.src=pfad+bilder[pos+1]; }
  else
  { next.src=bild_leer; }
 }
 return 1;
}

 </script>
 <body>
  <table>
   <tr><td><img src="/pfad/zu/pfeil-links.jpg" onClick="blaettern(1)"></td>
   <td><img src="/pfad/zu/vorschau/leer.jpg" ID="LAST"></td>
   <td><img src="/pfad/zu/vorschau/001.jpg" ID="NOW"></td>
   <td><img src="/pfad/zu/vorschau/001.jpg" ID="NEXT"></td>
   <td><img src="/pfad/zu/pfeil-rechts.jpg" onClick="blaettern(-1)"></td>
   </tr>
  </table>
 </body>
</html>
<< >> 3 Einträge, 1 Seite



View all threads created 2006-09-25 15:17.