Wechseltext

Vorschau:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Morgen sollte das neue Tablet aus der Galaxyreihe der Öffentlichkeit präsentiert werden. Doch die Specs wurden nun schon von einem Schild abgeknipst: Auflösung: 1200 x 800 Gewicht: 470 Gramm! Dicke: 8,6 mm (Dünner als das iPad 2!)
Blaze.io hat eine, nicht nur für Android-User, interessante Grafik veröffentlicht. Verglichen wurden die Ladezeiten der Webbrowser auf iOS und Android-Geräten. Demnach dürfen Android-User 1 Sekunde schneller surfen!

Um auch so einen Text zu bekommen musst du folgenden Code kopieren und in ein "Widget / HTML" Modul einfügen, und anschließend deinen Text eingeben. 

 

<style type="text/css">

#dropcontentsubject{
width: 680px;
font-weight: bold;
}

.dropcontent{
width: 680px;

height: 100px;
border: 10px ridge steelblue;
background-color: #fff0c2;
padding: 4px;
display:block;
}

</style>

<script type="text/javascript">


var tickspeed=6000 // (6000=6 Sekunden)
var enablesubject=0

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}


function expandone(){
var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>

 

 

<div align="center"><div id="dropcontentsubject"></div>

<div id="dropmsg0" class="dropcontent" subject="BBBBBB"><!-- Für BB...CC...VV.... evtl. eine Überschrift reinschreiben, siehe oben -->
<div align="left">TEXT 1</div>
</div>

<div id="dropmsg1" class="dropcontent" subject="CCCCCCCC">
<div align="left">TEXT 2</div></div>

<div id="dropmsg2" class="dropcontent" subject="VVVVVVVV">
<div align="left">TEXT 3
</div>
</div>

Kommentar schreiben

Kommentare: 11
  • #1

    Günther (Montag, 28 November 2011 11:31)

    Tolle Idee, aber:
    - kann ich den Text auch Mittig (nicht nur Links) darstellen???
    - kann ich die Schriftart, Schriftfarbe, Fett ändern ???

    DANKE GÜNTA!

  • #2

    Marco Grafen (Freitag, 23 Dezember 2011 11:00)

    Super Sache vielen Dank für den Tipp.
    Kann man die Dauer die ein Text angezeigt wird auch ändern?

  • #3

    eattherich (Sonntag, 07 Oktober 2012 20:29)

    Der Wechseltext wär ganz toll, aber jedesmal, wenn ich den HTML/Widget abschicke, zerhauts mit meine HP. Also leere, weiße Seite. M;uss dann manuell zurück gehen, um wieder auf die HP zu kommen. Woran liegt das? Und wo setze ich Styles ein?

  • #4

    whitehelium (Samstag, 01 Dezember 2012 22:27)

    Hy
    super Code
    ----------------

    den Text könnt ihr mittig schieben, wenn ihr

    <div align="left">TEXT 1</div>
    </div>

    ändert. So müsste es dann aussehen.

    <div align="center">TEXT 1</div>
    </div>

    müsst ihr auch bei Text 2 und Text drei machen.
    ----------------

    Die Zeit änder ihr dort wo der Wert "6000" steht

    var tickspeed=6000 // (6000=6 Sekunden)
    var enablesubject=0

    if (document.getElementById){

    6000 sind 6 Sekunden wie oben steht
    60000 sind demnach 60 Sekunden / 1 Minute
    usw
    ----------------

    Das mit der schrift ändern hab ich auch noch nicht raus ;)


  • #5

    Sven (Dienstag, 29 Januar 2013 20:04)

    Für Textänderung einfach in die CSS einen Befehl font-style: eingeben und dann die gewünschte Schriftart. Für Arial z.B.
    font-style: Arial, sans-serif;
    Wenn kein Arial verfügbar sein sollte, werden dafür dann halt andere serifenfreien Schriften gesucht.

  • #6

    schuerings (Montag, 26 August 2013 15:04)

    kann man auch noch mehr texte nehmen z.B. 5 oder 6 ???

  • #7

    webdrake (Sonntag, 01 September 2013 11:26)

    einfach ein weiteres block mit einer weiteren Zahl (z.B. 4 oder 5 oder..) hinzufügen:
    <div id="dropmsg4" class="dropcontent" subject="CCCCCCCC">
    <div align="left">
    TEXT 4
    </div>
    </div>

  • #8

    ridetolive1 (Dienstag, 10 September 2013 15:14)

    Kann man denn auch die Schrift kursiv und farbig machen?

  • #9

    Marianne Schneider (Samstag, 18 Januar 2014 15:38)

    Perfekt, sehr hilfreich, danke

  • #10

    Marianne Schneider (Samstag, 18 Januar 2014 15:44)

    Wie kann ich die Schriftgrösse und Farbe ändern?

  • #11

    kaka (Donnerstag, 06 November 2014 15:39)

    <style type="text/css">
    #dropcontentsubject{
    width: 680px;
    font-weight: bold;
    }
    .dropcontent{
    width: 680px;
    height: 100px;
    border: 10px ridge steelblue;
    background-color: #fff0c2;
    padding: 4px;
    display:block;
    }
    </style>
    <script type="text/javascript">

    var tickspeed=6000 // (6000=6 Sekunden)
    var enablesubject=0
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.dropcontent{display:none;}\n')
    document.write('</style>\n')
    }
    var selectedDiv=0
    var totalDivs=0
    function contractall(){
    var inc=0
    while (document.getElementById("dropmsg"+inc)){
    document.getElementById("dropmsg"+inc).style.display="none"
    inc++
    }
    }

    function expandone(){
    var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
    contractall()
    document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
    selectedDivObj.style.display="block"
    selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
    setTimeout("expandone()",tickspeed)
    }
    function startscroller(){
    while (document.getElementById("dropmsg"+totalDivs)!=null)
    totalDivs++
    expandone()
    if (!enablesubject)
    document.getElementById("dropcontentsubject").style.display="none"
    }
    if (window.addEventListener)
    window.addEventListener("load", startscroller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", startscroller)
    </script>


    <div align="center"><div id="dropcontentsubject"></div>
    <div id="dropmsg0" class="dropcontent" subject="BBBBBB"><!-- Für BB...CC...VV.... evtl. eine Überschrift reinschreiben, siehe oben -->
    <div align="left">TEXT 1</div>
    </div>
    <div id="dropmsg1" class="dropcontent" subject="CCCCCCCC">
    <div align="left">TEXT 2</div></div>
    <div id="dropmsg2" class="dropcontent" subject="VVVVVVVV">
    <div align="left">TEXT 3
    </div>
    </div>