Blog



Javascript Scrolltext

Meine kleinen Javascript-Tipps scheinen gut anzukommen. Deswegen mache ich gleich weiter. Heute ein simpler Scrolltext. Als eforia Vorlage ist dieser einfach zu benutzen.

Wir brauchen dazu eine Vorlage, die so aussehen könnte:
scrolltext
<div onclick="window.location.href='{param2}';" class="zweispaltig" style="width:450px;cursor:pointer;padding:0;font-size:24px;font-weight:bold;height:32px;color:#52668C;padding-top:7px;background-color:#CF6C3A;overflow:hidden;">
<span id="scroller" style="position:relative;left:450px;"><nobr>{param1} {param1} {param1} </nobr></span>
</div>

<script>
  var x=0;
  var nwidth=0;
  nwidth=document.getElementById("scroller").offsetWidth;
  nwidth=nwidth/3;
  function movescroller(){
    x--;
    document.getElementById("scroller").style.left=x+'px';
    if(x<=(-1*nwidth)){
      x=0;
    }
  };
window.setInterval('movescroller()', 10);
</script>

Benutzt wird diese dann, einfach so:
{template="scrolltext" param1="eforia ist das beste Web Content Management System 8-)" param2="http://www.eforia.de"}

Aussehen tut das dann so:
eforia ist das beste Web Content Management System 8-) eforia ist das beste Web Content Management System 8-) eforia ist das beste Web Content Management System 8-)

Die Breite ist dabei leicht anpassbar, ebenso die Gestaltung. Das ist einfach im Div-Container. Wer keinen anklickbaren Link benötigt, kann das onclick-Event weg lassen. Damit es gut aussieht, sollte der enthaltene Text länger sein, als der Container breit ist.  Das <nobr> ist nicht wirklich schön und dient eher der Sicherheit. Man weiß ja nie, was die verschiedenen Browser so darstellen. Ich gebe zu, meine langjährigen Erfahrungen als Demo-Programmierer sind ganz hilfreich für solche Hacks. 8-)

Ich würde mich über Feedback freuen. Wenn es gefällt, kann ich gerne öfter kleine Tipps geben. Beispielsweise hätte ich eine Lösung hier, wie man ganz einfach ein wenig Twitter über deren API anzapft. Das geht verblüffend einfach.

Dieser Artikel wurde veröffentlicht am 09.03.2010 um 10:36 Uhr. Noch kein Kommentar.

DropDown-Menü mit Javascript supereinfach

Nachdem der Praxistipp von letzter Woche so gut angekommen ist, hier gleich nochmal etwas aus der Praxis. Diesmal aber vollkommen unabhängig von eforia. Es handelt sich schlicht um ein minimalistisches DropDown-Menü. Minimalistisch bezieht sich dabei auf die verwendete Technik. Es sind nämlich nur 2 Inline-Javascript-Funktionen, die notwendig sind.

Beispiel:

Hover mich

Startseite
Blog
Download


Es wird einfach ein Div dargestellt, dessen Höhe beschnitten ist. Erst ein onmouseover macht den verdeckten Teil sichtbar. Ultrasimpel und effektiv. Durch Verwendung von Hintergrundgrafiken im Div kann man auch leicht einen grafischen Button erzeugen. Besonders wenn man etwas schöner gestaltet und ein Padding nutzt, ist das oft einfacher als eine Grafik im Inhalt.

In der obigen Variante verschiebt sich der folgende Inhalt nach hinten. Das kann man leicht ändern, indem man dem div ein position:relative verpasst. Ebenso könnte man die Höhe so groß setzen, dass sofort alles sichtbar ist und erst mit einer zusätzlichen Script-Anweisung die Höhe beschränken. Dann wäre der Inhalt auch bei abgeschalteten Javascript verfügbar.

Hier der Code für das Beispiel:
<div onmouseover="document.getElementById('easydropdown').style.height='80px';" onmouseout="document.getElementById('easydropdown').style.height='30px';" id="easydropdown" style="height:30px;width:120px;background:url(/gfx/eforia-revolution-cup-33x30.jpg) no-repeat;background-position:top left;padding:0;overflow:hidden;border:1px dashed #cccccc;">
<img src="../sysimg/spacer.gif" width="40" height="30" align="left">Hover mich<br /><br />
<a href="{link="/eforia® web manager"}">Startseite</a><br />
<a href="{link="/eforia® web manager/Blog"}">Blog</a><br />
<a href="{link="/eforia® web manager/Download"}">Download</a><br />
</div>

Mir ist bekannt, dass man sowas viel toller und besser machen kann. Auch mit vielen Javascript-Frameworks. Aber es geht eben auch ganz einfach. Und einfach finde ich immer besser. Ich habe nämlich wenig Lust, bei jeder Neuerscheinung eines Browsers alle alten Projekte nochmal anpassen zu müssen. Ich will hier keine Namen nennen, aber mit einigen Javascript-Frameworks ist (bzw. wäre) das notwendig.


Dieser Artikel wurde veröffentlicht am 22.02.2010 um 10:58 Uhr. Noch kein Kommentar.

Dateien tabellarisch ausgeben

Am Freitag habe ich versprochen, ich verrate, wozu man das neue Tag table nutzen kann. Wozu braucht man die interne Tabellennummer einer Datenbank? Zum Zugriff auf diese natürlich. Nun muss ich zugeben, dass man das durchaus auch mit Bordmitteln hätte lösen können, aber wenn man auf eine Tabelle zugreifen möchte, von der man nicht weiß, ob sie bereits geöffnet ist, ist das etwas Aufwand. Das table-Tag macht das schlicht einfacher.

Ein Beispiel:
Angenommen ich habe bei eforia einige Dateien, die ich direkt als Tabelle zum Download anbieten möchte. Mit einem kleinen Script ist das schnell erledigt. Dieses Beispiel greift hier auf die Echtdaten zu. Ich gebe alle Dateien aus, die in eforia mit "presse/" gespeichert sind. Das Resultat sieht so aus:

Datum Name Download
08.08.2005 ewm_box.zip Download
08.05.2003 ewm_logo.zip Download
17.11.2005 halloween Download
21.03.2006 ostern Download
08.08.2005 screenshots.zip Download
17.11.2005 xmas Download


Und der Code dafür ist:
<table width="100%">
<tr>
<td><b>Datum</b></td>
<td><b>Name</b></td>
<td><b>Download</b></td>
</tr>
{execprog}
  var fhAusgabe,nEL,nEL2 : integer
  var db,nRec : integer
  var cELFiles : string[99999,1]
  var cTemp : string
  setpara('ec 0')
  fhAusgabe:=Rewrite('ramtext:out',0)

  db:={[9]table:cms_files}
  Access(db,'cms_files.id')
  nEL:=0
  nRec:=FindRec(db,'presse/','cms_files.id')
  While nRec>0 Do
    ReadRec(db,nRec)
    If GetField(db,'Name') like 'presse/*' then
      cELFiles[nEL,0]:=GetField(db,'Name')
      cELFiles[nEL,1]:=GetField(db,'Dateidatum')
      nEL++
      nRec:=NextRec(db)
    Else
      nRec:=0
    End
  End

  StrSort(cELFiles,nEL-1,0,'0')

  nEL2:=0
  while nEL2<nEL do
    writeln(fhAusgabe,'<tr>')
    writeln(fhAusgabe,'<td>'+cELFiles[nEL2,1]+'</td>')
    cTemp:=cELFiles[nEL2,0]
    cTemp:=cTemp[length('presse/')+1,255]
    writeln(fhAusgabe,'<td>'+tohtml(cTemp)+'</td>')
    writeln(fhAusgabe,'<td><a href="{[4]file="'+cELFiles[nEL2,0]+'"}" target="_blank">Download</a></td>')
    writeln(fhAusgabe,'</tr>')
    nEL2++
  end

  setpara('ec 1')
  close(fhAusgabe)
{/execprog}
</table>

Wie man sieht, öffne ich die Tabelle noch ganz einfach in Standard-HTML-Code. Nur die Zeilen werden dann per Execprog-Script eingefügt. Die Datenbank wird mit {table:cms_files} abgefragt. Die Ermittlung der Datensätze und die Ausgabe sind 2 Schleifen. Das hat einfach den Sinn, dass man dazwischen noch beliebig sortieren kann.

Selbstverständlich könnte man dafür auch ein eigenes Modul machen. In der Praxis ist aber jede Ausgabe immer wieder ein wenig anders. Da ist es schön einfach das kleine Code-Schnippsel schnell und direkt anpassen zu können.


Dieser Artikel wurde veröffentlicht am 15.02.2010 um 09:52 Uhr. Noch kein Kommentar.
Zeige 1 - 3 von 3


Hier bloggt Horst Klier mit und über eforia web manager und was dazugehört (HTML, Javascript, Internet, Webdesign, Such- maschinenoptimierung, usw.).

>> Zur Blog Startseite

RSS-Feed
abonnieren


Übersicht über alle Beiträge



eforia® ist ein eingetragenes Markenzeichen.
Alle anderen Marken und Markenzeichen gehören Ihren jeweiligen Besitzern.
Letzte Aktualisierung dieser Seite: 03.03.2024 / 17:34:01
Suche  
Login / Userdaten
Impressum/Datenschutz