|
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: 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: 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. Zeige 1 - 2 von 2 |
 |
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-Feedabonnieren Übersicht über alle Beiträge |
||||
| eforia® ist ein eingetragenes Markenzeichen. Alle anderen Marken und Markenzeichen gehören Ihren jeweiligen Besitzern. Letzte Aktualisierung dieser Seite: 23.04.2024 / 23:13:59 | ||||||
Blog
Hover mich
