• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Simpler Java-Lauftext/Newsticker/Scoller

H

HTML & Co.

Mitglied
Hallo,

ich finde im Internet keinen vernünftigen und einfachen Scoller, der nichts anderes tut, als scrollt (ohne Blinken und Spezialeffekte). Die wenigen Skripte, die ich gefunden habe, funktionieren nicht: http://www.quackit.com/javascript/codes/javascript_scroll.cfm

Ich suche lediglich eine butterweiche Alternative zu diesen ruckeligen HTML-Marquee-Scrollern: http://www.htmlcodetutorial.com/_MARQUEE.html.

Vielleicht könnte jemand hier kurz einen Link zu einem funktionierenden Endlos-Scroller einstellen oder kurz ein kleines Skript schreiben.
Der Text soll einfach nur von rechts nach links laufen (endlos) – ohne Schnickschnack – aber nicht so ruckelig wie mit HTML "Marquee".

Danke im Voraus!
 
Werbung:
Danke, das ist genau das, was ich gesucht habe, aber das Problem ist, dass dies für eine Website eines Jimdo.com-Baukastens sein soll.
Dort kann ich den Header bearbeiten und um HTML-/CSS- oder JAVA-Skripte ergänzen sowie einzelne HTML-/CSS- oder JAVA-Elemente einfügen.

Elemente einfügen: http://hilfe.jimdo.com/basiswissen/die-inhalte/widget-html/
Header bearbeiten: http://hilfe.jimdo.com/einstellungen/webseite/head-bearbeiten/

Bei jQuery müssen doch einzelne jQuery-Elemente auf dem jeweiligen Server gespeichert werde, oder?
In dem Falle würde das mit Jimdo.com meines Erachtens nicht funktionieren. Oder hast Du eine andere Idee? Vielleicht geht das ja doch?

Hast Du vielleicht ein reines Java-Script oder einen CSS-Code, den ich einfach so verwenden kann, ohne zuvor Elemente auf den Server zu laden? Das müsste doch gehen, denn HTML-Marquee funktioniert doch auch …

So etwas suche ich: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1035115099AND
Das Beispiel funktioniert bloß nach Einbau auf der Jimdo.com-Seite nicht :mad:!

Danke im Voraus!

;););)
 
Zuletzt bearbeitet:
Werbung:
Code: 
Bei jQuery müssen doch einzelne jQuery-Elemente auf dem jeweiligen Server gespeichert werde, oder?
Nicht unbedingt, google nach "jquery einbinden", dann findest Du Möglichkeiten, es vom Server von jQuery oder von Google einzubinden.
Die genannte Scripte benutzen CSS3-Animationen und darauf sollte man nach Möglichkeit nicht verzichten.
Edit: Dein Beispiel ist weniger zu empfehlen ist, weil es veraltet ist und umfangreich globale Variablen verwendet.
Edit2: Dann hast du noch das Problem, dass du das eigentliche Skript einbinden musst. Das ist jedoch auch möglich, wenn Du die js-Datei öffnest und den gesamten Code im Head einfügst bzw. in einem Widget.
 
Zuletzt bearbeitet von einem Moderator:
Danke für den guten Tipp! :)

Ich habe mir jetzt den folgenden Code ausgesucht: http://codepen.io/aamirafridi/pen/oEnvk

Auf der Seite sind drei Felder angegeben, in denen jeweils ein HTML-Code, ein CSS-Script und ein JS-Script zu finden ist.

Was muss ich denn jetzt wie einbauen, damit es läuft?​

----------------------------------------------
Hier habe ich eine Anleitung zum Einbinden von jQuery gefunden: http://www.html-seminar.de/jquery-tutorial.htm

Am liebsten würde ich aus der Anleitung diesen Code verwenden:

Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script>

Beim Einbinden blicke ich nicht ganz durch. Muss das nun den Code in das Widgetfeld einfügen oder in den Header?
​
---------------------------------------
​
Welchen Code von hier: http://codepen.io/aamirafridi/pen/oEnvk
und von hier:
Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script>
muss ich denn jetzt wo einbauen, damit es läuft?

Damit wäre meine Frage geklärt und mein Problem gelöst! :D:D:D
​
Vielen Dank für Deine Hilfe! :)
 
Welche Skripts Du einbinden musst, siehst Du, wenn Du auf der Codepen-Seiter auf das Zahnrad im JS-Abschnitt klickst. Dort ist jQuery schon enthalten. Du kannst die Skripts im Head einbinden und das HTML in einem Widget.
 
Werbung:
Irgendwie werden die zwei Codes unter dem JS-Zahnrad-Abschnitt nach dem Abspeichern wieder aus dem Header gelöscht und der Code funktioniert nicht.

Ich versuche jetzt mal alternativ diesen Ticker: http://www.jqueryrain.com/?6iDIScUD

Hast Du einen Plan, wie ich diesen einbauen kann? Da steht auch jQuery …

Danke!
 
Ich empfehle dir, mal bei einem zu bleiben. Dieser hat den Vorteil, dass die Skripts fremd gehostet sind und Du sie bei Jimdo leicht einbinden kannst.
Wahrscheinlich hast Du die script-Tags vergessen. So funktioniert es:
Im Head dieses:
HTML: 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<script src="http://rawgithub.com/tobia/Pause/master/jquery.pause.js"></script>
<script>
$(document).ready(function () {
     $('.marquee').marquee({
       pauseOnHover: true
     });
});
</script>
<style>
   .marquee {
     width: 300px;
     overflow: hidden;
     border: 1px solid #ccc;
     background: #ccc;
   }
</style>
Und dort, wo Du den Ticker haben willst, dieses:
HTML: 
<div class="marquee">jQuery marquee is the best marquee plugin in the world</div>
 
Werbung:
Die beiden Links, die ich zuerst gepostet habe, hatte ich unter meinen Lesezeichen. Hatte sie wohl früher mal mit Google gefunden.
Auf http://aamirafridi.com/jquery/jquery-marquee-plugin ist bei den einzelnen Beispielen immer der Code angegeben und es gibt einen Knopf "Edit on Codepen". Damit kann man das Beispiel in Codepen öffnen.
Ist aber etwas ziemlich spezielles, dass die Beispiele auch in Codepen sind.
 
Okay. Danke!

Doch noch eine Frage: Kann man den Text auch lückenlos scrollen lassen oder geht das mit Marquee nicht?
Brauche ich dann ein anderes Script?

Vielen Dank für Deine zuverlässige Hilfe! Das ist wirklich toll!

:)
 
Ja, Du findest unter den Beispielen "Duplicated". Die Option lautet demnach:
Code: 
$('.marquee').marquee({
duplicated: true
});
 
Werbung:
Hammer!

Es funktioniert perfekt!

Danke erneut!

Was passiert, wenn die Quellwebsites einmal nicht verfügbar sein sollten. Dann funktioniert die Animation auf meiner Website doch auch nicht mehr, oder?

Kann man auch ohne jQuery ein reines JavaScript oder CSS-Code schreiben, das von Firefox, Internet Explorer, Chrome und Safari unterstützt wird?
Oder ist das viel zu umständlich?

Ich habe hier nämlich etwas gefunden (sieht nach reinem CSS-Code ohne externe Quellen aus), was sich bei Jimdo wiederum nicht einbauen lässt: http://www.html.am/html-codes/marquees/css-marquee.cfm.


Dieses Java-Script hier läuft nämlich ohne Head-Bereich und lässt sich sofort als Widget-Element einfügen: http://deine-slideshow.jimdo.com/newsticker/
Allerdings ist mir das zu viel Spielerei – ich möchte nur einen laufenden Text haben.

Ich frage nur aus Interesse. Meine Seite läuft ja …
 
Zuletzt bearbeitet:
Was passiert, wenn die Quellwebsites einmal nicht verfügbar sein sollten. Dann funktioniert die Animation auf meiner Website doch auch nicht mehr, oder?
Zum Vergrößern anklicken....
Ja, dann funktioniert die Animation nicht mehr. Ich würde sicherheitshalber das Skript mal herunter laden und aufbewahren. Dann kannst Du es im Notfall selber hosten, wenn es mal nicht mehr verfügbar ist.

Kann man auch ohne jQuery ein reines JavaScript oder CSS-Code schreiben, das von Firefox, Internet Explorer, Chrome und Safari unterstützt wird?
Zum Vergrößern anklicken....
Grundsätzlich kann man alles, was man mit jQuery programmiert, auch mit reinem Javascript machen, nur ist es dort meistens wesentlich umständlicher.

Ich habe hier nämlich etwas gefunden (sieht nach reinem CSS-Code ohne externe Quellen aus), was sich bei Jimdo wiederum nicht einbauen lässt
Zum Vergrößern anklicken....
Ich sehe eigentlich keinen Grund, warum es in Jimdo nicht funktionieren sollte. Man braucht nichts hochzuladen, nichts extern einzuziehen. Hast Du es ausprobiert?

Dieses Java-Script hier läuft nämlich ohne Head-Bereich und lässt sich sofort als Widget-Element einfügen
Zum Vergrößern anklicken....
Scheint stark veraltet zu sein, da wird noch language="javascript" verwendet und auf den IE4 und NS eingegangen. Ich würde es nicht empfehlen.
 
Ja, dann funktioniert die Animation nicht mehr. Ich würde sicherheitshalber das Skript mal herunter laden und aufbewahren. Dann kannst Du es im Notfall selber hosten, wenn es mal nicht mehr verfügbar ist.
Zum Vergrößern anklicken....

Das ist eine gute Idee! Perfekt! So werde ich vorsorgen.

Grundsätzlich kann man alles, was man mit jQuery programmiert, auch mit reinem Javascript machen, nur ist es dort meistens wesentlich umständlicher.
Ich sehe eigentlich keinen Grund, warum es in Jimdo nicht funktionieren sollte. Man braucht nichts hochzuladen, nichts extern einzuziehen. Hast Du es ausprobiert?
Scheint stark veraltet zu sein, da wird noch language="javascript" verwendet und auf den IE4 und NS eingegangen. Ich würde es nicht empfehlen.
Zum Vergrößern anklicken....

Das Skript habe ich ausprobiert. Allerdings nur als Widget-Element und nichts in den Head-Bereich. Habe ich da etwas vergessen?

Danke für alle weiteren Infos. :)

Nach der Beantwortung der oberen letzten Frage ist dieses Thema geschlossen.
 
Werbung:
Ja, genau das geht nicht, wenn ich es in Jimdo einfach nur in ein Widget-Fenster kopiere. Dann steht der Text einfach nur so da, aber ohne Animation.

Code: 
<style style="text/css">
.marquee {
height: 50px;   
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);   
transform:translateX(100%);
/* Apply animation to this element */   
-moz-animation: scroll-left 5s linear infinite;
-webkit-animation: scroll-left 5s linear infinite;
animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0%   { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0%   { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0%   {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);        
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>

<div class="marquee">
<p>Scrolling text... </p>
</div>
 
Verstehe ich nicht. Lässt Jimdo vielleicht in einem Widget keine Styles zu? Probier doch mal die Styles in den Head zu kopieren und im Widget nur das div zu lassen.
 
Werbung:
Jawoll! Es funktioniert! PERFEKT! VIELEN DANK! :):):)

Könntest Du mir bitte ganz kurz den Gefallen tun, bei meiner anderen Frage den Befehl "z-index:11" an die richtige Stelle im Script zu setzen?

Die Frage ist hier: https://www.html.de/threads/wie-lae...er-gesamten-seite-anzeigen.54817/#post-374326

Damit würdest Du mir einen riesigen Gefallen tun, denn ich weiß nicht, wohin der Befehl muss …

Danke im Voraus!

Hat das CSS-Script oben gegenüber jQuery Nachteile?
 
Zuletzt bearbeitet:
Hat das CSS-Script oben gegenüber jQuery Nachteile?
Zum Vergrößern anklicken....
Nein, im Gegenteil: I. allg. liest man, dass CSS-Animationen performanter sind als solche mit jQuery.
Das mit dem z-index sehe ich mir später an. z-index ist jedoch kein Befehl sondern eine CSS-Eigenschaft.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben